/* ================================================================= signature.css - La signature visuelle des sites publics Crise et Resilience - source unique, ne pas recopier dans un site Trois niveaux, dans cet ordre de chargement : signature.css les valeurs de la marque (ici) marque.css l'en-tete, le pied, le menu, les boutons de navigation .css ce qui n'appartient qu'a ce site Pose par poser-la-signature.py, qui copie ce fichier dans les trois sites. Toute retouche se fait ICI, jamais dans la copie d'un site. Regle : une couleur de la marque ne s'ecrit plus en clair dans un site. Les transparences passent par les triplets RGB : rgba(var(--or-rgb), .45). ================================================================= */ /* L'attribut `hidden` doit cacher, partout et sans exception. Le navigateur le pose avec `display:none`, mais la MOINDRE regle qui declare un display sur le meme element gagne, et l'element reste visible : c'est une regle d'auteur contre une regle du navigateur. Le bouton « Activer le son » de la Radio portait `hidden` et s'affichait quand meme pendant 5,3 s, en clignotant, les clics tombant dans le vide. Chaque site s'en tirait avec des rustines nommees (.a-lecoute[hidden], .partage-fait[hidden], #resultat[hidden]...) : il en manquait forcement une. Ici, la regle vaut pour tout le monde. */ [hidden]{display:none !important} :root { /* === LES SIX COULEURS DE BASE === */ --noir: #070a0f; /* fond des sections sombres */ --noir-2: #090d14; /* fond des sections claires */ --or: #d9ab52; /* l'accent de la marque */ --or-clair: #f6e3aa; /* la partie claire des degrades de titre */ --texte: #e8edf4; /* texte principal */ --texte-doux: #8b97a8; /* texte secondaire */ /* === LEURS TRIPLETS, pour les transparences === Vingt-cinq opacites du meme or trainaient en clair dans les trois sites. Elles s'ecrivent maintenant rgba(var(--or-rgb), .45). */ --or-rgb: 217, 171, 82; --noir-rgb: 7, 10, 15; --noir-2-rgb: 9, 13, 20; /* === LES NUANCES D'OR === Du plus clair au plus fonce. Elles servent aux degrades de titre, aux boutons et aux filets. */ --or-pale: #fdf3d2; /* haut d'un degrade, texte sur or */ --or-tendre: #f9ecc2; --or-moyen: #c99a3f; --or-fonce: #a5762a; /* bas d'un degrade de bouton */ --or-bronze: #a97e33; /* === CE QUI SE POSE SUR DE L'OR === Un brun tres sombre, plus lisible qu'un noir pur sur fond dore. */ --sur-or: #231806; --sur-or-fonce: #170f04; /* === LES NOIRS === Plus profonds que --noir, pour les creux et les bas de degrade. */ --noir-profond: #05070b; --noir-section: #080b11; /* bas du degrade d'une section claire */ --noir-doux: #0a0e15; /* === LES GRIS DE TEXTE === Neuf nuances, du plus lisible au plus efface. C'est trop : elles viennent de trois sites qui ont chacun invente les siennes. Le lot suivant ramene l'echelle a quatre. En attendant, elles portent toutes un nom, aucune n'est en clair. */ --texte-clair: #c3cbd8; --texte-brume: #b6c0cf; --texte-pale: #98a4b6; --texte-acier: #7e879a; --texte-gris: #6f7b8c; --texte-ardoise: #6b7484; --texte-fer: #69737f; --texte-fumee: #5f6a7a; --texte-sourd: #5b6675; /* Ces cinq-la etaient encore ecrites en clair le 2026-08-02, dans les trois sites, chacune une seule fois : c'etaient des gris de plus, inventes au fil de l'eau, qui s'ajoutaient aux neuf ci-dessus sans raison. */ --texte-neige: #f4f7fb; /* le plus clair, sur une image */ --texte-lin: #f2f5f9; --texte-craie: #e4eaf2; --texte-cendre: #dfe6ef; --texte-perle: #d3dae4; --texte-galet: #c9d2de; --texte-etain: #aab3c2; --texte-plomb: #a9b4c2; --texte-zinc: #96a0b1; --texte-mine: #93a0b1; --texte-basalte: #8f9aab; --texte-schiste: #7e8899; --texte-granit: #7b8697; /* === LES NOIRS VOILES === Trois nuances de noir supplementaires trainaient en clair pour les voiles et les fonds semi-opaques. Elles passent par leurs triplets. */ --noir-3-rgb: 6, 9, 14; --noir-4-rgb: 5, 7, 11; --noir-5-rgb: 3, 5, 8; --noir-bleute: #182131; /* === LES COULEURS QUI NE SONT PAS LES NOTRES === Le bleu de LinkedIn est impose par LinkedIn, les deux teintes de reponse du diagnostic disent un resultat. Elles sont nommees pour la meme raison que les autres : une couleur sans nom finit recopiee de travers. */ /* Les cinq dernieres, celles de marque.css : le fond du sceau, les deux bouts de degrade du phenix et du bouton dore, et l'ombre chaude sous le bouton. */ --sceau-fond: #131922; --or-brule: #8a6420; /* bas du degrade du phenix */ --or-miel: #e0bb6b; /* fin du degrade du bouton */ --ombre-or-rgb: 180, 132, 45; --noir-6-rgb: 10, 14, 20; --linkedin: #0a66c2; --linkedin-survol: #1177d8; --reponse-solide: #4f9a4f; --reponse-fragile: #a34b4b; --halo-froid-rgb: 120, 160, 220; --texte-rgb: 232, 237, 244; --texte-doux-rgb: 139, 151, 168; --sur-or-rgb: 23, 15, 4; /* === LES ETATS === Le rouge d'antenne de la radio et les deux teintes de reponse du diagnostic. */ --rouge: #e0533f; --rouge-rgb: 224, 83, 63; --rouge-doux: #e07b7b; --rouge-pale: #f0a396; --vert-doux: #7bc47b; /* === LES NEUTRES === Le blanc et le noir purs ne sont pas des couleurs de marque, mais ils ne s'ecrivent pas en clair non plus : leurs voiles se reglent d'un seul endroit. */ --blanc: #fff; --clair-rgb: 255, 255, 255; --noir-pur: #000; --sombre-rgb: 0, 0, 0; --brun-rgb: 120, 80, 20; --or-clair-rgb: 246, 227, 170; --noir-encre: #0b1017; --noir-nuit: #0d1219; --or-blond: #f0d79b; /* === LES REGLAGES PROPRES A UN SITE === Valeur par defaut ici, un site la redefinit dans son :root s'il en a besoin. C'est le seul endroit ou une difference entre sites est legitime : elle porte un nom et une raison, au lieu d'etre une regle recopiee qui a derive. */ --vignette-marge: 0 -26px 20px; /* doit valoir le padding de la carte porteuse */ /* === LE POCHOIR DU PHENIX === UNE seule image pour les trois sites. Chacun embarquait la sienne : la Radio et l'Academie servaient 21 529 octets (28 708 caracteres) pour un pochoir affiche en 27x39 px, le Magazine avait un fichier phenix.css a part avec une autre resolution. C'est la meme image, elle n'a rien a faire en trois exemplaires. Retenu : 108x156, soit quatre fois la taille d'affichage, ce qu'aucun ecran ne depasse. Seul le canal alpha compte pour un mask CSS, donc l'image est en niveaux de gris + alpha : 5 437 octets au lieu de 21 529. */ --phenix: url('data:image/png;base64,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'); } /* ================================================================= LES POINTS DE BASCULE Releve du 2026-08-02 : douze seuils differents pour trois sites. La tentation etait de tout ramener a quatre. C'EST UNE MAUVAISE IDEE, et la mesure le dit : chaque seuil ne porte qu'une a huit regles, et toutes sont propres au contenu du site (.catalogue casse a 820 px parce que ses colonnes font cette largeur-la, .voix a 760, .bloc-vedette a 860). Un point de bascule n'est pas un choix esthetique, c'est le moment ou un contenu precis cesse de tenir. Le forcer sur une grille commune laisse un trou entre l'ancien seuil et le nouveau. Ce qui doit etre commun, ce sont les seuils des composants COMMUNS, et ils le sont deja : 520, 640 et 900 se retrouvent sur les trois sites, et marque.css porte seul ceux de l'en-tete et du pied. La regle retenue : un seuil propre a un site est legitime s'il porte une raison ecrite. Un seuil sans regle est du code mort et se retire (l'Academie en avait un a 1300 px, vide). Un bloc @media ecrit deux fois se deduplique (le Magazine avait le sien a 1180 px en double, a l'identique). Le seuil du menu telephone reste propre a chaque site : 900 px pour la Radio et le Magazine, 1024 px pour l'Academie dont les six entrees debordent plus tot. ================================================================= */ /* ================================================================= LES COMPOSANTS COMMUNS Ces regles etaient ecrites en trois exemplaires qui avaient derive : sur 23 selecteurs portant le meme nom dans les trois sites, 12 divergeaient. Elles n'existent plus qu'ici. Regle de tranche appliquee le 2026-08-02 : quand deux sites sont d'accord et qu'un seul derive, les deux gagnent. Quand seuls deux sites portent la regle et qu'ils divergent, le Magazine gagne : c'est celui qui a passe une revue de code complete. Chaque ecart tranche porte sa note. ================================================================= */ /* Le surtitre a filets */ /* sans centrage : il est pose par .entete-section .surtitre */ .surtitre{display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0; font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--or); margin-bottom:20px} /* centre uniquement dans une entete de section : ailleurs il reste a gauche, c'est ce qui permet a l'Academie de garder ses surtitres alignes */ .entete-section .surtitre,.final .surtitre{justify-content:center} .surtitre::before{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--or))} .surtitre::after{background:linear-gradient(90deg,var(--or),transparent)} /* L en-tete d une section */ /* Academie alignee : elle avait 6 px de marge en plus */ .entete-section{position:relative;max-width:1000px;margin:0 auto clamp(40px,5vw,60px);text-align:center} /* Academie alignee : 16 px et non 18 */ .entete-section h2{font:400 clamp(28px,3.6vw,45px)/1.18 Georgia,"Times New Roman",serif; letter-spacing:-.4px;margin-bottom:16px} .entete-section h2 em{font-style:italic; background:linear-gradient(100deg,var(--or-pale),var(--or) 55%,var(--or-fonce)); -webkit-background-clip:text;background-clip:text;color:transparent} /* Academie alignee : 15,5 px / 1,72 / 580 px */ .entete-section p{font-size:15.5px;line-height:1.72;color:var(--texte-doux);max-width:580px;margin:0 auto} /* Le chapo */ /* Academie alignee : 15,5 px et non 16 */ .chapo{font-size:15.5px;line-height:1.74;color:var(--texte-doux); max-width:520px;margin-bottom:30px;text-wrap:balance} .phrase{display:block;text-wrap:balance} /* Le bloc final */ /* Academie alignee : padding clamp(84,9vw,130) */ .final{position:relative;overflow:hidden;text-align:center; background:linear-gradient(180deg,var(--noir) 0%,var(--noir-profond) 100%); padding:clamp(84px,9vw,130px) clamp(28px,5vw,80px); border-top:1px solid rgba(var(--clair-rgb),.05)} /* Academie alignee : clamp(28,4vw,50), suit l echelle des titres */ .final h2{position:relative;max-width:820px;margin:0 auto 20px; font:400 clamp(28px,4vw,50px)/1.16 Georgia,serif;letter-spacing:-.5px} .final h2 em{font-style:italic; background:linear-gradient(100deg,var(--or-pale),var(--or) 55%,var(--or-fonce)); -webkit-background-clip:text;background-clip:text;color:transparent} .final p{position:relative;max-width:520px;margin:0 auto 34px;font-size:15.5px;line-height:1.74;color:var(--texte-doux)} .final::before{content:"";position:absolute;left:50%;bottom:-46%;transform:translateX(-50%); width:min(1100px,120%);height:100%;pointer-events:none; background:radial-gradient(ellipse at center,rgba(var(--or-rgb),.16),transparent 66%)} .final::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%); width:min(560px,80%);height:1px; background:linear-gradient(90deg,transparent,rgba(var(--or-rgb),.55),transparent)} /* La vignette */ /* Academie alignee : 180 px de haut et non 190. La MARGE, elle, n'est pas de la signature : elle doit valoir le padding de la carte qui porte la vignette, et ce padding n'est pas le meme partout. Elle se regle donc par site avec --vignette-marge, sans quoi l'image cesse de toucher le bord de la carte et un liseré apparait. */ .vignette{position:relative;margin:var(--vignette-marge);height:180px; overflow:hidden;background:var(--noir-profond)} /* un seul cadrage et un seul filtre pour les trois */ .vignette img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;display:block; filter:saturate(.6) brightness(.62) contrast(1.05) sepia(.16); transform:scale(1.02); transition:filter .55s ease,transform .8s cubic-bezier(.2,.8,.2,1)} .vignette::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(var(--noir-2-rgb),.25) 0%,rgba(var(--noir-2-rgb),.08) 34%,rgba(var(--noir-2-rgb),.74) 76%,var(--noir-doux) 100%)} /* Les liens et les appels */ .tout-voir{display:flex;justify-content:center;margin-top:clamp(38px,4vw,54px)} .lien-in{display:inline-flex;align-items:center;gap:9px;text-decoration:none; font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--or-clair); transition:color .3s ease} .lien-in svg{width:14px;height:14px;fill:currentColor} .lien-in:hover{color:var(--blanc)} /* Le fil d ariane */ /* l Academie l avait plus sombre et moins lisible */ .fil{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:clamp(22px,3vw,32px); font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--texte-brume)} /* or clair au repos, comme .lien-in */ .fil a{color:var(--or-clair);text-decoration:none;transition:color .25s ease} /* blanc au survol : l Academie faisait l INVERSE */ .fil a:hover{color:var(--blanc)} /* Le titre de page */ /* Une seule echelle : clamp(30,4.4vw,54). L'Academie avait un h1 nu a 66 px, hors echelle, alors que son .banniere h1 etait deja a 54. */ h1{font:400 clamp(30px,4.4vw,54px)/1.1 Georgia,"Times New Roman",serif; letter-spacing:-.6px;margin-bottom:16px;max-width:640px} /* Le titre d'un ecran d'ouverture monte d'un cran. Ce n'est pas une entorse : une accroche pleine page et un titre de page interne n'ont pas le meme role, et la hierarchie doit se voir. Les deux tailles sont nommees ici plutot que laissees a l'initiative de chaque site. */ .hero h1{font-size:clamp(38px,5.2vw,66px);line-height:1.08;max-width:none} h1 em{font-style:italic; background:linear-gradient(100deg,var(--or-pale),var(--or) 55%,var(--or-fonce)); -webkit-background-clip:text;background-clip:text;color:transparent} /* Les etiquettes de tete */ .meta{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:13px} .meta span{padding:4px 11px;border:1px solid rgba(var(--clair-rgb),.12);border-radius:999px; font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--texte-pale)} .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* Les deux fonds de section */ section.claire{background:linear-gradient(180deg,var(--noir-2) 0%,var(--noir-section) 100%)} section.sombre{background:var(--noir)} /* La carte, base commune de tous les blocs cliquables Le Magazine et la Radio l'appelaient .marque-carte, l'Academie .tuile. Ce sont deux objets differents (l'un porte une vignette, l'autre est en 3/4 avec un fond), mais ils partagent la meme peau : bordure fine, rayon de 3 px, colonne, survol qui dore le contour et souleve de 5 px. Cette peau vit ici, les deux variantes ne portent plus que ce qui les distingue. Une classe .carte dans le HTML, plus la variante. */ .carte{position:relative;overflow:hidden;display:flex;flex-direction:column; text-decoration:none;color:inherit; border:1px solid rgba(var(--clair-rgb),.08);border-radius:3px; transition:border-color .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)} /* l'Academie soulevait de 6 px et dorait a .36 : aligne sur les deux autres */ .carte:hover{border-color:rgba(var(--or-rgb),.34);transform:translateY(-5px)} /* La carte d'ecosysteme, avec sa vignette */ .marque-carte{padding:0 26px 26px; background:linear-gradient(165deg,rgba(var(--clair-rgb),.03),transparent)} .marque-carte .vignette{height:170px;margin:0 -26px 22px} .marque-carte b{font:400 21px/1.24 Georgia,serif;margin-bottom:7px} .marque-carte span{font-size:13.4px;line-height:1.66;color:var(--texte-doux);margin-bottom:16px} .marque-carte u{text-decoration:none;font-size:10.5px;letter-spacing:2.2px; text-transform:uppercase;color:rgba(var(--or-rgb),.85);margin-top:auto} .marque-carte:hover .vignette img{filter:saturate(1) brightness(.9) contrast(1.02) sepia(0); transform:scale(1.07)} /* Les praticiens */ .equipe{position:relative;display:grid;gap:26px;max-width:1180px;margin:0 auto; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))} .praticien{position:relative;display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:center; padding:30px 32px 30px 26px; border:1px solid rgba(var(--clair-rgb),.07);border-radius:3px; background:linear-gradient(150deg,rgba(var(--clair-rgb),.032) 0%,rgba(var(--clair-rgb),.006) 52%,transparent 100%); transition:border-color .4s ease} .praticien h3{font:400 22px/1.2 Georgia,"Times New Roman",serif;margin-bottom:6px} .praticien p{font-size:13.8px;line-height:1.7;color:var(--texte-doux);margin-bottom:18px} .praticien:hover{border-color:rgba(var(--or-rgb),.3)} .praticien>div:last-child{align-self:start;padding-top:4px} .portrait{position:relative;width:190px;height:210px} .portrait img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;object-position:bottom; filter:saturate(.9) contrast(1.02) drop-shadow(0 12px 26px rgba(var(--sombre-rgb),.6))} .portrait::before{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%); width:174px;height:174px;border-radius:50%; background:radial-gradient(circle at 50% 40%,rgba(var(--or-rgb),.2),rgba(var(--or-rgb),.05) 52%,transparent 70%)} .portrait::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%); width:150px;height:12px;border-radius:50%; background:radial-gradient(ellipse,rgba(var(--sombre-rgb),.6),transparent 70%)} .role{display:block;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase; color:var(--or);margin-bottom:14px} /* Au telephone, la photo gardait ses 190 px : sur 390 px de large il restait une colonne d'environ 130 px, ou le titre se coupait en deux et la fonction en capitales tombait mot par mot. Le portrait passe donc AU-DESSUS du texte, qui reprend toute la largeur. Mesure sur un cadre de 390x844. */ @media(max-width:640px){ .praticien{grid-template-columns:1fr;gap:16px;padding:26px 22px;justify-items:center} .praticien>div:last-child{padding-top:0;width:100%} .portrait{width:150px;height:170px} .portrait::before{width:138px;height:138px} .portrait::after{width:118px} .role{letter-spacing:1.3px;font-size:11px} }