/* ========================================================================= CHRISTOPHE LAMBERT — Digital Magazine DA : noir / anthracite / crème + or champagne Typo : tout en SANS CONDENSÉ (Oswald). Le serif est réservé aux titres éditoriaux (léger, capitales, très espacé) et au monogramme. ========================================================================= */ :root{ --black: #0a0a0b; --ink: #0d0d0f; --anthracite: #141417; --anthracite-2:#1a1a1e; --graphite: #232328; --line: rgba(255,255,255,.09); --white: #f7f5f1; --paper: #eeeae1; --paper-ink: #16150f; --grey: #93939a; --grey-2: #6a6a72; --gold: #c9a961; --gold-soft: #ddc48f; --accent: var(--gold); /* Typo */ --f-display: "Oswald", "Arial Narrow", sans-serif; /* TOUT le display */ --f-edito: "Playfair Display", Georgia, serif; /* titres éditoriaux only */ --f-script: "Great Vibes", "Segoe Script", cursive; /* signature */ --f-body: "Inter", "Helvetica Neue", Arial, sans-serif; --maxw: 1440px; --gut: clamp(20px, 4.2vw, 64px); --nav-h: 96px; --ease: cubic-bezier(.22,.61,.36,1); } /* ------------------------------------------------------------------ Reset */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ font-family:var(--f-body); background:var(--black); color:var(--white); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } ul{ list-style:none; } ::selection{ background:var(--accent); color:var(--black); } /* ------------------------------------------------------------- Typographie */ /* Label doré : « EN CHIFFRES », « À VENIR », « DERNIÈRE STORY »… */ .kicker{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.34em; font-size:.7rem; font-weight:400; color:var(--accent); display:inline-block; } .kicker--muted{ color:var(--grey); } /* Titre de section : condensé, bold, capitales — le cœur de la DA */ .display{ font-family:var(--f-display); text-transform:uppercase; font-weight:600; line-height:.94; letter-spacing:.005em; } .display--xl{ font-size:clamp(2rem,4.4vw,3.4rem); } .display--lg{ font-size:clamp(1.7rem,3.2vw,2.6rem); } .display--md{ font-size:clamp(1.3rem,2.2vw,1.75rem); } /* Titre éditorial : serif LÉGER, capitales, très espacé (usage rare) */ .edito{ font-family:var(--f-edito); font-weight:400; text-transform:uppercase; letter-spacing:.06em; line-height:1.12; } .edito--xl{ font-size:clamp(1.9rem,4vw,3.1rem); } .edito--lg{ font-size:clamp(1.5rem,2.8vw,2.2rem); } .meta{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; font-weight:300; color:var(--grey); } /* Texte courant : JUSTIFIÉ, à la demande de Marc (2026-08-11). La césure automatique est indispensable avec la justification : sur une colonne de 46 caractères, sans elle, le navigateur écarte les mots pour remplir la ligne et creuse des « rivières » blanches dans le paragraphe. `lang="fr"` est déclaré sur , donc les coupures suivent les règles françaises. Le préfixe -webkit- reste nécessaire pour Safari. */ .lead{ font-size:.98rem; color:var(--grey); font-weight:300; max-width:46ch; line-height:1.7; text-align:justify; -webkit-hyphens:auto; hyphens:auto; } /* EXCEPTION — la justification ne vaut que pour le texte courant, pas pour les libellés courts logés dans des cartes étroites. Mesuré sur téléphone : dans une carte de 153 px, « Le média du billard : news, TV, communauté. » justifié creusait un blanc de 86 px, soit 21 fois l'espace normal. Ces micro-textes restent donc au fil du texte. */ .plogo-grid .lead, .feature__body .lead, .lead--court{ text-align:left; } /* Variante claire du texte courant. Le gris par défaut sert à hiérarchiser sous un titre ; quand le paragraphe porte l'information à lui seul, le blanc le remonte au premier plan. */ .lead--clair{ color:var(--white); } /* Lecteur vidéo inséré au clic, À LA PLACE de la vignette. Il doit donc reprendre la boîte de celle-ci — même largeur, même ratio — sinon la page se réorganise au moment du clic. `position:absolute` ne convenait pas : en remplaçant la vignette, le lecteur perd le cadre positionné qu'elle fournissait et se calait sur un ancêtre plus haut. */ .lecteur-video{ display:block; width:100%; aspect-ratio:16/9; border:0; background:var(--anthracite); } /* --------------------------------------------------------------- Layout */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); } .section{ padding-block:clamp(60px,8vw,120px); position:relative; } .section--tight{ padding-block:clamp(40px,5vw,72px); } .section--flush{ padding-block:0; } .section--light{ background:var(--paper); color:var(--paper-ink); } .section--light .kicker{ color:#8d7231; } .section--light .lead{ color:#57544c; } .section--ink{ background:var(--ink); } /* ----------------------------------------------------------------- Nav */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); display:flex; align-items:center; transition:background .5s var(--ease), height .4s var(--ease), border-color .5s; border-bottom:1px solid transparent; } .nav__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav.scrolled{ background:rgba(10,10,11,.86); backdrop-filter:blur(14px); height:74px; border-bottom-color:var(--line); } /* Logo C8L à gauche, puis le nom sur deux lignes */ .brand{ display:flex; align-items:center; gap:clamp(11px,1.1vw,17px); line-height:1; z-index:120; } /* Le titre réagit au survol, comme le monogramme à sa gauche. Trois choses bougent, aucune ne déplace quoi que ce soit : « LAMBERT » passe à l'or, un filet doré se déploie sous le nom, le sous-titre s'éclaircit. Ni padding, ni marge, ni interlettrage : le bandeau ne bouge pas d'un pixel (règle posée après le bug de survol du calendrier). */ .brand__txt{ display:block; position:relative; } .brand__txt::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--accent); transition:width .55s var(--ease); } .brand:hover .brand__txt::after{ width:100%; } .brand__name b{ transition:color .45s var(--ease); } .brand:hover .brand__name b{ color:var(--accent); } .brand__sub{ transition:color .45s var(--ease), opacity .45s var(--ease); } .brand:hover .brand__sub{ color:var(--gold-soft); } @media(prefers-reduced-motion:reduce){ .brand__txt::after,.brand__name b,.brand__sub{ transition:none; } } .brand__logo{ height:clamp(34px,3.3vw,46px); width:auto; flex:none; opacity:.88; transition:opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease); } /* Survol : le monogramme s'allume d'un halo or et se soulève très légèrement */ .brand:hover .brand__logo{ opacity:1; transform:translateY(-2px) scale(1.06); filter:drop-shadow(0 3px 14px rgba(201,169,97,.55)); } .nav.scrolled .brand__logo{ height:clamp(30px,2.7vw,38px); } @media(prefers-reduced-motion:reduce){ .brand__logo,.brand:hover .brand__logo{ transition:none; transform:none; } } .brand__name{ font-family:var(--f-display); font-weight:500; text-transform:uppercase; letter-spacing:.2em; font-size:clamp(.86rem,1.15vw,1.05rem); display:block; color:var(--white); } .brand__name b{ display:block; font-weight:600; letter-spacing:.16em; font-size:1.18em; margin-top:2px; } .brand__sub{ font-family:var(--f-display); font-weight:300; text-transform:uppercase; letter-spacing:.3em; font-size:.5rem; color:var(--accent); display:block; margin-top:9px; } /* Serre, "CHRISTOPHE LAMBERT" et sa ligne de sous-titre se cassaient en deux ou trois lignes. Elles doivent rester intactes : c'est le menu qui cede la place, pas le nom. */ .brand__name,.brand__name b,.brand__sub{ white-space:nowrap; } .nav__menu{ display:flex; align-items:center; gap:clamp(16px,2.1vw,34px); } .nav__link{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.17em; font-size:.72rem; font-weight:300; color:var(--white); position:relative; padding-block:6px; opacity:.85; transition:opacity .3s; white-space:nowrap; /* "Le joueur" ne doit jamais passer a la ligne */ } .nav__link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent); transition:width .4s var(--ease); } .nav__link:hover{ opacity:1; } .nav__link:hover::after,.nav__link[aria-current="page"]::after{ width:100%; } .nav__link[aria-current="page"]{ opacity:1; } /* Burger : visible en permanence, y compris desktop (comme la maquette) */ .burger{ display:block; width:30px; height:15px; position:relative; z-index:120; } .burger span{ position:absolute; left:0; height:1.5px; width:100%; background:var(--white); transition:.35s var(--ease); } .burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:7px; } .burger span:nth-child(3){ top:14px; } body.menu-open .burger span:nth-child(1){ top:7px; transform:rotate(45deg); } body.menu-open .burger span:nth-child(2){ opacity:0; } body.menu-open .burger span:nth-child(3){ top:7px; transform:rotate(-45deg); } /* Panneau plein écran ouvert par le burger */ .overlay-menu{ position:fixed; inset:0; z-index:110; background:rgba(9,9,10,.98); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,2.4vh,26px); opacity:0; pointer-events:none; transition:opacity .45s var(--ease), visibility .45s; /* visibility et pas seulement opacity : sinon les 7 liens du menu fermé restent atteignables à la touche Tab et annoncés par les lecteurs d'écran, alors qu'ils sont invisibles à l'œil. */ visibility:hidden; } body.menu-open .overlay-menu{ opacity:1; pointer-events:auto; visibility:visible; } .overlay-menu a{ font-family:var(--f-display); text-transform:uppercase; font-weight:400; letter-spacing:.16em; font-size:clamp(1.4rem,4vw,2.6rem); color:var(--white); opacity:.9; transition:color .3s, letter-spacing .4s var(--ease); } .overlay-menu a:hover{ color:var(--accent); letter-spacing:.22em; } /* ------------------------------------------------------------- Boutons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:14px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; font-weight:400; padding:14px 30px; border:1px solid rgba(255,255,255,.28); color:var(--white); transition:.4s var(--ease); background:transparent; } .btn:hover{ border-color:var(--accent); color:var(--accent); } /* Variante pleine, pour l'appel à l'action principal (page Partenaires). Elle était appelée dans le HTML mais n'existait pas ici : le bouton « Nous contacter » s'affichait donc comme un bouton ordinaire. */ .btn--solid{ background:var(--accent); border-color:var(--accent); color:var(--black); font-weight:500; } .btn--solid:hover{ background:transparent; color:var(--accent); border-color:var(--accent); } .section--light .btn{ border-color:rgba(0,0,0,.25); color:var(--paper-ink); } .section--light .btn:hover{ border-color:#8d7231; color:#8d7231; } /* Lien souligné or (maquette : « LIRE LA STORY », « DÉCOUVRIR NOS PARTENAIRES ») */ .link-u{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; font-weight:400; display:inline-block; color:var(--white); padding-bottom:8px; border-bottom:1px solid var(--accent); transition:.35s var(--ease); } .link-u:hover{ color:var(--accent); } .section--light .link-u{ color:var(--paper-ink); border-color:#8d7231; } .section--light .link-u:hover{ color:#8d7231; } /* --------------------------------------------------------- Placeholders */ .media{ position:relative; overflow:hidden; background:var(--anthracite); } .media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s var(--ease), filter 1s; } .media.zoom:hover img{ transform:scale(1.045); } .media.bw img{ filter:grayscale(1) contrast(1.06); } .media.bw:hover img{ filter:grayscale(0); } .ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; text-align:center; padding:24px; background:radial-gradient(120% 100% at 32% 22%, #212127 0%, #131316 55%, #0b0b0e 100%); } .ph::before{ content:""; position:absolute; inset:0; opacity:.45; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); } .ph__mono{ font-family:var(--f-edito); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.8rem); color:var(--accent); opacity:.6; line-height:1; letter-spacing:.1em; } .ph__label{ position:relative; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.24em; font-size:.6rem; font-weight:300; color:var(--grey); max-width:26ch; } .ph__tag{ position:relative; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.28em; font-size:.48rem; color:var(--grey-2); border:1px solid var(--line); padding:5px 10px; } /* ==================================================================== HERO */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; } .hero__media{ position:absolute; inset:0; z-index:0; } .hero__media .media{ position:absolute; inset:0; height:100%; } /* Cadrage réglable : style="--focus:70% 40%" sur .hero */ .hero__media img{ object-position:var(--focus, 68% center); } /* L'accueil n'a plus qu'une seule photo et un seul cadrage (2026-08-11) : `--focus` s'applique a toutes les largeurs, il n'y a plus de bascule. */ .hero__media::after{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(7,7,8,.95) 0%, rgba(7,7,8,.72) 32%, rgba(7,7,8,.12) 62%, rgba(7,7,8,0) 80%), linear-gradient(0deg, rgba(7,7,8,.7) 0%, rgba(7,7,8,0) 40%); } .hero__inner{ position:relative; z-index:2; width:100%; } /* Le placeholder du hero se cale à droite pour ne pas passer sous le nom */ .hero__media .ph{ justify-content:center; align-items:flex-end; padding-right:clamp(24px,9vw,140px); } @media(max-width:860px){ .hero__media .ph{ align-items:center; padding-right:24px; } } .hero__name{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; font-size:clamp(3.4rem,12.5vw,10.5rem); line-height:.86; color:var(--white); } .hero__name .first{ display:block; font-size:.46em; font-weight:500; letter-spacing:.055em; margin-bottom:.06em; } .hero__name .last{ display:block; letter-spacing:.02em; } /* Filet sous LAMBERT */ .hero__rule{ height:1px; background:rgba(255,255,255,.45); width:min(46vw,560px); margin-top:clamp(20px,2.6vw,34px); } .hero__tag{ margin-top:20px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.3em; font-size:clamp(.7rem,1.15vw,.86rem); color:var(--gold-soft); font-weight:300; } .hero__play{ margin-top:clamp(32px,4vw,52px); display:inline-flex; align-items:center; gap:18px; } .hero__play .dot{ width:46px; height:46px; border:1px solid rgba(255,255,255,.7); border-radius:50%; display:grid; place-items:center; transition:.4s var(--ease); flex:none; } .hero__play .dot svg{ width:13px; height:13px; fill:var(--white); margin-left:3px; transition:fill .4s; } .hero__play:hover .dot{ background:var(--accent); border-color:var(--accent); } .hero__play:hover .dot svg{ fill:var(--black); } .hero__play span{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; font-weight:300; } .scroll-cue{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:9px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.3em; font-size:.55rem; font-weight:300; color:var(--grey); } .scroll-cue svg{ width:14px; height:8px; stroke:var(--grey); animation:bob 2.2s var(--ease) infinite; } /* Le repere est un lien depuis le 2026-08-11 : il ne se contentait plus d'indiquer qu'on peut defiler, il le fait. */ .scroll-cue{ cursor:pointer; transition:color .35s var(--ease); } .scroll-cue:hover{ color:var(--accent); } .scroll-cue:hover svg{ stroke:var(--accent); } /* La barre de navigation est fixe : sans cette marge, l'ancre amenerait le haut de la section juste dessous, cache derriere elle. */ #suite{ scroll-margin-top:var(--nav-h); } @keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(5px); opacity:1 } } /* ============================================== BANDEAU CHIFFRES + À VENIR */ /* Pleine largeur, image de l'événement à fond perdu à droite */ /* Colonnes de texte centrees dans leur cellule : le reste du vide se repartit au lieu de tomber entierement sous le bouton. */ /* = evenement.jpg 900x1200 */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,34px); margin-top:34px; } .stat__num{ font-family:var(--f-display); font-weight:500; font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1; letter-spacing:.03em; color:var(--white); } .stat__label{ margin-top:12px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.6rem; font-weight:300; color:var(--grey); } .event__date{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.7rem,3vw,2.4rem); color:var(--white); line-height:1; letter-spacing:.03em; } .event__month{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.24em; font-size:.62rem; font-weight:300; color:var(--grey); margin-top:9px; } .event__name{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; font-size:clamp(1.6rem,3vw,2.4rem); line-height:.98; margin-top:24px; letter-spacing:.005em; } .event__place{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.24em; font-size:.66rem; font-weight:300; color:var(--accent); margin-top:14px; } /* ==================================================== STORY + VIDÉO (bleed) */ .duo{ display:grid; grid-template-columns:1.05fr .95fr; background:var(--black); } .duo__story{ position:relative; aspect-ratio:16/9; display:flex; align-items:center; } /* = recit.jpg 1600x900 */ .duo__story .media{ position:absolute; inset:0; } .duo__story::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,8,9,.9) 0%, rgba(8,8,9,.6) 45%, rgba(8,8,9,.05) 100%); } .duo__body{ position:relative; z-index:2; width:100%; padding:clamp(30px,3.6vw,56px); padding-left:max(var(--gut), calc((100vw - var(--maxw))/2 + var(--gut))); } .duo__title{ margin:20px 0 18px; max-width:15ch; } .duo__video{ background:var(--anthracite); padding:clamp(24px,2.6vw,40px); padding-right:max(var(--gut), calc((100vw - var(--maxw))/2 + var(--gut))); display:flex; flex-direction:column; justify-content:center; gap:20px; } /* `width:100%` est indispensable : la vignette n'a que des enfants en position absolue, donc sa largeur propre est nulle. Dans un conteneur flex centre (le centrage mobile du 2026-08-11), elle se reduisait a 0 px de large — et comme sa hauteur vient du ratio, a 0 px de haut. Le bouton de lecture et la legende se retrouvaient superposes. */ .duo__thumb{ position:relative; aspect-ratio:16/9; width:100%; } .duo__caption{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; } .play-badge{ position:absolute; inset:0; display:grid; place-items:center; z-index:3; } .play-badge i{ width:56px; height:56px; border-radius:50%; background:rgba(12,12,14,.3); border:1px solid rgba(255,255,255,.65); backdrop-filter:blur(3px); display:grid; place-items:center; transition:.4s var(--ease); } .play-badge i::after{ content:""; border-left:13px solid var(--white); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px; transition:.4s; } a:hover .play-badge i,.duo__thumb:hover .play-badge i{ background:var(--accent); border-color:var(--accent); } a:hover .play-badge i::after,.duo__thumb:hover .play-badge i::after{ border-left-color:var(--black); } /* ============================================================== Partenaires */ /* Bandeau partenaires de l'accueil, revu le 2026-08-11. Avant : une rangée unique en flex-wrap. Les six logos ne tenaient pas à côté du texte, ils basculaient sous lui, tassés et délavés. Maintenant : deux colonnes franches — le texte à gauche, les logos à droite sur une grille 3 × 2 où chacun a sa case. */ .partners-band__titre{ max-width:13ch; } .partners-band{ display:grid; grid-template-columns:minmax(240px,.85fr) 1.15fr; align-items:center; gap:clamp(30px,5vw,80px); } .partners-logos{ display:grid; grid-template-columns:repeat(3,1fr); align-items:center; justify-items:center; gap:clamp(20px,2.6vw,40px) clamp(18px,2.4vw,38px); } /* Depuis que les logos sont des liens, c'est le qui est la case de la grille. Sans ces règles il se réduirait à la taille de son contenu et le `width:100%` du logo n'aurait plus de référence. */ .partners-logos > a{ display:flex; align-items:center; justify-content:center; width:100%; } /* Logos réels : en gris par défaut, couleur au survol (même langage que les photos bw). Agrandis et moins effacés qu'avant (opacité .62 -> .82) : Marc ne les distinguait pas. */ .partner-logo{ height:clamp(46px,4.4vw,64px); width:100%; max-width:min(100%,140px); object-fit:contain; filter:grayscale(1); opacity:.82; transition:.4s var(--ease); } .partner-logo:hover{ filter:none; opacity:1; } /* Le lockup Taom est un bloc noir plein : on le laisse un peu plus discret */ .partner-logo--block{ height:clamp(38px,3.6vw,52px); } @media(max-width:860px){ /* Sous 860 px le texte repasse au-dessus, les logos gardent leurs 3 colonnes. */ .partners-band{ grid-template-columns:1fr; } } @media(max-width:520px){ .partners-logos{ grid-template-columns:repeat(2,1fr); } } /* Repli texte si un logo manque */ .partner{ font-family:var(--f-display); font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:clamp(.95rem,1.5vw,1.25rem); color:#33302a; opacity:.72; transition:.35s var(--ease); } .partner:hover{ opacity:1; color:#8d7231; } /* Cartes partenaires (page dédiée) */ .plogo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); } .plogo{ background:var(--anthracite); border:1px solid var(--line); aspect-ratio:16/10; display:grid; place-items:center; padding:clamp(20px,3vw,38px); transition:.4s var(--ease); } .plogo:hover{ border-color:var(--accent); background:var(--anthracite-2); } /* Version « -blanc » du logo : pas de filtre destructeur, juste un léger retrait */ .plogo img{ max-height:64px; max-width:100%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.7; transition:.4s var(--ease); } .plogo:hover img{ filter:none; opacity:1; } .plogo__name{ margin-top:14px; } @media(max-width:860px){ .plogo-grid{ grid-template-columns:repeat(2,1fr); } } /* ============================================================== Instagram */ /* Le nombre de colonnes suit le nombre de photos trouvées (--insta-n, posé par le JS). 6 par défaut si le JS ne tourne pas. Puis 3, puis 2 sur petit écran. */ .insta{ display:grid; grid-template-columns:repeat(var(--insta-n,6),1fr); gap:5px; } .insta .media{ aspect-ratio:1; } @media(max-width:900px){ .insta{ grid-template-columns:repeat(3,1fr); } } @media(max-width:520px){ .insta{ grid-template-columns:repeat(2,1fr); } } /* ============================================================== Section head */ .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:26px; margin-bottom:clamp(26px,3.4vw,44px); flex-wrap:wrap; } /* ============================================================== Grilles pages */ .split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4.4vw,68px); align-items:center; } .rule{ height:1px; background:var(--line); border:0; width:100%; } .feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.8vw,40px); } .feature{ position:relative; } /* 16:9 depuis le 2026-08-11 : les vignettes s'allongent et la section « Au quotidien » perd un pavé de hauteur. Le fichier est en 4:3, donc `cover` rogne 25 % de la hauteur — d'ou `--f`, pose par vignette dans le HTML, qui dit quelle part garder. Sans lui, le cadrage centre par defaut coupait la tete sur la photo « Transmission ». */ .feature .media{ aspect-ratio:16/9; } .feature .media img{ object-position:center var(--f, 50%); } .feature__body{ padding-top:22px; } .feature__meta{ display:flex; gap:16px; align-items:center; } .feature--overlay{ min-height:clamp(340px,44vw,520px); display:flex; align-items:flex-end; } .feature--overlay .media{ position:absolute; inset:0; } .feature--overlay::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,8,9,.9), rgba(8,8,9,.04) 68%); } .feature--overlay .feature__body{ position:relative; z-index:2; padding:clamp(26px,3.4vw,44px); } /* ================================================= Header photo des pages Bandeau plein écran avec le titre par-dessus. Photo : photos-header/header-.jpg — 2400×1350 (16:9). Le sujet doit être à droite : le titre occupe la gauche. Recadrage réglable page par page via --focus (ex. style="--focus:70% 40%"). ------------------------------------------------------------------------ */ .page-hero{ position:relative; /* RATIO FIGÉ = la photo est affichée en ENTIER, à toutes les tailles d'écran. Le cadre a exactement le ratio du fichier fourni, donc `cover` ne rogne rien. UN SEUL fichier, header.webp, a toutes les largeurs. Il est affiche en entier (`contain`), donc son format n'a pas d'importance. Passé de 2:1 à 3:1 le 2026-08-11 : en 2:1 la hauteur suivait la largeur sans plafond, soit 953 px de bandeau sur un écran 1920 — il fallait défiler avant de voir la première ligne de contenu. Le plancher de 220 px ne mord qu'en dessous de 660 px de large ; au-delà c'est le ratio qui commande, et la photo est affichée en entier. */ /* `width:100%` est OBLIGATOIRE avec aspect-ratio + min-height : sans lui, des que le plancher depasse largeur/3, le navigateur conserve le ratio en gonflant la LARGEUR au lieu de la hauteur. Mesure : bandeau de 930 px dans une fenetre de 605 px, donc barre de defilement horizontale. */ width:100%; aspect-ratio:3/1; /* `min-content` = la hauteur dont le contenu a besoin, padding compris. C'est le filet de securite : si un titre est trop long pour le ratio, le bandeau s'agrandit au lieu de glisser sous la barre de navigation. Sans lui, le raccourcissement du 2026-08-11 faisait passer le kicker et le haut du titre de Palmares sous la nav des 1440 px. */ /* `min-content` = la hauteur dont le contenu a besoin, padding compris. Filet de securite : si un titre est trop long pour le ratio, le bandeau s'agrandit au lieu de laisser le texte glisser sous la barre de navigation. En CSS valide -- `max(220px, min-content)` ne l'est pas, `max()` n'accepte pas de mot-cle, et toute la declaration etait ignoree. */ /* Plancher mesure : entre 600 et 930 px de large, le 3:1 ne laisse pas assez de place au titre, qui passait sous la barre de navigation. 310 px couvre les titres de 2 lignes. Une page dont le titre en fait 3 (le-joueur) surcharge le plancher avec `--hero-min` sur sa balise, comme elle le fait deja pour `--focus`. Valeurs mesurees, pas estimees. Au-dela de 930 px c'est le ratio qui commande et la photo est entiere. (`min-content` ne marche pas ici : sur un conteneur flex en ligne, il ne remonte pas la hauteur du texte de l'enfant.) */ min-height:var(--hero-min, 310px); display:flex; align-items:flex-end; /* Marges resserrees avec le passage en 3:1 : les anciennes valeurs etaient calees sur un bandeau deux fois plus haut. */ padding-top:calc(var(--nav-h) + clamp(22px,3vw,52px)); padding-bottom:clamp(26px,3.4vw,48px); overflow:hidden; } .page-hero__media{ position:absolute; inset:0; z-index:0; background:var(--black); } .page-hero__media .media{ position:absolute; inset:0; height:100%; } /* PHOTO ENTIÈRE, JAMAIS ROGNÉE (2026-08-11). Le passage en 3:1 coupait 33 % de la hauteur : sur des portraits, ça décapitait le sujet — « on ne voit pas le joueur, il est coupé ». `contain` au lieu de `cover` : la photo est affichée en entier, calée à droite, et occupe la largeur qu'elle veut (67 % pour un fichier 2:1). Le tiers gauche reste noir, c'est la zone du titre — le dégradé fond la limite. Avantage : quel que soit le format que Marc fournit, la photo passe entière ; un futur 2400x800 remplira simplement toute la largeur. `--focus` ne sert donc plus sur ordinateur ; il reste utile sur téléphone, où l'on garde `cover`. */ .page-hero__media img{ object-fit:contain; object-position:right center; } .page-hero__media::after{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(7,7,8,.97) 0%, rgba(7,7,8,.95) 24%, rgba(7,7,8,.62) 40%, rgba(7,7,8,.18) 56%, rgba(7,7,8,0) 68%), linear-gradient(0deg, rgba(7,7,8,.8) 0%, rgba(7,7,8,0) 55%), linear-gradient(180deg, rgba(7,7,8,.75) 0%, rgba(7,7,8,0) 28%); } .page-hero > .container{ position:relative; z-index:2; } /* Le placeholder se cale à droite pour ne pas passer sous le titre */ .page-hero__media .ph{ justify-content:center; align-items:flex-end; padding-right:clamp(24px,8vw,120px); } /* Variante sans photo : bandeau court sur fond noir (repli automatique) */ /* Chapo de page, sorti du bandeau le 2026-08-11. Il respire juste sous la photo, un peu plus grand que le texte courant : c'est l'entree en matiere. */ /* Marge SYMETRIQUE. Elle etait de 0 en bas — je comptais sur la section suivante pour l'espace, mais elle varie (12 px sur Videos, 115 px sur Competitions) et sur Partenaires le fond creme demarrait pile sous la derniere ligne. Resultat : le texte paraissait pousse vers le bas. Le bloc gere maintenant son propre air, et normalise celui d'apres. */ .page-intro{ padding-block:clamp(30px,4vw,58px); } .page-intro .lead{ font-size:clamp(1rem,1.35vw,1.12rem); max-width:60ch; color:var(--grey); } .page-intro + .section{ padding-top:clamp(24px,3vw,44px); } @media(max-width:599px){ .page-intro{ padding-block:clamp(24px,6vw,34px); } } /* Variante sans photo (mentions legales, credits). `aspect-ratio:auto` est indispensable : sans lui le bandeau gardait le 3:1 herite de .page-hero, soit 130 px de haut sur un telephone de 390 px — et comme .page-hero est en `overflow:hidden`, le titre s'y trouvait coupe. Ici la hauteur suit le titre, puisqu'il n'y a pas d'image dont il faille respecter le cadre. */ .page-hero--plain{ min-height:0; display:block; aspect-ratio:auto; overflow:visible; } .page-title{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; font-size:clamp(2.3rem,6.4vw,5rem); line-height:.92; letter-spacing:.005em; margin-top:20px; } /* PLUS AUCUNE BASCULE (2026-08-11, demande de Marc : « je ne veux pas que l'image change quand on change la taille de la page »). Le bandeau garde le MEME fichier, le MEME ratio et le MEME `contain` a toutes les largeurs. Sur telephone il devient simplement plus court, et le plancher `--hero-min` lui garde la hauteur necessaire au titre. Les fichiers header-mobile.webp ne servent plus. */ @media(max-width:860px){ .page-hero__media::after{ background: linear-gradient(90deg, rgba(7,7,8,.9) 0%, rgba(7,7,8,.55) 60%, rgba(7,7,8,.2) 100%), linear-gradient(0deg, rgba(7,7,8,.88) 0%, rgba(7,7,8,0) 62%), linear-gradient(180deg, rgba(7,7,8,.8) 0%, rgba(7,7,8,0) 30%); } .page-hero__media .ph{ align-items:center; padding-right:24px; } } .pal-figures{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:clamp(36px,5vw,64px); } .pal-fig{ border-top:1px solid var(--line); padding-top:20px; } .pal-fig b{ font-family:var(--f-display); font-weight:500; font-size:clamp(2.1rem,4.4vw,3.2rem); display:block; letter-spacing:.03em; } .pal-fig span{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.6rem; font-weight:300; color:var(--grey); } .pal-block{ border-top:1px solid var(--line); padding-block:clamp(30px,4.2vw,52px); display:grid; grid-template-columns:.85fr 2.15fr; gap:clamp(22px,3.6vw,56px); } .pal-block .yr{ font-family:var(--f-display); color:var(--accent); letter-spacing:.24em; font-size:.62rem; font-weight:300; text-transform:uppercase; display:block; margin-bottom:14px; } .pal-list li{ position:relative; padding:11px 0 11px 28px; border-bottom:1px solid var(--line); color:#cfcdc7; font-weight:300; font-size:.95rem; } .pal-list li:last-child{ border-bottom:0; } .pal-list li::before{ content:""; position:absolute; left:0; top:18px; width:7px; height:7px; border:1px solid var(--accent); transform:rotate(45deg); } .pal-list li b{ color:var(--white); font-weight:500; } /* ============================================================== Éditorial */ .edito-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,3vw,48px); } .story .media{ aspect-ratio:3/2; } .story--lead{ grid-column:1 / -1; } /* 16/9 et non 21/9 : le cadre doit avoir EXACTEMENT le ratio du fichier fourni, sinon le navigateur rogne (en 21/9 on perdait 24 % de la hauteur). */ .story--lead .media{ aspect-ratio:16/9; } .story__kicker{ display:flex; gap:13px; align-items:center; margin:20px 0 12px; flex-wrap:wrap; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem; font-weight:300; color:var(--grey); } .story__kicker em{ color:var(--accent); font-style:normal; } .story--lead .display--md{ font-size:clamp(1.9rem,3.8vw,3rem); } .story p{ color:var(--grey); font-weight:300; margin-top:12px; max-width:52ch; font-size:.95rem; } /* ============================================================== Compétitions Un circuit = une image + son texte, en alternance gauche/droite. */ .comp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4.4vw,68px); align-items:center; } .comp .media{ aspect-ratio:16/9; } /* = les fichiers 1600x900 */ .comp--inverse .media{ order:2; } /* Les logos sont fournis en version CLAIRE (blanc sur transparent) : aucun filtre inversant, sinon ils redeviennent noirs et disparaissent sur le fond. */ /* Colonne de texte de la grille .comp. Elle était appelée dans le HTML sans exister ici. min-width:0 est le garde-fou des enfants de grille : sans lui, un titre long élargit la colonne au lieu de se replier (même piège que .duo__story corrigé le 2026-08-06). */ .comp__txt{ min-width:0; } .comp__logo{ height:46px; width:auto; margin-top:16px; opacity:.9; transition:opacity .3s var(--ease); } .comp__logo:hover{ opacity:1; } .comp__liens{ display:flex; flex-wrap:wrap; gap:clamp(16px,2.4vw,34px); margin-top:28px; } .comp__chiffres{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); margin-top:30px; } .comp__chiffres > div{ border-top:1px solid var(--line); padding-top:16px; } .comp__chiffres b{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.8rem,3.4vw,2.6rem); display:block; line-height:1; letter-spacing:.03em; } .comp__chiffres > div > span{ display:block; margin-top:10px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.18em; font-size:.56rem; font-weight:300; color:var(--grey); line-height:1.6; } @media(max-width:860px){ .comp{ grid-template-columns:1fr; gap:24px; } .comp__logo{ height:38px; } .comp--inverse .media{ order:0; } .comp__liens{ display:flex; flex-wrap:wrap; gap:clamp(16px,2.4vw,34px); margin-top:28px; } .comp__chiffres{ grid-template-columns:1fr; gap:0; } .comp__chiffres > div{ padding-block:14px; } } /* ============================================================== Résultats */ /* Colonnes automatiques : le navigateur en met autant qu'il peut, mais jamais plus etroites que la largeur minimale — « 185V-42D » ne peut donc jamais deborder, quelle que soit la taille d'ecran. */ .res-tuiles{ display:grid; gap:clamp(14px,2vw,28px) clamp(14px,2vw,28px); grid-template-columns:repeat(auto-fit, minmax(clamp(140px,20vw,190px), 1fr)); } .res-tuile{ border-top:1px solid var(--line); padding-top:18px; } .res-tuile b{ font-family:var(--f-display); font-weight:500; display:block; line-height:1; font-size:clamp(1.8rem,3.6vw,2.9rem); letter-spacing:.02em; } .res-tuile b span{ color:var(--grey-2); margin-inline:.14em; } .res-tuile b small{ font-size:.4em; margin-left:.06em; color:var(--grey); font-weight:400; } .res-tuile b sup{ font-size:.42em; } /* « > span » et non « span » : sinon le tiret de « 185-42 », qui est un span à l'intérieur du , devient lui aussi un bloc et casse le nombre en trois lignes. */ .res-tuile > span{ display:block; margin-top:12px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.56rem; font-weight:300; color:var(--grey); line-height:1.6; } .res-tuile b{ white-space:nowrap; } .res-titres{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); } .res-titre{ border:1px solid var(--line); padding:clamp(18px,2.2vw,26px); } .res-titre--france{ border-color:rgba(201,169,97,.45); background:rgba(201,169,97,.05); } .res-titre__saison{ display:block; font-family:var(--f-display); font-weight:500; font-size:clamp(1.2rem,2vw,1.6rem); letter-spacing:.03em; } .res-titre__nom{ display:block; margin-top:10px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.56rem; font-weight:300; color:var(--grey); } .res-titre--france .res-titre__nom{ color:var(--accent); } .res-tableau{ font-family:var(--f-display); } .res-ligne{ display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:clamp(10px,1.6vw,24px); align-items:center; padding-block:clamp(14px,1.8vw,20px); border-top:1px solid var(--line); font-size:clamp(.86rem,1.3vw,1.05rem); font-weight:300; } .res-ligne:last-child{ border-bottom:1px solid var(--line); } .res-ligne--entete{ text-transform:uppercase; letter-spacing:.2em; font-size:.56rem; color:var(--grey-2); border-top:0; padding-block:0 14px; } .res-ligne sup{ font-size:.6em; } .res-saison{ font-weight:500; letter-spacing:.03em; } .res-ligne--titre .res-saison{ color:var(--accent); } .res-ligne--titre .res-saison::after{ content:" ★"; font-size:.7em; } @media(max-width:860px){ .res-titres{ grid-template-columns:1fr 1fr; } /* le tableau garde 3 colonnes utiles sur téléphone */ .res-ligne{ grid-template-columns:1.3fr .8fr 1fr; } .res-ligne > :nth-child(4),.res-ligne > :nth-child(5){ display:none; } } /* ============================================================== Calendrier */ .cal-row{ display:grid; grid-template-columns:110px 1fr auto; gap:clamp(18px,3.4vw,44px); align-items:center; padding-block:clamp(20px,2.6vw,32px); border-top:1px solid var(--line); transition:.4s var(--ease); } .cal-row:last-child{ border-bottom:1px solid var(--line); } /* Survol : le filet du haut s'allume en or de gauche à droite, comme sous les liens du menu, et la date passe en or. AUCUN décalage : la version précédente ajoutait du padding, ce qui faisait sauter la ligne de 14 px. */ .cal-row{ position:relative; } .cal-row::after{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--accent); transition:width .55s var(--ease); } .cal-row:hover::after{ width:100%; } .cal-row:hover{ background:linear-gradient(90deg, rgba(201,169,97,.05), transparent 62%); } .cal-date b,.cal-main h3{ transition:color .35s var(--ease); } .cal-row:hover .cal-date b{ color:var(--accent); } .cal-date b{ font-family:var(--f-display); font-weight:500; font-size:1.75rem; display:block; line-height:1; letter-spacing:.03em; } .cal-date span{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.56rem; font-weight:300; color:var(--grey); } .cal-main p{ margin-top:7px; } /* TOUTES LES PASTILLES ONT LA MEME LARGEUR (15 septembre 2026). Elles etaient dimensionnees par leur texte : « Master » faisait 68 px, « Coupe de France » 119 px. Comme elles sont calees a droite, leur bord gauche etait en escalier et l'icone YouTube sautait de 50 px d'une ligne a l'autre. `min-width` en em pour que la largeur suive la taille du texte ; 13.5em couvre « Coupe de France », le libelle le plus long. Les pastilles sont des elements de flex (.cal-fin) ou de grille : elles sont donc deja blocifiees et `min-width` s'y applique. */ .cal-tag{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.58rem; font-weight:300; padding:8px 14px; border:1px solid var(--line); color:var(--accent); white-space:nowrap; min-width:13.5em; text-align:center; } .cal-tag--done{ color:var(--grey-2); } /* Étape déjà disputée : elle reste visible mais s'efface, pour qu'on suive l'avancement de la saison d'un coup d'œil. */ .cal-row--passee{ opacity:.42; } .cal-row--passee:hover{ opacity:.7; background:none; } .cal-row--passee::after{ background:var(--grey-2); } /* filet discret, pas doré */ .cal-row--passee:hover .cal-date b{ color:inherit; } .cal-row--passee .cal-date b{ font-weight:400; } /* ================================================= Photos détourées (fond vert) Le sujet est sur fond transparent : jamais de `cover` (il serait rogné), toujours `contain`, calé en bas pour qu'il repose sur la ligne de base. */ .cutout img{ width:100%; height:auto; object-fit:contain; object-position:bottom center; display:block; } .media--cutout{ background:linear-gradient(180deg,#191a1e,#0f1013); } .media--cutout img{ object-fit:contain; object-position:bottom center; } .media--cutout.bw img{ filter:grayscale(1) contrast(1.05); } .media--cutout.bw:hover img{ filter:none; } /* La découpe POSE sur le bas de la section. `align-items:end` ne suffit pas : la marge basse de `.section` (115 px) la repoussait vers le haut. On la ramène à zéro ici et on la reporte sur la colonne de texte, pour que la citation ne se retrouve pas collée au bord. */ .cutout-band{ padding-bottom:0; } /* Colonnes elargies le 15 septembre 2026. Elles etaient en .72fr / 1.28fr, taillees sur mesure pour debout-2.webp, une silhouette tres etroite (ratio 0,46). Toute photo moins allongee butait sur la largeur de la colonne et s'affichait rapetissee : impossible d'en changer librement. En 1fr / 1.25fr la colonne photo passe de 36 % a 44 % de la largeur, ce qui laisse encore ~600 px a la citation. */ .cutout-band__inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(20px,5vw,70px); align-items:end; } .cutout-band .quote{ text-align:left; margin-inline:0; padding-bottom:clamp(48px,8vw,150px); } /* La decoupe est un plein pied tres allonge (ratio 0,46) : laissee libre, elle imposait 958 px de haut, donc une section de 1073 px quand le bandeau en fait 475 et l'intro 492. On la borne en HAUTEUR ; la largeur suit toute seule pour garder les proportions. `width:fit-content` sur la figure : sinon elle resterait large comme sa colonne et l'ombre portee, calee sur ses 6 %, deborderait la silhouette. */ .cutout-band .cutout{ position:relative; width:fit-content; margin-inline:auto; } .cutout-band .cutout img{ width:auto; max-width:100%; max-height:clamp(360px, 40vw, 560px); } /* ombre portée douce pour que la silhouette ne flotte pas */ .cutout-band .cutout::after{ content:""; position:absolute; left:6%; right:6%; bottom:-2px; height:26px; background:radial-gradient(ellipse at center, rgba(0,0,0,.22), transparent 72%); } @media(max-width:860px){ /* Sur une colonne, le HTML place la découpe AVANT la citation : elle ne pourrait donc pas toucher le bas. On inverse l'affichage — la citation se lit d'abord, la découpe ferme le bloc en posant sur le bord. L'ordre du HTML, lui, ne change pas : un lecteur d'écran garde la séquence d'origine. */ .cutout-band__inner{ grid-template-columns:1fr; gap:24px; } .cutout-band .quote{ order:-1; padding-bottom:0; } .cutout-band .quote{ text-align:center; } /* 280 px etaient justes pour une silhouette etroite ; une decoupe large (Christophe a la table, par exemple) y tombait a 177 px de haut. On borne desormais la largeur ET la hauteur : chaque format trouve sa taille. */ .cutout-band .cutout{ margin-inline:auto; } .cutout-band .cutout img{ max-width:min(100%, 420px); max-height:min(62vh, 460px); } } /* ============================================================== Citation */ .quote{ text-align:center; max-width:860px; margin-inline:auto; } .quote blockquote{ font-family:var(--f-edito); font-weight:400; text-transform:uppercase; letter-spacing:.06em; font-size:clamp(1rem,2.4vw,1.9rem); line-height:1.45; } /* Monogramme CL — le vrai logo (photos/09-logos-lambert/monogramme-cl.webp), fourni en blanc sur transparent : aucun filtre, sinon il disparait. */ .mono{ display:block; height:clamp(58px,7vw,88px); width:auto; margin-inline:auto; opacity:.92; transition:opacity .35s var(--ease); } .mono:hover{ opacity:1; } .quote .mono{ margin-bottom:6px; } /* ================================================================= Footer */ .footer{ background:var(--black); border-top:1px solid var(--line); padding-block:clamp(52px,6.4vw,92px) 30px; } /* Deux colonnes depuis le retrait de la newsletter : la citation à gauche, le monogramme à droite. */ .footer__grid{ display:grid; grid-template-columns:1fr auto; gap:clamp(30px,6vw,90px); align-items:center; } .footer__mono{ justify-self:end; } .footer__quote p{ font-family:var(--f-edito); font-weight:400; text-transform:uppercase; letter-spacing:.055em; font-size:clamp(.86rem,1.25vw,1.05rem); line-height:1.75; color:#dedbd4; } .signature{ display:block; margin-top:16px; font-family:var(--f-script); font-size:1.6rem; color:var(--accent); } .footer__mono{ text-align:right; } .footer p{ color:var(--grey); font-weight:300; font-size:.9rem; } .footer .kicker{ margin-bottom:14px; } .footer__bottom{ margin-top:clamp(40px,5vw,68px); padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.56rem; font-weight:300; color:var(--grey-2); } .footer__bottom a:hover{ color:var(--accent); } /* Réseaux sociaux, sous le monogramme. Discret : gris, petites capitales espacées, l'or n'apparaît qu'au survol — la DA veut peu de couleur. */ .reseaux{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:clamp(16px,2vw,28px); margin-top:clamp(20px,2.4vw,30px); } .reseaux a{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem; font-weight:300; color:var(--grey); transition:color .35s var(--ease); } .reseaux svg{ width:15px; height:15px; fill:currentColor; flex:none; } .reseaux a:hover{ color:var(--accent); } /* --- Bandeau du haut : icônes seules, sans libellé --------------------- Le nom sur deux lignes, six entrées de menu et le burger tiennent déjà la barre : on n'ajoute que les deux glyphes, séparés du menu par un filet vertical. Le trait de séparation est en ::before pour ne pas ajouter d'élément vide dans le HTML. */ .reseaux--nav{ margin-top:0; gap:clamp(12px,1.1vw,18px); align-items:center; flex-wrap:nowrap; flex:none; padding-left:clamp(14px,1.6vw,26px); position:relative; } .reseaux--nav::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:18px; background:var(--line); } .reseaux--nav a{ color:var(--white); opacity:.72; transition:opacity .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); } .reseaux--nav svg{ width:17px; height:17px; } .reseaux--nav a:hover{ opacity:1; color:var(--accent); transform:translateY(-2px); } /* Sous 860 px le menu du bandeau disparaît au profit du burger : les icônes le suivent, sinon elles se retrouvent collées au burger. Elles restent accessibles dans le menu plein écran. */ @media(max-width:860px){ .reseaux--nav{ display:none; } } @media(prefers-reduced-motion:reduce){ .reseaux--nav a:hover{ transform:none; } } /* --- Menu plein écran : icône + libellé, pour le téléphone ------------ */ .reseaux--overlay{ justify-content:center; margin-top:clamp(22px,3vh,38px); padding-top:clamp(20px,2.6vh,30px); border-top:1px solid var(--line); width:min(300px,58vw); } .reseaux--overlay a{ font-size:.66rem; color:var(--grey); } .reseaux--overlay svg{ width:16px; height:16px; } /* .overlay-menu a:hover élargit l'interlettrage : très bien sur un titre de 2,6 rem, mais ici ça décalerait la ligne. On neutralise. */ .reseaux--overlay a:hover{ color:var(--accent); letter-spacing:.2em; } /* ============================================================== Reveal */ .js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .js .reveal.in{ opacity:1; transform:none; } .reveal[data-delay="1"]{ transition-delay:.08s; } .reveal[data-delay="2"]{ transition-delay:.16s; } .reveal[data-delay="3"]{ transition-delay:.24s; } .reveal[data-delay="4"]{ transition-delay:.32s; } @media(prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } .scroll-cue svg{ animation:none; } } /* ============================================================== Responsive */ @media(max-width:1100px){ /* Le bloc « Dernier récit » contient du texte PAR-DESSUS la photo : en une seule colonne, le texte a besoin de plus de hauteur que le 16:9. Garder le ratio figé forcerait la boîte à s'élargir hors de l'écran. */ .duo__story{ aspect-ratio:auto; min-height:clamp(360px,62vw,480px); } .duo > *{ min-width:0; } /* empêche un enfant de grille de pousser la page */ .duo{ grid-template-columns:1fr; } .duo__body,.duo__video{ padding-inline:var(--gut); } .pal-block{ grid-template-columns:1fr; gap:6px; } } @media(max-width:860px){ :root{ --nav-h:76px; } .nav__menu{ display:none; } /* Sur une colonne, la photo est seule sur sa ligne : `height:100%` la reduirait a zero. On lui rend un ratio, plus large qu'en 3:4 pour ne pas manger tout l'ecran. */ .stats{ grid-template-columns:1fr 1fr; gap:30px 20px; } .edito-grid{ grid-template-columns:1fr; } .pal-figures{ grid-template-columns:1fr 1fr; } /* Ces deux grilles n'avaient AUCUN repli mobile : elles restaient sur deux colonnes jusqu'en 360 px, ce qui donnait des colonnes de texte de 131 px (.split) et 150 px (.feature-grid), soit une quinzaine de caracteres par ligne. Trouve le 2026-08-11 en verifiant le rendu du texte justifie. */ .split{ grid-template-columns:1fr; } .feature-grid{ grid-template-columns:1fr; } .footer__grid{ grid-template-columns:1fr; gap:34px; } .footer__mono{ justify-self:start; text-align:left; } .reseaux{ justify-content:flex-start; } .cal-row{ grid-template-columns:76px 1fr; } /* Sur deux colonnes, la pastille passe sous le titre. C'est .cal-fin qui porte la regle depuis le 15 septembre 2026 : la pastille est desormais dans ce conteneur avec l'icone YouTube, elle n'est plus enfant direct de la grille et `grid-column` n'avait plus prise sur elle. Le second selecteur couvre les lignes de repli ecrites en dur dans calendrier.html, qui servent si le JavaScript ne se charge pas : la pastille y est restee enfant direct de la grille. */ .cal-fin,.cal-row > .cal-tag{ grid-column:2; justify-self:start; } } /* ========================================================================= TÉLÉPHONE ET TABLETTE — TOUT EST CENTRÉ ------------------------------------------------------------------------- Demandé par Marc le 2026-08-11 : « il faut tout centrer, c'est trop à gauche ». Sur une colonne unique, l'alignement à gauche hérité de la version deux colonnes laissait tout le contenu tassé d'un côté. Le texte courant (.lead) garde sa justification : il occupe déjà toute la largeur, le centrer casserait la demande de texte justifié. ========================================================================= */ @media(max-width:860px){ /* --- Bandeau chiffres + prochain rendez-vous --- */ .stats{ justify-items:center; } /* --- Blocs éditoriaux --- */ .duo__body,.duo__caption,.feature__body,.story{ text-align:center; } .duo__body .lead,.feature__body .lead{ margin-inline:auto; } .duo__body .link-u,.feature__body .link-u{ display:inline-block; } .duo__video{ align-items:center; } .duo__video .link-u{ align-self:center !important; } .sec-head{ justify-content:center; text-align:center; } /* --- Partenaires (accueil) --- */ .partners-band{ text-align:center; justify-items:center; } .partners-band__titre{ max-width:none; } /* sinon « la » restait seul sur une ligne */ .partners-logos{ justify-items:center; width:100%; } /* --- Partenaires (page) --- */ .plogo__name,.plogo-grid .lead{ text-align:center; } .plogo-grid .lead{ margin-inline:auto; } /* --- Le texte courant se centre lui aussi --- `.lead` porte `text-align:justify`, une propriete posee SUR l'element : elle bat le `text-align:center` herite du parent. Sans cette regle, tout etait centre sauf les paragraphes, qui restaient collos a gauche. */ .lead,.plogo-grid .lead,.feature__body .lead,.page-intro .lead{ text-align:center; } /* --- Pied de page --- */ .footer__grid{ justify-items:center; } .footer__quote{ text-align:center; } .footer__mono{ justify-self:center; text-align:center; } .reseaux{ justify-content:center; } .footer__bottom{ flex-direction:column; align-items:center; gap:12px; text-align:center; } } /* ========================================================================= BANDEAU « SES QUEUES DE BILLARD » (accueil, 2026-08-11) Entre les partenaires et le bandeau Instagram, sur fond encre. Deux colonnes : le texte et le bouton a gauche, le visuel a droite. `auto` sur la colonne de droite = elle prend la largeur naturelle de l'image, la colonne de texte occupe le reste. Aucun ratio impose : le visuel peut etre une personne, une composition ou une queue de billard. ========================================================================= */ /* Le visuel est une decoupe : il POSE sur le bas du bandeau au lieu de flotter au milieu. D'ou `align-items:end`, la marge basse de la section ramenee a zero, et le texte qui garde la sienne pour ne pas coller. */ .boutique{ padding-bottom:0; } /* Le visuel est a GAUCHE, le texte a droite (demande de Marc, 2026-08-11). L'ordre du HTML reste texte puis image : c'est l'ordre de lecture pour un lecteur d'ecran, on ne le bouscule pas pour une raison visuelle. Le placement explicite fait l'inversion. */ .boutique__inner{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,80px); align-items:end; } .boutique__queue{ grid-column:1; grid-row:1; } .boutique__txt{ grid-column:2; grid-row:1; } .boutique__txt{ padding-bottom:clamp(48px,6.5vw,104px); } .boutique__txt .lead{ max-width:44ch; } .boutique__queue{ background:none; display:flex; justify-content:center; align-items:flex-end; } /* `display:block` : sinon la ligne de base d'une image en ligne laisse quelques pixels de vide sous elle, et la decoupe ne pose pas vraiment. */ .boutique__queue img{ display:block; } .boutique__queue img{ width:auto; height:auto; max-width:100%; max-height:clamp(280px,30vw,440px); object-fit:contain; } /* Tant que le visuel manque, la boite se donne une hauteur pour que le visuel de remplacement soit lisible (sinon elle tombe a zero). */ .boutique__queue.media--vide{ min-width:min(100%,420px); min-height:clamp(160px,18vw,260px); background:var(--anthracite); } /* Un sujet tres allonge (une queue seule, 22:1) ne tient pas dans une colonne : le bandeau repasse sur une seule colonne et la queue traverse toute la largeur. La classe est posee par main.js d'apres les proportions reelles du fichier. */ .boutique--longue .boutique__inner{ grid-template-columns:1fr; } .boutique--longue .boutique__queue, .boutique--longue .boutique__txt{ grid-column:auto; grid-row:auto; } .boutique--longue .boutique__queue{ margin-top:clamp(26px,4vw,54px); } .boutique--longue .boutique__queue img{ width:100%; max-height:none; } @media(max-width:860px){ .boutique__inner{ grid-template-columns:1fr; justify-items:center; text-align:center; } .boutique__queue,.boutique__txt{ grid-column:auto; grid-row:auto; } .boutique__txt{ text-align:center; padding-bottom:0; } .boutique__txt .lead{ margin-inline:auto; } .boutique__queue{ margin-top:clamp(26px,5vw,44px); } } /* Sur telephone, une queue entiere tomberait a 15 px de haut : dans ce cas SEULEMENT, gros plan cadre sur le monogramme C8L. Un portrait ou une composition n'est jamais recadre. */ @media(max-width:760px){ .boutique--longue .boutique__queue{ aspect-ratio:6/1; overflow:hidden; width:100%; } .boutique--longue .boutique__queue img{ width:100%; height:100%; max-height:none; object-fit:cover; object-position:70% center; } } /* ========================================================================= EN CHIFFRES + À VENIR (accueil, refondu le 2026-08-11) ------------------------------------------------------------------------- Avant : trois zones côte à côte — chiffres / prochaine date / photo. La photo, figée en 3:4, imposait 537 px de haut et laissait 233 px de vide sous les chiffres, eux-mêmes tassés dans une demi-largeur. Maintenant : deux blocs empilés. Les chiffres prennent toute la largeur, l'événement devient un bloc photo + texte. ========================================================================= */ /* Tout est centré, et les chiffres grossissent : depuis qu'ils occupent toute la largeur, chaque colonne fait 328 px au lieu de 160 — les nombres avaient de la place pour doubler. */ .chiffres .container{ text-align:center; } .chiffres .stats{ margin-top:clamp(28px,3.2vw,46px); justify-items:center; gap:clamp(20px,3vw,46px); } .chiffres .stat__num{ font-size:clamp(3rem,6vw,5.6rem); font-weight:600; } .chiffres .stat__label{ font-size:.72rem; letter-spacing:.26em; margin-top:14px; } .chiffres .kicker{ font-size:.78rem; } .chiffres__cta{ margin-top:clamp(34px,4vw,54px); } /* La photo POSE sur le bas du cadre : marge basse de la section a zero, alignement en bas, et la marge reportee sur la colonne de texte pour qu'elle ne colle pas au bord. Le cadre reste un peu plus haut que la photo grace a la marge du haut. */ /* Marge haute ET basse a zero : le cadre epouse exactement la hauteur de la photo (demande de Marc). Si le texte devenait plus haut que l'image, c'est lui qui commanderait — la photo resterait posee en bas. */ .evenement{ padding-block:0; } .evenement__inner{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,72px); align-items:end; } .evenement__txt{ align-self:center; padding-block:clamp(24px,3vw,40px); } /* La photo est un portrait serré : on la garde à ses proportions plutôt que de l'étirer en bandeau, où il ne resterait qu'un torse sans visage (vérifié en générant les recadrages). */ /* La photo est dimensionnee par sa HAUTEUR, pas par sa largeur : pour que le cadre epouse la photo, il faut qu'elle soit l'element le plus haut. Reglee en largeur (20vw), elle tombait a 273 px a 1024 alors que le texte en demandait 355 — c'est le texte qui commandait, et le cadre depassait la photo de 82 px. Le plancher de 380 px couvre le texte partout. */ .evenement__photo{ height:clamp(380px,30vw,440px); width:auto; aspect-ratio:3/4; } @media(max-width:860px){ /* Sur une colonne, le HTML place la photo AVANT le texte : elle ne pourrait pas toucher le bas. On inverse l'affichage — le texte se lit d'abord, la photo ferme le bloc. L'ordre du code ne bouge pas. */ .evenement__inner{ grid-template-columns:1fr; justify-items:center; text-align:center; } .evenement__txt{ text-align:center; order:-1; padding-bottom:0; } .evenement__photo{ width:min(100%,260px); height:auto; } } @media(max-width:520px){ .chiffres .stats{ grid-template-columns:1fr 1fr; } } /* ========================================================================= BLOC « À VENIR » — VARIANTE PAYSAGE ------------------------------------------------------------------------- Posee par main.js quand le fichier depose est plus large que haut (>= 1,4:1). La photo prend toute la largeur et le texte se pose dessus, comme les bandeaux de page. Place EN FIN DE FEUILLE a dessein : les regles mobiles generiques de `.evenement` viennent plus haut et l'ecraseraient sinon — c'est ce qui faisait remonter le texte au-dessus de la photo entre 761 et 860 px. ========================================================================= */ @media(min-width:761px){ .evenement--paysage .evenement__inner{ grid-template-columns:1fr; gap:0; justify-items:stretch; align-items:stretch; position:relative; } .evenement--paysage .evenement__photo{ grid-area:1/1; width:100%; height:auto; aspect-ratio:auto; max-height:none; } /* `cover` et non `contain` : sur les largeurs moyennes le texte incruste demande plus de hauteur que la photo n'en a. Avec `contain` il restait une bande vide dans le cadre ; avec `cover` la photo remplit et se rogne de quelques pour cent. */ .evenement--paysage .evenement__photo img{ width:100%; height:100%; object-fit:cover; } .evenement--paysage .evenement__inner::after{ content:""; grid-area:1/1; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(7,7,8,.92) 0%, rgba(7,7,8,.78) 34%, rgba(7,7,8,.35) 58%, rgba(7,7,8,0) 78%); } .evenement--paysage .evenement__txt{ grid-area:1/1; z-index:2; order:0; align-self:center; justify-self:start; text-align:left; max-width:min(46ch,56%); padding:clamp(24px,4vw,60px); } } /* Sous 761 px, trop etroit pour superposer : la photo garde toute la largeur et le texte passe dessous. */ @media(max-width:760px){ .evenement--paysage .evenement__photo{ width:100%; height:auto; aspect-ratio:auto; } .evenement--paysage .evenement__txt{ order:1; } } /* ------------------------------------------------------------------ BARRE DU HAUT : 6 entrees depuis l'ajout d'"Accueil" Mesure faite au navigateur : logo + nom + 6 libelles + icones + burger demandent 976 px de contenu. En dessous de 1010 px de fenetre ca ne rentre plus, et c'est le nom du site qui se cassait en trois lignes. On bascule donc sur le burger des 1009 px : le menu plein ecran contient les memes entrees, "Accueil" compris. Entre 1010 et 1120 px on resserre les espaces pour gagner les 60 px qui manquent encore. En fin de feuille pour ne pas etre ecrase par les blocs responsive places plus haut. ------------------------------------------------------------------ */ @media(max-width:1009px){ .nav__menu,.reseaux--nav{ display:none; } } @media(min-width:1010px) and (max-width:1120px){ .nav__inner{ gap:16px; } .nav__menu{ gap:14px; } } /* ------------------------------------------------------------------ VISUEL DU PROCHAIN RENDEZ-VOUS (calendrier) Le cadre etait fige en 4/3. Marc y a depose un portrait 900x1200 : object-fit:cover en jetait 44 % — les mains et la queue de billard passaient a la trappe. Le cadre prend desormais les proportions du fichier (--ratio pose par main.js), donc plus aucun recadrage. Portrait : hauteur bornee, largeur libre, centre dans sa colonne. Paysage : largeur pleine, hauteur libre. ------------------------------------------------------------------ */ .event-visuel{ aspect-ratio:var(--ratio, 4/3); height:clamp(320px,30vw,440px); width:auto; max-width:100%; justify-self:center; } .event-visuel.est-paysage{ width:100%; height:auto; } @media(max-width:760px){ .event-visuel{ width:100%; height:auto; } } /* ------------------------------------------------------------------ BLOC « COMPETITIONS » DE L'ACCUEIL (.duo__story) Le cadre passe de 16/9 a presque carre sur telephone : object-fit rogne alors 39 % de la largeur, et le recadrage centre par defaut coupait le visage en deux, le sujet etant a droite du fichier. --fx / --fy rendent ce point de cadrage reglable depuis le HTML, comme --f sur les vignettes de la page « Le joueur ». ------------------------------------------------------------------ */ .duo__story .media img{ object-position:var(--fx, 50%) var(--fy, 50%); } /* ------------------------------------------------------------------ CALENDRIER : acces aux pages Resultats et Palmares Le bouton et le lien vers le palmares. Depuis le 15 septembre 2026 ils sont en TETE de la section "A venir", dans le .sec-head, a la place du lien vers le calendrier officiel LSEI (variante --tete : pas de marge haute, le .sec-head gere l'espacement). Sur telephone ils passent l'un sous l'autre et se centrent, comme le reste de la page. ------------------------------------------------------------------ */ .cal-cta{ margin-top:44px; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,38px); } /* En tete de section : cale a DROITE, en face du titre. Les deux libelles font 516 px : sous ~1350 px de fenetre ils ne tiennent plus a cote du titre et passent a la ligne. `margin-left:auto` les garde alors alignes a droite plutot que collos sous le titre. */ .cal-cta--tete{ margin-top:0; margin-left:auto; gap:clamp(18px,2.2vw,30px); } @media(max-width:760px){ .cal-cta{ flex-direction:column; align-items:center; gap:24px; } .cal-cta--tete{ margin-inline:auto; } /* le centrage mobile reprend la main */ } /* ------------------------------------------------------------------ CALENDRIER : icone YouTube devant la pastille (15 septembre 2026) Signale que l'epreuve est retransmise, et renvoie vers la chaine LSEI Web TV Sport. L'icone est posee par saison.js, dans un conteneur .cal-fin qui occupe la 3e colonne de .cal-row : la grille reste a trois colonnes, rien d'autre ne bouge. Au repos elle est discrete comme les icones du bandeau du haut ; au survol elle prend le rouge YouTube, pour qu'on la reconnaisse sans que le rouge s'impose dans la palette noir et or. ------------------------------------------------------------------ */ .cal-fin{ display:flex; align-items:center; gap:clamp(10px,1.2vw,16px); } /* La largeur est portee par .cal-yt et non par le SVG : la case vide (.cal-yt--vide, posee sur les epreuves que LSEI ne filme pas) reserve ainsi exactement la meme place, et toutes les pastilles restent alignees. */ .cal-yt{ display:inline-flex; flex:none; width:23px; height:23px; color:var(--grey); opacity:.72; transition:color .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease); } .cal-yt svg{ width:100%; height:100%; fill:currentColor; display:block; } .cal-yt--vide{ pointer-events:none; } .cal-yt:hover,.cal-yt:focus-visible{ color:#ff0000; opacity:1; transform:scale(1.08); } .cal-row:hover .cal-yt{ opacity:1; } /* Epreuve passee : la ligne entiere s'efface, l'icone suit sans se distinguer, mais reste cliquable — c'est justement la que les videos existent. */ .cal-row--passee .cal-yt{ opacity:.85; } @media(prefers-reduced-motion:reduce){ .cal-yt:hover{ transform:none; } } @media(max-width:520px){ .cal-yt{ width:20px; height:20px; } } /* ------------------------------------------------------------------ ADRESSE DE CONTACT EN CLAIR (15 septembre 2026) Le bouton « Nous contacter » est un lien mailto : il ouvre le logiciel de messagerie du visiteur. Beaucoup n'en ont aucun de configure (ils lisent leur courrier dans le navigateur) : le clic ne menait alors nulle part, et l'adresse n'etait ecrite nulle part sur le site. Elle est desormais lisible et copiable. ------------------------------------------------------------------ */ /* Le bouton « Nous contacter » a ete retire le 15 septembre 2026 : cette ligne est desormais le SEUL appel a l'action du bloc, d'ou la marge haute du bouton qu'elle reprend et l'adresse un peu plus grande. ENCADREE le 15 septembre : posee a plat sur le fond, elle se noyait dans la liste au-dessus. Le cadre reprend le langage des vignettes partenaires (.plogo) — fond legerement plus clair que la section, filet discret qui passe a l'or au survol. Le bloc epouse son contenu (`width:fit-content`) pour rester un encart et non une barre. */ .contact-clair{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; width:fit-content; max-width:100%; background:var(--anthracite-2); /* Filet teinte or plutot que le gris neutre de --line : c'est le seul appel a l'action du bloc, il doit se lire comme tel et non comme un simple panneau. */ border:1px solid rgba(201,169,97,.3); padding:clamp(18px,2.2vw,24px) clamp(20px,2.6vw,28px); transition:border-color .4s var(--ease), background-color .4s var(--ease); font-family:var(--f-display); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; font-weight:300; color:var(--grey); } .contact-clair:hover{ border-color:rgba(201,169,97,.62); background:#1e1e23; } .contact-clair > span{ white-space:nowrap; } .contact-clair a{ color:var(--white); text-transform:none; letter-spacing:.02em; font-size:.98rem; border-bottom:1px solid var(--accent); padding-bottom:4px; transition:color .35s var(--ease); overflow-wrap:anywhere; /* l'adresse ne doit jamais elargir la page */ } .contact-clair a:hover{ color:var(--accent); } .copier{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.18em; font-size:.56rem; font-weight:300; color:var(--grey); border:1px solid var(--line); padding:7px 13px; background:none; cursor:pointer; white-space:nowrap; transition:color .35s var(--ease), border-color .35s var(--ease); } .copier:hover,.copier:focus-visible{ color:var(--accent); border-color:var(--accent); } .copier[data-fait]{ color:var(--accent); border-color:var(--accent); } /* Sans JavaScript le bouton ne servirait a rien : main.js le revele. */ .copier{ display:none; } html.js .copier{ display:inline-block; } /* L'adresse dans le pied de page, sur les 7 pages */ .footer__bottom a[href^="mailto"]{ text-transform:none; letter-spacing:.02em; font-size:.68rem; } /* L'encart de contact se centre avec le reste sur telephone et tablette. */ @media(max-width:860px){ .contact-clair{ margin-inline:auto; justify-content:center; text-align:center; } } /* ------------------------------------------------------------------ PAGES MENTIONS LEGALES ET CREDITS (15 septembre 2026) Deux pages de texte pur, sans photo : l'en-tete utilise la variante .page-hero--plain (fond noir, pas de bandeau). La lecture prime, d'ou une colonne bornee en largeur et des blocs bien separes. ------------------------------------------------------------------ */ .legal{ max-width:78ch; } .legal__bloc + .legal__bloc{ margin-top:clamp(34px,4.4vw,58px); padding-top:clamp(30px,4vw,50px); border-top:1px solid var(--line); } .legal__bloc h2{ font-size:clamp(1.3rem,2.4vw,1.9rem); margin-bottom:18px; } /* Liste de definitions : libelle a gauche, valeur a droite. Sur telephone la valeur passe sous son libelle, sinon les deux se tassent. */ .legal__liste{ display:grid; grid-template-columns:minmax(0,15em) minmax(0,1fr); gap:14px clamp(18px,2.4vw,34px); } .legal__liste dt{ font-family:var(--f-display); text-transform:uppercase; letter-spacing:.16em; font-size:.62rem; font-weight:300; color:var(--grey); padding-top:4px; } .legal__liste dd{ color:var(--white); font-weight:300; font-size:.95rem; overflow-wrap:anywhere; } .legal__liste dd a{ border-bottom:1px solid var(--accent); padding-bottom:2px; } .legal__liste dd a:hover{ color:var(--accent); } @media(max-width:600px){ .legal__liste{ grid-template-columns:1fr; gap:4px 0; } .legal__liste dt{ margin-top:14px; } .legal__liste dt:first-child{ margin-top:0; } } /* Marqueur des informations qu'il reste a fournir. VOYANT, volontairement : aucune de ces pages ne doit partir en ligne avec un seul de ces reperes. */ .a-completer{ display:inline-block; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.14em; font-size:.58rem; font-weight:400; color:#f0c05a; background:rgba(240,192,90,.1); border:1px dashed rgba(240,192,90,.55); padding:4px 10px; } /* Formule de politesse qui ferme les conditions d'utilisation. */ .legal__envoi{ margin-top:clamp(34px,4.4vw,58px); padding-top:clamp(30px,4vw,50px); border-top:1px solid var(--line); font-family:var(--f-edito); font-size:clamp(.95rem,1.5vw,1.15rem); line-height:1.7; color:var(--grey); font-style:italic; } /* ------------------------------------------------------------------ TERMES ET CONDITIONS : tous les textes courants justifies (15 septembre 2026) `.lead--court` etait alignee a gauche : c'est une variante creee pour les colonnes etroites, ou la justification creuse des trous. Ici la colonne fait 78ch, elle s'y prete parfaitement. La classe ne sert QUE sur cette page, aucune autre n'est touchee. `hyphens:auto` est indispensable en francais : sans cesure, une ligne justifiee etire les espaces et fait des rivieres blanches. La regle vaut aussi sur telephone, ou le site centre habituellement le texte : sur une page de conditions d'utilisation, des paragraphes longs centres se liraient mal. ------------------------------------------------------------------ */ .legal .lead--court, .legal .pal-list li, .legal__envoi, .page-intro .lead{ text-align:justify; -webkit-hyphens:auto; hyphens:auto; } @media(max-width:860px){ .legal .lead--court, .legal .pal-list li, .legal__envoi{ text-align:justify; } } /* ------------------------------------------------------------------ TERMES ET CONDITIONS : une seule largeur de texte `.lead` bride le texte a 46 caracteres, ce qui est bon pour un chapo pose a cote d'une photo, mais pas ici : les paragraphes faisaient 446 px quand les puces, les listes et la formule de fin en faisaient 680. L'oeil voyait deux colonnes differentes. On leve le plafond, c'est la colonne .legal (78ch) qui commande pour tout le monde. ------------------------------------------------------------------ */ .legal .lead--court{ max-width:none; }