/*========================
THEME VARIABLES
Change values here to re-skin the whole site (colors, fonts, spacing).
==========================*/
/* Urbanist stands in for Gullying (a licensed display sans from Din Studio,
myfonts.com/collections/gullying-font-din-studio) until the licensed
webfont files are available to self-host — swap the @font-face/variable
below once they are.
Loaded via tags in each page's (with preconnect), not a
CSS @import here — @import forces the browser to fully fetch+parse
this stylesheet before it can even discover the font request, adding
a serial round-trip that a direct avoids by letting both load
in parallel from the start. */
:root {
--color-bg: #faf8f4;
--color-surface: #ffffff;
--color-surface-alt: #f3f3f9;
--color-text: #2f342f;
--color-text-muted: #5c645c;
--color-primary: #2e33cc;
--color-primary-dark: #1f2289;
--color-primary-light: #c4c5e9;
--color-accent: #d8703d;
--font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-heading: "Urbanist", "Helvetica Neue", Helvetica, Arial, sans-serif;
--nav-height: 76px;
--max-width: 1100px;
--radius: 10px;
--transition: 0.25s ease;
}
/*========================
GLOBAL STYLES
==========================*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--nav-height);
font-size: 106%;
}
body {
font-family: var(--font-family);
font-weight: 300;
font-size: 1rem;
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg);
min-height: 100vh;
/* several elements (hero, category banners, the scarab disclaimer)
go full-bleed with width:100vw + negative margins — 100vw
includes the scrollbar's own width on browsers/OSes that reserve
layout space for it (classic Windows scrollbars, unlike macOS's
overlay ones), which can cause a few px of horizontal overflow
there but not here. This is a no-op unless that happens. */
overflow-x: hidden;
display: flex;
flex-direction: column;
}
main {
flex: 1;
/* pushes content below the fixed nav bar */
padding-top: var(--nav-height);
}
/* Dot grid, fixed to the viewport (so dots sit at constant absolute
coordinates and never scroll) — one pair of colors per section, set
where each section is styled below (#approche-preview / #equipe-
preview), since each needs its own base/hover colors. The grid
itself is the section's own background (background-attachment:
fixed); the hover "flashlight" is a ::after pseudo-element on that
same section, masked around the cursor via js/grid-spotlight.js,
which keeps --spot-x/--spot-y in sync. Both rely on the section
having no transform of its own — see the transform: none override
near .reveal, which would otherwise break "fixed" positioning. */
h1, h2, h3, h4, h5, h6, .nav-logo {
font-family: var(--font-heading);
}
a {
text-decoration: none;
color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {
a:hover {
color: var(--color-primary-dark);
}
}
img {
max-width: 100%;
display: block;
}
ul {
list-style: none;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* generic content wrapper used on every page */
.wrap {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
/* reusable pill/button style, used for every call-to-action */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
border-radius: 999px;
border: 1px solid var(--color-primary);
color: var(--color-primary-dark);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.03em;
background: transparent;
cursor: pointer;
transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
.btn:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
}
.btn-solid {
background-color: var(--color-primary);
color: #fff;
}
@media (hover: hover) and (pointer: fine) {
.btn-solid:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
}
}
.btn-accent {
border-color: var(--color-accent);
color: var(--color-accent);
}
@media (hover: hover) and (pointer: fine) {
.btn-accent:hover {
background-color: var(--color-accent);
color: #fff;
}
}
section {
padding: 90px 0;
}
/* scroll-in animation, applied via js/scroll-reveal.js */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 1s ease, transform 1s ease;
}
.reveal.reveal-visible {
opacity: 1;
transform: translateY(0);
}
/* on-load stagger, applied via js/load-in.js: the first section's
direct blocks (title, paragraphs, ...) each fade + slide up quickly
in sequence as soon as the page arrives/refreshes — separate from
.reveal above, which only fires once a section is scrolled into
view further down the page. */
@keyframes load-in-up {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.load-in {
animation: load-in-up 0.65s ease both;
}
@media (prefers-reduced-motion: reduce) {
.load-in {
animation: none;
}
}
/* these sections render their dot-grid background on a fixed pseudo-
element (further down) that must stay put and fully visible at all
times — a transform (even translateY(0)) or a fade on the section
itself would drag the background along with it or fade it in/out
with the text. So the section skips the reveal animation entirely,
and the same .reveal/.reveal-visible classes (still toggled on the
section by js/scroll-reveal.js) instead drive the fade/slide-in on
the text block (.wrap) alone. */
#approche-preview.reveal,
#approche-preview.reveal-visible,
#equipe-preview.reveal,
#equipe-preview.reveal-visible {
opacity: 1;
transform: none;
}
#approche-preview.reveal .wrap,
#equipe-preview.reveal .wrap {
opacity: 0;
transform: translateY(28px);
transition: opacity 1s ease, transform 1s ease;
}
#approche-preview.reveal-visible .wrap,
#equipe-preview.reveal-visible .wrap {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
#approche-preview.reveal .wrap,
#equipe-preview.reveal .wrap {
opacity: 1;
transform: none;
transition: none;
}
}
.section-alt {
background-color: var(--color-surface-alt);
}
/* explicit background (not just "no class"): #coaches' dot-grid pseudo-
elements are viewport-fixed with a negative z-index, so they'd bleed
through any section left fully transparent, not just #coaches itself. */
#modalites {
background-color: var(--color-bg);
}
.section-title {
text-align: center;
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-primary-dark);
margin-bottom: 20px;
}
.section-intro {
max-width: 640px;
margin: 0 auto 50px;
text-align: center;
color: var(--color-text-muted);
}
.section-intro strong {
font-weight: 800;
}
.fee-box {
max-width: 420px;
margin: 0 auto 50px;
padding: 24px 28px;
border: 2px solid var(--color-primary);
border-radius: var(--radius);
text-align: center;
color: var(--color-text);
transition: border-color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
.fee-box:hover {
border-color: var(--color-accent);
}
}
.fee-box strong {
font-weight: 800;
}
/* covers the whole viewport with a big centered logo until it's
actually loaded (see the inline script right after on every
page) — skipped instantly if the browser already has the image
cached, so repeat visits/navigations never see it, only a genuine
first-load wait does. */
.logo-loader {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg);
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.logo-loader img {
width: 180px;
height: auto;
}
.logo-loader--done {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/*========================
TOP NAVIGATION
Structure: one main row of page links. The "Pour qui" item can carry
a second row of sub-links (data-subnav on the
), which slides
open beneath the whole bar — this is what the brief calls the
"deuxième ligne" for sections that need sub-categories. Any nav item
can gain a second row later just by giving it the same markup.
==========================*/
.site-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: rgba(250, 248, 244, 0.72);
backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(47, 52, 47, 0.08);
}
/* three-column layout so the menu is always centered on the bar,
regardless of how wide the logo text or language switcher are:
the two side columns share equal width (1fr each), the middle
column just sizes to its content. */
.nav-bar {
max-width: var(--max-width);
margin: 0 auto;
height: var(--nav-height);
padding: 0 24px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 20px;
}
.nav-logo {
grid-column: 1;
justify-self: start;
margin-left: -6px;
display: flex;
align-items: center;
gap: 8px;
font-size: 1.3rem;
font-weight: 600;
white-space: nowrap;
word-spacing: -0.15em;
color: var(--color-primary-dark);
letter-spacing: 0.02em;
}
.nav-logo-img {
height: 32px;
width: auto;
}
/* FR/EN switcher, sits after the nav links on both desktop and mobile.
A sliding toggle: data-active="fr"|"en" (set per page, since each
language lives on its own page) parks the thumb under the current
language; the single link underneath always leads to the other one. */
.lang-toggle {
grid-column: 3;
justify-self: end;
position: relative;
display: inline-flex;
align-items: center;
width: 64px;
height: 30px;
border-radius: 999px;
background-color: var(--color-surface-alt);
border: 1px solid rgba(47, 52, 47, 0.16);
flex-shrink: 0;
overflow: hidden;
}
.lang-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 28px;
height: 22px;
border-radius: 999px;
background-color: var(--color-primary);
transition: left var(--transition), background-color var(--transition);
}
.lang-toggle[data-active="en"] .lang-toggle-thumb {
left: 33px;
}
.lang-toggle:hover .lang-toggle-thumb {
background-color: var(--color-primary-dark);
}
.lang-toggle-option {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-text-muted);
transition: color var(--transition);
pointer-events: none;
}
/* markup order is thumb, FR, EN — :nth-child(2)/(3) target the FR/EN
labels themselves (:first-child would incorrectly target the thumb) */
.lang-toggle[data-active="fr"] .lang-toggle-option:nth-child(2),
.lang-toggle[data-active="en"] .lang-toggle-option:nth-child(3) {
color: #fff;
}
.nav-links {
grid-column: 2;
justify-self: center;
display: flex;
align-items: center;
gap: 8px;
}
.nav-links > li {
position: relative;
}
.nav-link {
display: inline-block;
padding: 10px 16px;
color: var(--color-text);
font-size: 0.95rem;
font-weight: 400;
border-radius: 999px;
transition: background-color var(--transition), color var(--transition);
}
.nav-link:hover,
.nav-link.active,
.nav-link[aria-expanded="true"] {
background-color: var(--color-surface-alt);
color: var(--color-primary-dark);
}
/* second nav row (sub-categories), hidden until its parent is active */
/* right-anchored to the "pour qui" link, matching the rest of the nav
(right-aligned toward the lang switcher) — a centered dropdown
extended just as far left as right of the trigger, which pushed it
off the left edge of the screen on narrower (but still "desktop
nav") viewports */
.nav-subrow {
position: absolute;
top: 100%;
right: 0;
display: flex;
gap: 4px;
padding: 10px;
margin-top: 8px;
background-color: var(--color-surface);
border-radius: var(--radius);
box-shadow: 0 10px 30px rgba(47, 52, 47, 0.12);
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity var(--transition), transform var(--transition);
}
.nav-links > li.subnav-open .nav-subrow {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.nav-subrow a {
white-space: nowrap;
padding: 8px 14px;
border-radius: 999px;
color: var(--color-text);
font-size: 0.85rem;
}
@media (hover: hover) and (pointer: fine) {
.nav-subrow a:hover {
background-color: var(--color-surface-alt);
color: var(--color-primary-dark);
}
}
/* mobile hamburger — hidden on desktop. Shares column 2 with
.nav-links: only one of the two is ever actually in-flow at a time
(the other is display:none or position:absolute), so this is safe. */
.nav-toggle {
grid-column: 2;
justify-self: center;
display: none;
background: none;
border: none;
width: 40px;
height: 40px;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background-color: var(--color-text);
transition: transform var(--transition), opacity var(--transition);
}
/*========================
HERO
==========================*/
#hero {
min-height: calc(100vh - var(--nav-height));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px;
background: linear-gradient(160deg, rgba(31, 34, 137, 0.82), rgba(31, 34, 137, 0.6)), url('../images/hero_bidon.jpg');
background-size: cover;
background-position: center;
position: relative;
isolation: isolate;
}
/* the homepage hero must be visible the instant the page loads, not
fade/slide in like the rest of the page's sections — override
js/scroll-reveal.js's generic opacity:0-until-scrolled-into-view
behavior for this section specifically */
#hero.reveal,
#hero.reveal-visible {
opacity: 1;
transform: none;
transition: none;
}
/* same technique as .jelly-spotlight/-inner on the Adultes page: outer
soft circle around the cursor (js/image-spotlight.js keeps --hero-x/
--hero-y in sync), inner masked to the photo's own bright
streaks/sparkles (hero-mask.png) — a parent's mask constrains
everything painted inside it, so the two intersect reliably */
.hero-spotlight {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-mask-image: radial-gradient(circle 220px at var(--hero-x, -9999px) var(--hero-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 220px at var(--hero-x, -9999px) var(--hero-y, -9999px), white 55%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
#hero:hover .hero-spotlight {
opacity: 1;
}
}
.hero-spotlight-inner {
position: absolute;
inset: 0;
background-color: var(--color-accent);
mix-blend-mode: color;
-webkit-mask-image: url('../images/hero-mask.png');
-webkit-mask-size: cover;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: url('../images/hero-mask.png');
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;
}
#hero .eyebrow {
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 18px;
}
#hero h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 600;
color: #fff;
max-width: 780px;
margin-bottom: 20px;
}
#hero p {
max-width: 560px;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 34px;
}
#hero .hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
#hero .btn,
#hero .btn-solid {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.7);
color: #fff;
}
@media (hover: hover) and (pointer: fine) {
#hero .btn:hover,
#hero .btn-solid:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
}
.scroll-down {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
font-size: 1.6rem;
color: #fff;
animation: scroll-bounce 1.6s ease-in-out infinite;
}
@keyframes scroll-bounce {
0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
50% { transform: translate(-50%, 10px); opacity: 1; }
}
/*========================
HOMEPAGE PREVIEW SECTIONS
Every section below the hero follows the same skeleton: a title, a
short paragraph, optional content, and a button to the full page.
==========================*/
.preview-section {
text-align: center;
}
/* base grid: blue on "Notre approche", orange on "Qui sommes-nous"
(swapped relative to each other on purpose) — see the #equipe-
preview comment below for why this uses a fixed pseudo-element
instead of background-attachment: fixed. */
#approche-preview {
background-color: transparent;
}
#approche-preview::before {
content: '';
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
background-size: 96px 96px;
background-position: 0 0;
background-image: radial-gradient(circle, rgba(46, 51, 204, 0.4) 8px, transparent 8.1px);
}
#approche-preview::after {
content: '';
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
background-size: 96px 96px;
background-position: 0 0;
-webkit-mask-image: radial-gradient(circle 180px at var(--spot-x, -9999px) var(--spot-y, -9999px), black 0%, black 55%, transparent 100%);
mask-image: radial-gradient(circle 180px at var(--spot-x, -9999px) var(--spot-y, -9999px), black 0%, black 55%, transparent 100%);
background-image: radial-gradient(circle, var(--color-accent) 8px, transparent 8.1px);
}
#approche-preview .wrap {
display: inline-block;
background-color: var(--color-bg);
padding: 30px;
}
.preview-section .btn {
margin-top: 10px;
}
/* base grid on "Qui sommes-nous" (Notre approche's own dot grid was
removed per request). Rendered on a fixed, full-viewport pseudo-
element instead of background-attachment: fixed directly on the
section — that CSS property is unreliable in real browsers: it
often only paints correctly while a repaint is actively forced by
scrolling, then visibly shifts or recolors once scrolling stops. A
real position: fixed (pseudo-)element doesn't have that bug, so
this uses the same mechanism as the hover flashlight below, just
always at full opacity instead of masked to a cursor radius. */
#equipe-preview {
background-color: transparent;
}
#equipe-preview::before {
content: '';
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
background-size: 96px 96px;
background-position: 0 0;
background-image: radial-gradient(circle, rgba(216, 112, 61, 0.4) 8px, transparent 8.1px);
}
/* hover "flashlight": the opposite color, revealed in a soft radius
around the cursor (js/grid-spotlight.js keeps --spot-x/--spot-y in
sync, in viewport coordinates). Same fixed, full-viewport technique
as the base grid above — ::after paints after ::before in source
order, so it naturally layers on top without extra z-index work. */
#equipe-preview::after {
content: '';
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
background-size: 96px 96px;
background-position: 0 0;
-webkit-mask-image: radial-gradient(circle 180px at var(--spot-x, -9999px) var(--spot-y, -9999px), black 0%, black 55%, transparent 100%);
mask-image: radial-gradient(circle 180px at var(--spot-x, -9999px) var(--spot-y, -9999px), black 0%, black 55%, transparent 100%);
background-image: radial-gradient(circle, var(--color-primary) 8px, transparent 8.1px);
}
/* ...but not right behind the text: this panel tracks the text block
itself (sized to its content, not the section) and matches the
page's own background color, so it reads as empty space rather
than a visible box — the 30px padding is the "margin" keeping the
dots clear of the words on every side. */
#equipe-preview .wrap {
display: inline-block;
background-color: var(--color-bg);
padding: 30px;
}
/* same dot-grid + hover flashlight treatment, on the real "équipe" /
"about us" page itself (#coaches). The coach list has no narrow text
column to leave a gutter around, so instead of a text-shaped buffer
panel, the whole .coach-grid sits on its own solid card — dots show
in the section's own padding above/below/around that card. */
#coaches {
background-color: transparent;
}
#coaches::before {
content: '';
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
background-size: 96px 96px;
background-position: 0 0;
background-image: radial-gradient(circle, rgba(216, 112, 61, 0.4) 8px, transparent 8.1px);
}
#coaches::after {
content: '';
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
background-size: 96px 96px;
background-position: 0 0;
-webkit-mask-image: radial-gradient(circle 180px at var(--spot-x, -9999px) var(--spot-y, -9999px), black 0%, black 55%, transparent 100%);
mask-image: radial-gradient(circle 180px at var(--spot-x, -9999px) var(--spot-y, -9999px), black 0%, black 55%, transparent 100%);
background-image: radial-gradient(circle, var(--color-primary) 8px, transparent 8.1px);
}
/* js/load-in.js already handles this page's entrance animation
(per-element, fires on DOMContentLoaded) — the section and its wrap
must stay fully visible immediately, or the old scroll-triggered
.reveal system (opacity: 0 until scrolled into view) hides
everything until the user scrolls, making the page look like it
hasn't loaded. */
#coaches.reveal,
#coaches.reveal-visible,
#coaches.reveal .wrap,
#coaches.reveal-visible .wrap {
opacity: 1;
transform: none;
transition: none;
}
/* one single column, the width of the widest text line (the intro
paragraph's 640px) plus a small margin, spanning the section's full
height at a constant width — title, paragraphs and the coach list
all sit on this one panel instead of each getting their own box.
Dots are only ever visible in the gutters left/right of it. */
#coaches .coaches-column {
/* fills .wrap's own width (up to the site's normal --max-width)
instead of a fixed width tied to the text — a narrower band was
squeezing/wrapping the coach rows inside it */
width: 100%;
/* cancels the section's own 90px top/bottom padding, so the panel
is flush with the section's top and bottom edges instead of
floating with a gap above/below it — padding-top/bottom restore
that same 90px as space *inside* the panel instead */
margin: -90px auto;
padding: 90px 30px;
background-color: var(--color-bg);
border-radius: var(--radius);
}
/* "Pourquoi choisir C.C" — slotted between the hero and Notre Approche */
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
margin-top: 40px;
text-align: left;
}
.why-item h3 {
color: var(--color-primary-dark);
font-size: 1.05rem;
margin-bottom: 8px;
}
.why-item p {
color: var(--color-text-muted);
font-size: 0.95rem;
}
.why-item .icon-emoji {
display: block;
font-size: 1.6rem;
margin-bottom: 10px;
}
/*========================
"NOTRE APPROCHE" PAGE — dot grid + hover flashlight, same
treatment as #approche-preview/#equipe-preview on the homepage.
==========================*/
#approche {
background-color: transparent;
}
/* same reasoning as #coaches above: js/load-in.js drives this page's
entrance animation immediately on load, so the section/wrap must
never be gated behind the scroll-triggered .reveal system */
#approche.reveal,
#approche.reveal-visible,
#approche.reveal .wrap,
#approche.reveal-visible .wrap {
opacity: 1;
transform: none;
transition: none;
}
/* alternating text/image rows for the "notamment lorsque" situations —
row 1 text-left/image-right, row 2 flips, and so on */
.situations {
display: flex;
flex-direction: column;
gap: 50px;
margin-top: 40px;
}
.situation-row {
display: flex;
align-items: center;
gap: 40px;
}
.situation-row:nth-child(even) {
flex-direction: row-reverse;
}
.situation-text {
flex: 1;
text-align: left;
}
.situation-text h3 {
color: var(--color-primary-dark);
font-size: 1.15rem;
margin-bottom: 10px;
}
.situation-text p {
color: var(--color-text-muted);
}
.situation-image {
flex: 1;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-direction: column;
background-color: var(--color-surface-alt);
border: 2px dashed rgba(46, 51, 204, 0.25);
border-radius: 16px;
color: var(--color-text-muted);
font-size: 0.85rem;
}
.situation-image svg {
width: 40px;
height: 40px;
opacity: 0.5;
}
/* filled-in placeholders: a real photo instead of the dashed
icon/caption box, same rounded corners and aspect ratio */
.situation-image--spiderweb,
.situation-image--scarab,
.situation-image--brousse,
.situation-image--leaves,
.situation-image--dragonfly,
.situation-image--granite {
position: relative;
overflow: hidden;
background-color: transparent;
background-size: cover;
background-position: center;
border: none;
}
.situation-image--spiderweb {
background-image: url('../images/spiderweb.jpg');
}
.situation-image--scarab {
background-image: url('../images/scarab.jpg');
}
.situation-image--brousse {
background-image: url('../images/brousse.jpg');
}
.situation-image--leaves {
background-image: url('../images/leaves.jpg');
}
.situation-image--dragonfly {
background-image: url('../images/dragonfly.jpg');
}
.situation-image--granite {
background-image: url('../images/granite.jpg');
}
/* orange hover flashlight for the five situation photos above — same
nested two-layer mask technique as .jelly-spotlight (see that
comment for details): an outer soft-circle-around-cursor mask, an
inner luminance/detail mask of the subject itself. Local coordinates
(js/image-spotlight.js keeps ---x/y in sync per element). */
.spiderweb-spotlight, .scarab-spotlight, .brousse-spotlight,
.leaves-spotlight, .dragonfly-spotlight, .granite-spotlight {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.spiderweb-spotlight-inner, .scarab-spotlight-inner, .brousse-spotlight-inner,
.leaves-spotlight-inner, .dragonfly-spotlight-inner, .granite-spotlight-inner {
position: absolute;
inset: 0;
background-color: var(--color-accent);
mix-blend-mode: color;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (hover: hover) and (pointer: fine) {
.situation-image--spiderweb:hover .spiderweb-spotlight,
.situation-image--scarab:hover .scarab-spotlight,
.situation-image--brousse:hover .brousse-spotlight,
.situation-image--leaves:hover .leaves-spotlight,
.situation-image--dragonfly:hover .dragonfly-spotlight,
.situation-image--granite:hover .granite-spotlight {
opacity: 1;
}
}
.spiderweb-spotlight {
-webkit-mask-image: radial-gradient(circle 140px at var(--spiderweb-x, -9999px) var(--spiderweb-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 140px at var(--spiderweb-x, -9999px) var(--spiderweb-y, -9999px), white 55%, transparent 100%);
}
.spiderweb-spotlight-inner {
-webkit-mask-image: url('../images/spiderweb-mask.png');
mask-image: url('../images/spiderweb-mask.png');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.scarab-spotlight {
-webkit-mask-image: radial-gradient(circle 140px at var(--scarab-x, -9999px) var(--scarab-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 140px at var(--scarab-x, -9999px) var(--scarab-y, -9999px), white 55%, transparent 100%);
}
.scarab-spotlight-inner {
-webkit-mask-image: url('../images/scarab-mask.png');
mask-image: url('../images/scarab-mask.png');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.brousse-spotlight {
-webkit-mask-image: radial-gradient(circle 140px at var(--brousse-x, -9999px) var(--brousse-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 140px at var(--brousse-x, -9999px) var(--brousse-y, -9999px), white 55%, transparent 100%);
}
.brousse-spotlight-inner {
-webkit-mask-image: url('../images/brousse-mask.png');
mask-image: url('../images/brousse-mask.png');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.leaves-spotlight {
-webkit-mask-image: radial-gradient(circle 140px at var(--leaves-x, -9999px) var(--leaves-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 140px at var(--leaves-x, -9999px) var(--leaves-y, -9999px), white 55%, transparent 100%);
}
.leaves-spotlight-inner {
-webkit-mask-image: url('../images/leaves-mask.png');
mask-image: url('../images/leaves-mask.png');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.dragonfly-spotlight {
-webkit-mask-image: radial-gradient(circle 140px at var(--dragonfly-x, -9999px) var(--dragonfly-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 140px at var(--dragonfly-x, -9999px) var(--dragonfly-y, -9999px), white 55%, transparent 100%);
}
.dragonfly-spotlight-inner {
-webkit-mask-image: url('../images/dragonfly-mask.png');
mask-image: url('../images/dragonfly-mask.png');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.granite-spotlight {
-webkit-mask-image: radial-gradient(circle 140px at var(--granite-x, -9999px) var(--granite-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 140px at var(--granite-x, -9999px) var(--granite-y, -9999px), white 55%, transparent 100%);
}
.granite-spotlight-inner {
-webkit-mask-image: url('../images/granite-mask.png');
mask-image: url('../images/granite-mask.png');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
@media (max-width: 700px) {
.situation-row,
.situation-row:nth-child(even) {
flex-direction: column;
}
/* text-only on mobile — the only photo in this section is the
scarab behind the disclaimer above, not one per situation */
.situation-image {
display: none;
}
}
/*========================
"POUR QUI" CATEGORY CARDS
Shared by the homepage preview and the pour-qui hub page.
==========================*/
/* a row of 5 big, slightly-vertical (almost square) rectangles,
starting with a small margin from the left edge of the screen.
Full-bleed (a direct child of , outside .wrap) so it reads
off the left edge of the browser window, not just the content
column. About 3.5 fit in the viewport at once; the arrow (js/
category-carousel.js) slides the row over just far enough that the
4th and 5th become fully visible, and slides back on a second click. */
.category-carousel {
position: relative;
overflow: hidden;
width: 100%;
}
.category-track {
display: flex;
gap: 20px;
width: max-content;
padding-left: 24px;
transition: transform 0.6s ease;
}
/* each card's photo — a light bottom scrim keeps the white title
readable over any part of the image without hiding the photo */
.category-card {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 360px;
flex-shrink: 0;
border-radius: 20px;
background-color: var(--color-surface);
background-image: linear-gradient(rgba(20, 22, 40, 0.4), rgba(20, 22, 40, 0.4));
background-size: cover;
background-position: center;
box-shadow: 0 6px 20px rgba(47, 52, 47, 0.06);
transition: transform var(--transition), box-shadow var(--transition);
}
.category-card--adultes { background-image: linear-gradient(rgba(20, 22, 40, 0.4), rgba(20, 22, 40, 0.4)), url("../images/newbird.jpg"); }
.category-card--adolescents {
background-image: linear-gradient(rgba(20, 22, 40, 0.4), rgba(20, 22, 40, 0.4)), url("../images/frog.avif");
background-position: calc(50% - 50px) center;
}
.category-card--parents {
background-image: linear-gradient(rgba(20, 22, 40, 0.4), rgba(20, 22, 40, 0.4)), url("../images/bird.avif");
background-position: calc(50% - 100px) center;
}
.category-card--enseignants {
background-image: linear-gradient(rgba(20, 22, 40, 0.4), rgba(20, 22, 40, 0.4)), url("../images/flower.avif");
background-position: center calc(50% - 100px);
}
.category-card--organisations { background-image: linear-gradient(rgba(20, 22, 40, 0.4), rgba(20, 22, 40, 0.4)), url("../images/glass.avif"); }
@media (hover: hover) and (pointer: fine) {
.category-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(47, 52, 47, 0.12);
}
}
.category-card h3 {
font-size: 1.5rem;
font-weight: 600;
color: #fff;
text-align: center;
padding: 0 16px;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
transition: color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
.category-card:hover h3 {
color: var(--color-accent);
}
}
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
background-color: var(--color-surface);
color: var(--color-primary);
box-shadow: 0 6px 20px rgba(47, 52, 47, 0.18);
cursor: pointer;
transition: background-color var(--transition), color var(--transition);
}
.carousel-arrow-prev {
left: 24px;
}
.carousel-arrow-next {
right: 24px;
}
.carousel-arrow svg {
width: 22px;
height: 22px;
}
@media (hover: hover) and (pointer: fine) {
.carousel-arrow:hover {
background-color: var(--color-accent);
color: #fff;
}
}
/*========================
CATEGORY (POUR QUI) SUB-PAGES
==========================*/
.category-header {
text-align: center;
max-width: 700px;
margin: 0 auto 50px;
}
/* hero-style photo band behind the title on the Adultes page only,
stopping before .category-description below it */
/* full-bleed: break out of .wrap's centered max-width so this reaches
the true edges of the screen, like #hero does */
/* shared "photo banner" treatment for category-header — hero-style,
full-bleed to the screen edge. Each ...-- modifier below
only needs to set its own ::before background-image. */
.category-header--photo {
position: relative;
isolation: isolate;
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 90px 32px;
}
/* image + darkening filter live on a pseudo-element behind the text,
so brightness(0.7) doesn't also dim the white title/text on top */
.category-header--photo::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-size: cover;
background-position: center;
filter: brightness(0.7);
}
.category-header--adultes::before {
background-image: linear-gradient(160deg, rgba(31, 34, 137, 0.78), rgba(31, 34, 137, 0.58)), url('../images/jelly.jpg');
}
/* a light touch of the blue tint back — 30% of the original strength */
.category-header--adolescents::before {
background-image: linear-gradient(160deg, rgba(31, 34, 137, 0.23), rgba(31, 34, 137, 0.17)), url('../images/butterfly.jpg');
filter: none;
}
/* framed at the very top: the tree's branches (the interesting part of
the shot) sit in the upper portion of this portrait photo. A
brighter blue (the site's own primary, not the near-black navy used
elsewhere) for the tint, with the darks still pushed via contrast so
the shadows stay deep. */
/* visible top = 50px below the real top of the source photo */
.category-header--parents::before {
background-image: url('../images/tree.jpg');
background-position: top;
filter: none;
}
/* visible top = 100px below the real top of the source photo */
.category-header--enseignants::before {
background-image: url('../images/pencils.jpg');
background-position: top;
filter: none;
}
/* Contact page hero banner */
/* tall portrait photo — the interesting part (sunlit, caustic-lit sea
floor) is at the bottom, so bottom-align instead of the usual center */
.category-header--wall::before {
background-image: linear-gradient(160deg, rgba(31, 34, 137, 0.55), rgba(31, 34, 137, 0.35)), url('../images/underwater.jpg');
background-position: center top;
filter: brightness(0.8) saturate(1.2);
}
/* single-color hover flashlight, masked to the photo's own light
tones (surface ripples, sunlit caustics) — same technique as
.jelly-spotlight */
.wall-spotlight {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-mask-image: radial-gradient(circle 160px at var(--wall-x, -9999px) var(--wall-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 160px at var(--wall-x, -9999px) var(--wall-y, -9999px), white 55%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
.category-header--wall:hover .wall-spotlight {
opacity: 1;
}
}
.wall-spotlight-inner {
position: absolute;
inset: 0;
background-color: var(--color-accent);
mix-blend-mode: color;
-webkit-mask-image: url('../images/underwater-mask.png');
mask-image: url('../images/underwater-mask.png');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center top;
mask-position: center top;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* the source photo has a warm patch that breaks the blue tone used
across every other category photo. A screen-blended solid blue layer
pushes specifically the dark tones toward blue (screen has almost no
effect on already-light pixels, since screen(light, anything) stays
light — so the bright coral is barely touched while the black/near-
black areas pick up a clear blue cast), then the usual diagonal tint
sits on top for the overall wash. */
.category-header--organisations::before {
background-image:
linear-gradient(rgba(46, 51, 204, 0.45), rgba(46, 51, 204, 0.45)),
url('../images/coral.jpg');
background-blend-mode: screen, normal;
filter: brightness(0.7) contrast(1.1);
}
/* orange hover: two nested real elements, each with exactly one mask
(no multi-layer mask-composite, which proved unreliable). The outer
is masked to a soft circle around the cursor (js/jelly-hover.js
keeps --jelly-x/--jelly-y in sync, in this element's own local
coordinates since it isn't viewport-fixed) using white→transparent
— white avoids the black-has-zero-luminance ambiguity some browsers
have with black→transparent gradient masks. Since a parent's mask
constrains everything painted inside it, the inner element (which
fills the outer completely) only needs its own separate mask: the
jellyfish luminance/alpha map. The intersection of both is what's
visible — jellyfish, near the cursor, with a soft edge. */
.jelly-spotlight {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-mask-image: radial-gradient(circle 180px at var(--jelly-x, -9999px) var(--jelly-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 180px at var(--jelly-x, -9999px) var(--jelly-y, -9999px), white 55%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
.category-header--adultes:hover .jelly-spotlight {
opacity: 1;
}
}
.jelly-spotlight-inner {
position: absolute;
inset: 0;
background-color: var(--color-accent);
mix-blend-mode: color;
-webkit-mask-image: url('../images/jelly-mask.png');
-webkit-mask-size: cover;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: url('../images/jelly-mask.png');
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;
}
/* same technique, applied to the butterfly on the Adolescents page —
see the .jelly-spotlight comment above for how the two-layer mask
works. */
.butterfly-spotlight {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-mask-image: radial-gradient(circle 180px at var(--butterfly-x, -9999px) var(--butterfly-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 180px at var(--butterfly-x, -9999px) var(--butterfly-y, -9999px), white 55%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
.category-header--adolescents:hover .butterfly-spotlight {
opacity: 1;
}
}
.butterfly-spotlight-inner {
position: absolute;
inset: 0;
background-color: var(--color-accent);
mix-blend-mode: color;
-webkit-mask-image: url('../images/butterfly-mask.png');
-webkit-mask-size: cover;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: url('../images/butterfly-mask.png');
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;
}
/* same technique, applied to the coral on the Organisations page */
.coral-spotlight {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-mask-image: radial-gradient(circle 180px at var(--coral-x, -9999px) var(--coral-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 180px at var(--coral-x, -9999px) var(--coral-y, -9999px), white 55%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
.category-header--organisations:hover .coral-spotlight {
opacity: 1;
}
}
.coral-spotlight-inner {
position: absolute;
inset: 0;
background-color: var(--color-accent);
mix-blend-mode: color;
-webkit-mask-image: url('../images/coral-mask.png');
-webkit-mask-size: cover;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: url('../images/coral-mask.png');
mask-size: cover;
mask-position: center;
mask-repeat: no-repeat;
}
/* same technique, applied to the branches on the Parents page */
.tree-spotlight {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-mask-image: radial-gradient(circle 180px at var(--tree-x, -9999px) var(--tree-y, -9999px), white 30%, transparent 100%);
mask-image: radial-gradient(circle 180px at var(--tree-x, -9999px) var(--tree-y, -9999px), white 30%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
.category-header--parents:hover .tree-spotlight {
opacity: 1;
}
}
.tree-spotlight-inner {
position: absolute;
inset: 0;
background-color: var(--color-accent);
mix-blend-mode: color;
-webkit-mask-image: url('../images/tree-mask.png');
-webkit-mask-size: cover;
-webkit-mask-position: top;
-webkit-mask-repeat: no-repeat;
mask-image: url('../images/tree-mask.png');
mask-size: cover;
mask-position: top;
mask-repeat: no-repeat;
}
/* same technique, applied to the pencils on the Enseignants page */
.pencils-spotlight {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-mask-image: radial-gradient(circle 180px at var(--pencils-x, -9999px) var(--pencils-y, -9999px), white 55%, transparent 100%);
mask-image: radial-gradient(circle 180px at var(--pencils-x, -9999px) var(--pencils-y, -9999px), white 55%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
.category-header--enseignants:hover .pencils-spotlight {
opacity: 1;
}
}
.pencils-spotlight-inner {
position: absolute;
inset: 0;
background-color: var(--color-accent);
mix-blend-mode: color;
-webkit-mask-image: url('../images/pencils-mask.png');
-webkit-mask-size: cover;
-webkit-mask-position: top;
-webkit-mask-repeat: no-repeat;
mask-image: url('../images/pencils-mask.png');
mask-size: cover;
mask-position: top;
mask-repeat: no-repeat;
}
.category-header--photo .section-title {
color: #fff;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.category-header--photo p {
color: rgba(255, 255, 255, 0.9);
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.category-header .icon {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.category-header .icon-shape {
width: 56px;
height: 56px;
color: var(--color-primary);
}
.category-description p {
max-width: 700px;
margin: 0 auto 16px;
color: var(--color-text-muted);
line-height: 2;
letter-spacing: 0.01em;
}
.category-points {
text-align: center;
}
/* the "·" between each short pain-point statement, bumped up from
plain punctuation into a proper separator mark. Drawn as a plain CSS
circle rather than relying on the "·" glyph's own shape: that glyph
varies a lot by font/OS (on some systems the fonts in the stack fall
back to one with no proper middle-dot glyph, which renders as a
fallback "tofu" box instead of a dot) — a background-color +
border-radius circle renders identically everywhere. The "·"
character itself stays in the markup (font-size: 0 hides it) so the
text still reads/copies correctly and screen readers still announce
a separator. */
.dot-sep {
display: inline-block;
width: 6px;
height: 6px;
margin: 0 5px;
border-radius: 50%;
background-color: var(--color-primary);
vertical-align: middle;
font-size: 0;
color: transparent;
overflow: hidden;
}
.category-coaches h2 {
text-align: center;
font-size: 1.3rem;
color: var(--color-primary-dark);
margin: 60px 0 30px;
}
/*========================
COACH CARDS
Used on the "Qui sommes-nous" page (full bios) and, in a smaller
form, on category pages / the contact page (contact list only).
==========================*/
/* one horizontal row per coach, stacked vertically */
.coach-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.coach-row {
border-radius: var(--radius);
overflow: hidden;
}
.coach-row:not(:first-child) {
border-top: 1px solid rgba(47, 52, 47, 0.08);
padding-top: 16px;
}
.coach-row-main {
display: flex;
align-items: center;
gap: 20px;
padding: 16px 24px;
flex-wrap: wrap;
}
.coach-row-photo {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
background-color: var(--color-surface-alt);
flex-shrink: 0;
}
/* fixed width (not flex: 1) so the "learn more" button right after it
always lands at the same x position, regardless of name length */
.coach-row-info {
flex: 0 0 220px;
}
.coach-row-name {
font-size: 1.05rem;
font-weight: 600;
color: var(--color-primary-dark);
}
.coach-row-title {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.coach-row-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-left: auto;
}
.coach-row-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 18px;
border-radius: 999px;
border: 1px solid var(--color-primary);
color: var(--color-primary-dark);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
background: transparent;
cursor: pointer;
white-space: nowrap;
transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
.coach-row-btn:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
}
.coach-row-toggle[aria-expanded="true"] {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* accordion: 0fr -> 1fr on the grid track collapses/expands the row
smoothly without a JS-measured pixel height; the inner div clips the
content while it's collapsed */
.coach-row-expand {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s ease;
}
.coach-row.expanded .coach-row-expand {
grid-template-rows: 1fr;
}
/* overflow: hidden here does two jobs: (1) keeps this element's own
automatic minimum size at 0 so the grid-collapse animation on
.coach-row-expand can actually reach 0 instead of stopping at
whatever height a child needs (see .coach-row-expand-photo below),
and (2) works as the standard "clearfix" so this container's own
height still accounts for the floated photo inside it. */
.coach-row-expand-inner {
padding: 4px 24px 24px;
overflow: hidden;
min-height: 0;
}
/* large photo, name/title captioned over it top-left — same darkening
technique as the category-header--photo banners. Floated (not a
flex column) so the bio text wraps tightly beside it while there's
vertical overlap, then reflows to the row's full width once it runs
past the photo's bottom edge — a plain flex column can't do that,
since a sibling column never reclaims space from a shorter one. The
square aspect-ratio only applies once .expanded is set: applying it
unconditionally would give this floated box a hard height even
while the row is collapsed to ~0, which is exactly what leaked a
sliver of the photo through before. */
.coach-row-expand-photo {
position: relative;
float: left;
width: 460px;
margin-right: 24px;
border-radius: 12px;
background-size: cover;
background-position: center;
}
/* desktop only — mobile gives this photo its own full-width, non-
square treatment further down, and this must not fight that. */
@media (min-width: 769px) {
.coach-row.expanded .coach-row-expand-photo {
aspect-ratio: 1 / 1;
}
}
.coach-row-expand-caption {
position: absolute;
top: 18px;
left: 18px;
right: 18px;
color: #fff;
}
.coach-row-expand-caption h4 {
font-size: 1.05rem;
font-weight: 600;
}
.coach-row-expand-caption p {
font-size: 0.85rem;
opacity: 0.9;
}
.coach-row-expand-text {
min-width: 220px;
}
.coach-row:not(.expanded) .coach-row-expand-text {
max-height: 0;
overflow: hidden;
}
.coach-row-expand-actions {
clear: both;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
/* everything in the collapsed header (thumbnail, name, toggle and
contact buttons) is redundant once expanded — the big photo carries
the name/title, and contact + "show less" move down next to the bio
text instead */
.coach-row.expanded .coach-row-main {
display: none;
}
.coach-row-bio {
margin-top: 8px;
font-size: 0.9rem;
color: var(--color-text);
line-height: 1.7;
}
.coach-row-bio p + p {
margin-top: 14px;
}
.coach-row-bio strong {
font-weight: 800;
}
@media (max-width: 600px) {
.coach-row-expand-photo {
flex-basis: 160px;
min-height: 160px;
}
}
/* compact variant: photo + name + "view profile", no bio/expand */
.coach-mini-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 18px;
}
.coach-mini {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background-color: var(--color-surface);
border-radius: var(--radius);
color: var(--color-text);
}
.coach-mini img {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
background-color: var(--color-surface-alt);
}
.coach-mini .coach-mini-name {
font-weight: 600;
color: var(--color-primary-dark);
font-size: 0.9rem;
}
/* contact-list variant: name + direct mailto link */
.coach-contact-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-top: 30px;
}
.coach-contact-item {
padding: 16px 20px;
background-color: var(--color-surface);
border-radius: var(--radius);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.coach-contact-item .coach-mini-name {
color: var(--color-primary-dark);
font-weight: 600;
font-size: 0.9rem;
}
/*========================
CONTACT PAGE
==========================*/
#contact {
position: relative;
}
/* same bouncing arrow as the homepage hero, just recolored for this
section's light background instead of a dark photo */
#contact .scroll-down {
color: var(--color-primary);
}
.contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.contact-info h2,
.contact-form h2 {
font-size: 1.2rem;
color: var(--color-primary-dark);
margin-bottom: 16px;
}
.contact-info p {
color: var(--color-text-muted);
margin-bottom: 10px;
}
.contact-form form {
display: flex;
flex-direction: column;
gap: 14px;
}
.contact-form label {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 6px;
display: block;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(47, 52, 47, 0.18);
border-radius: 8px;
font-family: inherit;
font-size: 0.95rem;
background-color: var(--color-surface);
color: var(--color-text);
}
.contact-form textarea {
min-height: 130px;
resize: vertical;
}
.contact-form .form-status {
font-size: 0.85rem;
color: var(--color-primary-dark);
min-height: 1.2em;
}
/*========================
FOOTER
==========================*/
footer {
text-align: center;
padding: 30px 20px;
background-color: var(--color-surface-alt);
color: var(--color-text-muted);
font-size: 0.85rem;
}
@media (hover: hover) and (pointer: fine) {
footer a:hover {
text-decoration: underline;
}
}
/*========================
RESPONSIVE — MOBILE
==========================*/
@media (max-width: 860px) {
.contact-layout {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 768px) {
.nav-toggle {
display: flex;
}
.nav-links {
position: absolute;
top: 100%;
left: 0;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
background-color: var(--color-surface);
border-top: 1px solid rgba(47, 52, 47, 0.08);
max-height: 0;
overflow: hidden;
transition: max-height var(--transition);
}
.site-nav.nav-open .nav-links {
max-height: 80vh;
overflow-y: auto;
}
.nav-links > li {
border-bottom: 1px solid rgba(47, 52, 47, 0.06);
}
.nav-link {
display: block;
border-radius: 0;
padding: 16px 24px;
}
/* on mobile the sub-row is an inline accordion, not a floating card */
.nav-subrow {
position: static;
transform: none;
box-shadow: none;
border-radius: 0;
background-color: var(--color-surface-alt);
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
opacity: 1;
pointer-events: none;
transition: max-height var(--transition);
}
.nav-links > li.subnav-open .nav-subrow {
max-height: 400px;
pointer-events: auto;
}
.nav-subrow a {
padding: 14px 40px;
border-radius: 0;
}
}
@media (max-width: 480px) {
.category-track {
gap: 12px;
padding-left: 16px;
}
.category-card {
width: 190px;
height: 215px;
border-radius: 14px;
}
.category-card h3 {
font-size: 1.1rem;
padding: 0 12px;
}
.carousel-arrow {
width: 40px;
height: 40px;
}
.carousel-arrow-prev {
left: 12px;
}
.carousel-arrow-next {
right: 12px;
}
.carousel-arrow svg {
width: 18px;
height: 18px;
}
}
/*========================
MOBILE-ONLY OVERRIDES (see "Mobil version.docx")
Everything here is scoped to max-width: 768px (the same breakpoint
the nav already switches to its mobile layout at) so none of it
touches the desktop/tablet experience.
==========================*/
@media (max-width: 768px) {
/* "make the title fonts a bit smaller. the text font too" */
.section-title {
font-size: 1.6rem;
}
#hero h1 {
font-size: clamp(1.6rem, 7vw, 2.4rem);
}
body {
font-size: 0.95rem;
}
/* "Pourquoi c.c. section: centre tous les titres et textes" */
.why-grid {
text-align: center;
}
/* logo mark moves from the nav corner to sit as an orange watermark
behind the hero's "Coaching Corner" eyebrow line, and behind
every other page's main title (h1.section-title — "Notre
approche", "L'équipe", "Prendre contact", each pour-qui category
name) — not the smaller h2 section headings, just the one main
title per page. No markup needed, just a background image
sized/centered on the existing text. */
.nav-logo-img {
display: none;
}
#hero .eyebrow,
h1.section-title {
position: relative;
isolation: isolate;
}
#hero .eyebrow::before,
h1.section-title::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 66px;
height: 61px;
z-index: -1;
opacity: 0.6;
background-image: url('../images/logo-orange.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* "about us" coach rows on mobile: skip the compact header entirely
and show the big photo straight away, name captioned bottom-right
on it, view/contact buttons directly below, bio text hidden until
"view" is tapped — reuses the same .expanded class/toggle the
desktop accordion already sets, just rearranged and always-open
at the row level */
.coach-row-main {
display: none;
}
.coach-row-expand {
grid-template-rows: 1fr;
}
.coach-row-expand-inner {
display: flex;
flex-direction: column;
gap: 16px;
padding: 0 0 20px;
}
/* desktop floats this photo so the bio text wraps beside it —
mobile stacks everything full-width instead, so cancel that */
.coach-row-expand-photo {
float: none;
width: 100%;
margin-right: 0;
min-height: 280px;
border-radius: var(--radius) var(--radius) 0 0;
}
.coach-row-expand-caption {
top: auto;
left: auto;
bottom: 16px;
right: 18px;
text-align: right;
}
.coach-row-expand-text {
padding: 0 20px;
}
.coach-row-expand-actions {
order: -1;
margin-top: 0;
margin-bottom: 16px;
}
.coach-row:not(.expanded) .coach-row-bio {
display: none;
}
}
/* "Notre approche": the scarab photo — now the only photo left in this
section (the per-situation photos are hidden on mobile, see above) —
sits behind the "coaching isn't therapy" line, text turned white for
contrast, with the same hover/sweep flashlight used everywhere else,
and "hero style": full-bleed edge-to-edge like #hero, breaking out
of .wrap's centered column. min-height keeps the cover-crop from
zooming in too tightly now that it's full viewport width. */
@media (max-width: 768px) {
.approche-disclaimer {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 260px;
display: flex;
align-items: center;
padding: 24px;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
background-image: linear-gradient(160deg, rgba(31, 34, 137, 0.6), rgba(31, 34, 137, 0.4)), url('../images/scarab.jpg');
background-size: cover;
background-position: center;
}
.approche-disclaimer .section-intro {
color: #fff;
margin: 0;
}
}