/* ===================================================================== Bulltricker — feuille de style des pages de RÈGLE OFFICIELLE Thème « parchemin / bois » synchronisé avec le mode 2D (index.html). Le thème courant est lu depuis localStorage (clé "bt_theme") par le petit script inline présent en tête de chaque page de règle, qui pose l'attribut . Les mêmes 9 thèmes que le jeu sont donc disponibles ; sans choix mémorisé, c'est le Parchemin. ===================================================================== */ /* --- 1) Variables de thème : COPIE CONFORME de celles de index.html --- */ :root{ --ink:#2c2118; --ink-soft:#5a4a36; --parch-1:#f2ead6; --parch-2:#e6d8ba; --parch-3:#dac9a4; --wood-frame:#3f2f1f; --wood-frame-2:#5a4329; --brass:#b8893b; --brass-lt:#d8b25a; --gold:#c79a3b; --crimson:#9b2d2d; --crimson-lt:#c0492f; --cell-trans:#f1e7c9; --cell-front:#f1e7c9; --cell-royal:#dac6a0; --cell-butee:#dac6a0; --pw-fill:#f2e6c6; --pw-stroke:#3a2c1a; --pw-ink:#3a2c1a; --pb-fill:#2c2420; --pb-stroke:#d8b25a; --pb-ink:#ecd9a8; --hl-sel:#c79a3b; --hl-move:#3f6f4e; --hl-cap:#b23a2b; --hl-leave:#3f9f5c; --hl-threat:#3b78dd; --page-bg: radial-gradient(120% 90% at 18% -10%, #f7f0dd 0%, rgba(247,240,221,0) 55%), radial-gradient(130% 100% at 110% 120%, #d8c8a4 0%, rgba(216,200,164,0) 60%), linear-gradient(160deg,#ece1c6 0%, #e0d0ad 55%, #d6c4a0 100%); --panel-bg:linear-gradient(180deg, rgba(255,250,236,.92), rgba(243,233,210,.92)); --panel-bd:#c9b58a; --wood-grain: repeating-linear-gradient(90deg, rgba(40,26,12,.06) 0 1px, rgba(255,240,210,.045) 2px 3px, rgba(40,26,12,.05) 5px 6px, rgba(0,0,0,0) 6px 11px, rgba(40,26,12,.055) 11px 12px, rgba(255,240,210,.035) 14px 15px, rgba(0,0,0,0) 15px 20px); --NAR:26px; --WID:48px; --GUT:30px; } html[data-theme="acajou"]{ --ink:#3a241a; --ink-soft:#6a4a36; --page-bg: radial-gradient(120% 90% at 18% -10%, #f3e6cf 0%, rgba(243,230,207,0) 55%), radial-gradient(130% 100% at 110% 120%, #d8bfa0 0%, rgba(216,191,160,0) 60%), linear-gradient(160deg,#ecdcc0 0%, #ddc7a4 55%, #d3bb96 100%); --panel-bg:linear-gradient(180deg, rgba(252,244,230,.93), rgba(240,226,205,.93)); --panel-bd:#cdae84; --brass:#a9742f; --brass-lt:#cf9a45; --gold:#cf9a45; --cell-trans:#c98a5b; --cell-front:#c98a5b; --cell-royal:#6f3c25; --cell-butee:#6f3c25; --wood-frame:#4a2817; --wood-frame-2:#6a3a22; --pw-fill:#f3e7cb; --pw-stroke:#4a2e1c; --pw-ink:#4a2e1c; --pb-fill:#4a2a1a; --pb-stroke:#d9ad6a; --pb-ink:#e9cfa0; } html[data-theme="noyer"]{ --ink:#2f2519; --ink-soft:#5e4a34; --page-bg: radial-gradient(120% 90% at 18% -10%, #efe5cd 0%, rgba(239,229,205,0) 55%), linear-gradient(160deg,#eadfc8 0%, #d8c8a8 55%, #ccbb98 100%); --panel-bg:linear-gradient(180deg, rgba(251,245,231,.93), rgba(239,228,206,.93)); --panel-bd:#c6b184; --brass:#9c7733; --brass-lt:#c79a3b; --gold:#c79a3b; --cell-trans:#bd9568; --cell-front:#bd9568; --cell-royal:#5f4632; --cell-butee:#5f4632; --wood-frame:#43321f; --wood-frame-2:#5c4631; --pw-fill:#efe6d0; --pw-stroke:#3a2c1c; --pw-ink:#3a2c1c; --pb-fill:#3a2a1b; --pb-stroke:#d3aa6a; --pb-ink:#e7cf9e; } html[data-theme="chene"]{ --ink:#4a3a22; --ink-soft:#76603a; --page-bg: radial-gradient(120% 90% at 18% -10%, #f6efda 0%, rgba(246,239,218,0) 55%), linear-gradient(160deg,#f3ead2 0%, #e7d6b2 55%, #ddcaa2 100%); --panel-bg:linear-gradient(180deg, rgba(254,249,236,.93), rgba(244,233,212,.93)); --panel-bd:#d2bd8e; --brass:#b0863a; --brass-lt:#d6b15a; --gold:#b8893b; --cell-trans:#e2c896; --cell-front:#e2c896; --cell-royal:#b3955f; --cell-butee:#b3955f; --wood-frame:#7a5d34; --wood-frame-2:#8e6e40; --pw-fill:#fbf3df; --pw-stroke:#4a3a22; --pw-ink:#4a3a22; --pb-fill:#4a3520; --pb-stroke:#d6b15a; --pb-ink:#ead2a0; } html[data-theme="palissandre"]{ --ink:#34221c; --ink-soft:#63433a; --page-bg: radial-gradient(120% 90% at 18% -10%, #f1e4cd 0%, rgba(241,228,205,0) 55%), linear-gradient(160deg,#ece0cc 0%, #dcc6a6 55%, #d0ba98 100%); --panel-bg:linear-gradient(180deg, rgba(252,244,229,.93), rgba(240,225,204,.93)); --panel-bd:#ccae86; --brass:#a9742f; --brass-lt:#cf9a45; --gold:#cf9a45; --cell-trans:#a86b52; --cell-front:#a86b52; --cell-royal:#5a2f28; --cell-butee:#5a2f28; --wood-frame:#3f211c; --wood-frame-2:#5a302a; --pw-fill:#f1e2c8; --pw-stroke:#3a201a; --pw-ink:#3a201a; --pb-fill:#3a1f1a; --pb-stroke:#d9ad6a; --pb-ink:#ead0a2; } html[data-theme="ebene"]{ --ink:#e8e0d0; --ink-soft:#b9ac95; --page-bg: radial-gradient(120% 90% at 18% -10%, #2a2620 0%, rgba(42,38,32,0) 55%), linear-gradient(160deg,#23201b 0%, #1b1814 60%, #161310 100%); --panel-bg:linear-gradient(180deg, rgba(46,42,35,.95), rgba(34,30,25,.95)); --panel-bd:#4a4035; --brass:#c79a3b; --brass-lt:#d8b25a; --gold:#d8b25a; --cell-trans:#4f463c; --cell-front:#4f463c; --cell-royal:#28221c; --cell-butee:#28221c; --wood-frame:#1a1611; --wood-frame-2:#322a22; --pw-fill:#f2ead6; --pw-stroke:#2a2620; --pw-ink:#3a2c1a; --pb-fill:#1c1813; --pb-stroke:#d8b25a; --pb-ink:#e9cf9e; } html[data-theme="ardoise"]{ --ink:#2b3138; --ink-soft:#586470; --page-bg: radial-gradient(120% 90% at 18% -10%, #eef1f4 0%, rgba(238,241,244,0) 55%), linear-gradient(160deg,#e2e6ea 0%, #cfd5db 55%, #c3cad1 100%); --panel-bg:linear-gradient(180deg, rgba(250,251,253,.93), rgba(232,237,242,.93)); --panel-bd:#b9c3cc; --brass:#7d93a8; --brass-lt:#9fb0c0; --gold:#8aa0b3; --cell-trans:#c8cfd6; --cell-front:#c8cfd6; --cell-royal:#8d97a0; --cell-butee:#8d97a0; --wood-frame:#41484f; --wood-frame-2:#566069; --pw-fill:#f5f8fb; --pw-stroke:#2f353b; --pw-ink:#2f353b; --pb-fill:#2f363c; --pb-stroke:#aebcc8; --pb-ink:#d6dee6; --hl-sel:#5f86b0; } html[data-theme="nuit"]{ --ink:#e7ddc9; --ink-soft:#b3a78f; --page-bg: radial-gradient(120% 90% at 18% -10%, #28241e 0%, rgba(40,36,30,0) 55%), linear-gradient(160deg,#211d18 0%, #1a1712 60%, #15120e 100%); --panel-bg:linear-gradient(180deg, rgba(44,39,32,.95), rgba(32,28,23,.95)); --panel-bd:#463c30; --brass:#c79a3b; --brass-lt:#d8b25a; --gold:#d8b25a; --cell-trans:#6b513a; --cell-front:#6b513a; --cell-royal:#3a2c1f; --cell-butee:#3a2c1f; --wood-frame:#241a12; --wood-frame-2:#3a2a1c; --pw-fill:#ece1cb; --pw-stroke:#2a2018; --pw-ink:#2a2018; --pb-fill:#20180f; --pb-stroke:#d8b25a; --pb-ink:#e7cf9e; } html[data-theme="foret"]{ --ink:#2c3320; --ink-soft:#56603e; --page-bg: radial-gradient(120% 90% at 18% -10%, #eef0e0 0%, rgba(238,240,224,0) 55%), linear-gradient(160deg,#e4e8d3 0%, #d2d8bd 55%, #c6cdaf 100%); --panel-bg:linear-gradient(180deg, rgba(250,251,242,.93), rgba(235,239,222,.93)); --panel-bd:#c2cba0; --brass:#7e8a3a; --brass-lt:#9aa84f; --gold:#8a8f3b; --cell-trans:#cbb98f; --cell-front:#cbb98f; --cell-royal:#6a5436; --cell-butee:#6a5436; --wood-frame:#3f3a22; --wood-frame-2:#574c2c; --pw-fill:#f2ecd6; --pw-stroke:#3a3420; --pw-ink:#3a3420; --pb-fill:#322a18; --pb-stroke:#cdb96a; --pb-ink:#e7d79e; --hl-sel:#7e8a3a; } html[data-theme="azur"]{ --ink:#25303c; --ink-soft:#51606e; --page-bg: radial-gradient(120% 90% at 18% -10%, #eef3f8 0%, rgba(238,243,248,0) 55%), linear-gradient(160deg,#e2eaf2 0%, #cfddeb 55%, #c2d2e3 100%); --panel-bg:linear-gradient(180deg, rgba(249,251,254,.94), rgba(231,239,247,.94)); --panel-bd:#b4c4d6; --brass:#4f7bb0; --brass-lt:#6f9ad8; --gold:#6f9ad8; --cell-trans:#d2dae4; --cell-front:#d2dae4; --cell-royal:#97a8bb; --cell-butee:#97a8bb; --wood-frame:#3e4a57; --wood-frame-2:#53616f; --pw-fill:#f6f9fc; --pw-stroke:#28323c; --pw-ink:#28323c; --pb-fill:#2a3440; --pb-stroke:#aec2d6; --pb-ink:#d6e2ee; --hl-sel:#4f7bb0; } /* ==================================================================== Variables dérivées propres aux pages de RÈGLE (réutilisent les variables de thème ci-dessus, communes au mode 2D). Elles donnent à la règle l'aspect « parchemin / bois » du jeu, et se recolorent automatiquement selon le thème mémorisé (bt_theme). -------------------------------------------------------------------- */ :root{ --rule-accent:var(--brass); /* filets, titres, légendes */ --rule-accent-soft:var(--brass-lt); /* survols, bordures douces */ --rule-link:var(--ink); /* texte courant / liens */ --rule-link-hover:var(--brass); /* survol des liens */ --box-bg:var(--panel-bg); /* encadrés (note, séquences…) */ --box-bd:var(--panel-bd); /* bordures des encadrés */ --note-bg:var(--panel-bg); --note-bd:var(--brass); --warn-bg:linear-gradient(180deg, rgba(255,243,240,.92), rgba(250,228,222,.92)); --warn-bd:var(--crimson-lt, #c0492f); --cap-color:var(--brass); /* couleur des légendes de figures */ --field-bg:rgba(255,255,255,.30); /* aplat clair derrière une figure */ } /* Sur les thèmes sombres, l'aplat derrière les images vire au sombre. */ html[data-theme="ebene"], html[data-theme="nuit"]{ --field-bg:rgba(255,255,255,.05); --warn-bg:linear-gradient(180deg, rgba(70,40,34,.55), rgba(50,28,24,.55)); } /* ==================================================================== Mise en page générale ==================================================================== */ *{box-sizing:border-box} html,body{margin:0;padding:0} /* Un seul plan de fond, fixe, porté par : il couvre tout le viewport quelle que soit la longueur de la page (pas de raccord visible au scroll). Le reste transparent pour laisser voir ce fond. */ html{ background:var(--page-bg); background-attachment:fixed; background-size:cover; min-height:100%; } body{ font-family:"Spectral",Georgia,serif; color:var(--ink); background:transparent; line-height:1.6; min-height:100vh; max-width:none; /* le cadre est géré par .page ci-dessous */ overflow-wrap:break-word; } /* Léger grain identique à la page de jeu (discret, non bloquant). */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Conteneur centré, façon « feuille de parchemin » posée sur le bois. */ body > *{position:relative; z-index:1} .page, body{max-width:980px; margin:0 auto} body{padding:18px 22px 60px} a{color:var(--rule-link)} /* Lien de retour au sommaire (en haut) */ .home{text-align:center; margin:0 0 22px} .home a{ font-family:"Cinzel",serif; font-weight:600; letter-spacing:.04em; text-decoration:none; font-size:1em; color:var(--rule-accent); border-bottom:1px solid transparent; padding-bottom:2px; } .home a:hover{border-bottom-color:var(--rule-accent)} /* ---- Titres ---- */ h1{ font-family:"Cinzel",serif; font-weight:700; color:var(--ink); text-shadow:0 1px 0 rgba(255,247,230,.5); } h2.page-title{ font-family:"Cinzel",serif; font-weight:700; font-size:clamp(1.35em,3.4vw,1.7em); color:var(--ink); border-bottom:2px solid var(--rule-accent); padding-bottom:9px; margin:6px 0 22px; position:relative; } h2.page-title::after{ content:"\2756"; position:absolute; left:0; bottom:-9px; transform:translateY(50%); color:var(--rule-accent); background:var(--page-bg); padding-right:10px; font-size:12px; } h3.section{ font-family:"Cinzel",serif; font-weight:600; font-size:1.12em; color:var(--ink); background:var(--panel-bg); border:1px solid var(--panel-bd); border-left:5px solid var(--rule-accent); padding:9px 15px; border-radius:6px; margin:34px 0 14px; box-shadow:0 1px 3px rgba(50,32,12,.10); } h4.subsection{ font-family:"Cinzel",serif; font-weight:600; font-size:1.05em; color:var(--ink); border-left:4px solid var(--rule-accent); padding-left:12px; margin:26px 0 12px; } h4{ font-family:"Cinzel",serif; color:var(--ink) } p{font-size:1.05em; margin:13px 0} .lead{font-size:1.16em} ol,ul{font-size:1.05em; padding-left:1.5em} ol li,ul li{margin:9px 0} b,strong{color:var(--ink); font-weight:700} /* ---- Encadrés ---- */ .note{ background:var(--note-bg); border:1px solid var(--box-bd); border-left:5px solid var(--note-bd); border-radius:6px; padding:13px 17px; margin:24px 0; box-shadow:0 1px 3px rgba(50,32,12,.08); } .warn{ background:var(--warn-bg); border:1px solid var(--warn-bd); border-left:5px solid var(--warn-bd); border-radius:6px; padding:13px 17px; margin:24px 0; } .terms{ background:var(--panel-bg); border:1px solid var(--panel-bd); border-radius:8px; padding:11px 19px; margin:18px 0; } .terms ul{margin:6px 0} /* ==================================================================== Figures (une image) ==================================================================== */ figure{margin:26px auto; text-align:center} figure img{max-width:100%; height:auto; border:0; border-radius:6px} figure.board img{ width:100%; max-width:760px; background:var(--field-bg); border:1px solid var(--panel-bd); border-radius:8px; padding:6px; box-shadow:0 2px 8px rgba(50,32,12,.14); } figcaption{ color:var(--cap-color); font-style:italic; font-weight:600; margin-bottom:10px; } figcaption .fig{ display:block; font-family:"Cinzel",serif; font-style:normal; font-weight:600; font-size:1.02em; letter-spacing:.02em; } /* ==================================================================== Séquences de vues (a, b, c, d…) ==================================================================== */ .seq{ margin:28px 0; padding:16px 16px 8px; background:var(--panel-bg); border:1px solid var(--panel-bd); border-radius:10px; box-shadow:0 1px 4px rgba(50,32,12,.10); } .seq .seq-cap{ color:var(--cap-color); font-style:italic; font-weight:600; text-align:center; margin:0 0 12px; font-size:1.05em; } .seq .frames{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:flex-end} .seq .frame{text-align:center; flex:0 1 auto; min-width:0} .seq .frame .lbl{color:var(--cap-color); font-style:italic; font-size:.92em; margin-bottom:6px} .seq .frame .cmt{display:block; color:var(--ink-soft); font-style:normal; font-size:.82em; max-width:150px; margin:6px auto 0; line-height:1.35} .seq .frame img{ display:block; margin:0 auto; border:0; height:auto; border-radius:5px; background:var(--field-bg); border:1px solid var(--panel-bd); padding:3px; } /* séquences « larges » : étapes empilées verticalement */ .seq.wide .step{margin:18px 0 22px; text-align:center} .seq.wide .step img{ display:block; margin:0 auto 8px; max-width:100%; height:auto; border-radius:6px; background:var(--field-bg); border:1px solid var(--panel-bd); padding:5px; box-shadow:0 2px 7px rgba(50,32,12,.14); } .seq.wide .step-cap{max-width:680px; margin:0 auto; color:var(--ink-soft); font-size:.95em; line-height:1.45} .seq.wide .step-lbl{color:var(--cap-color); font-style:italic; font-weight:600} /* séquences « empilées » : vues horizontales larges, l'une sous l'autre */ .seq.stack{padding:16px 16px 10px} .seq.stack .row{margin:14px 0; text-align:center} .seq.stack .row img{ display:block; margin:0 auto; max-width:100%; height:auto; border-radius:6px; background:var(--field-bg); border:1px solid var(--panel-bd); padding:5px; } .seq.stack .row-cap{margin:6px auto 0; max-width:680px; color:var(--ink-soft); font-size:.9em; line-height:1.4} .seq.stack .row-lbl{color:var(--cap-color); font-style:italic; font-weight:600} /* image cliquable pour agrandir */ a.zoom{display:inline-block; position:relative; cursor:zoom-in; line-height:0} a.zoom img{transition:opacity .15s} a.zoom:hover img{opacity:.85} a.zoom::after{ content:"\2922"; position:absolute; top:6px; right:6px; font-size:13px; line-height:1; color:#fff; background:var(--rule-accent); border-radius:4px; padding:2px 4px; opacity:0; transition:opacity .15s; pointer-events:none; } a.zoom:hover::after{opacity:1} /* galerie : vignettes d'exemples (cas variés) */ .gallery{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin:22px 0} .gallery .frame{text-align:center; min-width:0} .gallery .frame .lbl{color:var(--cap-color); font-style:italic; font-size:.92em; margin-top:6px; max-width:160px} .gallery .frame img{ border:0; height:auto; border-radius:5px; background:var(--field-bg); border:1px solid var(--panel-bd); padding:3px; } /* ==================================================================== Accès au jeu / fermeture — affichage adaptatif • Visiteur venu du jeu → bouton « Fermer » • Visiteur venu de Google → bandeau d'accueil + bouton « Jouer » (Le basculement est fait en JS ; [hidden] masque l'option non retenue.) ==================================================================== */ [hidden]{display:none !important} /* Bandeau d'accueil (visiteur SEO) */ .bt-welcome{margin:0 0 18px} .bt-welcome-in{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; background:var(--panel-bg); border:1px solid var(--panel-bd); border-left:5px solid var(--rule-accent); border-radius:10px; padding:14px 18px; box-shadow:0 1px 4px rgba(50,32,12,.12); } .bt-welcome-txt{flex:1 1 320px; font-size:1.02em; color:var(--ink); line-height:1.5} .bt-welcome-txt b{color:var(--ink)} /* Barres d'action (haut/bas) */ .actionbar{display:flex; justify-content:center; margin:0 0 18px} .actionbar-bottom{margin:26px 0 4px} /* Bouton « Fermer » (sobre) */ .btn-close{ font-family:"Cinzel",serif; font-weight:600; font-size:.92em; letter-spacing:.03em; color:var(--ink); cursor:pointer; background:var(--panel-bg); border:1px solid var(--panel-bd); border-left:4px solid var(--rule-accent); border-radius:8px; padding:9px 18px; box-shadow:0 1px 3px rgba(50,32,12,.12); transition:border-color .15s, box-shadow .15s, transform .1s; } .btn-close:hover{border-color:var(--rule-accent); box-shadow:0 2px 9px rgba(50,32,12,.20); transform:translateY(-1px)} .btn-close:active{transform:translateY(0)} .btn-close:focus-visible{outline:2px solid var(--rule-accent); outline-offset:2px} /* Bouton « Jouer » (mis en avant : laiton plein) */ .btn-play{ display:inline-block; text-decoration:none; font-family:"Cinzel",serif; font-weight:700; font-size:1em; letter-spacing:.02em; color:#fff8ea; background:linear-gradient(180deg, var(--brass-lt), var(--brass)); border:1px solid var(--brass); border-radius:9px; padding:11px 22px; box-shadow:0 2px 7px rgba(50,32,12,.28), 0 1px 0 rgba(255,250,235,.35) inset; text-shadow:0 1px 1px rgba(60,40,16,.45); transition:filter .15s, box-shadow .15s, transform .1s; } .btn-play:hover{filter:brightness(1.06); box-shadow:0 3px 12px rgba(50,32,12,.34), 0 1px 0 rgba(255,250,235,.4) inset; transform:translateY(-1px)} .btn-play:active{transform:translateY(0)} .btn-play:focus-visible{outline:2px solid var(--ink); outline-offset:2px} .bt-welcome .btn-play{flex:0 0 auto} @media (max-width:600px){ .bt-welcome-in{padding:12px 14px} .bt-welcome-txt{font-size:.96em; flex-basis:100%} .bt-welcome .btn-play{width:100%; text-align:center} .btn-play{font-size:.95em; padding:10px 18px} } /* ==================================================================== Barre de navigation précédent / suivant ==================================================================== */ .pagenav{display:flex; align-items:stretch; gap:10px; margin:18px 0; font-size:.95em} .pagenav-top{margin-top:6px} .pagenav-bottom{margin-top:36px; border-top:1px solid var(--panel-bd); padding-top:20px} .pagenav a{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); border:1px solid var(--panel-bd); border-radius:8px; padding:8px 14px; background:var(--panel-bg); line-height:1.25; transition:border-color .15s, box-shadow .15s; } .pagenav a:hover{border-color:var(--rule-accent); box-shadow:0 1px 5px rgba(50,32,12,.14)} .pagenav .nav-prev{margin-right:auto; text-align:left} .pagenav .nav-next{margin-left:auto; text-align:right} .pagenav .nav-empty{margin-right:auto} .pagenav .nav-next.nav-empty,.pagenav .nav-prev.nav-empty{display:none} .pagenav .arrow{color:var(--rule-accent); font-size:1.05em; flex:0 0 auto} .pagenav .nav-txt{display:flex; flex-direction:column} .pagenav .nav-role{font-family:"Cinzel",serif; font-size:.68em; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft)} .pagenav .nav-title{font-weight:600} .pagenav .nav-home{ background:transparent; border-color:transparent; color:var(--rule-accent); font-family:"Cinzel",serif; font-weight:600; align-self:center; } .pagenav .nav-home:hover{background:var(--panel-bg); border-color:var(--panel-bd); box-shadow:none} @media (max-width:560px){ .pagenav .nav-title{max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .pagenav .nav-home{display:none} } /* ==================================================================== Filets de sécurité responsive ==================================================================== */ img{max-width:100%; height:auto} .seq .frame,.gallery .frame{min-width:0} @media (max-width:768px){ .seq .frames{gap:10px} .gallery{gap:14px} } @media (max-width:600px){ body{padding:14px 13px 48px} h2.page-title{font-size:1.3em} h3.section{font-size:1.02em; padding:8px 12px} h4.subsection{font-size:1em} p,ol,ul,.lead{font-size:1em} .lead{font-size:1.07em} .seq{padding:12px 9px 5px} .seq .frames{gap:8px} .seq .frame .cmt{max-width:130px} .seq.wide .step-cap,.seq.stack .row-cap{font-size:.9em} .note,.warn,.terms{padding:11px 14px} .pagenav{font-size:.9em; gap:6px} .pagenav a{padding:7px 10px} } @media (max-width:420px){ .seq .frames{flex-direction:column; align-items:center} .seq .frame .cmt{max-width:240px} }