/* Adaptations de la maquette React vers le site statique. style.css reste la copie conforme du design (designs/modes.css) ; tout ce qui découle du passage en HTML/SSI est isolé ici. */ [hidden] { display: none !important; } /* Lien d'évitement (accessibilité clavier) */ .mo-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--mo-hue); color: #05070a; padding: 12px 18px; border-radius: 0 0 12px 0; font-size: 14px; } .mo-skip:focus { left: 0; color: #05070a; } /* Page active dans la navigation (clé data-page du / data-nav des liens) */ body[data-page="home"] .mo-nav-links a[data-nav="pro"], body[data-page="part"] .mo-nav-links a[data-nav="part"], body[data-page="sci"] .mo-nav-links a[data-nav="sci"], body[data-page="faq"] .mo-nav-links a[data-nav="faq"], body[data-page="contact"] .mo-nav-links a[data-nav="contact"] { color: var(--mo-ink); } /* Sélecteur de langue : liens au lieu des boutons React */ .mo-lang-pop a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 11px; color: var(--mo-ink-2); text-align: left; transition: .16s; } .mo-lang-pop a:hover { background: rgba(255,255,255,.07); color: var(--mo-ink); } .mo-lang-pop a[data-on] { background: rgba(47,156,149,.14); color: var(--mo-ink); } .mo-menu-langs a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--mo-line-2); color: var(--mo-ink-3); border-radius: 999px; padding: 10px 16px; font-size: 13px; letter-spacing: .06em; min-height: 44px; } .mo-menu-langs a[data-on] { background: rgba(47,156,149,.16); border-color: rgba(47,156,149,.5); color: var(--mo-ink); } /* L'illustration du lecteur remplace le composant de la maquette */ .mo-demo-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Titres des blocs de contact : h2 en statique (hiérarchie h1 > h2) */ .mo-contact-block h2 { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mo-ink-3); font-weight: 500; } /* Boutons « + / − » et chevrons : rotation gérée par aria-expanded */ .mo-q .pm { display: inline-flex; transition: transform .2s; } .mo-q button[aria-expanded="true"] .pm { transform: rotate(45deg); } .mo-link-btn { display: inline-flex; align-items: center; gap: 7px; } .mo-link-btn .chev { display: inline-flex; transition: transform .2s; } .mo-link-btn[aria-expanded="true"] .chev { transform: rotate(-90deg); } /* Pages légales : rappel de la langue de référence */ .mo-lg-notice { margin: 14px 0 0; padding: 14px 18px; border: 1px solid var(--mo-line); border-left: 2px solid var(--mo-hue); border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: var(--mo-ink-2); max-width: 70ch; } /* Page 404 */ .mo-404-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; } .mo-404-links a { font-size: 16px; color: var(--mo-ink-2); border-bottom: 1px solid var(--mo-line-2); padding-bottom: 3px; } .mo-404-links a:hover { color: var(--mo-hue); border-color: var(--mo-hue); } /* Sans JavaScript : les volets repliés restent lisibles */ .no-js .mo-q .a[hidden], .no-js .mo-spec[hidden] { display: block !important; } .no-js .mo-carousel img { opacity: 1; } .no-js .mo-carousel img ~ img { display: none; }