/* ============================================================= Insight France — ce que le CSS du Radar ne couvrait pas. ⚠️ Ce fichier vient APRÈS /radar/radar.css, qui porte toute la charte (couleurs, navigation, tuiles, encarts, en-tête). On n'y remet donc ni palette ni typographie : seulement les graphiques, les tables de données et la porte du club. ============================================================= */ /* ---------- l'ossature d'un graphique ---------- */ /* Un bloc = un titre, une phrase qui dit CE QU'ON VOIT, le dessin, puis la source. La phrase n'est pas décorative : un graphique que personne ne sait lire ne mesure rien. */ .viz{margin:0 0 12px} .viz h3{font-size:20px;font-weight:600;margin:0 0 6px;letter-spacing:.01em} .viz .quoi{color:var(--gris);margin:0 0 22px;max-width:70ch;font-size:15.5px} .viz .dessin{position:relative;background:var(--ardoise);border:1px solid var(--trait); border-radius:14px;padding:20px 18px 12px;overflow-x:auto} .viz .dessin svg{display:block;min-width:520px} /* La légende : une pastille de couleur ET un mot. Jamais la couleur seule — un lecteur daltonien, une impression noir et blanc ou un mode contraste forcé, et l'information disparaît. */ .legende-viz{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;padding:0;list-style:none} .legende-viz li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--gris)} .legende-viz i{width:11px;height:11px;border-radius:3px;flex:none} /* La source, sous chaque dessin. Règle de la maison : aucun chiffre publié sans dire d'où il vient ni de quand il date. */ .provenance{font-size:12.5px;color:var(--gris-sourd);margin:14px 0 0;line-height:1.55} .provenance a{color:var(--gris)} /* ---------- l'infobulle ---------- */ /* En position fixed sur , et non dans le conteneur du graphique : à l'intérieur d'un bloc en overflow-x:auto, elle se faisait couper net au bord du cadre. */ .bulle{position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .1s; background:var(--ardoise-clair);border:1px solid var(--trait);border-radius:10px; padding:11px 13px;font-size:13px;line-height:1.5;max-width:290px; box-shadow:0 10px 34px rgba(0,0,0,.55);color:var(--blanc)} .bulle.visible{opacity:1} .bulle .t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-sourd); margin-bottom:7px;font-weight:600} .bulle .l{display:flex;align-items:center;gap:8px;color:var(--gris);margin-top:3px} .bulle .l b{color:var(--blanc);font-family:var(--mono);margin-left:auto;padding-left:12px} .bulle .l i{width:9px;height:9px;border-radius:2px;flex:none} /* ---------- la table de repli ---------- */ /* Repliée, mais toujours présente : c'est elle qui rend la page utilisable au lecteur d'écran et copiable dans un tableur. */ details.repli{margin:18px 0 0;border-top:1px solid var(--trait);padding-top:14px} details.repli>summary{cursor:pointer;font-size:13px;color:var(--gris); list-style:none;display:flex;align-items:center;gap:9px;user-select:none} details.repli>summary::-webkit-details-marker{display:none} details.repli>summary::before{content:"▸";color:var(--soleil);font-size:11px;transition:transform .15s} details.repli[open]>summary::before{transform:rotate(90deg)} details.repli>summary:hover{color:var(--blanc)} .enveloppe-table{max-height:420px;overflow:auto;margin-top:14px;border:1px solid var(--trait);border-radius:10px} table.donnees{width:100%;border-collapse:collapse;font-size:13.5px} table.donnees thead th{position:sticky;top:0;background:var(--ardoise-clair);text-align:left; font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-sourd); font-weight:600;padding:11px 14px;border-bottom:1px solid var(--trait);white-space:nowrap} table.donnees tbody th{text-align:left;font-weight:500;color:var(--blanc);padding:9px 14px; border-bottom:1px solid rgba(46,46,56,.5)} table.donnees td{padding:9px 14px;border-bottom:1px solid rgba(46,46,56,.5);color:var(--gris)} table.donnees td.num{text-align:right;font-family:var(--mono);white-space:nowrap;color:var(--blanc)} table.donnees tbody tr:hover td,table.donnees tbody tr:hover th{background:rgba(255,150,60,.05)} /* ---------- le fait marquant ---------- */ /* Un seul par section, jamais deux : si tout est saillant, rien ne l'est. Le chiffre est en mono pour qu'il se compare à l'œil avec les autres chiffres de la page. */ .saillant{background:linear-gradient(180deg,rgba(255,150,60,.07),rgba(255,150,60,.02)); border:1px solid rgba(255,150,60,.28);border-radius:14px;padding:26px 26px 22px;margin:34px 0 0} .saillant .v{font-family:var(--mono);font-size:clamp(30px,5vw,46px);font-weight:600; letter-spacing:-.02em;color:var(--soleil);line-height:1.05} .saillant p{margin:12px 0 0;color:var(--gris);max-width:68ch} .saillant strong{color:var(--blanc)} .saillant.froid{background:linear-gradient(180deg,rgba(63,216,200,.07),rgba(63,216,200,.02)); border-color:rgba(63,216,200,.28)} .saillant.froid .v{color:var(--numen)} /* ---------- la porte du club ---------- */ .porte{background:var(--ardoise);border:1px solid var(--trait);border-radius:16px;padding:32px 28px} .porte h3{margin-top:0} .porte form{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0;align-items:center} .porte input{flex:1 1 280px;background:var(--nuit);border:1px solid var(--trait);border-radius:10px; color:var(--blanc);font-family:var(--mono);font-size:14px;padding:13px 15px} .porte input:focus{outline:2px solid var(--soleil);outline-offset:1px;border-color:transparent} .porte button{background:var(--soleil);color:#1A0E03;border:none;border-radius:10px; font-size:14.5px;font-weight:600;padding:13px 24px;cursor:pointer;font-family:inherit} .porte button:hover{background:var(--soleil-clair)} .porte button.sobre{background:transparent;color:var(--gris);border:1px solid var(--trait)} .porte button.sobre:hover{color:var(--blanc);border-color:var(--gris-sourd)} .porte .aide{font-size:13px;color:var(--gris-sourd);margin:14px 0 0} #club-message{font-size:13.5px;color:var(--soleil);margin:14px 0 0;min-height:1.2em} .barre-club{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 30px} .barre-club .etiquette{font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--numen);font-weight:600;margin-right:auto} /* ---------- pied de page ---------- */ .pied{border-top:1px solid var(--trait);padding:44px 0 60px;color:var(--gris-sourd);font-size:13.5px} .pied a{color:var(--gris)} .pied ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:7px} /* ---------- avertissement de chargement ---------- */ #erreur{border-left-color:var(--alerte)} @media(max-width:640px){ .viz .dessin{padding:14px 12px 8px;border-radius:12px} .saillant{padding:22px 20px 18px} .porte{padding:24px 20px} } /* ---------- la carte de chaleur ---------- */ /* Les boutons de couche. Ils ne sont pas décoratifs : ce sont eux qui font de la carte un instrument plutôt qu'une image. L'état actif est porté par `aria-pressed`, pour que le lecteur d'écran l'annonce aussi — une couleur seule ne dit rien à qui ne la voit pas. */ .couches{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .couches button{ background:var(--ardoise);border:1px solid var(--trait);border-radius:999px; color:var(--gris);font-family:inherit;font-size:13.5px;font-weight:600; padding:9px 16px;cursor:pointer;transition:background .15s,color .15s,border-color .15s; } .couches button:hover{color:var(--blanc);border-color:var(--gris-sourd)} .couches button[aria-pressed="true"]{ background:var(--soleil);border-color:var(--soleil);color:#1A0E03; } .couches button:focus-visible{outline:2px solid var(--soleil);outline-offset:2px} /* La carte respire : pas de fond de bloc, le tracé se suffit. */ .carte .dessin{background:transparent;border:none;padding:0;overflow:visible} .carte .dessin svg{min-width:0;max-height:74vh;margin:0 auto} .carte .dessin path{cursor:crosshair} /* La légende porte les bornes RÉELLES de chaque classe. Un dégradé sans chiffres se devine, il ne se lit pas. */ .legende-carte{display:flex;flex-wrap:wrap;gap:6px 4px;margin:18px 0 0;font-size:12.5px} .legende-carte span{display:flex;align-items:center;gap:7px;color:var(--gris); padding:3px 12px 3px 3px;white-space:nowrap} .legende-carte i{width:16px;height:16px;border-radius:4px;flex:none; border:1px solid rgba(255,255,255,.08)} .legende-carte .nd{color:var(--gris-sourd)} .source-couche{font-size:13px;color:var(--gris);margin:16px 0 0;line-height:1.55;max-width:78ch} @media(max-width:640px){ .couches button{font-size:12.5px;padding:8px 13px} .carte .dessin svg{max-height:60vh} } /* ---------- la barre de navigation d'Insight ---------- */ /* ⚠️ Cette page porte ONZE entrées, là où Le Radar — dont elle emprunte la feuille de style — en a six. Mesuré : la marque plus tous les liens réclame 930px, alors que `radar.css` ne masque les ancres internes qu'en dessous de 820px. Entre 821 et 930px, la barre passait donc sur DEUX lignes et coupait la marque en deux. On relève le seuil ici, sans toucher à radar.css : Le Radar n'a pas le problème, il n'a pas à en payer le correctif. 📏 Un menu hérité doit être remesuré dès qu'on lui ajoute une entrée. */ @media(max-width:960px){ nav ul li.masquable{display:none} } /* ============================================================ CARTE : LE PANNEAU RETENU Ajoute le 05/09/2026. La carte ne se lisait qu'au survol : sur telephone, ou `pointermove` s'eteint des qu'on releve le doigt, elle n'etait qu'une image coloree. Un clic epingle desormais un departement ici. 📏 Un visuel qui n'existe qu'au survol n'existe pas sur un telephone. */ .detail-carte{margin:16px 0 0;min-height:64px} .detail-carte .invite{margin:0;font-size:13px;color:var(--gris-sourd); border:1px dashed var(--trait);border-radius:10px;padding:14px 16px} .detail-carte .titre{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; border-bottom:1px solid var(--trait);padding-bottom:10px;margin-bottom:12px} .detail-carte .titre b{font-size:17px} .detail-carte .titre span{font-size:13px;color:var(--gris-sourd)} /* Le bouton de fermeture est pousse a droite : c'est la seule sortie au doigt quand on ne veut plus de selection. */ .detail-carte .fermer{margin-left:auto;background:transparent;border:1px solid var(--trait); color:var(--gris);border-radius:8px;width:30px;height:30px;font-size:17px; line-height:1;cursor:pointer;flex:none} .detail-carte .fermer:hover{border-color:var(--gris);color:var(--blanc)} .detail-carte .mesures{display:grid;gap:8px 22px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .detail-carte .mesures div{display:flex;align-items:center;gap:9px;font-size:13.5px; padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)} .detail-carte .mesures i{width:14px;height:14px;border-radius:4px;flex:none; border:1px solid rgba(255,255,255,.08)} .detail-carte .mesures span{color:var(--gris)} /* La valeur est poussee a droite : alignees, huit mesures se comparent d'un coup d'oeil ; collees au libelle, il faut les lire une par une. */ .detail-carte .mesures b{margin-left:auto;font-variant-numeric:tabular-nums} /* Le departement retenu doit se voir sur la carte elle-meme, sinon le panneau parle d'un territoire qu'on ne retrouve pas. */ .carte .dessin path[tabindex]{cursor:pointer} .carte .dessin path:focus-visible{outline:2px solid var(--soleil);outline-offset:2px} /* ================================================== SOMMAIRE PAR THEME La barre du haut ne porte plus que les quatre themes ; le detail des huit sections vit ici. 📏 Une liste de dix liens ne se lit pas, elle se subit. */ .sommaire{display:grid;gap:20px 34px;margin:30px 0 0; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .sommaire b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--soleil);margin-bottom:9px} /* ⚠️ `display:block` explicite : ce sommaire est dans un