/* ============================================================ Roadbook / Blog Eric — Thème « Direction C » (immersif sombre) Rétro-portage du design system du blog moderne (Next.js) vers le PHP. Chargé EN DERNIER (après bootstrap + style.css) pour gagner la cascade. Sombre PAR DÉFAUT. Mode clair optionnel via . Source de vérité des tokens : blog moderne docs/design/handoff-direction-c/theme.css ⚠ Couleurs en OKLCH (navigateurs 2023+) avec repli hex pour les anciens. ============================================================ */ /* ---------- Polices self-hostées (woff2 dans includes/fonts/) ---------- */ @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); } /* ---------- Tokens (rôles) — sombre par défaut ---------- */ :root { /* repli hex (anciens navigateurs) puis OKLCH (la 2e ligne gagne si supportée) */ --color-bg: #1b1714; --color-bg: oklch(0.16 0.012 50); --color-surface: #272320; --color-surface: oklch(0.22 0.012 55); --color-surface-2: #332e2a; --color-surface-2: oklch(0.28 0.014 55); --color-ink: #f3efe9; --color-ink: oklch(0.95 0.015 70); --color-muted: #a89f95; --color-muted: oklch(0.68 0.015 60); --color-border: #423c37; --color-border: oklch(0.34 0.014 55); --color-brand: #d98a4e; --color-brand: oklch(0.72 0.16 55); --color-brand-strong: #e89f63; --color-brand-strong: oklch(0.78 0.15 60); --color-on-brand: #1b1714; --color-on-brand: oklch(0.16 0.012 50); --color-ring: #d98a4e; --color-ring: oklch(0.72 0.16 55); --color-danger: #c8503f; --color-danger: oklch(0.62 0.19 25); --color-on-danger: #fbeeea; --color-on-danger: oklch(0.97 0.01 25); --color-success: #4fae7a; --color-success: oklch(0.66 0.15 150); --color-on-success: #11231a; --color-on-success: oklch(0.16 0.02 150); --font-display: "Instrument Serif", Georgia, serif; --font-body: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-card: 0 1px 3px rgb(0 0 0 / 0.30), 0 16px 44px rgb(0 0 0 / 0.34); --shadow-pop: 0 8px 30px rgb(0 0 0 / 0.50); --measure: 66ch; /* échelle typographique fluide (portée de theme.css moderne) */ --text-hero: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem); --text-display: clamp(2rem, 1.3rem + 3.2vw, 3.25rem); --text-body: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); --text-small: 0.8125rem; --text-eyebrow: 0.6875rem; --glow-brand: 0 6px 24px rgb(217 138 78 / 0.25); --glow-brand: 0 6px 24px oklch(0.72 0.16 55 / 0.25); color-scheme: dark; } /* Base typographique 16px. Ce thème est porté du moderne et raisonne en rem base 16 (échelle typo, max-width, gaps). Or Bootstrap 3 impose html{font-size:10px} → sans cette ligne tout le thème rend à 62.5 % (titres rapetissés, .accueil-wrap=640px au lieu de 1024). Sûr : seul ce thème utilise des rem (Bootstrap & style.css = px). */ html { font-size: 16px; } /* ---------- Mode clair optionnel ---------- */ html[data-theme="light"] { --color-bg: oklch(0.985 0.008 75); --color-surface: oklch(1 0 0); --color-surface-2: oklch(0.965 0.01 72); --color-ink: oklch(0.24 0.02 50); --color-muted: oklch(0.50 0.02 50); --color-border: oklch(0.90 0.012 70); --color-brand: oklch(0.58 0.15 48); --color-brand-strong: oklch(0.52 0.15 45); --color-on-brand: oklch(0.99 0.006 80); --color-ring: oklch(0.58 0.15 48); --color-danger: oklch(0.55 0.20 25); --color-on-danger: oklch(0.99 0.01 25); --color-success: oklch(0.52 0.14 150); --color-on-success: oklch(0.99 0.01 150); color-scheme: light; } /* ---------- Base ---------- */ html, body { background: var(--color-bg); color: var(--color-ink); } body { font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .h1, .h2, .h3 { font-family: var(--font-display); color: var(--color-ink); font-weight: 400; letter-spacing: 0.2px; } h2 { font-style: italic; } a { color: var(--color-brand); } a:hover, a:focus { color: var(--color-brand-strong); } hr { border-top-color: var(--color-border); } small, .text-muted { color: var(--color-muted) !important; } p { color: var(--color-ink); } /* Texte sur photo : dégradé (jamais une simple ombre) */ .media-scrim { background: linear-gradient(180deg, transparent 36%, rgb(8 5 3 / 0.82)); } /* Focus visible homogène */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 30%, transparent); border-radius: var(--radius-sm); } /* Mouvement réduit respecté */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Contenu privé (admin) : surbrillance discrète au lieu du jaune */ .prive { background: var(--color-surface-2); color: var(--color-ink); border-radius: var(--radius-sm); padding: 0 .25em; } /* ---------- Conteneur principal (override style.css clair) ---------- */ .container { background-color: transparent !important; box-shadow: none !important; color: var(--color-ink); font-size: inherit; } /* ---------- Bandeau / titre haut (hero immersif sobre) ---------- */ .bandeau, .TitreHaut { background: var(--color-surface) !important; color: var(--color-ink) !important; font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: 1px !important; filter: none !important; box-shadow: var(--shadow-card) !important; border-radius: var(--radius-md); } /* ---------- Navigation (Bootstrap navbar) ---------- */ .navbar-default { background: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-md); } .navbar-default .navbar-brand, .navbar-default .navbar-text { color: var(--color-ink); } .navbar-default .navbar-nav > li > a { color: var(--color-muted); } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: var(--color-ink); } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .open > a { background: var(--color-surface-2); color: var(--color-ink); } .navbar-default .navbar-toggle { border-color: var(--color-border); } .navbar-default .navbar-toggle .icon-bar { background: var(--color-ink); } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: var(--color-surface-2); } /* Menus déroulants */ .dropdown-menu { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-pop); } .dropdown-menu > li > a { color: var(--color-ink); } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--color-surface-2); color: var(--color-ink); } .dropdown-header, .dropdown-menu .divider { border-color: var(--color-border); } /* Bouton d'action (form POST) présenté comme une entrée de menu déroulant — ex. « Nouveau carnet » (evo-88) */ .dropdown-menu > li > form { margin: 0; } .menu-outils-bouton { display: block; width: 100%; padding: 3px 20px; text-align: left; background: none; border: 0; color: var(--color-ink); font: inherit; line-height: 1.42857143; white-space: nowrap; cursor: pointer; } .menu-outils-bouton:hover, .menu-outils-bouton:focus { background: var(--color-surface-2); color: var(--color-ink); outline: none; } /* ---------- Surfaces (panels, wells, thumbnails) ---------- */ .panel, .well, .thumbnail, .list-group-item { background: var(--color-surface); border-color: var(--color-border); color: var(--color-ink); box-shadow: none; } .panel-default > .panel-heading { background: var(--color-surface-2); color: var(--color-ink); border-color: var(--color-border); } /* ---------- Boutons ---------- */ .btn-primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); font-weight: 600; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--color-brand-strong); border-color: var(--color-brand-strong); color: var(--color-on-brand); } .btn-default { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-ink); } .btn-default:hover, .btn-default:focus { background: var(--color-border); color: var(--color-ink); } .btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-danger); } .btn-success { background: var(--color-success); border-color: var(--color-success); color: var(--color-on-success); } .btn-link { color: var(--color-brand); } /* ---------- Formulaires ---------- */ .form-control { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-ink); box-shadow: none; } .form-control:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 25%, transparent); } .form-control::placeholder { color: var(--color-muted); } label, .control-label { color: var(--color-ink); } /* ---------- Tableaux (statistiques) ---------- */ .table { color: var(--color-ink); } .table > thead > tr > th { border-bottom-color: var(--color-border); color: var(--color-muted); } .table > tbody > tr > td, .table > tbody > tr > th { border-top-color: var(--color-border); } .table-striped > tbody > tr:nth-of-type(odd) { background: var(--color-surface); } .table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--color-border); } /* ---------- Modales (dont la connexion admin) ---------- */ .modal-content { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border); box-shadow: var(--shadow-pop); border-radius: var(--radius-md); } .modal-header, .modal-footer { border-color: var(--color-border); } .modal-title { font-family: var(--font-display); } .close { color: var(--color-ink); opacity: .7; text-shadow: none; } .close:hover { color: var(--color-ink); opacity: 1; } /* ---------- Images : ombres adaptées au fond sombre ---------- */ .image, .image2, .image3, .div_1 { box-shadow: var(--shadow-card) !important; filter: none !important; } .image_grande { border-color: var(--color-border); } /* ---------- Légendes d'images : style « scrim » sombre ---------- */ .image_soustitre_200, .image_soustitre_250 { background-color: color-mix(in oklab, var(--color-bg) 70%, transparent) !important; color: var(--color-ink) !important; opacity: 1 !important; font-family: var(--font-body) !important; border-color: var(--color-border) !important; backdrop-filter: blur(2px); } .soustitreCaroussel { font-family: var(--font-display) !important; color: var(--color-ink) !important; text-shadow: 0 2px 8px rgb(0 0 0 / 0.8); } /* Pastilles date / pagination sur fond sombre */ .dateJour { border-color: var(--color-brand); color: var(--color-ink); } .rond_pagination { border-color: var(--color-muted); } /* ---------- Liens « EC » (en construction, admin) ---------- */ /* surbrillance lime héritée -> repère brand discret */ [style*="lime"] { background-color: var(--color-surface-2) !important; } /* ---------- Pied de page ---------- */ footer, .footer { color: var(--color-muted); } footer a, .footer a { color: var(--color-muted); } footer a:hover { color: var(--color-ink); } /* ---------- Abonnement email (evo-103) — popup, ouverte par le bouton de l'en-tête ---------- */ .abo-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 16px; } .abo-modal-overlay[hidden] { display: none; } .abo-modal-box { position: relative; width: 100%; max-width: 420px; background: var(--color-surface, #1c2733); border: 1px solid var(--color-border, #33414f); border-radius: 12px; padding: 24px 22px 18px; box-shadow: var(--shadow-pop, 0 8px 30px rgba(0,0,0,.4)); } .abo-modal-fermer { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--color-muted); cursor: pointer; padding: 4px 8px; } .abo-modal-fermer:hover { color: var(--color-ink, #e8edf2); } .abonnement-form { text-align: center; } .abonnement-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .abonnement-label { display: block; font-size: 14px; font-weight: 600; color: var(--color-ink, #e8edf2); margin-bottom: 10px; } .abonnement-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .abonnement-input { max-width: 260px; } .abonnement-hint { font-size: 12px; color: var(--color-muted); margin: 8px 0 0; } /* ---------- Accueil : grille immersive de carnets (evo-50, calqué CarnetCard.tsx) ---------- */ .accueil-grille { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .accueil-grille { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .accueil-grille { grid-template-columns: repeat(3, 1fr); } } .carnet-card-link { display: block; position: relative; overflow: hidden; border-radius: var(--radius-md); height: 280px; background: var(--color-surface-2); } .carnet-card-link:hover, .carnet-card-link:focus { text-decoration: none; } .carnet-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .carnet-card-link:hover .carnet-card-img, .carnet-card-link:focus .carnet-card-img { transform: scale(1.05); } .carnet-card-scrim { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; background: linear-gradient(180deg, rgb(8 5 3 / 0.3) 0%, rgb(8 5 3 / 0.15) 45%, rgb(8 5 3 / 0.55) 100%); } .carnet-card-eyebrow { font-size: var(--text-eyebrow); color: var(--color-brand); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; text-shadow: 0 1px 4px rgb(0 0 0 / 0.8); } .carnet-card-title { font-family: var(--font-display); font-size: 30px; line-height: 1.2; color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / 0.85), 0 1px 3px rgb(0 0 0 / 0.9); } .carnet-card-badge { position: absolute; right: 12px; top: 12px; z-index: 2; background: var(--color-brand); color: var(--color-on-brand); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--radius-pill); } /* lueur de marque au survol (transition sur box-shadow) */ .carnet-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); box-shadow: var(--glow-brand); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .carnet-card-link:hover::after, .carnet-card-link:focus::after { opacity: 1; } /* ---------- Sommaire du carnet (parité moderne : sticky + scrollspy) ---------- */ .carnet-toc { font-size: var(--text-small); } .carnet-toc-titre { font-family: var(--font-body); font-size: .95rem; font-weight: 600; font-style: normal; /* annule le h2 { italic } global */ color: var(--color-ink); margin: 0 0 10px; } .carnet-toc-list { list-style: none; margin: 0; padding: 0; } .carnet-toc-list li { margin: 0; } .carnet-toc-link { display: block; border-left: 2px solid transparent; padding: 4px 0 4px 12px; color: var(--color-muted); text-decoration: none; line-height: 1.3; transition: color .15s ease, border-color .15s ease; } .carnet-toc-link:hover, .carnet-toc-link:focus { color: var(--color-ink); text-decoration: none; } .carnet-toc-link.is-active { border-left-color: var(--toc-accent, var(--color-brand)); color: var(--color-ink); font-weight: 500; } /* sticky desktop uniquement (sur mobile la colonne s'empile au-dessus du contenu). max-height + overflow-y : un sommaire plus long que l'écran (carnet avec beaucoup d'étapes, ex. carnet 606) devient défilable dans sa propre boîte au lieu de déborder sous le viewport sans moyen d'atteindre les dernières lignes. */ @media (min-width: 768px) { .carnet-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } } /* La ligne du carnet passe en flex (desktop) pour que la colonne gauche s'étire à la hauteur de la ligne — sans ça, en grille flottante BS3 elle ne fait que la hauteur de son contenu et le sticky n'a aucun espace pour rester visible au scroll. */ @media (min-width: 768px) { .carnet-body { display: flex; } .carnet-body > [class*="col-sm-"] { float: none; } } /* conteneur centré du corps carnet (parité moderne max-w-6xl) — rapproche le sommaire du contenu */ .carnet-wrap { max-width: 72rem; margin: 0 auto; padding: 0 16px; } /* #1 : chaque étape dans sa propre box (parité moderne : section card) Flex (au lieu de float:left) : une légende de photo sur 2 lignes agrandit son cadre sans décaler celles des voisines — avec des floats, un cadre plus haut cassait l'alignement à gauche des photos suivantes (chaque ligne se cale sur la plus haute de SA ligne, pas sur celle d'avant). Les blocs pleine largeur (titre, paragraphe) portent width:100% en inline pour forcer le retour à la ligne (équivalent flex du clear:both). */ .carnet-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 24px; display: flex; flex-wrap: wrap; align-items: flex-start; } /* Titre de section (parité moderne SectionTitre) : barre gauche accent + liseré bas + coin arrondi */ .section-titre { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-border); border-left: 4px solid var(--titre-accent, var(--color-brand)); border-bottom-right-radius: var(--radius-lg); padding: 6px 8px 10px; margin-bottom: 14px; } .section-titre-h2 { font-family: var(--font-display); font-style: italic; color: var(--color-ink); margin: 0; font-size: 1.6rem; line-height: 1.2; font-weight: 400; } /* pastille date — TOUJOURS orange, en gras (la couleur d'accent ne s'applique qu'à la barre) */ .section-date { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-brand); color: var(--color-on-brand); font-weight: 700; line-height: 1.05; text-align: center; } /* étape sans date : emplacement réservé (invisible) pour aligner les titres */ .section-date--vide { background: transparent; box-shadow: none; } /* admin : placeholder cliquable pour ajouter une date */ .section-date--ajout { border: 1px dashed var(--color-border); color: var(--color-muted); font-size: 22px; opacity: .5; } .section-date--ajout:hover { opacity: 1; color: var(--color-brand); border-color: var(--color-brand); } /* admin : édition inline de la date (champ dans la pastille) */ .section-date-inp { width: 62px; font-size: 12px; text-align: center; border: 1px solid var(--color-brand); border-radius: 6px; padding: 2px; background: var(--color-surface); color: var(--color-ink); } /* admin : bouton « couverture » d'une photo (image de référence REF) */ .carnet-cover { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--color-muted); text-decoration: none; border: 1px solid var(--color-border); border-radius: 6px; padding: 1px 8px; } .carnet-cover:hover { color: var(--color-brand); border-color: var(--color-brand); } .carnet-cover.is-cover { color: #3a2a00; background: #ffd54a; border: 2px solid #e0a800; font-weight: 700; box-shadow: 0 0 0 2px rgba(255,213,74,.35); } .carnet-cover.is-cover::before { content: "\2713"; margin-right: 3px; font-weight: 700; } /* admin : bouton « inclure dans le carrousel » d'une photo (valeur_4 = CARR) */ .carnet-carousel { display: inline-block; margin-top: 4px; margin-left: 4px; font-size: 14px; color: var(--color-muted); text-decoration: none; border: 1px solid var(--color-border); border-radius: 6px; padding: 1px 8px; } .carnet-carousel:hover { color: var(--color-brand); border-color: var(--color-brand); } .carnet-carousel.is-carousel { color: #fff; background: var(--color-brand); border: 2px solid var(--color-brand); font-weight: 700; box-shadow: 0 0 0 2px rgba(217,138,78,.35); } .carnet-carousel.is-carousel::before { content: "\2713"; margin-right: 3px; font-weight: 700; } /* admin : bouton « traduire ce bloc » (FR -> EN/NL via Gemini) */ .carnet-trad { font-size: 12px; text-decoration: none; border: 1px solid var(--color-border); border-radius: 6px; padding: 1px 8px; color: var(--color-muted); } .carnet-trad:hover { color: var(--color-brand); border-color: var(--color-brand); } .carnet-trad.is-loading { pointer-events: none; opacity: .8; border-color: var(--color-brand); color: var(--color-brand); } .carnet-trad-spin { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: 3px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: carnet-trad-spin .6s linear infinite; } @keyframes carnet-trad-spin { to { transform: rotate(360deg); } } /* bouton "Traduction de toute la journée" sur le titre : plus visible que .carnet-trad (action de groupe) */ .carnet-trad-jour { font-size: 13px; font-weight: 600; text-decoration: none; border-radius: 6px; padding: 3px 10px; margin-left: 8px; vertical-align: middle; background: var(--color-surface-2); color: var(--color-brand); border: 1px solid var(--color-brand); } .carnet-trad-jour:hover { background: var(--color-brand); color: var(--color-on-brand); } .carnet-trad-jour.is-loading { pointer-events: none; opacity: .8; } /* Glisser-déposer des blocs (remplace les anciennes flèches monter/descendre) — evo-102. */ .carnet-drag-handle { cursor: grab; font-size: 15px; color: var(--color-muted); margin-right: 4px; } .carnet-drag-handle:active { cursor: grabbing; } [data-block-id].is-dragging { opacity: .35; } [data-block-id].drag-over-top { box-shadow: inset 0 3px 0 0 var(--color-brand); } [data-block-id].drag-over-bottom { box-shadow: inset 0 -3px 0 0 var(--color-brand); } /* Mini-carte de section : bouton « Voir / Masquer la carte » (parité moderne MiniCarte) */ .mini-carte { margin: 8px 0 8px 30px; } .mini-carte-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-muted); padding: 4px 10px; font-size: var(--text-small); line-height: 1.2; font-family: var(--font-body); cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .mini-carte-btn:hover, .mini-carte-btn:focus { background: var(--color-surface-2); color: var(--color-brand); border-color: var(--color-brand); } .mini-carte .leaflet-mini { margin-top: 8px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); } /* ---------- Page carnet : colonne de lecture confortable (evo-51) ---------- */ .carnet-texte, .texte-carnet, .article-texte { max-width: var(--measure); } /* ---------- Accent par carnet (evo-66) : variable surchargeable ---------- */ /* Les écrans carnet peuvent poser style="--accent: " sur un conteneur ; à défaut on retombe sur brand. */ [data-accent] { --color-brand: var(--accent, var(--color-brand)); } /* ---------- Lisibilité des commentaires publics (evo-55) ---------- */ .commentaire, .comment, .zone-commentaire { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-ink); padding: 12px 16px; margin-bottom: 12px; } .commentaire .auteur, .comment .auteur { color: var(--color-brand-strong); font-weight: 600; } .commentaire .date, .comment .date { color: var(--color-muted); font-size: .8125rem; } /* ---------- Sections de carnet en panneaux (evo-61) ---------- */ .carnet-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 18px; } /* ---------- Stats sur hero / encart « voyage en chiffres » (evo-72, evo-76) ---------- */ .encart-chiffres { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 24px; margin: 18px 0; } .encart-chiffres .chiffre { text-align: center; } .encart-chiffres .chiffre .valeur { font-family: var(--font-display); font-size: 2rem; color: var(--color-brand-strong); display: block; line-height: 1; } .encart-chiffres .chiffre .libelle { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-muted); } /* ---------- Skip-link accessibilité (evo-33) ---------- */ .skip-link { position: absolute; left: 8px; top: -48px; z-index: 2000; background: var(--color-brand); color: var(--color-on-brand); padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 600; transition: top .15s ease; } .skip-link:focus { top: 8px; color: var(--color-on-brand); text-decoration: none; } /* ---------- Bouton « retour en haut » (evo-60) ---------- */ #retour-haut { position: fixed; right: 18px; bottom: 18px; z-index: 1500; width: 50px; height: 50px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); font-size: 24px; line-height: 1; box-shadow: var(--shadow-pop); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; } #retour-haut.visible { opacity: 1; visibility: visible; } #retour-haut:hover { background: var(--color-surface-2); } /* Flèche étirée horizontalement (scaleX) SANS agrandir le bouton lui-même. */ .retour-haut-fleche { display: inline-block; transform: scaleX(1.5); } /* ---------- Partage & ancres de section (evo-59) ---------- */ /* lien d'ancre discret : invisible au repos, apparaît au survol du titre (parité moderne CopyAnchor) */ .copie-ancre { font-size: .62em; text-decoration: none; opacity: 0; margin-left: 8px; vertical-align: middle; color: var(--color-muted); transition: opacity .15s ease, color .15s ease; } .section-titre:hover .copie-ancre, h2:hover .copie-ancre, .copie-ancre:focus { opacity: .8; } .copie-ancre:hover { opacity: 1; color: var(--color-brand); } #toast-lien { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--color-success); color: var(--color-on-success); padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 600; box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 2000; } #toast-lien.on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ============================================================ Démonstrateur de PARITÉ accueil (calqué sur le moderne Next.js) ============================================================ */ /* ---------- En-tête : logo + nav + langues + bascule thème ---------- */ .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); } .site-header .nav-row { max-width: 64rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 16px; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .brand:hover { text-decoration: none; } .brand-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-display); font-size: 1.125rem; line-height: 1; } .brand-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-ink); } .site-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .site-nav a { font-size: .875rem; color: var(--color-muted); text-decoration: none; } .site-nav a:hover { color: var(--color-brand); } .site-nav .lang a.actif { color: var(--color-brand); font-weight: 600; } .site-nav .lang .sep { color: var(--color-border); } .theme-toggle { background: none; border: 0; color: var(--color-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; } .theme-toggle:hover { color: var(--color-brand); } /* ---------- Hero rotatif (carrousel cross-fade, calqué HeroCarousel.tsx) ---------- */ .hero { position: relative; display: block; width: 100%; box-sizing: border-box; margin: 0 0 32px; padding: 0; border-radius: var(--radius-lg); overflow: hidden; height: clamp(340px, 45vw, 520px); background: var(--color-surface); box-shadow: var(--shadow-card); } /* diapos empilées — fondu enchaîné par opacité (700 ms) */ .hero-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .7s ease; } .hero-slide.is-active { opacity: 1; pointer-events: auto; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 36%, rgb(8 5 3 / 0.82)); } /* contenu bas-gauche */ .hero-inner { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; } @media (min-width: 768px) { .hero-inner { padding: 40px; } } .eyebrow { font-size: var(--text-eyebrow); color: var(--color-brand); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin: 0; } .hero-title { font-family: var(--font-display); font-size: var(--text-hero); line-height: 1.05; color: #fff; margin: 0; font-weight: 400; font-style: normal; /* parité moderne : titre hero droit (annule le h2 { italic } global) */ } .hero-sub { color: rgba(255,255,255,.9); font-size: var(--text-body); max-width: 36rem; margin: 0; line-height: 1.5; } .hero-stats { color: rgba(255,255,255,.82); font-size: var(--text-small); margin: 0; } .btn-decouvrir { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 8px; background: var(--color-brand-strong); color: var(--color-on-brand); padding: 13px 24px; border-radius: 11px; font-weight: 600; font-size: var(--text-body); text-decoration: none; transition: opacity .2s ease; } .btn-decouvrir:hover { opacity: .9; color: var(--color-on-brand); text-decoration: none; } /* points de navigation — bas-droite */ .hero-dots { position: absolute; right: 24px; bottom: 24px; z-index: 3; display: flex; gap: 8px; } @media (min-width: 768px) { .hero-dots { right: 40px; bottom: 40px; } } .hero-dot { height: 8px; width: 8px; padding: 0; border: 0; border-radius: var(--radius-pill); background: rgb(255 255 255 / .5); cursor: pointer; transition: all .3s ease; } .hero-dot:hover { background: rgb(255 255 255 / .8); } .hero-dot.is-active { width: 24px; background: #fff; } /* ---------- Conteneur grille accueil (largeur cadrée, max-w-5xl) ---------- */ .accueil-wrap { max-width: 64rem; margin: 0 auto; padding: 0 16px 48px; } /* ---------- Lien secondaire « Carte des voyages » (pilule, calqué moderne) ---------- */ .accueil-carte-lien { margin: 0 0 16px; } .lien-carte { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 16px; font-size: var(--text-small); font-weight: 500; color: var(--color-muted); text-decoration: none; transition: color .2s ease, border-color .2s ease; } .lien-carte:hover, .lien-carte:focus { border-color: var(--color-brand); color: var(--color-brand); text-decoration: none; } /* ---------- Page « Carte des voyages » (Google Maps + tuiles aquarelle) ---------- */ .carte-wrap { max-width: 64rem; margin: 0 auto; padding: 16px 16px 48px; } /* Empile le titre AU-DESSUS du globe (au lieu d'un bloc séparé avant) : le canvas peut alors s'étendre sous le titre et le globe zoomé passe derrière lui, au lieu d'être borné par un canvas qui s'arrêtait avant le titre. */ .carte-stage { position: relative; } .carte-titre { position: absolute; top: 16px; left: 20px; z-index: 2; margin: 0; pointer-events: none; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-display); color: var(--color-ink); background: transparent; text-shadow: 0 2px 10px rgba(0,0,0,.65); } .carte-map { width: 100%; height: clamp(480px, 78vh, 760px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-surface); } /* Les infobulles Leaflet gardent leur fond clair natif (lisibilité du lien). */ .carte-attrib { font-size: .7rem; color: var(--color-muted); margin: 8px 2px 0; } .carte-attrib a { color: var(--color-muted); } .carte-attrib a:hover { color: var(--color-brand); } /* Clusters markercluster : palette « brand » (au lieu du vert/jaune par défaut) */ .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: color-mix(in oklab, var(--color-brand) 30%, transparent); } .marker-cluster-small > div, .marker-cluster-medium > div, .marker-cluster-large > div { background: var(--color-brand); } .marker-cluster span { color: var(--color-on-brand); font-weight: 600; } /* ---------- Carte parcours du carnet (Leaflet Esri satellite) ---------- */ /* sobre (parité moderne) : simple titre au-dessus de la carte, sans gros encart coloré */ .carnet-parcours-titre { color: var(--color-ink); font-size: 1rem; font-weight: 600; padding: 0 2px 8px; margin-top: 18px; font-family: var(--font-body); background: transparent; } .carnet-parcours-map { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); color: var(--color-muted); } /* ---------- Hero carnet immersif (parité CarnetHero) ---------- */ /* Hauteur et fondu réglables (evo-110, écran Paramètres) — variables posées en inline par index.php ; valeurs de repli = comportement d'origine si jamais les paramètres ne sont pas chargés. Hauteur = valeur directe (PAS un plafond de clamp() vh — un clamp(340px, 45vh, X) rendait X quasi sans effet, 45vh restant presque toujours sous X sur un écran normal). */ .carnet-hero { height: var(--hero-hauteur, 520px); } .carnet-hero .hero-slide { transition: opacity var(--hero-fondu-ms, 700ms) ease; } .carnet-hero .hero-title { margin: 0; } .carnet-hero .hero-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 24px; } @media (min-width: 768px) { .carnet-hero .hero-topbar { padding: 20px 40px; } } .hero-topbar-left { display: inline-flex; align-items: center; gap: 10px; } .hero-retour { display: inline-flex; align-items: center; color: #fff; text-decoration: none; font-size: var(--text-small); font-weight: 600; background: rgb(0 0 0 / .38); padding: 7px 13px; border-radius: var(--radius-pill); backdrop-filter: blur(2px); } .hero-retour:hover, .hero-retour:focus { color: #fff; background: rgb(0 0 0 / .58); text-decoration: none; } .hero-share { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-pill); background: rgb(0 0 0 / .38); color: #fff; cursor: pointer; backdrop-filter: blur(2px); } .hero-share:hover, .hero-share:focus { background: rgb(0 0 0 / .58); color: #fff; } .hero-badge { position: static; } .hero-compteur { color: rgb(255 255 255 / .92); font-size: var(--text-small); margin: 2px 0 0; } /* ============================================================================ Page commentaires (route « dicus ») — parité moderne (page.tsx + CommentItem) ── cartes sobres, en-tête nom/date, réponses indentées, liens discrets. On conserve les modales Bootstrap de saisie (juste re-thémées). ============================================================================ */ /* Barre d'actions (« Nouveau commentaire ») */ .commentaire-actions { margin: 0 0 14px; } /* Bandeau info « heure locale » (propre au legacy, conservé mais sobre) */ .commentaire-heure-locale { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; padding: 8px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-muted); font-size: var(--text-small); } .commentaire-heure-locale img { vertical-align: middle; } .commentaire-heure-locale b { color: var(--color-ink); } /* Liste des fils */ .commentaire-liste { display: flex; flex-direction: column; gap: 8px; } /* Une carte de commentaire (parité CommentItem : border + radius + surface) */ .commentaire-carte { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; color: var(--color-ink); } .commentaire-carte.is-aujourdhui { background: var(--color-surface-2); } /* Espace plus large entre fils (parité space-y-6) ; pas sur le tout premier */ .commentaire-racine { margin-top: 22px; } .commentaire-liste > .commentaire-racine:first-child { margin-top: 0; } /* Réponses : indentation + rail gauche (parité ml-6 / border-l-2) */ .commentaire-reponse { margin-left: 28px; border-left: 3px solid var(--color-border); } /* En-tête : auteur à gauche, date à droite (parité flex justify-between) */ .commentaire-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; } .commentaire-auteur { font-weight: 600; color: var(--color-ink); } .commentaire-date { font-size: var(--text-small); color: var(--color-muted); white-space: nowrap; } /* Corps du message (smileys en ligne, retours à la ligne préservés) */ .commentaire-corps { font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere; } .commentaire-corps img { vertical-align: middle; } /* Pied : liens discrets (Répondre brand, Supprimer muted) — parité moderne */ .commentaire-pied { display: flex; align-items: center; gap: 16px; margin-top: 8px; } .commentaire-repondre { font-size: var(--text-small); color: var(--color-brand); text-decoration: none; cursor: pointer; } .commentaire-repondre:hover, .commentaire-repondre:focus { color: var(--color-brand-strong); text-decoration: underline; } .commentaire-supprimer { background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--text-small); color: var(--color-muted); } .commentaire-supprimer:hover, .commentaire-supprimer:focus { color: var(--color-brand); text-decoration: underline; } /* Titre de la modale de saisie (remplace l'ancien color:navy en dur) */ .commentaire-modal-titre { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-ink); border-bottom: 1px solid var(--color-border); padding: 4px 0 10px; margin: 6px 0 14px; } .commentaire-modal-titre .close { float: right; } /* ============================================================================ ATELIER d'édition (admin) — route « atelier » Lot A : accueil/lanceur (en-tête + Reprendre + galerie + Outils). Interface en français ; parité AtelierAccueil.tsx (moderne). ============================================================================ */ /* (evo-94) « atelier-mode » retiré : l'atelier adopte le « style modif » (bandeau titre + navbar), comme les autres écrans admin. L'ancien masquage du chrome public n'a plus lieu d'être. */ .atelier-wrap { max-width: 1100px; margin: 0 auto; padding: 8px 4px 60px; } .atelier-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .atelier-h1 { font-family: var(--font-display); color: var(--color-ink); font-size: 2rem; margin: 0; } .atelier-sub { color: var(--color-muted); font-size: var(--text-small); margin: 2px 0 0; } .atelier-fil { margin: 0 0 10px; font-size: var(--text-small); } .atelier-fil a { color: var(--color-muted); text-decoration: none; } .atelier-fil a:hover { color: var(--color-brand); } .atelier-bloc { margin-top: 26px; } .atelier-h2 { font-family: inherit; font-size: var(--text-small); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin: 0 0 12px; } .atelier-section-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .atelier-section-tete .atelier-h2 { margin: 0; } .atelier-nouveau { margin: 0; } /* Badge de visibilité : pastille colorée + libellé muted */ .atelier-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-small); color: var(--color-muted); } .atelier-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--badge-dot, var(--color-muted)); } .badge-ok { --badge-dot: var(--color-success); } .badge-ec { --badge-dot: var(--color-brand); } .badge-ko { --badge-dot: var(--color-muted); } /* Galerie de carnets */ .atelier-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } .atelier-carte { display: block; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s, transform .15s; } .atelier-carte:hover, .atelier-carte:focus { border-color: var(--color-brand); transform: translateY(-2px); } .atelier-carte-vignette { display: block; aspect-ratio: 4 / 3; background: var(--color-surface-2); position: relative; } .atelier-carte-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; } .atelier-carte-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; opacity: .5; } .atelier-carte-pied { padding: 9px 11px 11px; } .atelier-carte-titre { display: block; color: var(--color-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .atelier-carte-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .atelier-carte-id { color: var(--color-muted); font-size: var(--text-small); } /* Carte « Reprendre » (horizontale) */ .atelier-reprendre { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px; transition: border-color .15s; } .atelier-reprendre:hover, .atelier-reprendre:focus { border-color: var(--color-brand); } .atelier-reprendre-vignette { flex: 0 0 auto; width: 144px; height: 96px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); position: relative; } .atelier-reprendre-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; } .atelier-reprendre-corps { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .atelier-reprendre-titre { color: var(--color-ink); font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .atelier-reprendre-cta { align-self: flex-start; background: var(--color-brand); color: var(--color-on-brand); font-weight: 600; font-size: var(--text-small); padding: 6px 12px; border-radius: var(--radius-md); } .atelier-reprendre:hover .atelier-reprendre-cta { background: var(--color-brand-strong); } @media (max-width: 600px) { .atelier-galerie { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .atelier-reprendre { flex-direction: column; align-items: stretch; } .atelier-reprendre-vignette { width: 100%; height: 150px; } } /* ---- Atelier édition (lot B) : barre du haut + rail + document ---- */ .atelier-barre { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .atelier-barre-fil { color: var(--color-muted); font-size: var(--text-small); min-width: 0; } .atelier-barre-fil a { color: var(--color-muted); text-decoration: none; } .atelier-barre-fil a:hover { color: var(--color-brand); } .atelier-barre-fil b { color: var(--color-ink); } .atelier-fil-sep { margin: 0 4px; opacity: .6; } .atelier-barre-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* contrôle segmenté (visibilité, langue) */ .atelier-seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } .atelier-seg > button, .atelier-seg > a { border: 0; background: transparent; color: var(--color-muted); cursor: pointer; padding: 5px 11px; font-size: var(--text-small); text-decoration: none; line-height: 1.2; } .atelier-seg > button:not(:last-child), .atelier-seg > a:not(:last-child) { border-right: 1px solid var(--color-border); } .atelier-seg > .is-active { background: var(--color-brand); color: var(--color-on-brand); font-weight: 600; } .atelier-seg > button:not(.is-active):not([disabled]):hover, .atelier-seg > a:not(.is-active):hover { color: var(--color-ink); } .atelier-seg > button[disabled] { cursor: default; } /* bouton d'action */ .atelier-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--color-border); background: transparent; color: var(--color-ink); border-radius: var(--radius-md); padding: 5px 11px; font-size: var(--text-small); text-decoration: none; cursor: pointer; line-height: 1.2; } .atelier-btn:hover:not([disabled]) { border-color: var(--color-brand); color: var(--color-brand); } .atelier-btn[disabled] { opacity: .5; cursor: default; } .atelier-btn.is-active { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand); } .atelier-sync { color: var(--color-success); font-size: var(--text-small); white-space: nowrap; } .atelier-sync.is-dirty { color: var(--color-brand); } /* vue d'édition de la carte (jalon H) : overlay grande carte + panneau « Points GPS » */ body.carte-ouverte { overflow: hidden; } .carte-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; background: var(--color-bg, #1b1714); } .carte-overlay[hidden] { display: none; } /* sinon display:flex écrase le hidden */ .carte-zone { position: relative; flex: 1; min-width: 0; } .carte-edit-map { position: absolute; inset: 0; } .carte-fermer { position: absolute; right: 14px; top: 14px; z-index: 1000; width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); font-size: 16px; line-height: 1; cursor: pointer; } .carte-fermer:hover { color: var(--color-brand); border-color: var(--color-brand); } .carte-panneau { flex: 0 0 300px; display: flex; flex-direction: column; border-left: 1px solid var(--color-border); background: var(--color-surface); } .carte-panneau-tete { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--color-border); } .carte-panneau-tete h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-ink); } .carte-panneau-compte { border-radius: var(--radius-pill); padding: 2px 9px; font-size: 11px; background: var(--color-surface-2); color: var(--color-muted); } .carte-liste { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; } .carte-vide { padding: 16px; text-align: center; color: var(--color-muted); font-size: var(--text-small); } .carte-item { display: flex; align-items: stretch; gap: 4px; border: 1px solid transparent; border-radius: var(--radius-sm); } .carte-item.is-sel { border-color: var(--color-brand); background: rgba(217, 138, 78, 0.10); } .carte-item[draggable="true"] { cursor: grab; } .carte-item.is-dragging { opacity: .4; } .carte-item.drag-over-top { box-shadow: inset 0 3px 0 0 var(--color-brand); } .carte-item.drag-over-bottom { box-shadow: inset 0 -3px 0 0 var(--color-brand); } .carte-item-sel { flex: 1; min-width: 0; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 10px; } .carte-item-nom { display: block; color: var(--color-ink); font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .carte-item.is-sel .carte-item-nom { color: var(--color-brand-strong); } .carte-item-etape { color: var(--color-muted); font-size: 10.5px; font-weight: 400; } .carte-item-coords { display: block; margin-top: 2px; font-family: monospace; font-size: 11px; color: var(--color-muted); } .carte-item-actions { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-right: 5px; } .carte-item-actions button { width: 24px; height: 24px; border: none; background: none; color: var(--color-muted); font-size: 12px; cursor: pointer; border-radius: var(--radius-sm); } .carte-item-actions button:hover { background: var(--color-surface-2); color: var(--color-ink); } /* bouton "vol avion vers le point suivant" (evo-102) */ .carte-item-avion { width: 26px; height: 26px; border: none; background: none; color: var(--color-muted); font-size: 14px; cursor: pointer; border-radius: var(--radius-sm); opacity: .55; } .carte-item-avion:hover { background: var(--color-surface-2); opacity: 1; } .carte-item-avion.is-actif { opacity: 1; color: var(--color-brand); background: rgba(217, 138, 78, 0.15); } .carte-item-edit { flex: 1; min-width: 0; margin: 6px; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-ink); font-size: 13px; } .carte-item-edit:focus { outline: none; border-color: var(--color-brand); } .carte-item-ok, .carte-item-no { align-self: center; width: 28px; height: 28px; margin-right: 4px; border: none; background: none; cursor: pointer; font-size: 13px; border-radius: var(--radius-sm); } .carte-item-ok { color: var(--color-brand); } .carte-item-ok:hover { background: var(--color-surface-2); } .carte-item-no { color: var(--color-muted); } .carte-item-no:hover { background: var(--color-surface-2); color: var(--color-ink); } .carte-panneau-pied { border-top: 1px solid var(--color-border); padding: 12px; } .carte-ajouter { width: 100%; padding: 9px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-ink); font-size: 13.5px; cursor: pointer; } .carte-ajouter:hover { border-color: var(--color-brand); color: var(--color-brand); } .carte-aide { margin: 6px 0 0; text-align: center; font-size: 10.5px; color: var(--color-muted); } /* dépôt multi-photos (jalon G1) : indicateur de progression */ .atelier-upload-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-ink); border: 1px solid var(--color-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); font-size: var(--text-small); } .atelier-upload-toast.is-err { border-color: #e23b2e; color: #e23b2e; } /* planche de légendage (jalon G2) : modale plein écran */ body.planche-ouverte { overflow: hidden; } .planche-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; padding: 24px; } .planche-overlay[hidden] { display: none; } /* sinon display:flex écrase le hidden */ .planche-cadre { display: flex; flex-direction: column; gap: 12px; width: min(1100px, 96vw); max-height: 94vh; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; } .planche-tete { display: flex; align-items: center; justify-content: space-between; } .planche-compteur { color: var(--color-muted); font-size: var(--text-small); } .planche-fermer { border: none; background: transparent; color: var(--color-ink); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; } .planche-corps { display: flex; align-items: center; gap: 8px; min-height: 0; flex: 1; } .planche-media { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; } .planche-media img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-sm); } .planche-nav { flex: 0 0 auto; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-ink); font-size: 28px; line-height: 1; width: 44px; height: 64px; border-radius: var(--radius-sm); cursor: pointer; } .planche-nav:hover:not(:disabled) { border-color: var(--color-brand); color: var(--color-brand); } .planche-nav:disabled { opacity: .35; cursor: default; } .planche-pied { display: flex; flex-direction: column; gap: 6px; } .planche-legende { width: 100%; box-sizing: border-box; resize: vertical; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-ink); font: inherit; } .planche-legende:focus { outline: none; border-color: var(--color-brand); } .planche-aide { color: var(--color-muted); font-size: var(--text-small); } /* corps : rail (gauche) + document (centre) */ .atelier-edit-wrap { max-width: 1100px; margin: 0 auto; } .atelier-edit-corps { display: flex; gap: 28px; align-items: flex-start; } /* rail entier sticky (sommaire + « + Nouvelle étape ») → l'ajout d'étape reste accessible au scroll */ .atelier-rail { flex: 0 0 232px; position: sticky; top: 64px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; } .atelier-rail .carnet-toc { position: static; max-height: none; overflow-y: auto; flex: 1 1 auto; min-height: 0; } /* sommaire scrollable */ .atelier-rail .atelier-add-etape { display: block; width: 100%; margin-top: 10px; text-align: center; flex: 0 0 auto; } /* bouton toujours visible en bas */ .atelier-doc { flex: 1 1 auto; min-width: 0; max-width: 760px; } .atelier-doc .carnet-section { margin-bottom: 18px; } /* blocs du document (atelier) */ .atelier-bloc-texte { overflow-wrap: break-word; line-height: 1.8; font-size: 1.0625rem; color: var(--color-ink); margin: 10px; max-width: var(--measure); } .atelier-img { display: inline-flex; flex-direction: column; align-items: center; float: left; margin: 5px; width: 205px; } .atelier-img-vignette { max-width: 195px; border-radius: 4px; box-shadow: 3px 5px 8px rgba(0,0,0,.5); } .atelier-img-legende { font-size: var(--text-small); color: var(--color-muted); text-align: center; margin-top: 3px; max-width: 195px; } /* Édition inline (lot D) */ .atelier-editable { cursor: text; border-radius: 6px; transition: background .12s, box-shadow .12s; } .atelier-editable:hover:not(.is-editing) { background: var(--color-surface-2); box-shadow: 0 0 0 3px var(--color-surface-2); } .atelier-edit-ta { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; display: block; background: var(--color-bg); color: var(--color-ink); border: 1px solid var(--color-brand); border-radius: 6px; padding: 6px 8px; margin: 0; font: inherit; line-height: inherit; } .atelier-legende-vide { display: inline-flex; align-items: center; justify-content: center; color: var(--color-muted); border: 1px dashed var(--color-border); border-radius: 6px; padding: 2px 10px; font-size: 14px; line-height: 1.4; } .atelier-legende-vide:hover { color: var(--color-brand); border-color: var(--color-brand); } /* Vignettes photo/vidéo uniformisées : même gabarit quelle que soit l'orientation d'origine. object-fit: contain (pas cover) : une photo portrait très étroite se retrouvait ÉNORMÉMENT recadrée en cover (à peine une bande centrale visible) — contain montre la photo ENTIÈRE, quitte à laisser une marge de chaque côté (comblée par le fond du thème) pour les portraits. Même position de légende sous la vignette dans tous les cas. */ .vignette-media { display: block; width: 200px; height: 150px; object-fit: contain; background: var(--color-surface-2); border-radius: 3px; box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.5); } .vignette-legende { width: 200px; font-size: 12px; color: var(--color-muted); text-align: center; margin: 4px 0 0; word-wrap: break-word; } /* bouton "Scinder ici en 2 paragraphes" (édition d'un TEXTE) */ .atelier-split-btn { display: block; margin-top: 6px; font-size: 12px; border-radius: 6px; padding: 3px 10px; background: var(--color-surface-2); color: var(--color-muted); border: 1px solid var(--color-border); cursor: pointer; } .atelier-split-btn:hover { color: var(--color-brand); border-color: var(--color-brand); } .atelier-split-btn:disabled { opacity: .6; cursor: default; } /* Structure (lot E) : mini-barres d'action, boutons d'ajout, toast d'annulation */ .atelier-unite { position: relative; clear: both; } /* le paragraphe passe SOUS les images flottantes (parité F003) */ .atelier-unite-actions { position: absolute; top: 2px; right: 2px; display: flex; gap: 3px; z-index: 6; opacity: .55; transition: opacity .12s; } /* evo-96 : toujours visibles */ .atelier-unite:hover .atelier-unite-actions { opacity: 1; } .atelier-unite-actions button, .atelier-img-actions button, .atelier-etape-actions button { border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-ink); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; } .atelier-unite-actions button:hover, .atelier-img-actions button:hover, .atelier-etape-actions button:hover { border-color: var(--color-brand); color: var(--color-brand); } .atelier-img { position: relative; } .atelier-img-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; z-index: 6; opacity: .55; transition: opacity .12s; } /* evo-96 : toujours visibles */ .atelier-img:hover .atelier-img-actions { opacity: 1; } .atelier-etape-actions { margin-left: auto; display: flex; gap: 3px; opacity: .55; transition: opacity .12s; } /* evo-96 : toujours visibles */ .carnet-section:hover .atelier-etape-actions { opacity: 1; } /* evo-98 : barre de pilotage admin sur la vue d'un carnet (statut + à la une + carte + traduire + photos) */ .carnet-admin-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 14px; padding: 8px 12px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 10px; } .carnet-admin-barre .cab-label { font-weight: 700; color: var(--color-muted); } .carnet-admin-barre .cab-flash { color: var(--color-brand); font-size: var(--text-small); min-width: 90px; } /* menu « + » insérer Texte / Sous-titre après un bloc */ .atelier-insert-menu { position: absolute; z-index: 50; min-width: 132px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 6px 20px rgb(0 0 0 / .5); } .atelier-insert-menu button { background: transparent; border: 0; color: var(--color-ink); padding: 7px 16px; text-align: left; border-radius: 5px; cursor: pointer; font-size: var(--text-small); white-space: nowrap; } .atelier-insert-menu button:hover { background: var(--color-brand); color: var(--color-on-brand); } /* sous-titre (bloc TEXTE

) dans le document */ .atelier-bloc-texte h4 { font-family: var(--font-display); font-style: italic; color: var(--color-ink); font-size: 1.25rem; margin: 4px 0 2px; } /* sous-titre de groupe de photos (bloc TEXTE réduit à

…

, ex. "Grotte Mua") : italique dans la police display du site, couleur d'accent, marge haute généreuse pour bien le détacher du texte/photos précédents, fin liseré avant la série de photos qui suit. Couleurs en variables de thème -> s'adapte automatiquement au fond clair/sombre. */ .carnet-section h4 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.3rem; color: var(--color-brand); margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border); } .atelier-add { border: 1px dashed var(--color-border); background: transparent; color: var(--color-muted); border-radius: var(--radius-md); padding: 6px 14px; cursor: pointer; font-size: var(--text-small); } .atelier-add:hover { border-color: var(--color-brand); color: var(--color-brand); } .atelier-fin-section { clear: both; padding: 8px 10px 2px; } .atelier-fin-doc { clear: both; text-align: center; margin: 18px 0 4px; } .atelier-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--color-surface-2); color: var(--color-ink); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 10px 18px; z-index: 1000; box-shadow: 0 6px 24px rgb(0 0 0 / .5); display: flex; align-items: center; gap: 10px; font-size: var(--text-small); } .atelier-toast button { background: var(--color-brand); color: var(--color-on-brand); border: 0; border-radius: var(--radius-md); padding: 4px 12px; font-weight: 600; cursor: pointer; } .atelier-toast .raccourci { color: var(--color-muted); } .atelier-toast.out { opacity: 0; transition: opacity .3s; } /* Navigation clavier (lot F) : surbrillance focus + fenêtre d'aide (look aligné sur le moderne) */ .atelier-editable.is-focus { outline: 2px solid var(--color-brand); outline-offset: 3px; } .atelier-aide { position: fixed; inset: 0; background: rgb(0 0 0 / .55); z-index: 1100; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 8vh 16px; } .atelier-aide-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); width: 100%; max-width: 640px; box-shadow: 0 12px 48px rgb(0 0 0 / .6); overflow: hidden; } .aide-tete { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); padding: 14px 20px; } .aide-tete h2 { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--color-ink); margin: 0; } .aide-fermer { width: 28px; height: 28px; border: 0; background: transparent; color: var(--color-muted); border-radius: 6px; cursor: pointer; font-size: 13px; } .aide-fermer:hover { background: var(--color-surface-2); color: var(--color-ink); } .aide-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; padding: 16px 20px; } .aide-groupe h3 { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--color-muted); margin: 0 0 8px; } .aide-groupe ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .aide-groupe li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .aide-action { font-size: 13px; color: var(--color-ink); } .aide-combos { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .aide-combos .ou { font-size: 11px; color: var(--color-muted); } .aide-combos .plus { font-size: 10px; color: var(--color-muted); margin: 0 1px; } .atelier-aide kbd { display: inline-block; border: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: 4px; padding: 1px 6px; font-family: monospace; font-size: 11px; color: var(--color-muted); } .aide-pied { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-border); padding: 10px 20px; font-size: 11px; color: var(--color-muted); } .aide-pied-echap { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 560px) { .aide-grille { grid-template-columns: 1fr; } } @media (max-width: 900px) { .atelier-edit-corps { flex-direction: column; } .atelier-rail { flex: 1 1 auto; } }