/* ============================================================ NOTICE PUBLIQUE — feuille de style commune de la collection Thème par page : (sans classe : thème de la marque, vert Vitale + or) ============================================================ */ /* ============ NOTICE PUBLIQUE · DESIGN SYSTEM ============ Palette inspirée de la carte Vitale (vert + puce dorée) et du papier administratif français. */ :root{ --papier:#F6F4ED; /* fond papier */ --carte:#FFFFFF; /* cartes */ --encre:#20251F; /* texte principal */ --encre-2:#5A6055; /* texte secondaire */ --vert:#0E7A4F; /* vert carte Vitale — accent principal */ --vert-fonce:#0A5236; --vert-pale:#E3F0E8; --puce:#D9A521; /* or de la puce */ --puce-pale:#F7ECD2; --bleu:#2F63A7; /* Assurance maladie (datavis) */ --bleu-pale:#E4ECF6; --corail:#CF5F41; /* reste à charge (datavis) */ --corail-pale:#F8E6DF; --ligne:#DAD6C8; --radius:14px; --nav-fond:rgba(246,244,237,.92); --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'Public Sans',system-ui,sans-serif; --display:'Archivo Black',sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{max-width:100%;overflow-x:hidden} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } body{ font-family:var(--sans);color:var(--encre);background:var(--papier); line-height:1.65;font-size:17px; background-image:radial-gradient(var(--ligne) .8px,transparent .8px); background-size:26px 26px; } a{color:var(--vert);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--vert-fonce)} :focus-visible{outline:3px solid var(--puce);outline-offset:2px;border-radius:4px} .conteneur{max-width:880px;margin:0 auto;padding:0 20px} /* ---- Navigation ---- */ .nav{position:sticky;top:0;z-index:50;background:var(--nav-fond);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)} .nav-inner{max-width:880px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .logo{font-family:var(--display);font-size:15px;letter-spacing:.02em;color:var(--encre);text-decoration:none;display:flex;align-items:center;gap:8px} .logo .pastille{width:14px;height:14px;border-radius:50%;background:var(--vert);display:inline-block;position:relative} .logo .pastille::after{content:"";position:absolute;inset:4px;border-radius:2px;background:var(--puce)} .nav-liens{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto} .nav-liens a{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);text-decoration:none;padding:5px 8px;border-radius:6px} .nav-liens a:hover{background:var(--vert-pale);color:var(--vert-fonce)} /* ---- Hero ---- */ .hero{padding:72px 0 56px;position:relative} .sur-titre{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--vert);margin-bottom:18px} h1{font-family:var(--display);font-size:clamp(38px,7vw,68px);line-height:1.04;letter-spacing:-.01em;max-width:15ch} h1 .souligne{color:var(--vert);box-shadow:inset 0 -0.22em var(--puce-pale)} .hero p.accroche{font-size:clamp(17px,2.4vw,20px);color:var(--encre-2);max-width:56ch;margin:26px 0 8px} .hero .promesse{font-family:var(--mono);font-size:12.5px;color:var(--encre-2);margin-top:22px;display:flex;gap:16px;flex-wrap:wrap} .hero .promesse span::before{content:"✓ ";color:var(--vert)} /* Le tampon — signature du site */ .tampon{position:absolute;right:0;top:64px;width:132px;height:132px;border:2.5px solid var(--vert);border-radius:50%; display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(9deg); font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--vert);letter-spacing:.08em;text-transform:uppercase; background:rgba(255,255,255,.55);user-select:none} .tampon b{font-size:13px;display:block;letter-spacing:.12em} @media(max-width:760px){.tampon{position:static;transform:rotate(-4deg);margin-top:28px}} /* ---- Sommaire ---- */ .sommaire{border:1.5px dashed var(--vert);border-radius:var(--radius);background:var(--carte);padding:22px 24px;margin:20px 0 0} .sommaire h2{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);margin-bottom:12px} .sommaire ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:6px 22px} .sommaire a{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--encre);padding:5px 4px;border-radius:6px;font-size:15px;font-weight:500} .sommaire a:hover{background:var(--vert-pale)} .sommaire .num{font-family:var(--mono);font-size:11.5px;color:var(--vert);flex-shrink:0} /* ---- Cadres (sections) ---- */ .cadre{padding:64px 0 8px} .cadre-carte{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--radius);padding:clamp(24px,4.5vw,44px);position:relative;box-shadow:0 1px 0 var(--ligne)} .cadre-etiquette{position:absolute;top:-13px;left:24px;background:var(--encre);color:var(--papier);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:6px} .cadre-etiquette .min{color:var(--puce)} h2.titre-cadre{font-family:var(--display);font-size:clamp(24px,4vw,34px);line-height:1.15;margin:8px 0 6px} .question{font-family:var(--mono);font-size:13px;color:var(--vert);margin-bottom:16px} .cadre p{margin-bottom:14px;max-width:66ch} .cadre p.essentiel{font-size:18px;font-weight:600;border-left:4px solid var(--puce);padding-left:14px;max-width:60ch} .note-source{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);margin-top:6px} .note-source a{color:var(--encre-2)} /* ---- Composants interactifs ---- */ .outil{border:1.5px dashed var(--vert);border-radius:var(--radius);background:linear-gradient(180deg,var(--vert-pale),#fff 90px);padding:20px;margin:26px 0 10px} .outil-titre{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--vert-fonce);margin-bottom:14px;display:flex;align-items:center;gap:8px} .outil-titre::before{content:"▸";color:var(--puce)} .rangee-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-bottom:18px} .choix{background:#fff;border:1px solid var(--ligne);border-radius:10px;padding:12px 14px} .choix .legende{font-size:13px;color:var(--encre-2);margin-bottom:8px;display:block} .boutons{display:flex;gap:6px} .btn{flex:1;font-family:var(--sans);font-size:13.5px;font-weight:600;padding:8px 6px;border-radius:8px;border:1.5px solid var(--ligne);background:#fff;color:var(--encre-2);cursor:pointer;transition:all .15s} .btn:hover{border-color:var(--vert)} .btn.actif{background:var(--vert);border-color:var(--vert);color:#fff} .btn-action{font-family:var(--sans);font-size:14.5px;font-weight:700;padding:11px 20px;border-radius:10px;border:none;background:var(--vert);color:#fff;cursor:pointer} .btn-action:hover{background:var(--vert-fonce)} .btn-action:disabled{opacity:.5;cursor:default} /* Barre de répartition */ .barre{display:flex;height:58px;border-radius:10px;overflow:hidden;margin:8px 0} .barre>div{display:flex;align-items:center;justify-content:center;transition:width .5s ease;min-width:0} .barre span{font-family:var(--mono);font-size:13px;font-weight:500;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.25)} .legende-couleurs{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--encre-2);margin:6px 0 14px} .legende-couleurs i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px} .encart{background:var(--puce-pale);border:1px solid #E8D6A8;border-radius:10px;padding:14px 16px;font-size:15px;line-height:1.6} .encart b{color:var(--vert-fonce)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0} .stat{background:#fff;border:1px solid var(--ligne);border-radius:10px;padding:12px 14px} .stat .val{font-family:var(--display);font-size:24px;line-height:1.2} .stat .lab{font-size:12.5px;color:var(--encre-2)} /* Curseurs */ .curseur-ligne{margin-bottom:16px} .curseur-ligne .haut{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap} .curseur-ligne label{font-weight:600;font-size:15px} .curseur-ligne .valeur{font-family:var(--mono);font-size:13px} .curseur-ligne .impact{color:var(--encre-2)} .curseur-ligne input[type=range]{width:100%;accent-color:var(--vert);height:26px} .curseur-ligne .consequence{font-size:12.5px;color:var(--encre-2);margin-top:2px} /* Voyage */ .stations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .station{border:1.5px solid var(--ligne);border-radius:10px;padding:10px 6px;text-align:center;background:#fff;transition:all .3s} .station.active{border-color:var(--vert);background:var(--vert-pale)} .station .ico{font-size:20px} .station .nom{font-size:12px;font-weight:700;margin-top:3px} .station .sous{font-family:var(--mono);font-size:10.5px;color:var(--encre-2);margin-top:2px} .rail{position:relative;height:36px;margin:2px 6px 12px} .rail .fond,.rail .trace{position:absolute;top:16px;left:3%;right:3%;height:4px;border-radius:2px;background:var(--ligne)} .rail .trace{right:auto;width:0;background:var(--vert);transition:width 1.1s ease} .rail .convoi{position:absolute;top:4px;left:3%;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--puce-pale);border:1.5px solid var(--puce);display:flex;align-items:center;justify-content:center;font-size:14px;transition:left 1.1s ease} /* Tickets tiers payant */ .tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .ticket{background:#fff;border:1px solid var(--ligne);border-radius:4px 4px 12px 12px;padding:16px;font-family:var(--mono);font-size:13px;position:relative} .ticket::before{content:"";position:absolute;top:-1px;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--ligne) 0 8px,transparent 8px 16px)} .ticket h4{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;border-bottom:1px dashed var(--ligne);padding-bottom:8px;margin-bottom:10px} .ticket .ligne-t{display:flex;justify-content:space-between;padding:3px 0} .ticket .total{border-top:1px dashed var(--ligne);margin-top:8px;padding-top:8px;font-weight:700;font-size:15px} .ticket .total .zero{color:var(--vert)} .ticket .total .plein{color:var(--corail)} /* Acteurs du système */ .acteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:8px} .acteur{background:#fff;border:1.5px solid var(--ligne);border-radius:10px;padding:14px;cursor:pointer;text-align:left;font-family:var(--sans);transition:border-color .15s} .acteur:hover{border-color:var(--vert)} .acteur.ouvert{border-color:var(--vert);background:var(--vert-pale)} .acteur .ico{font-size:22px} .acteur .nom{font-weight:700;font-size:14.5px;margin-top:4px} .acteur .role-court{font-family:var(--mono);font-size:11px;color:var(--encre-2)} .acteur .detail{font-size:13.5px;color:var(--encre);margin-top:8px;display:none;line-height:1.55} .acteur.ouvert .detail{display:block} /* Jauge LFSS */ .jauge{position:relative;height:30px;margin:10px 0 24px} .jauge .fond{position:absolute;top:12px;left:0;right:0;height:7px;border-radius:4px;background:#E9E6DC} .jauge .rempli{position:absolute;top:12px;height:7px;border-radius:4px;background:var(--corail);transition:all .4s} .jauge .repere{position:absolute;top:5px;width:2px;height:21px;background:var(--encre)} .jauge .repere-label{position:absolute;top:-14px;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;color:var(--encre-2);white-space:nowrap} /* Devine */ .devine-zone{background:#fff;border:1px solid var(--ligne);border-radius:10px;padding:18px} .grille-100{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin:14px 0} .grille-100 i{aspect-ratio:1;border-radius:2px;background:#E9E6DC;transition:background .3s} .grille-100 i.on{background:var(--vert)} /* Checklist */ .checklist{display:flex;flex-direction:column;gap:10px;margin-top:6px} .check-item{background:#fff;border:1px solid var(--ligne);border-radius:10px;padding:14px 16px;display:flex;gap:14px;align-items:flex-start} .check-item input{width:20px;height:20px;accent-color:var(--vert);margin-top:3px;flex-shrink:0;cursor:pointer} .check-item .titre{font-weight:700;font-size:15.5px} .check-item .desc{font-size:14px;color:var(--encre-2);line-height:1.55} .check-item.fait{opacity:.55} .check-item.fait .titre{text-decoration:line-through} /* Chrono LFSS */ .chrono{border-left:2.5px solid var(--vert);margin:16px 0 8px 6px;padding-left:18px;display:flex;flex-direction:column;gap:14px} .etape-c{position:relative} .etape-c::before{content:"";position:absolute;left:-25.5px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--papier);border:3px solid var(--vert)} .etape-c .quand{font-family:var(--mono);font-size:11.5px;color:var(--vert);letter-spacing:.06em;text-transform:uppercase} .etape-c .quoi{font-size:15px} /* Pied */ .sources{padding:60px 0 30px} .sources h2{font-family:var(--display);font-size:22px;margin-bottom:14px} .sources ul{list-style:none;display:flex;flex-direction:column;gap:8px} .sources li{font-family:var(--mono);font-size:12.5px;color:var(--encre-2);padding-left:16px;position:relative} .sources li::before{content:"—";position:absolute;left:0;color:var(--puce)} .pied{border-top:1px solid var(--ligne);padding:26px 0 46px;font-size:13.5px;color:var(--encre-2)} .pied .mention{font-family:var(--mono);font-size:12px;margin-top:8px} .reveler{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease} .reveler.visible{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveler{opacity:1;transform:none}} @media(max-width:560px){ .stations{grid-template-columns:repeat(2,1fr)} .rail{display:none} body{font-size:16px} } /* ===== thèmes des modules ===== */ body.theme-accueil{ /* accueil : fond neutre et froid, distinct du papier chaud des notices */ --papier:#EFF1F3; --nav-fond:rgba(239,241,243,.92); --carte:#FFFFFF; --ligne:#D6DADF; --vert:#20574A; --vert-fonce:#153B32; --vert-pale:#E2EBE8; --puce:#C99A2E; --puce-pale:#F4ECD8; } body.theme-sante{ /* thème de la marque, déclaré explicitement */ --vert:#0E7A4F; --vert-fonce:#0A5236; --vert-pale:#E3F0E8; --puce:#D9A521; --puce-pale:#F7ECD2; --bleu:#378ADD; --bleu-pale:#E4ECF6; --corail:#CF5F41; --corail-pale:#F8E6DF; } body.theme-impots{--vert:#24549C; --vert-fonce:#16386B; --vert-pale:#E4EBF7; --puce:#B4622D; --puce-pale:#F4E4D4; --bleu:#24549C; --bleu-pale:#E4EBF7; --corail:#B4622D; --corail-pale:#F4E4D4;} body.theme-argent{--vert:#A3541F; --vert-fonce:#753A12; --vert-pale:#F5E7D9; --puce:#24549C; --puce-pale:#E4EBF7; --bleu:#24549C; --bleu-pale:#E4EBF7; --corail:#A3541F; --corail-pale:#F5E7D9;} body.theme-democratie{--vert:#11636B; --vert-fonce:#0A4348; --vert-pale:#E0EEEF; --puce:#A84343; --puce-pale:#F5E2E0; --bleu:#11636B; --bleu-pale:#E0EEEF; --corail:#A84343; --corail-pale:#F5E2E0;} /* ===== composants · impots ===== */ /* ============ THÈME IMPÔTS — bleu billet, cuivre en secondaire ============ */ .sandwich{display:flex;flex-direction:column;gap:5px;margin:14px 0} .tranche{display:flex;align-items:center;gap:10px} .tranche .barre-t{height:30px;border-radius:6px;min-width:2px;transition:width .45s ease;display:flex;align-items:center;padding:0 8px} .tranche .barre-t span{font-family:var(--mono);font-size:11.5px;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.3)} .tranche .taux-t{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);width:118px;flex-shrink:0;text-align:right} .paie{background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:16px;font-size:14.5px} .paie .ligne-p{display:flex;justify-content:space-between;gap:10px;padding:7px 4px;border-bottom:1px dashed var(--ligne)} .paie .ligne-p:last-child{border-bottom:none} .paie .ligne-p .lib{display:flex;align-items:center;gap:8px} .paie .ligne-p .lib i{width:10px;height:10px;border-radius:3px;flex-shrink:0} .paie .ligne-p .mnt{font-family:var(--mono);font-weight:500;white-space:nowrap} .paie .ligne-p.forte{font-weight:700;background:var(--vert-pale);border-radius:8px;border-bottom:none;margin-top:4px} .paie .ligne-p .sous-lib{font-size:12px;color:var(--encre-2);font-weight:400} .quiz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0} .quiz-opts .btn{padding:14px 10px;font-size:14.5px} .quiz-opts .btn.bon{background:var(--vert);border-color:var(--vert);color:#fff} .quiz-opts .btn.mauvais{background:var(--corail-pale);border-color:var(--puce);color:var(--puce)} .depenses{display:flex;flex-direction:column;gap:7px;margin-top:10px} .dep-ligne{display:grid;grid-template-columns:190px 1fr 58px;gap:10px;align-items:center;font-size:13.5px} .dep-ligne .dep-barre{height:22px;border-radius:5px;background:var(--vert);transition:width .6s ease;min-width:2px} .dep-ligne .dep-val{font-family:var(--mono);font-size:12.5px;text-align:right} @media(max-width:560px){.dep-ligne{grid-template-columns:120px 1fr 52px}} /* ===== composants · argent ===== */ /* ============ THÈME ARGENT — cuivre centime, bleu en secondaire ============ */ .tableau-livrets{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--ligne)} .tableau-livrets th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:10px;background:var(--vert);color:#fff} .tableau-livrets td{padding:10px;border-top:1px solid var(--ligne);vertical-align:top} .tableau-livrets tr.choisi td{background:var(--puce-pale)} .tableau-livrets .gros{font-family:var(--mono);font-weight:500;white-space:nowrap} /* Empreinte de l'argent */ .supports{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:16px} .support{background:#fff;border:1.5px solid var(--ligne);border-radius:10px;padding:12px;cursor:pointer;text-align:left;font-family:var(--sans);transition:all .15s} .support:hover{border-color:var(--vert)} .support.actif{border-color:var(--vert);background:var(--vert-pale)} .support .ico{font-size:20px} .support .nom{font-weight:700;font-size:13.5px;margin-top:3px;line-height:1.3} .destins{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px} .destin{background:#fff;border:1px solid var(--ligne);border-radius:10px;padding:13px} .destin .titre-d{font-weight:700;font-size:14px;display:flex;gap:7px;align-items:center} .destin p{font-size:13.5px;color:var(--encre-2);margin:6px 0 0;line-height:1.55} /* ===== composants · democratie ===== */ /* ============ THÈME DÉMOCRATIE — bleu-canard institutionnel, carmin en secondaire ============ */ /* Quiz « qui décide » et vrai/faux */ .quiz-carte{background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:18px} .quiz-question{font-size:16.5px;font-weight:700;margin-bottom:12px} .quiz-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0} .quiz-opts .btn{padding:11px 8px;font-size:13.5px} .quiz-opts .btn.bon{background:var(--vert);border-color:var(--vert);color:#fff} .quiz-opts .btn.mauvais{background:var(--corail-pale);border-color:var(--puce);color:var(--puce)} .quiz-retour{font-size:14px;line-height:1.6;margin-top:10px;display:none} .quiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px} .quiz-score{font-family:var(--mono);font-size:12.5px;color:var(--encre-2)} /* Simulateur de scrutin */ .partis{display:flex;flex-direction:column;gap:10px;margin-bottom:14px} .parti-ligne{display:grid;grid-template-columns:150px 1fr 52px;gap:10px;align-items:center} .parti-ligne .nom-p{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px} .parti-ligne .nom-p i{width:12px;height:12px;border-radius:3px;flex-shrink:0} .parti-ligne input[type=range]{width:100%;accent-color:var(--vert)} .parti-ligne .pct{font-family:var(--mono);font-size:12.5px;text-align:right} .hemicycles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:6px} .hemi{background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:14px} .hemi h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;color:var(--encre-2)} .hemi .sieges{display:flex;height:34px;border-radius:8px;overflow:hidden;margin-bottom:8px} .hemi .sieges div{transition:width .4s ease;min-width:0} .hemi .detail-s{font-family:var(--mono);font-size:12px;color:var(--encre-2);line-height:1.7} @media(max-width:560px){.parti-ligne{grid-template-columns:110px 1fr 46px}} /* ===== composants · accueil ===== */ /* ============ ACCUEIL — la marque (vert Vitale + or de la puce) ============ */ .hero-accueil{padding:80px 0 48px;position:relative} .hero-accueil h1{max-width:none} .hero-accueil h1 .ligne2{display:block;color:var(--vert)} /* Une journée ordinaire */ .journee{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;margin-bottom:14px} .moment{background:#fff;border:1.5px solid var(--ligne);border-radius:10px;padding:12px 10px;cursor:pointer;text-align:left;font-family:var(--sans);transition:all .15s} .moment:hover{border-color:var(--vert)} .moment.actif{border-color:var(--m-c,var(--vert));background:var(--m-p,var(--vert-pale))} .moment .heure{font-family:var(--mono);font-size:11px;color:var(--encre-2)} .moment .ico{font-size:20px;margin:3px 0} .moment .quoi{font-size:12.5px;font-weight:700;line-height:1.3} .revelation{background:#fff;border:1.5px solid var(--ligne);border-radius:12px;padding:18px 20px;border-left-width:5px;transition:border-color .2s} .revelation .machine{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px} .revelation p{font-size:15px;line-height:1.65;margin:0 0 10px;max-width:none} .revelation a.aller{font-weight:700;font-size:14px} /* Collection */ .collection{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin-top:8px} .objet{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--radius);padding:22px;position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--encre);transition:transform .15s,border-color .15s;border-top:5px solid var(--o-c)} .objet:hover{transform:translateY(-3px);border-color:var(--o-c)} .objet .num-o{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)} .objet h3{font-family:var(--display);font-size:21px;margin:6px 0 8px;color:var(--o-c)} .objet p{font-size:14px;color:var(--encre-2);line-height:1.6;margin:0 0 14px;flex:1} .objet .meta-o{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);display:flex;gap:12px;flex-wrap:wrap;border-top:1px dashed var(--ligne);padding-top:10px} .objet .ouvrir{margin-top:10px;font-weight:700;font-size:14.5px;color:var(--o-c)} .objet.avenir{opacity:.65;border-top-style:dashed;cursor:default} .objet.avenir:hover{transform:none;border-color:var(--ligne);border-top-color:var(--o-c)} /* Principes */ .principes{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:8px} .principe{background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:16px} .principe .ico{font-size:22px} .principe h4{font-size:15px;margin:6px 0 4px} .principe p{font-size:13.5px;color:var(--encre-2);line-height:1.55;margin:0;max-width:none} .manifeste{border-left:4px solid var(--puce);padding-left:18px;max-width:62ch} .manifeste p{margin-bottom:12px} h2.titre-section{font-family:var(--display);font-size:clamp(22px,3.6vw,30px);margin:0 0 6px} .sous-section{font-family:var(--mono);font-size:13px;color:var(--vert);margin-bottom:18px} /* ===== citations (textes fondateurs) ===== */ .citation{background:var(--carte);border:1px solid var(--ligne);border-left:4px solid var(--vert);border-radius:8px; padding:13px 16px;margin:0 0 10px;font-size:14.5px;line-height:1.65;max-width:66ch;font-style:italic} .citation .ref{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--encre-2);margin-top:5px} /* ===== notation de la notice (5 étoiles) ===== */ .note-bloc{text-align:center} .note-bloc .titre-cadre{margin-top:8px} .note-bloc p{max-width:none} .etoiles{display:flex;justify-content:center;gap:4px;margin:12px 0 6px} .etoiles button{background:none;border:none;font-size:40px;line-height:1;cursor:pointer;color:#D8D4C8;padding:4px 6px;min-height:48px;min-width:48px;transition:transform .1s ease,color .15s ease} .etoiles button.allumee{color:var(--puce)} .etoiles button:hover{transform:scale(1.12)} .etoiles button:disabled{cursor:default;transform:none} .note-merci{font-size:14.5px;color:var(--encre-2)} /* ===== conteneur défilable (tableaux sur mobile) ===== */ .defile{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px} .defile .tableau-livrets{min-width:560px} /* ============================================================ MOBILE D'ABORD — lisibilité et usage tactile ============================================================ */ .btn{min-height:44px} .btn-action{min-height:46px} input[type=range]{height:34px;touch-action:manipulation} .check-item{align-items:center} .check-item input{width:22px;height:22px;min-width:22px} .nav-liens{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;padding-bottom:2px} .nav-liens::-webkit-scrollbar{display:none} .nav-liens a{white-space:nowrap} .acteur{min-height:44px} .moment{min-height:44px} @media(max-width:560px){ body{font-size:16px} .conteneur{padding-left:14px;padding-right:14px} .hero{padding:48px 0 36px} .hero-accueil{padding:56px 0 36px} .cadre{padding:42px 0 6px} .cadre-carte{border-radius:12px} h1{font-size:clamp(34px,10vw,44px)} .tampon{width:110px;height:110px;font-size:9.5px} /* les voyages gardent leur rail : 4 stations compactes */ .stations{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px} .station{padding:8px 3px} .station .ico{font-size:16px} .station .nom{font-size:10px;line-height:1.2} .station .sous{font-size:9px;line-height:1.25} .rail{display:block;height:30px} /* outils */ .barre{height:48px} .barre span{font-size:11px} .stats{grid-template-columns:repeat(2,1fr);gap:9px} .stat{padding:10px 11px} .stat .val{font-size:19px} .tranche .taux-t{width:82px;font-size:10px} .tranche .barre-t{height:26px} .paie{font-size:13px;padding:12px} .paie .ligne-p .mnt{font-size:12.5px} .parti-ligne{grid-template-columns:96px 1fr 40px;gap:7px} .parti-ligne .nom-p{font-size:11.5px} .hemicycles{grid-template-columns:1fr} .tickets{grid-template-columns:1fr} .dep-ligne{grid-template-columns:100px 1fr 46px;font-size:12.5px} .quiz-opts{grid-template-columns:1fr 1fr} .quiz-opts .btn{font-size:12.5px;padding:10px 6px} .quiz-question{font-size:15px} .supports{grid-template-columns:1fr 1fr} .destins{grid-template-columns:1fr} .acteurs{grid-template-columns:1fr 1fr} .journee{grid-template-columns:repeat(3,1fr);gap:6px} .moment .quoi{font-size:10.5px} .moment .ico{font-size:17px} .collection{grid-template-columns:1fr} .grille-100{grid-template-columns:repeat(10,1fr)} .etoiles button{font-size:36px} .sommaire ol{grid-template-columns:1fr} } @media(max-width:380px){ .station .sous{display:none} .quiz-opts{grid-template-columns:1fr} .journee{grid-template-columns:repeat(2,1fr)} } /* ===== correctifs d'affichage ===== */ /* Le tampon ne doit jamais chevaucher le titre (grands écrans) */ @media(min-width:761px){ .hero h1{max-width:min(15ch,calc(100% - 175px))} .hero-accueil h1{max-width:calc(100% - 175px)} .hero p.accroche{max-width:min(56ch,calc(100% - 175px))} } /* ===== navigation : menu burger sur mobile ===== */ .nav-burger{display:none;background:none;border:1.5px solid var(--ligne);border-radius:8px; width:44px;height:44px;margin-left:auto;cursor:pointer;flex-direction:column; align-items:center;justify-content:center;gap:5px;flex-shrink:0} .nav-burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--encre);transition:transform .2s ease,opacity .2s ease} .nav.ouvert .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .nav.ouvert .nav-burger span:nth-child(2){opacity:0} .nav.ouvert .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} @media(max-width:760px){ .nav-burger{display:flex} .nav-liens{display:none;order:3;width:100%;flex-direction:column;gap:2px; overflow:visible;padding:8px 0 6px;border-top:1px dashed var(--ligne);margin-top:8px} .nav.ouvert .nav-liens{display:flex} .nav-liens a{white-space:normal;font-size:13.5px;padding:12px 10px;border-radius:8px;min-height:44px;display:flex;align-items:center} } /* ===== garde-fous mobile : aucune chaîne ne peut élargir la page ===== */ .sources li,.note-source,.check-item .desc,.citation,.encart,.destin p,.quiz-retour{overflow-wrap:anywhere} .cadre-carte,.outil,.paie,.ticket,.quiz-carte,.devine-zone{max-width:100%;min-width:0} .hemi .detail-s,.ticket{overflow-wrap:anywhere} @media(max-width:560px){ .conteneur{padding-left:16px;padding-right:16px} .cadre-carte{padding:22px 14px} .outil{padding:14px 12px} /* le système de santé : un acteur par ligne pour la lisibilité */ .acteurs{grid-template-columns:1fr} }