/* ═══════════════════════════════════════════════════════════════ Mango Sunday — feuille de style unique Charte validee a l'etape 2. Theme clair unique et assume : c'est l'identite du groupe, il n'y a pas de version sombre. Toutes les couleurs sont peintes explicitement. TROIS REGLES DE COULEUR, non negociables : 1. Sur fond clair, le texte est encre. Jamais mangue ni orange. 2. Sur fond nuit, la mangue devient typographique (7,2:1). 3. La bordure encre de 3 px du bouton n'est pas decorative : un bouton mangue sur sable ne contraste qu'a 1,65:1, la bordure est ce qui satisfait le critere WCAG 1.4.11. ═══════════════════════════════════════════════════════════════ */ /* ── Polices auto-hebergees. Aucun appel a un CDN : un appel dynamique transmettrait l'IP du visiteur a un tiers. ── */ @font-face{ font-family:"Libre Franklin"; font-style:normal; font-weight:400; src:url("/assets/fonts/libre-franklin-400.woff2") format("woff2"); font-display:swap; } @font-face{ font-family:"Libre Franklin"; font-style:normal; font-weight:600; src:url("/assets/fonts/libre-franklin-600.woff2") format("woff2"); font-display:swap; } @font-face{ font-family:"Libre Franklin"; font-style:normal; font-weight:700; src:url("/assets/fonts/libre-franklin-700.woff2") format("woff2"); font-display:swap; } /* Bevan : hors du chemin critique, uniquement sous le pli. */ @font-face{ font-family:"Bevan"; font-style:normal; font-weight:400; src:url("/assets/fonts/bevan-400.woff2") format("woff2"); font-display:swap; } :root{ --creme:#F6EEDC; --sable:#E7D6B4; --encre:#1E1A16; --nuit:#1E1A16; --mangue:#E29A26; --orange:#D2652F; --terre:#B5563A; --terre-encre:#99422A; /* texte d'accent sur fond clair — 5,7:1 */ --brun-encre:#6E523C; /* texte secondaire — 6,2:1 sur creme */ --blanc-casse:#FDFAF2; --nuit-texte:#D6CAB4; --filet:#D8C7A4; --filet-fort:#BFA97F; --deplacement:4px; /* decalage de l'ombre dure — repere d'impression */ --serif:"Bevan",Georgia,"Times New Roman",serif; --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif; /* Grain : bruit SVG de ~300 octets, repete en fond de section, SOUS le texte. Jamais en calque fixe plein ecran. */ --grain: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='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } body{ margin:0; background:var(--creme); color:var(--encre); font-family:var(--sans); font-size:17px; line-height:1.6; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; } @media (max-width:560px){ body{font-size:16px} } img{max-width:100%; height:auto; display:block} /* ── Lien d'evitement ── */ .evitement{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--mangue); color:var(--encre); border:3px solid var(--encre); border-radius:0 0 8px 0; padding:12px 18px; font-weight:700; text-decoration:none; } .evitement:focus{left:0} /* ── Focus : jamais porte par la seule couleur ── */ :focus-visible{ outline:3px solid var(--encre); outline-offset:3px; border-radius:2px; } .nuit :focus-visible,.facade :focus-visible{ outline-color:var(--mangue) } /* ── Placeholders : impossibles a confondre avec du contenu reel ── */ .ph{ display:inline-block; border:2px dashed var(--terre-encre); border-radius:4px; padding:1px 7px 2px; color:var(--terre-encre); font-weight:600; font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:.88em; background:rgba(153,66,42,.06); } .nuit .ph{ color:var(--mangue); border-color:var(--mangue); background:rgba(226,154,38,.1) } /* ── Liens reduits a leur icone ─────────────────────────────── Le nom en clair est remplace par le logo, dessine dans facades.js. L'intitule accessible reste porte par l'aria-label du lien et le title l'affiche au survol : rien ne se perd. La classe est posee par le JS et non par un selecteur global, parce qu'une plateforme sans icone dessinee garde son libelle en texte. L'epaisseur de 2px est celle des bordures du site, pour que les icones parlent le meme langage que les boutons. */ .lien-icone svg{ width:22px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .plateformes a.lien-icone, .reseaux a.lien-icone{ padding:10px 13px } /* Dans une carte de membre, la pastille bordee ajoutait un TROISIEME rectangle arrondi autour d'icones qui en sont deja un — Instagram et Apple Music sont dessines comme des badges carres. On obtenait carte > pastille > logo, une poupee russe. Le chrome est donc retire ici : la carte fait office de conteneur. Les rangees du groupe gardent leurs pastilles : elles se lisent comme un ensemble et n'ont pas de boite parente. La specificite (0,3,0) suffit a battre .reseaux a de la zone ⑦, sans dependre de l'ordre des regles. */ .reseaux-membre a.lien-icone{ border:none; background:none; box-shadow:none; padding:4px; min-height:0; color:var(--brun-encre); } .reseaux-membre a.lien-icone:hover{ background:none; color:var(--encre) } /* 20px + 4px de marge interne = cible de 28px, au-dessus du minimum de 24px du critere WCAG 2.5.8. */ .reseaux-membre .lien-icone svg{ width:20px; height:20px } /* ── Voile d'attente : couvre un bloc volatil tant que l'hydratation n'a pas eu lieu, pour qu'une connexion lente ne montre jamais un libelle de repli en train d'etre remplace. L'etat ne peut PAS se figer, par construction, et il faut les trois garde-fous ensemble : 1. content.js retire data-attente dans un finally, donc meme une exception en pleine hydratation devoile les blocs ; 2. si le script n'arrive jamais (reseau coupe, JS desactive), l'animation « abandon » escamote le voile toute seule au bout de 6 s et decouvre le texte ecrit en dur dans la page ; 3. sous prefers-reduced-motion la regle globale de la fin du fichier ramene les deux animations a .01ms : le voile est donc escamote d'emblee, et ces visiteurs voient simplement le texte de repli puis le vrai contenu. Le voile est OPAQUE : c'est ce qui permet de laisser une chip [ENTRE CROCHETS] dessous sans que le visiteur la voie passer. Ne PAS poser data-attente sur un element deja positionne (.facade-vide) : la regle position:relative ci-dessous a la meme specificite et gagnerait, ce qui deplacerait l'element. ── */ [data-attente]{ position:relative } [data-attente]::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:5px; /* Aplats OPAQUES, et c'est le point : une teinte translucide laisserait lire la chip [ENTRE CROCHETS] de la bio par transparence. Filet et sable plutot que blanc-casse, dont le contraste sur le bouton mangue lisait comme un element casse plutot que comme un chargement. */ background:linear-gradient(90deg, var(--filet) 30%, var(--sable) 50%, var(--filet) 70%); background-size:200% 100%; animation:miroitement 1.5s linear infinite, abandon 6s ease forwards; } .nuit [data-attente]::after{ background:linear-gradient(90deg, rgba(214,202,180,.20) 30%, rgba(214,202,180,.44) 50%, rgba(214,202,180,.20) 70%); background-size:200% 100%; } @keyframes miroitement{ from{ background-position:100% 0 } to { background-position:-100% 0 } } @keyframes abandon{ 0%,88%{ opacity:1 } 100% { opacity:0; visibility:hidden } } /* ═══ TYPOGRAPHIE ═══ */ h1,h2,h3{ margin:0; text-wrap:balance } h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.65rem,5.4vw,2.5rem); line-height:1.06; letter-spacing:-.01em; } h3{ font-family:var(--sans); font-weight:600; font-size:1.1rem; letter-spacing:.01em; margin:34px 0 12px; } p{margin:0 0 1em; max-width:62ch} p:last-child{margin-bottom:0} a{color:var(--terre-encre); text-underline-offset:.18em; text-decoration-thickness:1px} strong{font-weight:700} .chapo{ font-size:1.13em; line-height:1.5; color:var(--brun-encre); max-width:58ch; margin-top:14px; } .nuit .chapo{ color:var(--nuit-texte) } /* ═══ ① PREMIER ÉCRAN ═══════════════════════════════════════ Contrainte dure : le bouton d'ecoute reste visible SANS defilement a 360x640, bandeau ACTIF. Remesure apres le retrait de la baseline : 32 (padding) + 208 (logo) + 60 (bandeau, marge comprise) + 157 (actions) + 40 (padding) = 497 px de hero, le bas du bouton tombant a 392 px, soit 248 px de marge. Les 143 px restants sont laisses volontairement : le bloc suivant depasse et signale la suite. Toute ligne ajoutee ici se paie sur cette marge, et la casse est invisible sur un ecran de bureau. */ .hero{ position:relative; padding:32px 0 40px; background:var(--creme); } /* ── Grain : couche dediee, SOUS le texte ────────────────────── Il doit passer par un pseudo-element : pose directement en background-image, le bruit s'affiche a pleine opacite et noie la couleur de fond. Sur fond clair on multiplie, sur fond nuit on eclaircit — multiplier sur du noir ne se verrait pas. */ .hero::after,.booking::after,.nuit::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:var(--grain); background-repeat:repeat; } .hero::after,.booking::after{ opacity:.06; mix-blend-mode:multiply } .nuit::after{ opacity:.09; mix-blend-mode:screen } .hero-in{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 22px; } .hero-logo{ margin:0 } .hero-logo img{ width:min(208px,58vw); height:auto; border-radius:12px; } .bandeau{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 9px; margin:14px 0 0; padding:9px 14px; min-height:44px; max-width:min(44ch,100%); background:var(--mangue); color:var(--encre); border:2px solid var(--encre); border-radius:8px; font-weight:600; font-size:.95rem; text-decoration:none; box-shadow:3px 3px 0 0 var(--terre); } /* Sans min-width:0, un libelle long force le conteneur flex a deborder au lieu de passer a la ligne. */ .bandeau > span{ min-width:0 } .bandeau::before{ content:"À la une"; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:3px 7px 4px; border:1.5px solid var(--encre); border-radius:3px; background:var(--blanc-casse); white-space:nowrap; flex:none; } .bandeau[hidden]{ display:none } .hero-actions{ margin-top:18px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; } /* ── Bouton : vocabulaire de badge ── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:11px; font-family:var(--sans); font-weight:700; font-size:1.02rem; letter-spacing:.06em; text-transform:uppercase; padding:14px 24px; min-height:56px; border:3px solid var(--encre); border-radius:9px; text-decoration:none; cursor:pointer; background:var(--mangue); color:var(--encre); box-shadow:var(--deplacement) var(--deplacement) 0 0 var(--terre); transition:background .15s ease, box-shadow .15s ease, transform .15s ease; } .btn-primaire:hover{ background:var(--orange); box-shadow:2px 2px 0 0 var(--terre); transform:translate(2px,2px); } .btn-primaire:active{ box-shadow:0 0 0 0 var(--terre); transform:translate(4px,4px) } .btn[disabled]{ opacity:.55; cursor:default; box-shadow:2px 2px 0 0 var(--filet-fort) } .btn .ph{ text-transform:none; letter-spacing:0 } .btn-fantome{ background:transparent; box-shadow:none; border-width:2px; min-height:48px; font-size:.9rem; letter-spacing:.08em; } .btn-fantome:hover{ background:var(--sable) } .tri{ width:0; height:0; flex:none; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--encre); } /* ── Lecteur phare : l'iframe remplace le bouton en place ── */ .lecteur-phare{ width:100%; max-width:520px } /* Le titre du morceau est de longueur inconnue : le bouton occupe toute la largeur disponible et le libelle passe a la ligne plutot que de deborder. */ .lecteur-phare > .btn{ width:100%; max-width:100% } .lecteur-phare > .btn > span{ min-width:0 } .lecteur-phare iframe{ width:100%; height:152px; border:none; border-radius:9px; display:block; background:var(--sable); } /* ═══ MOTIF DE BANDES ═══════════════════════════════════════ Cinq aplats francs, epaisseur croissante et largeur decroissante : l'ordre exact du degrade du logo. */ .bandes{ display:flex; flex-direction:column; gap:3px; max-width:1080px; margin:0 auto; padding:26px 22px; } .bandes i{ display:block; border-radius:1px; transform-origin:left center } .bandes i:nth-child(1){ height:3px; background:var(--mangue); width:100% } .bandes i:nth-child(2){ height:5px; background:var(--mangue); width:88% } .bandes i:nth-child(3){ height:7px; background:var(--orange); width:72% } .bandes i:nth-child(4){ height:9px; background:var(--orange); width:54% } .bandes i:nth-child(5){ height:12px; background:var(--terre); width:34% } /* Progressive enhancement : sans JS, aucun data-anim, les bandes sont visibles. content.js pose data-anim puis .vu. */ .bandes[data-anim] i{ transform:scaleX(0); transition:transform .5s cubic-bezier(.2,.7,.3,1) } .bandes[data-anim].vu i{ transform:scaleX(1) } .bandes[data-anim].vu i:nth-child(2){ transition-delay:.07s } .bandes[data-anim].vu i:nth-child(3){ transition-delay:.14s } .bandes[data-anim].vu i:nth-child(4){ transition-delay:.21s } .bandes[data-anim].vu i:nth-child(5){ transition-delay:.28s } /* ═══ BLOCS ═══ */ .bloc{ padding:34px 0 40px; position:relative } .bloc-in{ max-width:1080px; margin:0 auto; padding:0 22px; position:relative; z-index:1 } .bloc[hidden]{ display:none } /* ── ② Plateformes ── */ .plateformes{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; } .plateformes a{ display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:2px solid var(--encre); border-radius:8px; background:var(--blanc-casse); color:var(--encre); font-weight:600; font-size:.92rem; text-decoration:none; box-shadow:3px 3px 0 0 var(--sable); transition:background .15s ease, box-shadow .15s ease, transform .15s ease; } .plateformes a:hover{ background:var(--mangue); box-shadow:1px 1px 0 0 var(--terre); transform:translate(2px,2px); } /* ── ③ Bande sombre ── */ .nuit{ background:var(--nuit); color:var(--blanc-casse); padding:46px 0 50px; /* La diagonale du logo, utilisee UNE SEULE FOIS sur toute la page. 2,5 degres au maximum, aucun texte a moins de 40 px du bord. */ clip-path:polygon(0 2.2vw, 100% 0, 100% 100%, 0 calc(100% - 2.2vw)); margin:10px 0; } .nuit h2{ color:var(--blanc-casse) } .nuit .bandes{ padding:30px 22px 0 } .cadre-video{ margin-top:22px; max-width:760px } .facade{ position:relative; aspect-ratio:16/9; border:3px solid var(--encre); border-radius:10px; overflow:hidden; background:var(--sable); display:flex; align-items:center; justify-content:center; } .facade-bandes{ position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:4px } .facade-bandes i{ display:block; height:12px } .facade-bandes i:nth-child(1){ background:var(--mangue) } .facade-bandes i:nth-child(2){ background:var(--orange) } .facade-bandes i:nth-child(3){ background:var(--terre) } .facade-soleil{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:clamp(56px,11vw,96px); aspect-ratio:1; border-radius:50%; background:var(--mangue); border:3px solid var(--encre); } .lecture{ position:relative; z-index:2; width:72px; height:72px; border-radius:50%; background:var(--blanc-casse); border:3px solid var(--encre); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--deplacement) var(--deplacement) 0 0 var(--encre); transition:box-shadow .15s ease, transform .15s ease; } .lecture:hover{ box-shadow:2px 2px 0 0 var(--encre); transform:translate(2px,2px) } .lecture[disabled]{ opacity:.5; cursor:default } .tri-lecture{ border-width:12px 0 12px 18px; margin-left:5px } .facade-vide{ position:absolute; z-index:3; bottom:14%; margin:0; font-size:.82rem; } /* ── Vignette reelle de la video ────────────────────────────── Injectee par facades.js, et seulement si le fichier existe : la classe a-vignette n'est posee qu'au chargement effectif de l'image. Le decor abstrait (soleil et bandes) reste donc la tant que la CI n'a pas depose la vignette, et disparait des qu'elle arrive. */ .facade-vignette{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block; } .facade.a-vignette .facade-soleil, .facade.a-vignette .facade-bandes{ display:none } /* Voile sombre : le bouton de lecture est blanc-casse cercle d'encre, son contraste ne doit pas dependre de la photo qui passe dessous. */ .facade.a-vignette::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(30,26,22,.3); pointer-events:none; } .cadre-video iframe{ width:100%; aspect-ratio:16/9; height:auto; display:block; border:3px solid var(--encre); border-radius:10px; background:#000; } /* ── ④ Le groupe ── */ .bio-longue{ margin-top:20px; max-width:64ch; border:2px solid var(--filet-fort); border-radius:8px; background:var(--blanc-casse); } .bio-longue summary{ cursor:pointer; padding:12px 16px; min-height:44px; display:flex; align-items:center; font-weight:600; font-size:.95rem; } .bio-longue > div{ padding:0 16px 14px } .bio-longue[open] summary{ border-bottom:1px solid var(--filet) } .membres{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; max-width:820px; /* align-items:start est LOAD-BEARING depuis que la bio vit dans un
. Par defaut une grille etire ses elements a la hauteur de la rangee : deplier une bio gonflerait TOUTES ses voisines en boites a moitie vides. Invisible tant que les cartes ont le meme contenu, ce qui est le cas du repli statique. */ align-items:start; } /* ENFANT DIRECT, et c'est indispensable. En descendance, la regle atteignait aussi le
  • du