/* ============================================================
HAPPY FEET — Refonte démo Novra · v3 « album d’été + la couleur à vie »
Chaleureux, humain, ensoleillé. Crème + bleu Happy Feet +
jaune soleil, notes manuscrites, photos polaroid.
Défilement 100% natif (plus de Lenis).
v3 (13.08.2026) : rythme vertical à 3 respirations, halos colorés retirés
sous les boutons, le don prend la forme d'un chèque, un avis mis en avant.
============================================================ */
:root{
--bleu:#0B96E1;
--bleu-fonce:#0678B8;
--ocean:#123D63; /* bleu profond chaud (sections sombres) */
--ocean-2:#0D2C4A;
--encre:#2B2926; /* noir chaud */
--gris:#6E675C; /* gris chaud */
--creme:#FAF5EB; /* fond principal */
--creme-2:#F3EBDB;
--blanc:#FFFFFF;
--soleil:#FFC53D; /* jaune soleil (leurs t-shirts !) */
--feu:#FF5A1F; /* réservé à la Guerre des Clans */
--ligne:rgba(43,41,38,.13);
--font-d:'Archivo',sans-serif;
--font-b:'Inter Tight',sans-serif;
--font-h:'Caveat',cursive; /* l'écriture à la main */
--pad:clamp(20px,4.5vw,72px);
--r:20px;
--ombre:0 14px 40px -18px rgba(43,41,38,.28);
/* Trois respirations, pas une seule.
La v2 avait 9 sections avec 2 valeurs de padding à 9% d'écart : toutes
respiraient pareil, donc aucune ne se détachait. Chaque section reçoit
maintenant un rythme choisi selon son importance dans la page. */
--air-serre:clamp(42px,5.4vw,74px);
--air:clamp(64px,8vw,108px);
--air-ample:clamp(92px,11.5vw,156px);
/* MATIÈRE — v3.1
Une chose posée sur une table fait DEUX ombres : un contact court et net
juste sous elle, et une portée plus large et douce. L'ombre unique très
floue (0 14px 40px -18px) est celle de la carte de dashboard, elle fait
flotter les objets au lieu de les poser. */
--ombre-posee:0 1px 2px rgba(43,41,38,.14), 0 5px 12px -6px rgba(43,41,38,.2);
--ombre-levee:0 2px 4px rgba(43,41,38,.13), 0 16px 30px -14px rgba(43,41,38,.3);
--ombre:var(--ombre-posee);
/* Courbes : les courbes natives du navigateur sont trop molles pour qu'un
mouvement paraisse voulu. Jamais d'ease-in sur une entrée, ça retarde
l'instant précis que l'œil regarde. */
--ease-pose:cubic-bezier(.16,.84,.34,1);
--ease-presse:cubic-bezier(.23,1,.32,1);
}
/* Le grain. Un album d'été est imprimé sur du papier, pas rendu en aplat.
Posé une seule fois sur toute la page, sous les interactions. */
body::after{
content:'';position:fixed;inset:0;z-index:300;pointer-events:none;
opacity:.05;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media(max-width:700px){body::after{display:none}}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:var(--font-b);
color:var(--encre);
background:var(--creme);
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
img,video{max-width:100%;display:block}
section[id],[id="inscrire"]{scroll-margin-top:84px}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none}
::selection{background:var(--soleil);color:var(--encre)}
/* ---------- utilitaires ---------- */
.wrap{max-width:1340px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
/* la petite écriture à la main */
.note{
font-family:var(--font-h);font-size:clamp(19px,1.7vw,24px);font-weight:600;
color:var(--bleu-fonce);line-height:1.2;letter-spacing:.01em;
}
.note.penchee{display:inline-block;transform:rotate(-2deg)}
.note.encre{color:var(--encre)}
.note.blanche{color:#fff}
/* surligneur jaune sur un mot-clé */
.surligne{
background-image:linear-gradient(100deg,rgba(255,197,61,.0) 0%,rgba(255,197,61,.85) 4%,rgba(255,197,61,.85) 96%,rgba(255,197,61,0) 100%);
background-size:100% .48em;background-position:0 78%;background-repeat:no-repeat;
padding:0 .08em;
}
.titre{
font-family:var(--font-d);
font-weight:800;
font-stretch:105%;
line-height:1.02;
letter-spacing:-.02em;
}
.titre .bleu{color:var(--bleu)}
h2.titre{font-size:clamp(34px,4.8vw,68px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(26px,3.6vw,52px);flex-wrap:wrap}
.sec-head .note{display:block;margin-bottom:10px}
/* petite vague décorative sous certains titres */
.vague{display:block;width:120px;height:14px;margin-top:14px}
.vague path{stroke:var(--soleil);stroke-width:3.5;fill:none;stroke-linecap:round}
/* Révélations (IO + CSS, rien d'autre).
--repos = la transformation de REPOS de l'élément, celle qu'il doit
retrouver une fois révélé. Sans elle, `transform:none` gagnait en
spécificité sur `.galerie .polaroid{transform:rotate(...)}` : les photos,
les avis et les portraits se remettaient DROITS en apparaissant, et tout
l'effet album mourait dans sa propre animation. */
.rev{--repos:none;opacity:1;transform:var(--repos)}
body.js-anim .rev{opacity:0;transform:translateY(22px)}
body.js-anim .rev.on{
opacity:1;transform:var(--repos);
transition:opacity .5s ease,transform .62s var(--ease-pose);
}
/* voile de transition entre pages */
#voile{position:fixed;inset:0;background:var(--ocean);z-index:200;pointer-events:none;opacity:0;transition:opacity .3s ease}
body.leaving #voile{opacity:1;pointer-events:all}
body.no-js #voile{display:none}
/* ============================================================
NAVIGATION
============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s;
padding-top:env(safe-area-inset-top,0px)}
.nav.scrolled{background:rgba(250,245,235,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--ligne)}
@media(max-width:920px){
/* Un element fixe qui floute son fond est recompose a chaque image. Sur iPhone
il se decolle du haut pendant le defilement. Fond plein, plus de flou. */
.nav.scrolled{background:var(--creme);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--pad)}
.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo img{height:42px;width:auto}
.nav-logo span{font-family:var(--font-d);font-weight:800;font-size:16px;line-height:1.05;letter-spacing:-.01em}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{
font-size:15.5px;font-weight:600;padding:6px 2px;position:relative;transition:color .25s;
}
.nav-links a::after{
content:'';position:absolute;left:0;right:100%;bottom:0;height:3px;border-radius:3px;
background:var(--soleil);transition:right .3s ease;
}
.nav-links a:hover{color:var(--bleu-fonce)}
.nav-links a:hover::after,.nav-links a.actif::after{right:0}
.nav-links a.actif{color:var(--bleu-fonce)}
.nav-cta{
font-size:15px;font-weight:700;background:var(--bleu);color:#fff;
padding:11px 22px;border-radius:99px;transition:transform .25s,background .25s;display:inline-block;
}
.nav-cta:hover{background:var(--bleu-fonce);transform:translateY(-2px)}
/* nav posée sur un hero sombre */
.nav.sur-sombre:not(.scrolled) .nav-logo img{filter:invert(1)}
.nav.sur-sombre:not(.scrolled) .nav-logo span{color:#fff}
.nav.sur-sombre:not(.scrolled) .nav-links a{color:#fff}
.nav.sur-sombre:not(.scrolled) .burger span{background:#fff}
/* burger */
.burger{display:none;width:44px;height:44px;position:relative;z-index:102}
.burger span{position:absolute;left:10px;right:10px;height:2.5px;background:var(--encre);transition:transform .3s,opacity .3s;border-radius:3px}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.menu-open .burger span{background:#fff}
.menu-mobile{
position:fixed;top:0;left:0;right:0;background:var(--ocean);color:#fff;z-index:101;
height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
display:flex;flex-direction:column;justify-content:center;
padding:calc(env(safe-area-inset-top,0px) + 82px) 34px calc(env(safe-area-inset-bottom,0px) + 40px);
opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
/* Le burger devient une croix, mais il vit dans la barre du haut. Quand la
barre se decale, on n'a plus rien pour sortir : la fleche est dans le
panneau lui-meme, elle ne depend de rien. */
.mm-retour{
position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);left:30px;
display:flex;align-items:center;gap:9px;height:44px;padding:0 8px 0 4px;
background:none;border:0;cursor:pointer;color:rgba(255,255,255,.88);
font:600 15.5px/1 var(--font-b);letter-spacing:-.01em;
}
.mm-retour svg{width:21px;height:21px;flex:0 0 auto}
.mm-retour:active{color:var(--soleil)}
body.menu-open .menu-mobile{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.menu-mobile a.mm-lien{
font-family:var(--font-d);font-weight:800;font-size:clamp(32px,8.5vw,50px);
line-height:1.3;padding:8px 0;display:flex;align-items:baseline;gap:18px;
border-bottom:1px solid rgba(255,255,255,.14);
}
.menu-mobile a.mm-lien small{font-family:var(--font-h);font-size:22px;font-weight:600;color:var(--soleil)}
.menu-mobile a.mm-lien.actif{color:var(--soleil)}
.menu-mobile .mm-pied{margin-top:36px;display:flex;flex-direction:column;gap:10px}
.menu-mobile .mm-pied a{font-size:15px;color:rgba(255,255,255,.8)}
.menu-mobile .mm-pied a:first-child{font-family:var(--font-h);font-size:24px;color:var(--soleil)}
/* La lueur jaune ne remplissait qu'un coin. La marque y dit quelque chose, et elle
repare un oubli : le menu (z-index 101) recouvre la barre du haut (100), donc le
logo disparaissait des qu'on ouvrait le menu. */
.mm-marque{
position:absolute;right:30px;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);
display:flex;align-items:center;gap:11px;opacity:.82;pointer-events:none;
}
.mm-marque img{height:38px;width:auto;filter:invert(1)}
.mm-marque span{
font-family:var(--font-d);font-weight:800;font-size:15px;line-height:1.05;
letter-spacing:-.01em;color:#fff;
}
@media(max-width:920px){
.nav-links,.nav-cta{display:none}
.burger{display:block}
}
/* ============================================================
HERO
============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to top,rgba(13,32,58,.85) 0%,rgba(13,32,58,.25) 48%,rgba(13,32,58,.15) 100%);
}
.hero-in{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(38px,7vh,80px)}
/* La bande des faits. Fond creme clair : la section suivante est en creme-2,
sans cette marche les deux bandes n'en feraient plus qu'une. */
.faits{background:var(--creme);color:var(--encre);padding:clamp(30px,4vw,48px) var(--pad)}
.faits-in{max-width:1220px;margin:0 auto;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.faits dt{font:600 21px/1 var(--font-h);color:var(--bleu-fonce);margin-bottom:6px}
.faits dd{margin:0;font:600 17px/1.34 var(--font-b);color:var(--encre)}
.faits dd b{color:var(--bleu)}
@media(max-width:700px){
.faits-in{grid-template-columns:1fr 1fr;gap:22px 18px}
.faits dd{font-size:16px}
}
.hero .note-hero{margin-bottom:14px;
font-family:var(--font-h);font-size:clamp(22px,2.2vw,30px);font-weight:600;color:var(--soleil);
display:inline-block;transform:rotate(-1.5deg);text-shadow:0 2px 14px rgba(0,0,0,.35);
}
/* 23 septembre : le titre faisait 109 px sur trois lignes pleine largeur, donc un mur
de gras qui enterrait la video. Moitie moins, largeur bornee, graisse 700 au lieu de
800 et interlettrage relache : la phrase se lit au lieu de s'imposer. */
.hero-titre{
font-family:var(--font-d);font-weight:700;font-stretch:100%;
font-size:clamp(29px,3.6vw,54px);line-height:1.06;letter-spacing:-.015em;
margin:0 0 clamp(20px,2.6vw,30px);max-width:min(760px,92%);
}
.hero-titre .ligne{display:block;overflow:hidden}
.hero-titre .ligne>span{display:block}
body.js-anim .hero-titre .ligne>span{transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
body.js-anim.charge .hero-titre .ligne>span{transform:none}
body.js-anim.charge .hero-titre .ligne:nth-child(2)>span{transition-delay:.12s}
.hero-titre em{font-style:normal;color:var(--soleil)}
.hero-bas{display:flex;align-items:center;gap:clamp(16px,2vw,26px);flex-wrap:wrap}
/* Angle adouci plutot que pilule, et un peu plus grand : la pilule pleine est
le bouton de tout le monde. 7 px repondent aux angles vifs de la feuille. */
.hero-bas .btn-soleil{border-radius:7px;padding:17px 30px;font-size:16.5px;
box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
@media(max-width:600px){
/* 61 px de haut sur un ecran de 390 : la cible est bonne, le bloc est gros.
53 px restent tres au-dessus des 44 px du doigt. */
.hero-bas .btn-soleil{padding:14px 26px;font-size:15.5px}
}
.hero-texte{max-width:520px;font-size:clamp(15.5px,1.4vw,18.5px);color:rgba(255,255,255,.92)}
.hero-texte b{color:#fff}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
font-size:15.5px;font-weight:700;
padding:15px 28px;border-radius:99px;display:inline-flex;align-items:center;gap:10px;
transition:transform .25s,background .25s,color .25s,border-color .25s,box-shadow .25s;
}
.btn-plein{background:var(--bleu);color:#fff}
.btn-plein:hover{background:var(--bleu-fonce);transform:translateY(-2px) scale(1.02)}
.btn-soleil{background:var(--soleil);color:var(--encre)}
.btn-soleil:hover{background:#FFD35E;transform:translateY(-2px) scale(1.02)}
.btn-ligne{border:2px solid rgba(255,255,255,.6);color:#fff}
.btn-ligne:hover{border-color:#fff;background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn-encre{background:var(--encre);color:#fff}
.btn-encre:hover{background:var(--ocean);transform:translateY(-2px)}
.btn-fantome{border:2px solid var(--ligne);color:var(--encre)}
.btn-fantome:hover{border-color:var(--encre);transform:translateY(-2px)}
/* ============================================================
BANDE CAMPS 2026
============================================================ */
.camps{padding:var(--air-serre) 0;position:relative}
.camps-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,32px)}
.camp-carte{
position:relative;border-radius:var(--r);
padding:clamp(26px,3vw,44px);background:var(--blanc);overflow:visible;
display:flex;flex-direction:column;gap:16px;min-height:280px;
box-shadow:var(--ombre);
transition:transform .35s,box-shadow .35s;
}
.camp-carte:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--ombre-levee)}
.camp-carte .cc-haut{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.camp-carte .cc-quand{font-family:var(--font-h);font-size:22px;font-weight:600;color:var(--gris)}
.camp-carte h3{font-family:var(--font-d);font-weight:800;font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:-.02em}
.camp-carte h3 small{display:block;font-size:.44em;color:var(--gris);font-weight:600;letter-spacing:0;margin-top:8px}
.camp-infos{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.camp-infos span{font-size:13.5px;font-weight:600;background:var(--creme);padding:7px 14px;border-radius:99px;color:var(--gris)}
.camp-carte .btn{align-self:flex-start;margin-top:6px}
/* pastille autocollant */
.pastille{
font-family:var(--font-h);font-size:19px;font-weight:700;line-height:1;
padding:10px 16px;border-radius:99px;transform:rotate(3deg);
display:inline-block;flex-shrink:0;
}
.pastille.ouvert{background:var(--soleil);color:var(--encre)}
.pastille.complet{background:var(--creme-2);color:var(--gris);border:2px dashed rgba(110,103,92,.4)}
.camp-carte.est-complet{background:var(--creme-2);box-shadow:none;border:1.5px solid var(--ligne)}
.camp-carte.est-complet h3{color:var(--gris)}
@media(max-width:820px){.camps-grille{grid-template-columns:1fr}}
/* ============================================================
MARQUEE VALEURS — à la main, comme sur leur site
============================================================ */
.marquee{padding:20px 0;overflow:hidden;background:var(--blanc);border-top:1.5px solid var(--ligne);border-bottom:1.5px solid var(--ligne)}
.marquee-piste{display:flex;width:max-content;animation:defile 38s linear infinite}
.marquee:hover .marquee-piste{animation-play-state:paused}
.marquee-piste span{
font-family:var(--font-h);font-weight:600;
font-size:clamp(24px,2.6vw,36px);white-space:nowrap;padding:0 14px;
display:flex;align-items:center;gap:28px;color:var(--encre);
}
.marquee-piste span i{font-style:normal;color:var(--bleu);font-size:.8em}
.marquee-piste span:nth-child(3n){color:var(--bleu-fonce)}
.marquee-piste span:nth-child(3n+1) i{color:var(--soleil)}
@keyframes defile{to{transform:translateX(-50%)}}
/* ============================================================
CHAPITRES « SI SPÉCIAL »
============================================================ */
.special{padding:var(--air-ample) 0}
.chapitre{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5.5vw,90px);
align-items:center;padding:clamp(36px,4.6vw,64px) 0;
}
.chapitre+.chapitre{border-top:1.5px dashed var(--ligne)}
.chapitre:nth-child(even) .ch-media{order:2}
/* photo/vidéo façon polaroid */
.ch-media{position:relative}
.polaroid{
background:var(--blanc);padding:12px 12px 16px;border-radius:6px;
box-shadow:var(--ombre-posee);
transform:rotate(-1.6deg);transition:transform .5s cubic-bezier(.2,.7,.3,1.4);
position:relative;
}
.chapitre:nth-child(even) .polaroid{transform:rotate(1.4deg)}
.chapitre:hover .polaroid{transform:rotate(0deg) scale(1.015)}
.polaroid img,.polaroid video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.polaroid figcaption{
font-family:var(--font-h);font-size:21px;font-weight:600;color:var(--encre);
text-align:center;padding-top:10px;
}
/* le scotch */
.polaroid::before{
content:'';position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-3deg);
width:110px;height:28px;background:rgba(255,228,150,.65);border-radius:2px;
box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.ch-texte .note{display:block;margin-bottom:8px}
.ch-texte h3{font-family:var(--font-d);font-weight:800;font-size:clamp(26px,2.9vw,42px);line-height:1.05;letter-spacing:-.02em;margin-bottom:16px}
.ch-texte p{color:var(--gris);max-width:56ch;font-size:clamp(15px,1.25vw,17px)}
.ch-texte p+p{margin-top:12px}
.ch-texte p b{color:var(--encre);font-weight:650}
.ch-points{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.ch-points li{display:flex;gap:12px;align-items:baseline;font-size:15px}
.ch-points li::before{content:'→';color:var(--bleu);font-weight:700;flex-shrink:0}
@media(max-width:820px){
.chapitre{grid-template-columns:1fr}
.chapitre:nth-child(even) .ch-media{order:0}
}
/* ============================================================
CHIFFRES — bleu océan chaud
============================================================ */
.chiffres{
background:var(--ocean);color:#fff;position:relative;overflow:hidden;
padding:var(--air-serre) 0;
}
.terrain-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.terrain-svg path,.terrain-svg circle,.terrain-svg line{stroke:rgba(255,255,255,.14);fill:none;stroke-width:1.6}
.terrain-svg .trace{transition:stroke-dashoffset 2.4s ease}
.chiffres .note{color:var(--soleil)}
.chiffres h2{color:#fff}
.stats-grille{
position:relative;z-index:2;
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);
}
.stat{
background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);
border-radius:var(--r);padding:clamp(22px,2.8vw,38px);
display:flex;flex-direction:column;gap:8px;transition:background .3s,transform .3s;
}
.stat:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.stat .val{font-family:var(--font-d);font-weight:800;font-size:clamp(34px,4vw,60px);line-height:1;color:var(--soleil);letter-spacing:-.02em}
.stat:nth-child(even) .val{color:#fff}
.stat .lab{font-size:14px;color:rgba(255,255,255,.78);max-width:26ch}
@media(max-width:820px){.stats-grille{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stats-grille{grid-template-columns:1fr}}
/* ============================================================
GUERRE DES CLANS
============================================================ */
.clans{background:var(--ocean-2);color:#fff;padding:var(--air-ample) 0 0;overflow:hidden}
.clans .sec-head{padding:0 var(--pad);max-width:1340px;margin-left:auto;margin-right:auto}
.clans .note{color:var(--soleil)}
.clans h2{color:#fff}
.clans-intro{color:rgba(255,255,255,.8);max-width:62ch;font-size:clamp(15px,1.25vw,17px)}
.clans-duel{display:flex;min-height:500px;margin-top:clamp(30px,4vw,56px);position:relative}
.clan{
position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;
padding:clamp(24px,3vw,48px);overflow:hidden;transition:flex .6s cubic-bezier(.3,.7,.2,1);
min-height:500px;
}
.clans-duel:hover .clan{flex:.75}
.clans-duel .clan:hover{flex:1.55}
.clan-fond{position:absolute;inset:0}
.clan-fond img{width:100%;height:100%;object-fit:cover;opacity:.55}
.clan-eau .clan-fond::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(6,74,120,.92),rgba(11,150,225,.3))}
.clan-feu .clan-fond::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(140,36,6,.92),rgba(255,90,31,.3))}
.clan-in{position:relative;z-index:2}
.clan-in .note{display:block;margin-bottom:6px;color:rgba(255,255,255,.95)}
.clan-in h3{font-family:var(--font-d);font-weight:800;font-size:clamp(30px,3.8vw,58px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
.clan-in p{margin-top:12px;max-width:44ch;color:rgba(255,255,255,.88);font-size:15px}
.clans-vs{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);z-index:3;
font-family:var(--font-h);font-weight:700;font-size:clamp(38px,4.6vw,66px);
background:var(--soleil);color:var(--encre);border-radius:50%;width:1.75em;height:1.75em;
display:flex;align-items:center;justify-content:center;
box-shadow:0 12px 34px -14px rgba(43,41,38,.5);
}
.clans-score{
position:relative;z-index:2;background:var(--ocean-2);
padding:clamp(24px,3vw,40px) var(--pad);
display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
border-top:1.5px solid rgba(255,255,255,.12);
}
.clans-score .note{color:rgba(255,255,255,.85)}
.score-barre{flex:1;max-width:520px;height:12px;border-radius:99px;background:rgba(255,90,31,.85);overflow:hidden;min-width:200px}
.score-barre i{display:block;height:100%;width:0;background:var(--bleu);border-radius:99px;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.score-barre.on i{width:40%}
.clans-score b{font-size:14.5px;font-weight:700}
.clans-score b.eau{color:#6FC5F2}
.clans-score b.feu{color:#FF8A5C}
@media(max-width:700px){
.clans-score{display:grid;grid-template-columns:1fr 1fr;gap:13px 12px;align-items:baseline}
.clans-score .note{grid-area:1/1/2/3;text-align:center}
.clans-score b{font-size:16px}
.clans-score b.eau{grid-area:2/1/3/2;justify-self:start}
.clans-score b.feu{grid-area:2/2/3/3;justify-self:end}
.score-barre{grid-area:3/1/4/3;max-width:none;min-width:0;width:100%}
}
.clans-vlog{background:var(--ocean-2);padding:clamp(10px,1.6vw,24px) var(--pad) clamp(56px,7vw,100px)}
.clans-vlog .aftermovie{max-width:920px;margin:0 auto}
@media(max-width:820px){
.clans-duel{flex-direction:column}
.clan{min-height:330px}
.clans-duel:hover .clan,.clans-duel .clan:hover{flex:1}
}
/* ============================================================
TÉMOIGNAGES
============================================================ */
.temoins{padding:var(--air) 0;background:var(--blanc)}
.temoins-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px)}
.temoin{
border-radius:var(--r);padding:clamp(24px,2.8vw,40px);
display:flex;flex-direction:column;gap:18px;background:var(--creme);
transition:transform .35s,box-shadow .35s;position:relative;
}
.temoin:nth-child(odd){transform:rotate(-.5deg)}
.temoin:nth-child(even){transform:rotate(.5deg)}
.temoin:hover{transform:rotate(0) translateY(-5px);box-shadow:var(--ombre)}
.temoin::before{
content:'“';position:absolute;top:6px;left:18px;
font-family:var(--font-h);font-size:76px;color:var(--soleil);line-height:1;
}
.temoin q{font-size:clamp(15.5px,1.35vw,18px);line-height:1.6;quotes:none;font-weight:500;padding-top:26px}
.temoin figcaption{font-family:var(--font-h);font-size:22px;font-weight:600;color:var(--bleu-fonce);margin-top:auto}
@media(max-width:820px){.temoins-grille{grid-template-columns:1fr}}
/* ============================================================
SOUVENIRS / AFTERMOVIE / GALERIE POLAROID
============================================================ */
.souvenirs{padding:var(--air-ample) 0}
.aftermovie{
position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--ocean);
cursor:pointer;margin-bottom:clamp(26px,3.4vw,44px);box-shadow:var(--ombre);
}
.aftermovie img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .8s,opacity .4s}
.aftermovie:hover img{transform:scale(1.03);opacity:.75}
.aftermovie iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aftermovie .lecture{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff;pointer-events:none;
}
.aftermovie .lecture .rond{
width:92px;height:92px;border-radius:50%;background:var(--soleil);display:flex;align-items:center;justify-content:center;
transition:transform .3s;box-shadow:0 10px 30px -12px rgba(43,41,38,.55);
}
.aftermovie:hover .lecture .rond{transform:scale(1.12) rotate(4deg)}
.aftermovie .lecture .rond::after{content:'';border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--encre);margin-left:5px}
.aftermovie .lecture .note{font-size:24px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);padding:10px 0}
.galerie .polaroid{transform:rotate(var(--rot,-2deg))}
.galerie .polaroid:hover{transform:rotate(0) scale(1.03);z-index:2}
.galerie .polaroid img{aspect-ratio:1}
@media(max-width:820px){.galerie{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.galerie{grid-template-columns:1fr}.galerie .polaroid img{aspect-ratio:4/3}}
/* ============================================================
PARTENAIRES — fond clair chaleureux
============================================================ */
.partenaires{background:var(--creme-2);padding:var(--air-serre) 0}
.part-uefa{
display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;
background:var(--blanc);border-radius:var(--r);box-shadow:var(--ombre);
padding:clamp(24px,3vw,44px);margin-bottom:clamp(20px,2.6vw,32px);
}
.part-uefa .logo-cadre{background:var(--ocean);border-radius:14px;padding:18px 26px;flex-shrink:0}
.part-uefa img{height:clamp(40px,4.6vw,60px);width:auto}
.part-uefa p{color:var(--gris);max-width:52ch;font-size:15px}
.part-uefa p b{color:var(--encre)}
.part-logos{
display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
background:var(--ocean);border-radius:var(--r);padding:clamp(20px,2.6vw,32px) clamp(24px,3vw,44px);
}
.part-logos img{height:clamp(24px,2.4vw,34px);width:auto;opacity:.8;transition:opacity .3s,transform .3s;filter:grayscale(1) brightness(10)}
.part-logos img:hover{opacity:1;transform:translateY(-3px)}
/* ============================================================
CTA FINAL + FOOTER
============================================================ */
.cta-final{padding:var(--air-ample) 0;text-align:center;position:relative;overflow:hidden}
/* La lueur jaune radiale derriere le titre a ete retiree : un halo radial est
le reflexe decoratif par excellence, il n'eclaire rien et ne dit rien. */
.cta-final .note{display:block;margin-bottom:6px}
.cta-final h2{font-size:clamp(36px,5.6vw,84px);position:relative;z-index:2}
.cta-final p{color:var(--gris);margin:18px auto 30px;max-width:52ch;position:relative;z-index:2;font-size:clamp(15px,1.3vw,17px)}
.cta-final .btn{position:relative;z-index:2}
.pied{background:var(--ocean);color:#fff;padding:clamp(56px,7vw,90px) 0 0;position:relative;overflow:hidden}
.pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,64px);padding-bottom:clamp(36px,5vw,60px)}
.pied h4{font-family:var(--font-h);font-size:24px;font-weight:600;color:var(--soleil);margin-bottom:14px}
.pied-news p{color:rgba(255,255,255,.8);font-size:15px;max-width:38ch;margin-bottom:18px}
.news-form{display:flex;max-width:420px;border:2px solid rgba(255,255,255,.28);border-radius:99px;overflow:hidden;transition:border-color .3s;background:rgba(255,255,255,.06)}
.news-form:focus-within{border-color:var(--soleil)}
.news-form input{flex:1;background:none;border:0;outline:0;color:#fff;padding:14px 20px;font:inherit;font-size:14.5px;min-width:0}
.news-form input::placeholder{color:rgba(255,255,255,.45)}
.news-form button{background:var(--soleil);color:var(--encre);padding:0 24px;font-weight:700;font-size:14.5px;transition:background .25s;flex-shrink:0}
.news-form button:hover{background:#FFD35E}
.news-ok{display:none;font-family:var(--font-h);font-size:22px;color:var(--soleil);margin-top:10px}
.pied ul{display:flex;flex-direction:column;gap:10px}
.pied ul li{color:rgba(255,255,255,.8);font-size:15px}
.pied ul a{color:rgba(255,255,255,.8);font-size:15px;transition:color .25s}
.pied ul a:hover{color:var(--soleil)}
.pied-marque{border-top:1.5px solid rgba(255,255,255,.14);padding:22px 0 8px;position:relative;text-align:center}
.pied-wordmark{
font-family:var(--font-d);font-weight:800;line-height:.9;
font-size:clamp(48px,9.5vw,150px);color:rgba(255,255,255,.1);user-select:none;
letter-spacing:-.02em;white-space:nowrap;
}
.pied-marque .note{position:absolute;right:12%;top:6px;color:var(--soleil);transform:rotate(-4deg);font-size:clamp(18px,2vw,26px)}
.pied-bas{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 0 26px;color:rgba(255,255,255,.5);font-size:13.5px}
.pied-bas a{color:rgba(255,255,255,.7)}
.pied-bas a:hover{color:#fff}
@media(max-width:820px){.pied-haut{grid-template-columns:1fr}}
/* ============================================================
PAGES INTÉRIEURES — entêtes
============================================================ */
.page-hero{position:relative;padding:clamp(120px,17vh,170px) 0 clamp(36px,5vw,60px);overflow:hidden}
.page-hero .note{display:block;margin-bottom:10px}
.page-hero h1{font-family:var(--font-d);font-weight:800;font-size:clamp(38px,6.6vw,92px);line-height:1;letter-spacing:-.025em}
.page-hero p.chapo{color:var(--gris);max-width:60ch;margin-top:20px;font-size:clamp(15.5px,1.3vw,18px)}
.page-hero-img{position:relative;color:#fff;padding:0}
.page-hero-img .phi-media{position:absolute;inset:0}
.page-hero-img .phi-media img{width:100%;height:100%;object-fit:cover}
.page-hero-img .phi-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(13,32,58,.85),rgba(13,32,58,.25))}
.page-hero-img .phi-in{position:relative;z-index:2;min-height:60svh;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(120px,16vh,170px) var(--pad) clamp(30px,4.5vw,56px)}
.page-hero-img .note{color:var(--soleil)}
.page-hero-img p.chapo{color:rgba(255,255,255,.88)}
/* ============================================================
INSCRIPTION — timeline, lieu, formulaire, FAQ
============================================================ */
.journee{padding:var(--air) 0;background:var(--blanc)}
.timeline{position:relative;max-width:820px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:104px;top:8px;bottom:8px;width:2.5px;background:var(--ligne);border-radius:3px}
.tl-etape{display:grid;grid-template-columns:84px 40px 1fr;gap:0 16px;padding:20px 0;align-items:flex-start}
.tl-etape .tl-h{font-family:var(--font-h);font-size:24px;font-weight:700;color:var(--bleu-fonce);text-align:right;line-height:1.1}
.tl-etape .tl-pt{
width:16px;height:16px;border-radius:50%;background:var(--blanc);border:3px solid var(--bleu);
margin:6px auto 0;position:relative;z-index:2;
}
.tl-etape.temps-fort .tl-pt{background:var(--soleil);border-color:var(--soleil);box-shadow:0 0 0 6px rgba(255,197,61,.25)}
.tl-etape h4{font-family:var(--font-d);font-weight:700;font-size:18px;letter-spacing:-.01em}
.tl-etape p{color:var(--gris);font-size:15px;max-width:54ch}
.tl-etape .tl-note{font-family:var(--font-h);font-size:20px;font-weight:600;color:var(--feu);margin-top:4px;display:inline-block;transform:rotate(-1deg)}
@media(max-width:640px){
.timeline::before{left:60px}
.tl-etape{grid-template-columns:44px 36px 1fr;gap:0 10px}
.tl-etape .tl-h{font-size:19px}
}
/* le lieu */
.lieu{padding:var(--air-serre) 0}
.lieu-grille{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3.6vw,52px);align-items:stretch}
.lieu-carte{
border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre);min-height:380px;background:var(--creme-2);
}
.lieu-carte iframe{width:100%;height:100%;min-height:380px;border:0;display:block}
.lieu-infos{display:flex;flex-direction:column;gap:16px}
.lieu-bloc{background:var(--blanc);border-radius:var(--r);padding:clamp(20px,2.4vw,30px);box-shadow:var(--ombre)}
.lieu-bloc .note{display:block;margin-bottom:6px}
.lieu-bloc p{font-size:15.5px;color:var(--gris)}
.lieu-bloc p b{color:var(--encre);font-size:17px;display:block;margin-bottom:2px}
.lieu-bloc ul{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lieu-bloc ul li{display:flex;gap:10px;font-size:15px;color:var(--gris);align-items:baseline}
.lieu-bloc ul li::before{content:'✓';color:var(--bleu);font-weight:700}
@media(max-width:900px){.lieu-grille{grid-template-columns:1fr}}
.inscription-sec{padding:var(--air-ample) 0;background:var(--blanc)}
.insc-grille{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,4vw,64px);align-items:flex-start}
.insc-info{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.insc-info .encart{background:var(--creme);border-radius:var(--r);padding:26px;box-shadow:var(--ombre)}
.insc-info .encart .prix{font-family:var(--font-d);font-weight:800;font-size:46px;line-height:1;color:var(--bleu);letter-spacing:-.02em}
.insc-info .encart .prix small{font-size:.38em;color:var(--gris);font-weight:600}
.insc-info .encart ul{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.insc-info .encart ul li{display:flex;gap:10px;font-size:15px;align-items:baseline}
.insc-info .encart ul li::before{content:'✓';color:var(--bleu);font-weight:700}
.insc-contact{border-radius:var(--r);background:var(--ocean);color:#fff;padding:26px}
.insc-contact .note{color:var(--soleil);display:block;margin-bottom:8px}
.insc-contact a{display:flex;gap:10px;font-size:15px;padding:7px 0;color:#fff}
.insc-contact a:hover{color:var(--soleil)}
.formulaire{background:var(--creme);border-radius:var(--r);padding:clamp(24px,3vw,44px);position:relative;box-shadow:var(--ombre)}
.formulaire .f-titre{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.formulaire h3{font-family:var(--font-d);font-weight:800;font-size:26px;letter-spacing:-.01em}
.tag-demo{font-family:var(--font-h);font-size:18px;font-weight:700;background:rgba(255,90,31,.14);color:var(--feu);padding:5px 13px;border-radius:99px;transform:rotate(2deg)}
.f-sec{margin-bottom:26px}
.f-sec>span{font-family:var(--font-h);font-size:23px;font-weight:600;color:var(--bleu-fonce);display:block;margin-bottom:12px}
.f-ligne{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.f-ligne.simple{grid-template-columns:1fr}
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-size:13.5px;font-weight:600}
.champ input,.champ select,.champ textarea{
font:inherit;font-size:15px;padding:13px 16px;border:2px solid transparent;border-radius:14px;
background:var(--blanc);outline:0;transition:border-color .25s;width:100%;box-shadow:0 2px 8px -3px rgba(43,41,38,.1);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu)}
.champ textarea{resize:vertical;min-height:88px}
.choix-camp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choix-camp label{
background:var(--blanc);border:2px solid transparent;border-radius:14px;padding:16px;cursor:pointer;
display:flex;flex-direction:column;gap:4px;transition:border-color .25s;position:relative;
box-shadow:0 2px 8px -3px rgba(43,41,38,.1);
}
.choix-camp input{position:absolute;opacity:0}
.choix-camp label b{font-family:var(--font-d);font-weight:800;font-size:16.5px}
.choix-camp label small{font-size:13px;color:var(--gris)}
.choix-camp label.on{border-color:var(--bleu);background:rgba(11,150,225,.05)}
.choix-camp label.off{opacity:.6}
.choix-camp label .cc-etiquette{
position:absolute;right:10px;top:10px;font-family:var(--font-h);font-size:16px;font-weight:700;
padding:3px 10px;border-radius:99px;transform:rotate(3deg);
}
.choix-camp label .cc-etiquette.ouvert{background:var(--soleil);color:var(--encre)}
.choix-camp label .cc-etiquette.complet{background:var(--creme-2);color:var(--gris)}
.case{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--gris);cursor:pointer}
.case input{width:18px;height:18px;margin-top:2px;accent-color:var(--bleu);flex-shrink:0}
.f-envoi{width:100%;justify-content:center;margin-top:8px}
.f-note{font-size:13px;color:var(--gris);text-align:center;margin-top:12px}
.f-succes{display:none;text-align:center;padding:40px 10px}
.f-succes .rond-ok{
width:78px;height:78px;border-radius:50%;background:var(--soleil);color:var(--encre);
display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 18px;transform:rotate(-4deg);
}
.f-succes h4{font-family:var(--font-d);font-weight:800;font-size:26px;margin-bottom:8px}
.f-succes p{color:var(--gris);max-width:46ch;margin:0 auto}
.formulaire.envoye form{display:none}
.formulaire.envoye .f-succes{display:block}
@media(max-width:980px){
.insc-grille{grid-template-columns:1fr}
.insc-info{position:static}
}
@media(max-width:640px){.f-ligne,.choix-camp{grid-template-columns:1fr}}
.faq{padding:var(--air) 0}
.faq-liste{max-width:860px;margin:0 auto}
.faq-item{border-bottom:1.5px dashed var(--ligne)}
.faq-q{
width:100%;text-align:left;display:flex;justify-content:space-between;gap:18px;align-items:center;
padding:22px 4px;font-weight:650;font-size:clamp(15.5px,1.3vw,18px);transition:color .25s;
}
.faq-q:hover{color:var(--bleu-fonce)}
.faq-q .fx{
font-family:var(--font-h);font-size:28px;font-weight:700;color:var(--bleu);
transition:transform .3s;flex-shrink:0;line-height:1;
}
.faq-item.ouvert .faq-q .fx{transform:rotate(45deg)}
.faq-r{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
.faq-r p{color:var(--gris);font-size:15px;padding:0 4px 22px;max-width:70ch}
/* ============================================================
CLOTHING
============================================================ */
.clo-histoire{padding:var(--air) 0;background:var(--blanc)}
.clo-grille{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.clo-grille .polaroid img{aspect-ratio:3/4}
.clo-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.clo-badges span{font-family:var(--font-h);font-size:19px;font-weight:600;background:var(--creme);padding:8px 16px;border-radius:99px;color:var(--bleu-fonce)}
.clo-badges span:nth-child(even){transform:rotate(1.5deg);background:rgba(255,197,61,.25);color:var(--encre)}
.clo-badges span:nth-child(odd){transform:rotate(-1deg)}
.clo-collection{padding:var(--air-ample) 0}
.clo-bande{border-radius:var(--r);overflow:hidden;margin-bottom:clamp(18px,2.6vw,30px);position:relative;aspect-ratio:21/9;background:var(--ocean);box-shadow:var(--ombre)}
.clo-bande img{width:100%;height:100%;object-fit:cover}
.clo-bande figcaption{
position:absolute;left:20px;bottom:14px;font-family:var(--font-h);font-size:24px;font-weight:600;
color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.7);transform:rotate(-1deg);
}
.clo-deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,48px);padding:14px 0}
.clo-cta{
margin-top:clamp(24px,3.4vw,44px);background:var(--blanc);border-radius:var(--r);box-shadow:var(--ombre);
padding:clamp(24px,3vw,44px);display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
}
.clo-cta h3{font-family:var(--font-d);font-weight:800;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.01em}
.clo-cta p{color:var(--gris);font-size:15px;max-width:48ch}
@media(max-width:820px){.clo-grille,.clo-deux{grid-template-columns:1fr}.clo-bande{aspect-ratio:16/10}}
/* ============================================================
LE CLUB
============================================================ */
.histoire{padding:var(--air) 0;background:var(--blanc)}
.annees{display:flex;flex-direction:column;max-width:960px;margin:0 auto}
.annee{
display:grid;grid-template-columns:170px 1fr;gap:clamp(18px,3vw,44px);
padding:clamp(26px,3.4vw,44px) 0;
}
.annee+.annee{border-top:1.5px dashed var(--ligne)}
.annee .an{
font-family:var(--font-h);font-weight:700;font-size:clamp(44px,4.6vw,68px);line-height:1;
color:var(--bleu);transform:rotate(-3deg);
}
.annee h3{font-family:var(--font-d);font-weight:800;font-size:20px;margin-bottom:10px;letter-spacing:-.01em}
.annee p{color:var(--gris);font-size:15px;max-width:64ch}
.annee p b{color:var(--encre)}
.annee .dons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.annee .dons span{font-family:var(--font-h);font-size:18px;font-weight:600;background:rgba(11,150,225,.1);color:var(--bleu-fonce);padding:6px 14px;border-radius:99px}
@media(max-width:640px){.annee{grid-template-columns:1fr;gap:8px}}
.equipe{padding:var(--air-ample) 0}
.eq-groupe{margin-bottom:clamp(36px,5vw,60px)}
.eq-groupe>.note{display:block;margin-bottom:18px}
.eq-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.membre{
background:var(--blanc);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre);
transition:transform .35s,box-shadow .35s;
}
.membre:nth-child(odd){transform:rotate(-.6deg)}
.membre:nth-child(even){transform:rotate(.6deg)}
.membre:hover{transform:rotate(0) translateY(-6px);box-shadow:var(--ombre-levee)}
.membre .m-photo{aspect-ratio:1;overflow:hidden;background:var(--creme-2)}
.membre .m-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.membre:hover .m-photo img{transform:scale(1.06)}
.membre .m-mono{
aspect-ratio:1;display:flex;align-items:center;justify-content:center;
font-family:var(--font-h);font-weight:700;font-size:64px;
background:linear-gradient(145deg,rgba(11,150,225,.12),rgba(255,197,61,.18));color:var(--bleu-fonce);
}
.membre .m-infos{padding:16px 18px}
.membre .m-infos b{display:block;font-family:var(--font-d);font-weight:700;font-size:15.5px;line-height:1.2;letter-spacing:-.01em}
.membre .m-infos span{font-family:var(--font-h);font-size:18px;font-weight:600;color:var(--bleu-fonce);display:block;margin-top:4px}
.eq-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px);max-width:900px}
.eq-liste li{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
padding:14px 4px;border-bottom:1.5px dashed var(--ligne);
}
.eq-liste li b{font-family:var(--font-d);font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.eq-liste li span{font-family:var(--font-h);font-size:18px;font-weight:600;color:var(--gris);text-align:right}
.eq-liste li.moi span{color:var(--bleu)}
@media(max-width:980px){.eq-grille{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.eq-liste{grid-template-columns:1fr}}
/* ============================================================
DIVERS
============================================================ */
.lien-fleche{
font-family:var(--font-h);font-size:22px;font-weight:600;
display:inline-flex;gap:10px;align-items:center;color:var(--bleu-fonce);
padding:8px 0;
}
.lien-fleche::after{content:'→';transition:transform .3s}
.lien-fleche:hover::after{transform:translateX(6px)}
/* ============================================================
v3 — LE POLISSAGE
============================================================ */
/* ---------- Hero : les 3 faits que le parent cherche d'abord ---------- */
/* Le voile protège la zone de texte : le blanc passait sur l'herbe éclairée
et sur les maillots clairs, une ligne sur deux devenait illisible au soleil. */
.hero-media::after{
background:
linear-gradient(to top,rgba(9,26,48,.94) 0%,rgba(9,26,48,.88) 26%,rgba(9,26,48,.66) 46%,rgba(9,26,48,.22) 72%,rgba(9,26,48,.3) 100%);
}
/* ---------- Le chèque du don ---------- */
.don-cheque{
position:relative;z-index:2;background:var(--creme);color:var(--encre);
border-radius:6px;padding:clamp(20px,2.8vw,34px);
box-shadow:0 2px 4px rgba(0,0,0,.3), 0 18px 34px -16px rgba(0,0,0,.5);
transform:rotate(-.7deg);
background-image:repeating-linear-gradient(-58deg,rgba(11,150,225,.05) 0 22px,transparent 22px 44px);
}
.dc-entete{
display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
font-size:12.5px;color:var(--gris);letter-spacing:.02em;
padding-bottom:clamp(14px,1.8vw,20px);border-bottom:1.5px solid rgba(43,41,38,.14);
}
.dc-entete .dc-marque{font-weight:650;color:var(--bleu-fonce)}
.dc-corps{
display:flex;align-items:flex-end;justify-content:space-between;
gap:clamp(18px,3vw,44px);flex-wrap:wrap;padding:clamp(18px,2.4vw,28px) 0;
}
.dc-benef{flex:1 1 260px;min-width:0}
.dc-benef small{display:block;font-family:var(--font-h);font-size:20px;color:var(--gris);margin-bottom:2px}
.dc-benef b{font-size:clamp(14.5px,1.3vw,17px);font-weight:650;line-height:1.45;display:block;max-width:34ch}
.dc-case{
display:flex;align-items:baseline;gap:8px;flex-shrink:0;
border:2.5px solid var(--encre);border-radius:4px;
padding:clamp(8px,1.2vw,14px) clamp(14px,2vw,24px);background:var(--blanc);
}
.dc-val{
font-family:var(--font-d);font-weight:800;font-stretch:105%;letter-spacing:-.03em;
font-size:clamp(38px,6.4vw,86px);line-height:.9;color:var(--encre);
}
.dc-dev{font-family:var(--font-d);font-weight:700;font-size:clamp(15px,1.5vw,22px);color:var(--gris)}
.dc-pied{
display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding-top:clamp(12px,1.6vw,18px);border-top:1.5px dashed rgba(43,41,38,.2);
}
.dc-lettres{font-family:var(--font-h);font-size:clamp(18px,1.7vw,22px);color:var(--gris);max-width:52ch;line-height:1.25}
.dc-signature{
font-family:var(--font-h);font-weight:700;font-size:clamp(26px,3vw,40px);
color:var(--bleu);transform:rotate(-4deg);line-height:1;
}
/* les chiffres secondaires : une ligne, pas cinq cartes */
.chiffres-ligne{
position:relative;z-index:2;display:flex;flex-wrap:wrap;
gap:clamp(20px,3.4vw,54px);margin-top:clamp(26px,3.4vw,46px);
}
.chiffres-ligne li{display:flex;flex-direction:column;gap:2px;min-width:132px}
.chiffres-ligne b{
font-family:var(--font-d);font-weight:800;font-stretch:105%;letter-spacing:-.02em;
font-size:clamp(26px,3vw,42px);line-height:1;color:var(--soleil);
}
.chiffres-ligne li:nth-child(even) b{color:#fff}
.chiffres-ligne span{font-size:13.5px;color:rgba(255,255,255,.72);max-width:22ch;line-height:1.4}
@media(max-width:640px){
.dc-entete{flex-direction:column;gap:2px}
.dc-corps{flex-direction:column;align-items:stretch;gap:16px}
.dc-benef{flex:0 0 auto}
.dc-case{justify-content:center;padding:14px 10px}
.dc-pied{flex-direction:column;align-items:flex-start;gap:10px}
.dc-signature{align-self:flex-end}
}
/* ---------- Témoignage mis en avant ---------- */
.temoin-phare{
position:relative;max-width:min(100%,900px);margin-bottom:clamp(26px,3.4vw,44px);
}
.temoin-phare q{
quotes:none;display:block;
font-size:clamp(21px,2.9vw,42px);line-height:1.24;font-weight:500;letter-spacing:-.015em;
}
.temoin-phare figcaption{
font-family:var(--font-h);font-size:clamp(21px,2vw,26px);font-weight:600;
color:var(--bleu-fonce);margin-top:clamp(14px,1.8vw,22px);
}
.temoins-grille{grid-template-columns:repeat(3,1fr)}
.temoin q{padding-top:20px}
@media(max-width:900px){.temoins-grille{grid-template-columns:1fr}}
/* ============================================================
v3.1 — MATIÈRE, LARGEUR VARIABLE, GESTE
============================================================ */
/* ---------- La largeur porte le sens ----------
Archivo est chargée en fonte VARIABLE (wdth 62..125, wght 100..900) et le
site n'exploitait qu'un seul point de cet espace, 800/105%, pour tous les
titres. La largeur est déjà téléchargée et payée : elle sert ici à dire
quelque chose, jamais à décorer. */
h2.titre{font-stretch:96%} /* resserré : densité d'affiche */
.hero-titre{font-stretch:98%}
.cr-temps b{font-stretch:80%} /* « La guerre. » : compact, tendu */
.cr-avie{font-stretch:88%}
.cr-avie em{font-stretch:122%} /* « à vie » s'étire, littéralement */
.dc-val{font-stretch:88%} /* un montant se lit serré */
.pied-wordmark{font-stretch:118%} /* la signature occupe la largeur */
.temoin-phare q{font-stretch:100%}
/* ---------- Le repos de chaque objet ----------
Déclaré ici pour que la révélation le retrouve au lieu de l'écraser. */
.galerie .polaroid{--repos:rotate(var(--rot,-2deg))}
.temoin:nth-child(odd){--repos:rotate(-.5deg)}
.temoin:nth-child(even){--repos:rotate(.5deg)}
.membre:nth-child(odd){--repos:rotate(-.6deg)}
.membre:nth-child(even){--repos:rotate(.6deg)}
.don-cheque{--repos:rotate(-.7deg)}
/* ---------- Le geste : une photo qu'on pose ----------
Un seul effet sur tout le site, mais il a un sens physique : la photo
arrive à plat et se pose de travers, comme lâchée sur une table. */
body.js-anim .galerie .polaroid.rev{transform:translateY(22px) rotate(0deg)}
body.js-anim .galerie .polaroid.rev.on{transform:var(--repos)}
/* ---------- Feedback de pression ----------
Il n'existait AUCUN état :active sur le site. Un bouton qui ne bouge pas
sous le doigt donne l'impression que l'interface n'a pas entendu. */
.btn,.nav-cta,.btq-carte,.btq-taille,.btq-commander,.news-form button,.faq-q{
transition:transform .16s var(--ease-presse),background .25s,color .25s,border-color .25s;
}
.btn:active,.nav-cta:active,.btq-taille:active,.btq-commander:active,.news-form button:active{transform:scale(.97)}
.btq-carte:active{transform:scale(.985)}
.faq-q:active{transform:scale(.995)}
/* ---------- Le survol n'existe pas au doigt ----------
12 effets de survol portaient un transform sans protection : sur téléphone,
un simple appui les déclenchait et l'élément restait figé en état survolé. */
@media (hover:none),(pointer:coarse){
.camp-carte:hover,.chapitre:hover .polaroid,.galerie .polaroid:hover,
.temoin:hover,.membre:hover,.btq-carte:hover .polaroid,
.btn:hover,.nav-cta:hover,.part-logos img:hover{
transform:var(--repos,none);
}
.membre:hover .m-photo img{transform:none}
.aftermovie:hover img{transform:none}
.aftermovie:hover .lecture .rond{transform:none}
}
/* ---------- Réduire le mouvement ne veut pas dire tout couper ----------
Les fondus aident à comprendre qu'un élément est apparu : on garde
l'opacité, on retire seulement les déplacements. */
@media (prefers-reduced-motion:reduce){
body.js-anim .rev,body.js-anim .galerie .polaroid.rev{transform:var(--repos)}
body.js-anim .rev.on{transition:opacity .3s ease}
}
/* ---------- La galerie : un album n'aligne pas 9 fois le même format ---------- */
.galerie .polaroid:nth-child(1) img,
.galerie .polaroid:nth-child(6) img{aspect-ratio:4/5}
.galerie .polaroid:nth-child(4) img,
.galerie .polaroid:nth-child(8) img{aspect-ratio:5/4}
.galerie .polaroid:nth-child(3){margin-top:clamp(14px,2.4vw,34px)}
.galerie .polaroid:nth-child(7){margin-top:clamp(10px,1.8vw,26px)}
/* ---------- La règle du jeu des clans ---------- */
.clans-intro{margin-top:18px}
.clans-regle{
position:relative;z-index:2;background:var(--ocean-2);
padding:clamp(30px,4vw,56px) var(--pad) 0;
max-width:1340px;margin:0 auto;
}
.cr-temps{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,56px);
counter-reset:cr;list-style:none;
}
.cr-temps li{counter-increment:cr;position:relative;padding-top:14px;border-top:2px solid rgba(255,255,255,.18)}
.cr-temps li::before{
content:counter(cr,decimal-leading-zero);
font-family:var(--font-d);font-weight:800;font-size:13px;letter-spacing:.06em;
color:var(--soleil);display:block;margin-bottom:10px;
}
.cr-temps span{
font-family:var(--font-h);font-size:clamp(19px,1.8vw,23px);font-weight:600;
color:var(--soleil);display:block;margin-bottom:2px;
}
.cr-temps b{
font-family:var(--font-d);font-weight:800;font-stretch:105%;letter-spacing:-.02em;
font-size:clamp(21px,2.3vw,32px);line-height:1.05;display:block;margin-bottom:8px;
}
.cr-temps p{color:rgba(255,255,255,.78);font-size:15px;max-width:38ch;line-height:1.55}
.cr-avie{
font-family:var(--font-d);font-weight:800;font-stretch:105%;letter-spacing:-.025em;
font-size:clamp(26px,4.4vw,64px);line-height:1.04;
margin-top:clamp(30px,4vw,58px);max-width:20ch;
}
.cr-avie em{font-style:normal;color:var(--soleil)}
@media(max-width:820px){
.cr-temps{grid-template-columns:1fr;gap:24px}
.cr-avie{max-width:none}
}
/* ---------- Journée type : les temps forts doivent peser plus ---------- */
.tl-etape.temps-fort h4{font-size:clamp(19px,1.9vw,24px);letter-spacing:-.02em}
.tl-etape.temps-fort .tl-h{font-size:clamp(22px,2.2vw,28px);color:var(--encre)}
.tl-etape.temps-fort{padding:clamp(24px,3vw,34px) 0}
.tl-etape:not(.temps-fort){padding:13px 0}
.tl-etape:not(.temps-fort) p{font-size:14.5px}
/* ---------- Cibles tactiles : 19px de haut, on ratait le lien ---------- */
@media(max-width:920px){
.pied ul{gap:2px}
.pied ul li{padding:9px 0}
.pied ul li a{display:inline-block;padding:5px 0}
.menu-mobile .mm-pied{gap:2px}
.menu-mobile .mm-pied a{padding:10px 0}
.btq-note a{display:inline-block;padding:6px 0}
}
/* ---------- Fiche produit : la ligne de réassurance était coupée ---------- */
@media(max-width:700px){
.btq-modal{max-height:88vh}
.btq-infos{padding-bottom:clamp(18px,3vw,28px)}
.btq-demo-note{font-size:16px;line-height:1.35}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
html{scroll-behavior:auto}
.marquee-piste{animation:none}
}
/* ============================================================
BOUTIQUE CLOTHING (démo)
============================================================ */
.boutique{padding:var(--air) 0;background:var(--creme-2)}
.btq-intro{color:var(--gris);max-width:60ch;margin-top:14px;font-size:clamp(15px,1.25vw,17px)}
.btq-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(18px,2.4vw,30px);margin-top:clamp(26px,3.4vw,44px)}
.btq-carte{border:0;background:none;padding:0;cursor:pointer;text-align:left;font:inherit;display:block}
.btq-carte .polaroid{margin:0;width:100%}
.btq-carte:hover .polaroid{transform:rotate(0) translateY(-6px) scale(1.02)}
.btq-carte img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:3px}
.btq-carte figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%}
.btq-carte figcaption span{color:var(--bleu-fonce);font-weight:700;white-space:nowrap}
.btq-note{margin-top:30px;color:var(--gris);font-size:15px}
.btq-note a{color:var(--bleu-fonce);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.btq-voile{position:fixed;inset:0;z-index:150;background:rgba(13,44,74,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}
.btq-voile[hidden]{display:none}
body.btq-open{overflow:hidden}
.btq-modal{background:var(--blanc);border-radius:var(--r);max-width:840px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:1fr 1.05fr;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
.btq-photo img{width:100%;height:100%;object-fit:cover;display:block;min-height:100%}
.btq-infos{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.btq-infos h3{font-size:clamp(26px,2.8vw,38px);line-height:1.02}
.btq-desc{color:var(--gris);font-size:15.5px;line-height:1.55}
.btq-badges{display:flex;gap:8px;flex-wrap:wrap}
.btq-badges span{font-family:var(--font-h);font-size:17px;background:var(--creme-2);padding:4px 12px;border-radius:99px}
.btq-tailles{display:flex;gap:8px;flex-wrap:wrap}
.btq-taille{border:1.5px solid var(--ligne);background:var(--blanc);border-radius:12px;padding:9px 13px;font:600 14px var(--font-b);cursor:pointer;transition:.2s;color:var(--encre)}
.btq-taille:hover{border-color:var(--bleu)}
.btq-taille.on{background:var(--bleu);border-color:var(--bleu);color:#fff}
.btq-taille:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.btq-bas{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:6px}
.btq-prix{font-size:clamp(24px,2.4vw,30px);color:var(--bleu-fonce)}
.btq-demo-note{font-family:var(--font-h);font-size:17px;color:var(--gris)}
.btq-fermer{position:absolute;top:10px;right:12px;z-index:2;border:0;background:var(--creme);border-radius:50%;width:38px;height:38px;font-size:22px;cursor:pointer;line-height:1;box-shadow:var(--ombre)}
@keyframes btqShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(max-width:700px){
.btq-modal{grid-template-columns:1fr}
.btq-photo img{max-height:40vh}
.btq-grille{grid-template-columns:repeat(2,1fr);gap:14px}
}
/* Chantier A : la carte postale du prochain été. */
.alerte-camp{padding:48px 0 78px;scroll-margin-top:100px;background:var(--creme-2)}
.carte-postale{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,76px);align-items:center;padding:clamp(24px,4vw,56px);background:var(--creme);box-shadow:0 12px 28px -20px rgba(43,41,38,.4)}
.alerte-photo{margin:0;background:var(--creme-2);padding:12px 12px 8px;transform:rotate(-3deg);position:relative}
.alerte-photo:before{content:'';position:absolute;top:-15px;left:35%;width:90px;height:30px;background:rgba(255,197,61,.7);transform:rotate(7deg)}
.alerte-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.alerte-photo figcaption{font:26px/1.2 var(--font-h);padding:14px 5px 5px;color:var(--ocean)}
.alerte-message{min-width:0}.alerte-message>.note{color:var(--bleu-fonce)}
.alerte-message h2{font:800 clamp(30px,3.4vw,48px)/1.08 var(--font-d);letter-spacing:-1.2px;margin:14px 0 20px;color:var(--ocean)}
.alerte-message>p{line-height:1.6}.alerte-form{margin-top:24px}.alerte-form>label{display:block;font-weight:600;margin-bottom:8px}
.alerte-champs{display:flex;gap:10px}.alerte-champs input{min-width:0;width:100%;border:1px solid var(--gris);border-radius:4px;background:var(--creme);padding:14px;font:inherit;color:var(--encre)}
.alerte-champs button{flex-shrink:0;white-space:nowrap}.alerte-champs input:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.alerte-form .alerte-confidentialite{font-size:12px;line-height:1.5;color:var(--gris);margin-top:12px}.alerte-confidentialite a{text-decoration:underline}
.alerte-piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.alerte-retour{font-weight:600;line-height:1.5;margin-top:12px;color:var(--ocean)}.alerte-retour:empty{display:none}
.alerte-message .alerte-detail{border-top:1px solid var(--ligne);padding-top:18px;margin-top:24px;font-size:14px}
@media(max-width:850px){.carte-postale{grid-template-columns:1fr}.alerte-photo{max-width:460px;margin:0 auto;width:100%}.alerte-champs{flex-wrap:wrap}.alerte-champs button{width:100%;justify-content:center}}
@media(max-width:480px){.alerte-camp{padding:34px 0 48px}.carte-postale{padding:22px 18px;gap:30px}.alerte-photo figcaption{font-size:22px}.alerte-message h2{font-size:31px}.alerte-champs input{font-size:16px}}
.alerte-photo img{object-position:center 16%}
@media(max-width:850px){.alerte-message{grid-row:1}.alerte-photo{max-width:320px}}
/* Chantier B : accueil, chiffres posés, parole aux parents, partenaires visibles. */
.b-chiffres{background:var(--creme-2);padding:78px 0 60px;color:var(--ocean)}
.b-don{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(35px,6vw,90px);align-items:end}
.b-don h2{font:500 17px/1.4 var(--font-b);margin-bottom:28px}
.b-montant{font:800 clamp(62px,8.2vw,116px)/.95 var(--font-d);letter-spacing:-.06em;white-space:nowrap}
.b-montant>span{display:block;font:500 25px/1.5 var(--font-h);letter-spacing:0;margin-bottom:6px}
.b-montant small{font:600 22px/1 var(--font-b);letter-spacing:0}
.b-don-texte h3{font:750 clamp(23px,2.3vw,32px)/1.15 var(--font-d);letter-spacing:-.025em;margin-bottom:18px}
.b-don-texte p{color:var(--encre);line-height:1.7;max-width:50ch}.b-don-texte a{margin-top:18px}
.b-reperes{display:flex;gap:40px;justify-content:space-between;margin-top:58px;padding-top:26px;border-top:1px solid rgba(18,61,99,.23)}
.b-reperes>div{flex:1}.b-reperes dt{font:750 clamp(28px,3vw,42px)/1.2 var(--font-d);letter-spacing:-.03em}
.b-reperes dd{margin:8px 0 0;max-width:20ch;font-size:14px;line-height:1.5;color:var(--encre)}
.accueil-b .cr-temps li:before{display:none}.accueil-b .cr-temps li{border-top:0;padding-top:0}
.b-couleur{display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:40px;padding:52px 0 58px;margin-top:32px;border-top:1px solid rgba(250,245,235,.2)}
.b-couleur p{font:700 clamp(28px,3.05vw,44px)/1.18 var(--font-d);letter-spacing:-.025em;color:var(--creme)}
.b-couleur strong{color:var(--soleil);font-weight:700}.b-couleur>span{font:400 17px/1.7 var(--font-b);color:var(--creme);padding-left:36px;border-left:1px solid rgba(250,245,235,.25)}
.b-parents{background:var(--creme);padding:clamp(64px,8vw,115px) 0}
.b-parents-in{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(30px,6vw,90px)}
.b-parents-intro h2{font:800 clamp(32px,3.4vw,48px)/1.1 var(--font-d);letter-spacing:-.03em;margin:12px 0 24px;color:var(--ocean)}
.b-parents-intro>p{font-size:15px;line-height:1.6;color:var(--gris)}
.b-avis{margin:0 0 32px}.b-avis blockquote{font:500 clamp(22px,2.1vw,30px)/1.5 var(--font-b);letter-spacing:-.02em;color:var(--encre);margin:0}
.b-avis blockquote:before{content:'« ';color:var(--bleu-fonce)}.b-avis blockquote:after{content:' »';color:var(--bleu-fonce)}
.b-avis figcaption{font:600 17px/1.5 var(--font-b);color:var(--ocean);margin-top:24px}
.b-lecteur.pret .b-avis-panneaux{transition:height .34s var(--ease-pose)}.b-avis[hidden],.b-avis-choix[hidden]{display:none}
.b-avis-choix{display:flex;gap:clamp(12px,2vw,32px);border-top:1px solid var(--ligne);flex-wrap:wrap}
.b-avis-choix button{font:500 16px/1.2 var(--font-b);padding:18px 0 14px;min-height:48px;background:none;border:0;border-top:3px solid transparent;color:var(--gris);cursor:pointer}
.b-avis-choix button[aria-selected=true]{border-top-color:var(--bleu-fonce);color:var(--ocean);font-weight:700}
.b-avis-choix button:focus-visible{outline:2px solid var(--bleu-fonce);outline-offset:5px}
.b-partenaires{padding:clamp(56px,6vw,90px) 0;background:var(--ocean);color:var(--creme)}
.b-partenaires-tete{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:46px}
.b-partenaires h2{font:750 clamp(32px,4vw,56px)/1.12 var(--font-d);letter-spacing:-.035em;color:var(--creme)}
.b-partenaires-tete .note{color:var(--soleil);font-size:29px}
.b-uefa{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,7vw,100px);padding:0 0 42px}
.b-uefa>img{width:100%;max-width:440px;height:auto;max-height:150px;object-fit:contain;object-position:left center}
.b-uefa>p{font-size:17px;line-height:1.7;max-width:50ch}.b-uefa strong{font-weight:650}
.b-sponsors{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;border-top:1px solid rgba(250,245,235,.3);padding-top:36px}
.b-sponsors li{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;text-align:center;min-width:0}
.b-sponsors img{width:100%;max-width:180px;height:82px;object-fit:contain;filter:none;opacity:1}
.b-sponsors span{font-size:13px;line-height:1.4;color:var(--creme);max-width:24ch}
.b-retrouvailles{display:grid;grid-template-columns:1fr 1fr;background:var(--creme-2)}
.b-retrouvailles-photo{min-width:0;min-height:470px}.b-retrouvailles-photo img{display:block;width:100%;height:100%;max-height:620px;object-fit:cover;object-position:center}
.b-retrouvailles-texte{padding:clamp(40px,5vw,76px);align-self:center}.b-retrouvailles-texte h2{font:800 clamp(30px,3.7vw,54px)/1.12 var(--font-d);letter-spacing:-.035em;color:var(--ocean);margin:14px 0 24px}
.b-retrouvailles-texte>p{font-size:17px;line-height:1.6;max-width:38ch;margin-bottom:28px}.b-question{display:block;margin-top:24px;font-size:14px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.b-don{grid-template-columns:1fr;gap:32px}.b-montant{font-size:clamp(64px,12vw,108px)}.b-don h2{margin-bottom:12px}.b-reperes{gap:24px;flex-wrap:wrap}.b-reperes>div{flex:1 1 35%}.b-parents-in{grid-template-columns:1fr}.b-parents-intro h2 br{display:none}.b-sponsors{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}.b-couleur{grid-template-columns:1fr;gap:20px}.b-couleur>span{border:0;padding-left:0}.b-retrouvailles-texte{padding:32px}.b-retrouvailles-photo{min-height:420px}}
@media(max-width:600px){.b-chiffres{padding:48px 0}.b-reperes{margin-top:32px}.b-couleur{padding:30px 0 38px;margin-top:24px}.b-couleur p{font-size:29px}.b-couleur p br{display:none}.b-couleur strong{display:block;margin-top:6px}.b-parents-intro h2{margin-bottom:16px}.b-avis blockquote{font-size:23px}.b-avis-choix{justify-content:space-between;gap:12px}.b-partenaires-tete{display:block;margin-bottom:32px}.b-partenaires-tete .note{margin-top:20px;font-size:25px}.b-uefa{grid-template-columns:1fr;gap:25px}.b-uefa>img{max-width:300px}.b-sponsors{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.b-sponsors img{max-width:140px;height:72px}.b-retrouvailles{grid-template-columns:1fr}.b-retrouvailles-photo{min-height:0}.b-retrouvailles-photo img{height:340px}.b-retrouvailles-texte{padding:34px var(--pad) 46px}}
.b-couleur p>span,.b-couleur p>strong{display:block}.b-couleur p>span{text-wrap:balance}
/* B validé : retour du terrain bleu, chiffres toujours fixes. */
.b-chiffres{position:relative;overflow:hidden;background:var(--ocean);color:var(--creme)}
.c-terrain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--creme);stroke-width:1.5;opacity:.13}
.b-chiffres>.wrap{position:relative;z-index:1}
.b-chiffres .b-montant{color:var(--soleil)}.b-chiffres .b-montant>span{color:var(--creme)}
.b-chiffres .b-don-texte h3,.b-chiffres .b-don-texte p,.b-chiffres .b-reperes dd{color:var(--creme)}
.b-chiffres .b-reperes{border-color:rgba(250,245,235,.3)}.b-chiffres .lien-fleche{color:var(--soleil)}
/* C : une collection à regarder, aucun parcours d'achat. */
.c-collection{padding:clamp(48px,6vw,84px) 0 48px;background:var(--creme)}
.c-collection-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,6vw,85px);align-items:start;margin-bottom:38px}
.c-collection h2{font:800 clamp(29px,3.4vw,47px)/1.12 var(--font-d);letter-spacing:-.035em;color:var(--ocean)}
.c-collection-intro>p{font-size:17px;line-height:1.7;max-width:52ch}
.c-collection-photo{margin:0}.c-collection-photo img{display:block;width:100%;height:clamp(240px,39vw,520px);object-fit:cover;object-position:center}
.c-collection-photo figcaption{font:500 26px/1.3 var(--font-h);color:var(--bleu-fonce);margin:12px 0 32px}
.c-pieces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin:0 0 clamp(42px,5vw,66px)}
.c-piece{margin:0;min-width:0;display:flex;flex-direction:column}
/* height:auto est obligatoire : l attribut height du ![]()
est un indice de
presentation qui fixe la hauteur et neutralise aspect-ratio, sans erreur. */
.c-piece img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.c-piece figcaption{font:600 17px/1.3 var(--font-b);color:var(--ocean);margin-top:12px;
display:flex;flex-direction:column;flex:1}
.c-piece-det{display:block;font:400 14px/1.4 var(--font-b);color:var(--gris);margin-top:3px}
/* le prix est affiche mais rien ne se vend ici : il informe, il ne clique pas. */
.c-piece-tailles{display:block;font:500 12.5px/1.5 var(--font-b);color:var(--gris);
letter-spacing:.04em;margin-top:6px}
/* margin-top:auto cale les prix sur une meme ligne quand un detail passe a la
ligne : sinon chaque prix flotte a sa propre hauteur. */
.c-piece-prix{display:block;font:600 14px/1.4 var(--font-b);color:var(--bleu);
margin-top:auto;padding-top:7px;font-variant-numeric:tabular-nums}
.c-clothing-contact{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;margin-top:42px;padding-top:24px;border-top:1px solid var(--ligne)}
.c-clothing-contact p{font-size:18px}.c-note-camp{background:var(--creme-2);padding:36px 0}
.c-note-camp>.wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.c-note-camp p{font-size:18px;line-height:1.5}
/* D : les années se suivent sur une seule ligne de lecture. */
.d-histoire{background:var(--creme);padding:clamp(52px,6vw,88px) 0}
.d-histoire-tete{max-width:980px;margin:0 auto 48px}.d-histoire h2{font:800 clamp(32px,4vw,55px)/1.12 var(--font-d);letter-spacing:-.035em;color:var(--ocean);margin-top:12px}
.d-chronologie{max-width:980px;margin:0 auto}
.d-annee{display:grid;grid-template-columns:125px minmax(0,1fr);gap:0 46px;position:relative}
.d-date{position:relative;padding-top:3px}.d-date>span{font:700 33px/1 var(--font-h);color:var(--bleu-fonce)}
.d-date:after{content:'';position:absolute;right:0;top:15px;bottom:-15px;width:1px;background:rgba(6,120,184,.28)}
.d-date:before{content:'';position:absolute;right:-4px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--bleu-fonce);z-index:1}
.d-annee:last-child .d-date:after{bottom:45px}
.d-recit{padding-bottom:42px}.d-recit h3{font:750 clamp(24px,2.6vw,34px)/1.2 var(--font-d);letter-spacing:-.025em;color:var(--ocean);margin-bottom:14px}
.d-recit p{font-size:17px;line-height:1.75;max-width:66ch}
/* Une photo par annee. Pas de ratio impose : une frise est un album, et un album
a des photos de formes differentes. Forcer du 3/2 coupait le groupe de 2021 aux
genoux. height:auto est obligatoire, sinon l'attribut height du ![]()
fige la
hauteur. */
.d-photo{margin:22px 0 0;max-width:560px}
.d-photo img{display:block;width:100%;height:auto;border-radius:var(--r)}
.d-photo figcaption{font:500 21px/1.3 var(--font-h);color:var(--bleu-fonce);margin-top:11px}
@media(max-width:600px){.d-photo{max-width:none;margin-top:18px}.d-photo figcaption{font-size:19px}}
.d-contributions{list-style:none;margin-top:16px;padding:14px 0 0;border-top:1px solid var(--ligne);display:flex;flex-direction:column;gap:6px;color:var(--bleu-fonce);font-size:15px;line-height:1.6}
.d-souvenir{max-width:810px;margin:0 auto;padding-left:0}.d-souvenir img{display:block;width:100%;height:auto}.d-souvenir figcaption{font:500 25px/1.3 var(--font-h);color:var(--bleu-fonce);margin-top:14px}
/* E : les encadrés restent, les noms et fonctions prennent la place des monogrammes. */
.e-equipe{background:var(--creme-2);padding:clamp(54px,6vw,86px) 0}
.e-equipe .sec-head{margin-bottom:40px}.e-equipe .sec-head>.note{max-width:26ch}
.e-equipe .eq-groupe{margin-bottom:36px}.e-groupe-titre{font:700 24px/1.3 var(--font-d);letter-spacing:-.02em;color:var(--ocean);margin-bottom:20px}
.e-equipe .eq-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.e-equipe .membre{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;min-height:110px;padding:18px 20px;background:var(--creme);box-shadow:none;border:1px solid rgba(43,41,38,.1);border-radius:4px;transform:none;--repos:none;gap:18px}
.e-equipe .membre:hover{transform:none;box-shadow:none}.e-equipe .m-photo{width:74px;height:74px;flex:0 0 74px;aspect-ratio:1;border-radius:2px}
.e-equipe .m-photo img{transform:none;transition:none}.e-equipe .membre:hover .m-photo img{transform:none}
.e-equipe .m-infos{padding:0;flex:1}.e-equipe .m-infos b{font-size:21px;color:var(--ocean);line-height:1.2}
.e-equipe .m-infos span{font:400 15px/1.5 var(--font-b);color:var(--gris);margin-top:8px}
.e-terrain{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}
.e-terrain>.eq-groupe{background:var(--creme);border:1px solid rgba(43,41,38,.1);border-radius:4px;padding:28px;margin-bottom:0}
.e-equipe .eq-liste{display:block;max-width:none}.e-equipe .eq-liste li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--ligne);align-items:baseline}
.e-equipe .eq-liste li:last-child{border-bottom:0}.e-equipe .eq-liste li b{font-size:17px;line-height:1.4;color:var(--encre)}
.e-equipe .eq-liste li span{font:400 14px/1.5 var(--font-b);color:var(--gris);text-align:right;flex-shrink:0}
.e-rejoindre{background:var(--creme);padding:44px 0}.e-rejoindre>.wrap{display:flex;justify-content:space-between;align-items:center;gap:28px}
.e-rejoindre h2{font:750 clamp(26px,3vw,40px)/1.2 var(--font-d);color:var(--ocean);letter-spacing:-.025em;margin:10px 0 14px}.e-rejoindre p{font-size:16px;line-height:1.6}.e-rejoindre .btn{flex-shrink:0}
@media(max-width:850px){.c-collection-intro{grid-template-columns:1fr;gap:24px}.c-pieces{grid-template-columns:repeat(3,minmax(0,1fr))}.e-terrain{grid-template-columns:1fr}.e-rejoindre>.wrap{align-items:flex-start;flex-direction:column}.d-annee{grid-template-columns:95px minmax(0,1fr);gap:0 28px}}
@media(max-width:600px){.c-pieces{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.c-piece figcaption{font-size:16px}.c-collection-photo figcaption{font-size:23px}.c-collection-intro h2 br{display:none}.d-annee{grid-template-columns:1fr;gap:0;padding-left:23px;border-left:1px solid rgba(6,120,184,.28)}.d-date:after{display:none}.d-date:before{left:-28px;right:auto;top:16px}.d-date{margin-bottom:16px}.d-recit{padding-bottom:36px}.d-recit p{font-size:16px;line-height:1.7}.d-histoire-tete{margin-bottom:32px}.d-souvenir figcaption{font-size:23px}.e-equipe .eq-grille{grid-template-columns:1fr}.e-equipe .membre{min-height:100px;padding:16px}.e-equipe .m-infos b{font-size:20px}.e-terrain>.eq-groupe{padding:22px 18px}.e-equipe .eq-liste li{gap:12px}.e-equipe .eq-liste li b{font-size:16px}.e-equipe .eq-liste li span{font-size:13px}.e-equipe .sec-head>.note{max-width:none}.e-equipe .e-groupe-titre{font-size:23px}}
/* Fin d'album : une même page bleue, des partenaires jusqu'au pied. */
.fin-album{display:block;background:var(--ocean);color:var(--creme);padding:0 0 64px}
.fin-album-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(48px,7vw,110px)}
.fin-album .b-retrouvailles-photo{min-height:0;max-width:390px;width:calc(100% - 20px);margin:-28px 10px 0;background:var(--creme);padding:11px 11px 14px;transform:rotate(-3deg);box-shadow:0 18px 30px -22px rgba(0,0,0,.55);position:relative;z-index:1}
.fin-album .b-retrouvailles-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;max-height:none}
.fin-album figcaption{font:500 25px/1.25 var(--font-h);color:var(--ocean);padding:16px 4px 2px}
.fin-album .b-retrouvailles-texte{padding:12px 0 22px;min-width:0}
.fin-album .b-retrouvailles-texte>.note{color:var(--soleil)}
.fin-album .b-retrouvailles-texte h2{color:var(--creme);font-size:clamp(32px,3.5vw,50px);margin:14px 0 22px}
.fin-album .b-retrouvailles-texte>p{color:var(--creme);max-width:43ch}
.fin-album .b-question{color:var(--creme)}
.accueil-b .pied{padding-top:0}
.accueil-b .pied-haut{border-top:1px solid rgba(250,245,235,.2);padding-top:46px}
@media(max-width:850px){.fin-album-in{gap:36px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.fin-album .b-retrouvailles-texte h2{font-size:32px}.fin-album figcaption{font-size:22px}}
@media(max-width:600px){.fin-album{padding-bottom:36px}.fin-album-in{grid-template-columns:1fr;gap:34px}.fin-album .b-retrouvailles-photo{width:calc(100% - 36px);max-width:300px;margin:-12px 18px 0;transform:rotate(-2.5deg)}.fin-album .b-retrouvailles-texte{padding:0}.fin-album .b-retrouvailles-texte h2{font-size:34px}.fin-album .b-retrouvailles-texte>p{font-size:16px}.fin-album figcaption{font-size:24px}.accueil-b .pied-haut{padding-top:34px}}
/* La FAQ etait sur un bleu ciel #DFEEF3 : une troisieme couleur de fond pour une
seule section, la ou la page n'en tient que deux. Elle reprend le creme des
autres sections, l'alternance creme / blanc suffit a la detacher. */
.faq-creme{background:var(--creme-2);color:var(--ocean)}
.faq-creme .titre{color:var(--ocean)}.faq-creme .note{color:var(--bleu-fonce)}
.faq-creme .faq-item{border-bottom:1px solid rgba(18,61,99,.2)}
.faq-creme .faq-q{color:var(--ocean)}.faq-creme .faq-r p{color:var(--encre)}
.faq-creme .faq-q .fx{color:var(--bleu-fonce)}
.fin-album{background:var(--creme-2);color:var(--encre);padding-top:32px;padding-bottom:62px}
.fin-album .b-retrouvailles-photo{margin-top:-66px}
.fin-album .b-retrouvailles-texte>.note{color:var(--bleu-fonce)}
.fin-album .b-retrouvailles-texte h2{color:var(--ocean)}
.fin-album .b-retrouvailles-texte>p,.fin-album .b-question{color:var(--encre)}
.accueil-b .pied{background:var(--ocean-2);padding-top:48px}
.accueil-b .pied-haut{border-top:0;padding-top:0}
/* Les mêmes chiffres, avec une hiérarchie plus nette et un rythme commun. */
/* Le bas etait a 0 : l'ancien tableau de bord portait son propre padding, le
registre qui l'a remplace n'en a pas. La derniere ligne collait au bord. Le bas
est volontairement un peu plus court que le haut : une section s'ouvre plus
largement qu'elle ne se referme. */
.chiffres-soignes{padding:clamp(60px,6.5vw,96px) 0 clamp(48px,5.4vw,80px)}
.chiffres-soignes .c-terrain{opacity:.075;stroke-width:1.2}
.chiffres-soignes .b-don{align-items:center;grid-template-columns:1.1fr 1fr;gap:clamp(44px,7vw,100px)}
/* La colonne de gauche faisait 258 px contre 332 a droite : centree, elle avait
l'air d'avoir glisse. Ses trois elements sont repartis pour atteindre la meme
hauteur (ecart ramene a 26 px). Plus large encore et « pour l'enfance » se
detache du nombre au lieu de le legender. */
.chiffres-soignes .b-don h2{font:500 23px/1.3 var(--font-h);margin-bottom:clamp(18px,2.4vw,34px);color:var(--creme)}
.chiffres-soignes .b-montant{font-size:clamp(72px,9.3vw,132px);letter-spacing:-.055em;font-variant-numeric:lining-nums tabular-nums}
.chiffres-soignes .b-montant>span{font:400 15px/1.5 var(--font-b);margin-bottom:8px}
.chiffres-soignes .b-montant small{font-size:20px;letter-spacing:.01em}
.chiffres-destination{font:500 26px/1.3 var(--font-h);color:var(--creme);margin-top:clamp(18px,3.6vw,52px)}
.chiffres-soignes .b-don-texte h3{font-size:clamp(25px,2.6vw,36px);line-height:1.18;margin-bottom:25px}
.chiffres-part{display:flex;gap:20px;align-items:center;margin-bottom:20px}
.chiffres-part>strong{font:800 55px/1 var(--font-d);letter-spacing:-.045em;color:var(--soleil)}
.chiffres-part>strong>span{font-size:30px;margin-left:3px}.chiffres-part>span{font-size:15px;line-height:1.45}
.chiffres-soignes .b-don-texte>p:not(.chiffres-part){font-size:15px;line-height:1.7;max-width:49ch}
.chiffres-soignes .b-reperes{margin-top:50px;gap:0;padding:28px 0 34px;border-color:rgba(250,245,235,.25)}
.chiffres-soignes .b-reperes>div{padding:0 30px;border-left:1px solid rgba(250,245,235,.22)}
.chiffres-soignes .b-reperes>div:first-child{padding-left:0;border-left:0}
.chiffres-soignes .b-reperes dt{font-size:clamp(30px,3.1vw,44px);letter-spacing:-.03em;line-height:1.15}
.chiffres-soignes .b-reperes dd{font-size:14px;line-height:1.5;margin-top:10px}
/* Chaque membre dispose de son emplacement ; seules les vraies photos s'ouvrent. */
.e-equipe .membre{flex-direction:row;justify-content:flex-start;gap:20px}
.portrait-vignette{position:relative;display:block;width:76px;height:88px;flex:0 0 76px;background:var(--creme-2);border:1px solid rgba(18,61,99,.2);border-radius:3px;overflow:hidden}
a.portrait-vignette{cursor:zoom-in}.portrait-vignette img{display:block;width:100%;height:100%;object-fit:cover}
.portrait-vide{border-style:dashed;background:rgba(18,61,99,.025)}
.portrait-zoom{position:absolute;right:3px;bottom:3px;width:23px;height:23px;display:grid;place-items:center;background:var(--creme);color:var(--ocean);font:500 21px/1 var(--font-b);border-radius:2px}
a.portrait-vignette:focus-visible{outline:3px solid var(--bleu-fonce);outline-offset:4px}
.e-equipe .eq-liste li{justify-content:flex-start;align-items:center;gap:16px;padding:14px 0}
.e-equipe .eq-liste .portrait-vignette{width:60px;height:68px;flex-basis:60px}
.portrait-identite{min-width:0;display:flex;flex-direction:column;gap:5px}
.e-equipe .eq-liste .portrait-identite>span{text-align:left}
.e-equipe .m-infos{min-width:0}
.portrait-dialog{position:fixed;inset:0;margin:auto;border:0;border-radius:4px;padding:46px 18px 18px;background:var(--creme);color:var(--ocean);width:min(520px,calc(100vw - 36px));max-height:calc(100svh - 36px);overflow:auto;box-shadow:0 20px 65px rgba(0,0,0,.3)}
.portrait-dialog::backdrop{background:rgba(13,44,74,.85)}
.portrait-dialog figure{margin:0}.portrait-dialog figure img{display:block;width:100%;height:auto;max-height:65svh;object-fit:contain}
.portrait-dialog figcaption{text-align:center;font:600 32px/1.2 var(--font-h);margin-top:16px}
.portrait-fermer{position:absolute;right:4px;top:2px;width:44px;height:44px;background:none;border:0;color:var(--ocean);font:400 32px/1 var(--font-b);cursor:pointer}
.portrait-fermer:focus-visible{outline:2px solid var(--bleu-fonce);outline-offset:-5px}
body.portrait-ouvert{overflow:hidden}
@media(max-width:900px){.chiffres-soignes .b-don{grid-template-columns:1fr;gap:36px}.chiffres-soignes .b-montant{font-size:clamp(76px,12vw,120px)}.chiffres-soignes .b-reperes{row-gap:24px}.chiffres-soignes .b-reperes>div{flex:1 1 50%;padding:0 24px}.chiffres-soignes .b-reperes>div:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:600px){.fin-album{padding-top:22px;padding-bottom:38px}.fin-album .b-retrouvailles-photo{margin-top:-48px}.accueil-b .pied{padding-top:36px}.chiffres-soignes{padding-top:42px}.chiffres-soignes .b-montant{font-size:clamp(66px,18.5vw,86px)}.chiffres-soignes .b-reperes{margin-top:32px}.chiffres-soignes .b-reperes>div{padding-right:12px}.chiffres-soignes .b-reperes dt{font-size:33px}.chiffres-soignes .b-reperes dd{font-size:13px}.chiffres-part>strong{font-size:48px}.e-equipe .membre{gap:15px;padding:15px}.e-equipe .membre .portrait-vignette{width:64px;height:76px;flex-basis:64px}.e-equipe .m-infos b{font-size:18px}.e-equipe .m-infos span{font-size:14px}.e-equipe .eq-liste li{gap:13px}.e-equipe .eq-liste .portrait-vignette{width:54px;height:64px;flex-basis:54px}}
/* Rapprocher les avis et l’album, sans cumuler deux grands espacements. */
.accueil-b .b-parents{padding-bottom:32px}
.accueil-b .b-parents + .souvenirs{padding-top:40px}
@media(max-width:600px){.accueil-b .b-parents{padding-bottom:24px}.accueil-b .b-parents + .souvenirs{padding-top:28px}}
/* Une ecriture manuscrite est une note laissee a la main : elle ne vaut que si elle
est rare. Il y en avait 18 sur la seule page d'accueil, une par section, donc
l'oeil n'y lisait plus une note mais un gabarit. Il en reste quatre, aux endroits
qui disent vraiment quelque chose. Celles qui portaient une information utile
(le ratio d'encadrement, le nom des deux clans, la legende de l'aftermovie) ne
sont pas supprimees : elles passent en texte courant, a leur vraie place. */
.legende{
display:block;font-family:var(--font-b);font-size:14px;font-weight:600;
letter-spacing:.01em;color:var(--gris);line-height:1.4;
}
.legende-blanche{color:rgba(255,255,255,.82)}
/* ---- Clothing : la page etait une grande photo puis cinq vignettes zoomees.
On ajoute une photo portee, un titre de section, et chaque piece s'ouvre en grand.
Les deux photos utilisees dormaient dans le dossier sans etre affichees nulle part. */
.c-bande{margin:0 0 clamp(34px,4vw,54px)}
.c-bande img{display:block;width:100%;height:clamp(220px,32vw,420px);object-fit:cover;object-position:center 35%}
.c-bande figcaption{font:500 24px/1.3 var(--font-h);color:var(--bleu-fonce);margin-top:12px}
.c-pieces-titre{font-family:var(--font-d);font-size:clamp(24px,2.4vw,34px);font-weight:800;color:var(--ocean);margin:0 0 6px}
.c-pieces-sous{font-size:15px;color:var(--gris);margin:0 0 22px}
.c-piece-btn{
display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;
overflow:hidden;line-height:0;
}
.c-piece-btn img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.c-piece-btn:hover img,.c-piece-btn:focus-visible img{transform:scale(1.04)}
.c-piece-btn:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
/* la mention n'apparait qu'au survol : sur cinq vignettes, cinq etiquettes
permanentes auraient fait cinq boutons au lieu de cinq vetements */
.c-piece-loupe{
position:absolute;left:10px;bottom:10px;padding:7px 12px;border-radius:999px;
background:rgba(18,61,99,.86);color:#fff;font:600 12px/1 var(--font-b);
letter-spacing:.01em;opacity:0;transform:translateY(6px);
transition:opacity .3s ease,transform .3s ease;
}
.c-piece-btn:hover .c-piece-loupe,.c-piece-btn:focus-visible .c-piece-loupe{opacity:1;transform:none}
.c-note-camp>.wrap{display:flex;align-items:center;gap:clamp(20px,3vw,38px);flex-wrap:wrap}
.c-note-photo{width:clamp(140px,22vw,260px);aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);display:block}
.c-note-txt{flex:1 1 300px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
/* La visionneuse */
.visionneuse{
position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
background:rgba(11,26,44,.93);padding:clamp(16px,4vw,48px);
}
.visionneuse[hidden]{display:none}
.v-cadre{margin:0;max-width:min(560px,86vw);text-align:center}
.v-cadre img{display:block;width:100%;max-height:74vh;object-fit:contain;border-radius:var(--r)}
.v-cadre figcaption{color:#fff;font:600 19px/1.4 var(--font-b);margin-top:16px}
/* la grille reste lisible en cinq colonnes, la phrase du camp trouve sa place
ici, ou il y a de la largeur. */
#vTexte{display:block;font:400 15px/1.55 var(--font-b);color:rgba(255,255,255,.78);
margin:7px auto 0;max-width:46ch}
.visionneuse button{
position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;
width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;
display:flex;align-items:center;justify-content:center;
}
.visionneuse button:hover{background:rgba(255,255,255,.24)}
.v-fermer{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.v-prec{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.v-suiv{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
@media(max-width:700px){
.c-pieces{grid-template-columns:repeat(2,minmax(0,1fr))}
.c-piece-loupe{display:none}
.v-prec{left:6px}.v-suiv{right:6px}
}
/* Le second bouton bordé faisait une paire symetrique, donc deux appels de meme
poids. Il devient un lien : une action, et un aparte. */
/* ---- Le registre des versements, a la place du tableau de bord a quatre cases.
Il se lit comme un releve : l'annee, la somme alignee a droite, le destinataire.
C'est la forme que ces chiffres ont dans la vraie vie d'une association. */
.b-registre{margin-top:clamp(36px,4.6vw,62px);padding-top:clamp(26px,3vw,38px);
border-top:1px solid rgba(255,255,255,.18)}
.b-registre-tete{margin:0 0 14px;font:600 13px/1 var(--font-b);letter-spacing:.02em;
color:rgba(255,255,255,.6)}
/* Deux reglages mesures. center et non start : la phrase tient sur trois lignes
face a un tableau de cinq, alignee en haut elle laissait 144 px de vide sous
elle. Et 2.2fr et non 1.35fr : la phrase est plafonnee a 34ch, donc elargir sa
colonne ne la reflowe pas, ca ne fait que creuser. Le tableau prend la place. */
.b-registre-in{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
gap:clamp(24px,4vw,64px);align-items:center}
.b-versements{width:100%;border-collapse:collapse}
.b-versements td{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);
font:500 16px/1.3 var(--font-b);color:rgba(255,255,255,.92);vertical-align:baseline}
.b-versements tr:last-child td{border-bottom:0}
.v-an{width:64px;color:rgba(255,255,255,.5);font-size:14px}
.v-somme{width:118px;font-weight:700;color:var(--soleil);font-variant-numeric:tabular-nums}
.v-qui{padding-left:clamp(14px,2vw,26px)}
/* la phrase passe a droite du registre : sans elle, la moitie droite de la section
restait vide une fois le tableau de bord retire */
.b-echelle{margin:0;max-width:34ch;
font:400 15.5px/1.6 var(--font-b);color:rgba(255,255,255,.7)}
@media(max-width:820px){.b-registre-in{grid-template-columns:1fr;gap:26px}.b-echelle{max-width:62ch}}
@media(max-width:600px){
.v-an{width:48px}.v-somme{width:96px;font-size:15px}
.b-versements td{font-size:15px;padding:10px 0}
}
/* ---- OPTION B : l'etiquette de fabrication.
Une etiquette cousue, pas une carte : liseré fin, fond blanc, la composition
alignee comme sur un vetement. Les capitales de la marque sont justifiees par
l'objet lui-meme, une etiquette de composition s'imprime ainsi. */
.c-etiquette{
margin:clamp(30px,4vw,48px) 0 clamp(34px,4.5vw,56px);
max-width:520px;padding:clamp(22px,2.6vw,30px) clamp(22px,2.8vw,34px);
background:var(--blanc);border:1px solid rgba(18,61,99,.18);
}
.c-etiquette-marque{
margin:0 0 18px;font:700 12px/1 var(--font-b);letter-spacing:.15em;
text-transform:uppercase;color:var(--bleu-fonce);
}
.c-etiquette-lignes{margin:0;display:flex;flex-direction:column;gap:11px}
.c-etiquette-lignes>div{display:flex;gap:14px;align-items:baseline;
padding-bottom:11px;border-bottom:1px solid rgba(18,61,99,.1)}
.c-etiquette-lignes>div:last-child{border-bottom:0;padding-bottom:0}
.c-etiquette-lignes dt{flex:0 0 118px;font:700 14px/1.4 var(--font-b);color:var(--ocean)}
.c-etiquette-lignes dd{margin:0;font:400 14.5px/1.5 var(--font-b);color:var(--gris)}
.c-etiquette-pied{margin:18px 0 0;font:500 20px/1.2 var(--font-h);color:var(--bleu-fonce)}
@media(max-width:560px){
.c-etiquette-lignes>div{flex-direction:column;gap:3px}
.c-etiquette-lignes dt{flex:none}
}
/* La photo portee cadre plus bas et plus haut que les autres bandes : le sujet
est le vetement, qui vit dans la moitie basse de l'image. A 35 % de hauteur
comme les autres, les deux t-shirts etaient coupes au niveau du torse. */
.c-bande--porte img{height:clamp(300px,42vw,560px);object-position:center 58%}
/* ---- Commander : la page n'a qu'une seule action, elle doit se voir ----
Elle prend l'ocean du pied de page et le bouton soleil deja utilises ailleurs,
donc aucune couleur nouvelle. Alignee a gauche, le texte et le bouton cote a
cote : une carte centree aurait fait encart publicitaire. */
.c-commander{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:clamp(20px,3vw,44px);background:var(--ocean);color:#fff;border-radius:var(--r);
padding:clamp(26px,3.4vw,42px) clamp(22px,3.4vw,46px);margin:clamp(34px,4vw,54px) 0 0;
}
.c-commander-txt{flex:1 1 320px}
.c-commander-tete{margin:0 0 9px;font:800 clamp(21px,2.1vw,29px)/1.2 var(--font-d);color:#fff}
.c-commander-corps{margin:0;font:400 16px/1.65 var(--font-b);color:rgba(255,255,255,.84);max-width:56ch}
/* la note reste creme et non soleil : sur ce bloc le jaune appartient au
bouton, qui est la seule action de la page. Deux jaunes se disputeraient l'oeil. */
.c-commander-pied{margin:11px 0 0;font:500 21px/1.25 var(--font-h);color:var(--creme-2)}
.c-commander-lien{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px}
.c-commander-lien svg{flex:0 0 auto}
@media(max-width:600px){
.c-commander{padding:24px 20px}
.c-commander-lien{width:100%;justify-content:center}
}
/* ---- Pages legales ----
Une page legale habillee fait illustration, pas document. Une colonne, du noir
sur creme, aucune animation, aucune decoration. Elle suit la charte du site
sans la jouer. Les trous a remplir sont surlignes pour qu'aucun ne parte en
ligne sans etre vu. */
.legal{background:var(--creme);padding:calc(var(--nav-h,76px) + clamp(38px,5vw,70px)) 0 clamp(56px,7vw,100px)}
.legal>.wrap{max-width:760px}
.legal-fil{font:500 14px/1.5 var(--font-b);color:var(--gris);margin:0 0 22px}
.legal-fil a{color:var(--bleu-fonce)}
.legal h1{font-family:var(--font-d);font-weight:800;font-size:clamp(31px,4vw,48px);
line-height:1.1;letter-spacing:-.015em;color:var(--ocean);margin:0 0 10px}
.legal-maj{font:500 14px/1.5 var(--font-b);color:var(--gris);margin:0 0 30px}
.legal-chapo{font:400 18px/1.7 var(--font-b);color:var(--encre);margin:0 0 40px}
.legal h2{font-family:var(--font-d);font-weight:700;font-size:clamp(20px,2vw,25px);
line-height:1.25;color:var(--ocean);margin:40px 0 12px}
.legal h3{font-family:var(--font-b);font-weight:700;font-size:17px;line-height:1.35;
color:var(--encre);margin:24px 0 7px}
.legal p,.legal li{font:400 16.5px/1.75 var(--font-b);color:var(--encre)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:7px}
.legal a{color:var(--bleu-fonce);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--bleu)}
.legal-table{width:100%;border-collapse:collapse;margin:0 0 18px;display:block;overflow-x:auto}
.legal-table th,.legal-table td{border:1px solid var(--ligne);padding:11px 13px;text-align:left;vertical-align:top;
font:400 15px/1.6 var(--font-b);color:var(--encre)}
.legal-table th{font-weight:700;background:var(--creme-2);white-space:nowrap}
.legal-retour{margin-top:46px;padding-top:24px;border-top:1px solid var(--ligne)}
.a-completer{background:var(--soleil);color:var(--encre);font-weight:700;
padding:1px 7px;border-radius:4px;white-space:nowrap}
.pied-legal{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:600px){.legal h1{font-size:30px}.legal-chapo{font-size:17px}}
/* ================= LA FRISE PASSE A L'HORIZONTALE =================
Sept annees empilees faisaient 5724 px de haut. Une frise chronologique est
horizontale dans la vraie vie : le chemin des annees defile au lieu de
s'empiler. Tout se fait en CSS, le balisage ne bouge pas. */
.d-chronologie{
max-width:none;margin:0;
display:flex;gap:clamp(20px,2.6vw,38px);
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;scroll-padding-left:0;
padding:0 0 20px;
/* la barre de defilement fait partie de l'affordance : on la garde, discrete */
scrollbar-width:thin;scrollbar-color:rgba(6,120,184,.38) transparent;
}
.d-chronologie::-webkit-scrollbar{height:6px}
.d-chronologie::-webkit-scrollbar-thumb{background:rgba(6,120,184,.38);border-radius:99px}
.d-chronologie::-webkit-scrollbar-track{background:rgba(6,120,184,.09);border-radius:99px}
.d-chronologie:focus-visible{outline:2px solid var(--bleu);outline-offset:6px}
.d-annee{
display:flex;flex-direction:column;
flex:0 0 clamp(300px,31vw,440px);
gap:0;scroll-snap-align:start;
}
.d-date{padding-top:0;margin-bottom:30px}
.d-date>span{font-size:clamp(28px,2.4vw,34px)}
/* le trait relie les cartes : il deborde du gap, sauf sur la derniere */
.d-date:after{left:0;right:calc(-1 * clamp(20px,2.6vw,38px));top:auto;bottom:-13px;
width:auto;height:1px}
.d-annee:last-child .d-date:after{right:0}
.d-date:before{left:0;right:auto;top:auto;bottom:-17px}
.d-recit{padding-bottom:0;display:flex;flex-direction:column;flex:1}
.d-recit h3{font-size:clamp(21px,1.95vw,28px);line-height:1.2;margin-bottom:14px}
.d-recit p{font-size:16.5px;line-height:1.72;max-width:none}
.d-contributions{margin-top:17px;padding-top:15px;font-size:14.5px;gap:5px}
/* margin-top:auto cale les sept photos sur une meme ligne, quelle que soit la
longueur du texte au-dessus : c'est ce qui fait lire le rail comme un chemin. */
.d-photo{margin:22px 0 0;max-width:none}
.d-photo img{aspect-ratio:5/4;object-fit:cover}
.d-photo figcaption{font-size:19px;margin-top:11px}
.d-recit>.d-photo{margin-top:auto;padding-top:26px}
/* le voile de droite dit qu'il reste des annees apres celles qu'on voit */
.d-histoire .wrap{position:relative}
/* right:var(--pad) et non 0 : le rail s'arrete au bord du contenu du wrap, pas
au bord de son padding. A right:0 le voile tombait 7 px a cote et ne couvrait
rien. */
.d-frise-bord{transition:opacity .25s ease;position:absolute;right:var(--pad);top:0;bottom:20px;width:clamp(28px,4vw,64px);
pointer-events:none;background:linear-gradient(90deg,rgba(250,245,235,0),var(--creme));
opacity:.9}
@media(max-width:600px){
/* Sur telephone on ne voit qu'une carte a la fois : aligner les sept photos sur
une meme ligne n'apporte rien et creuse un trou de 300 px dans les cartes au
texte court. La photo suit le texte, et chaque carte prend sa hauteur. */
.d-chronologie{align-items:flex-start}
.d-recit>.d-photo{margin-top:0}
.d-annee{padding-left:0;border-left:0;flex:0 0 84vw}
.d-date{margin-bottom:22px}
.d-date:after{display:block}
.d-date:before{left:0;right:auto}
.d-recit p{font-size:16px;line-height:1.72}
.d-recit{padding-bottom:0}
}
/* Au bout du rail il n'y a plus rien apres : le voile devient un flou inutile
pose sur le texte de la derniere annee. Il s'efface. */
.d-frise-bord.efface{opacity:0}
@media(max-width:700px){
/* 17vh donnait 143 px sur un telephone alors que la barre n'en fait que 72 :
une bande morte sous le logo, que rien ne delimite puisque la barre est
transparente sur ces pages. Et la mesure etait fixe pendant que la barre,
elle, descend de la hauteur du bourrelet : l'ecart variait selon l'appareil.
Exprime a partir du meme bourrelet, il vaut 38 px partout. */
.page-hero{padding-top:calc(env(safe-area-inset-top,0px) + 110px)}
.page-hero-img .phi-in{padding-top:calc(env(safe-area-inset-top,0px) + 110px)}
}
@media(max-width:600px){
/* 92 % de la colonne = 322 px sur un 390 : « foot » tombait seul a la ligne.
Sur telephone la mesure ne protege plus rien, la colonne est deja etroite. */
.hero-titre{max-width:none}
}
/* Page de confirmation de l'alerte : texte a gauche, polaroid a droite.
Le [hidden] est force ici parce que .btn pose un display qui l'ecrase :
le bouton restait visible, fige sur « Confirmation… », apres le succes. */
.confirmer [hidden]{display:none!important}
.legal.confirmer>.wrap{max-width:1060px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,6vw,96px);align-items:center}
.confirmer-texte .note{margin-bottom:10px}
.confirmer-texte p{max-width:48ch}
.confirmer-photo{transform:rotate(2.2deg);margin:0;max-width:430px;justify-self:end}
.confirmer-ok>p:first-child{font-size:18px}
.confirmer-attente{margin:22px 0 6px!important;font-weight:600}
.legal .confirmer-suite{list-style:none;margin:0 0 26px;padding:0}
.confirmer-suite li{padding:9px 0;border-bottom:1.5px dashed var(--ligne)}
.confirmer-suite a{color:var(--bleu-fonce);font-weight:600;text-underline-offset:3px}
@media(max-width:780px){
.legal.confirmer>.wrap{grid-template-columns:1fr;gap:42px}
.confirmer-photo{justify-self:center;max-width:340px;transform:rotate(-1.6deg)}
}