/* ============================================================================ Glide Guide — Public design system Feuille unique du site public. CSS natif, aucun framework, aucun CDN (CSP). Thèmes clair (défaut) + sombre via variables CSS et [data-theme] sur . 1. Tokens 8. Cartes 15. Tableaux 2. Reset / base 9. Badges 16. Alertes / toasts 3. Layout 10. Sections 17. États vides / loaders 4. Skip link 11. Hero / header 18. Pagination / retour 5. Header / nav 12. Accordéons 19. Utilitaires 6. Footer 13. Formulaires 20. Responsive 7. Boutons 14. Brief (étapes) 21. Mouvement réduit / print ========================================================================== */ /* ─── 1. TOKENS ──────────────────────────────────────────────────────────── */ :root { color-scheme: light; --gg-font-head: 'Fraunces', Georgia, 'Times New Roman', serif; --gg-font-body: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Échelle typographique fluide */ --gg-fs-xs: 0.78rem; --gg-fs-sm: 0.86rem; --gg-fs-base: 0.98rem; --gg-fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); --gg-fs-lg: clamp(1.12rem, 1.05rem + 0.35vw, 1.28rem); --gg-fs-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem); --gg-fs-2xl: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem); --gg-fs-3xl: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem); --gg-lh-tight: 1.15; --gg-lh-snug: 1.35; --gg-lh-base: 1.65; /* Espacement (multiples de 4) */ --gg-sp-1: 4px; --gg-sp-2: 8px; --gg-sp-3: 12px; --gg-sp-4: 16px; --gg-sp-5: 24px; --gg-sp-6: 32px; --gg-sp-7: 48px; --gg-sp-8: 64px; --gg-sp-9: 96px; /* Écart chiffre / libellé dans les blocs statistiques : le chiffre doit respirer sans que le libellé décroche du bloc. */ --gg-sp-stat: 10px; /* Rayons — formes généreuses, jamais « boxy » */ --gg-r-sm: 10px; --gg-r-md: 16px; --gg-r-lg: 24px; --gg-r-xl: 32px; --gg-r-2xl: 44px; --gg-r-pill: 999px; --gg-header-h: 72px; --gg-container: 1180px; --gg-container-narrow: 760px; --gg-measure: 68ch; --gg-measure-narrow: 22ch; /* Palette claire — ivoire chaud, encre, or de marque */ --gg-bg: #f6f1e9; --gg-bg-tint: #fdfaf5; --gg-surface: #fffdf9; --gg-surface-2: #f6f1e9; --gg-surface-3: #ffffff; --gg-surface-sunken: #efe7db; --gg-border: #e6dccd; --gg-border-strong: #d3c5b0; --gg-text: #2f2a25; --gg-text-soft: #4c453d; --gg-muted: #6a6058; --gg-brand: #2f2a25; --gg-gold: #d4a936; --gg-gold-soft: #fbf1d6; --gg-gold-line: #e8cf94; --gg-accent: #8a6410; --gg-clay: #a8563a; --gg-sage: #4d6b57; --gg-primary: #d4a936; --gg-primary-hover: #c39a2b; --gg-primary-ink: #2f2a25; --gg-secondary: #2f2a25; --gg-secondary-hover: #443c34; --gg-secondary-ink: #fffdf9; --gg-success: #2f6b3f; --gg-success-soft: #e7f2e9; --gg-danger: #b3261e; --gg-danger-soft: #fceceb; --gg-warning: #8a5a00; --gg-warning-soft: #fbf0d8; --gg-info: #1c5d99; --gg-info-soft: #e8f1fa; --gg-focus: #1f5fd6; --gg-focus-ring: 0 0 0 3px rgba(31, 95, 214, 0.35); --gg-shadow-sm: 0 1px 2px rgba(47, 42, 37, 0.06), 0 2px 6px rgba(47, 42, 37, 0.05); --gg-shadow-md: 0 10px 30px rgba(47, 42, 37, 0.09); --gg-shadow-lg: 0 24px 64px rgba(47, 42, 37, 0.14); --gg-overlay: rgba(35, 30, 25, 0.52); /* Le logo garde ses couleurs d'origine : en clair aucun fond n'est requis. */ --gg-logo-plate: transparent; --gg-logo-plate-pad: 0; --gg-hero-scrim: linear-gradient(100deg, rgba(253, 250, 245, 0.95) 0%, rgba(250, 246, 239, 0.82) 46%, rgba(246, 241, 233, 0.44) 100%), linear-gradient(180deg, transparent 55%, var(--gg-bg) 100%); --gg-grain: rgba(47, 42, 37, 0.025); } :root[data-theme="dark"] { color-scheme: dark; --gg-bg: #16151c; --gg-bg-tint: #1b1922; --gg-surface: #201f28; --gg-surface-2: #1a1922; --gg-surface-3: #292734; --gg-surface-sunken: #131219; --gg-border: #332f3d; --gg-border-strong: #454055; --gg-text: #efe9e0; --gg-text-soft: #d6cec2; --gg-muted: #a79f95; --gg-brand: #efe9e0; --gg-gold: #f0c040; --gg-gold-soft: #332c1c; --gg-gold-line: #6b5726; --gg-accent: #f0c040; --gg-clay: #e29a7c; --gg-sage: #9dc0a8; --gg-primary: #f0c040; --gg-primary-hover: #f7cf63; --gg-primary-ink: #241f16; --gg-secondary: #302d3b; --gg-secondary-hover: #3b3849; --gg-secondary-ink: #efe9e0; --gg-success: #7fd396; --gg-success-soft: #1a2c20; --gg-danger: #ff9b93; --gg-danger-soft: #331e1d; --gg-warning: #f0c165; --gg-warning-soft: #322718; --gg-info: #86bcf3; --gg-info-soft: #172736; --gg-focus: #9dbcff; --gg-focus-ring: 0 0 0 3px rgba(157, 188, 255, 0.4); --gg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3); --gg-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --gg-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55); --gg-overlay: rgba(8, 7, 11, 0.66); /* Le logo est bicolore encre + or : sur fond sombre il reçoit une plaque ivoire discrète. Ses couleurs et ses proportions restent intactes. */ --gg-logo-plate: #fdfaf5; --gg-logo-plate-pad: 7px 13px; --gg-hero-scrim: linear-gradient(100deg, rgba(22, 21, 28, 0.96) 0%, rgba(22, 21, 28, 0.86) 46%, rgba(22, 21, 28, 0.52) 100%), linear-gradient(180deg, transparent 55%, var(--gg-bg) 100%); --gg-grain: rgba(255, 255, 255, 0.022); } /* Sans choix explicite, la préférence système décide. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --gg-bg: #16151c; --gg-bg-tint: #1b1922; --gg-surface: #201f28; --gg-surface-2: #1a1922; --gg-surface-3: #292734; --gg-surface-sunken: #131219; --gg-border: #332f3d; --gg-border-strong: #454055; --gg-text: #efe9e0; --gg-text-soft: #d6cec2; --gg-muted: #a79f95; --gg-brand: #efe9e0; --gg-gold: #f0c040; --gg-gold-soft: #332c1c; --gg-gold-line: #6b5726; --gg-accent: #f0c040; --gg-clay: #e29a7c; --gg-sage: #9dc0a8; --gg-primary: #f0c040; --gg-primary-hover: #f7cf63; --gg-primary-ink: #241f16; --gg-secondary: #302d3b; --gg-secondary-hover: #3b3849; --gg-secondary-ink: #efe9e0; --gg-success: #7fd396; --gg-success-soft: #1a2c20; --gg-danger: #ff9b93; --gg-danger-soft: #331e1d; --gg-warning: #f0c165; --gg-warning-soft: #322718; --gg-info: #86bcf3; --gg-info-soft: #172736; --gg-focus: #9dbcff; --gg-focus-ring: 0 0 0 3px rgba(157, 188, 255, 0.4); --gg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3); --gg-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --gg-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55); --gg-overlay: rgba(8, 7, 11, 0.66); --gg-logo-plate: #fdfaf5; --gg-logo-plate-pad: 7px 13px; --gg-hero-scrim: linear-gradient(100deg, rgba(22, 21, 28, 0.96) 0%, rgba(22, 21, 28, 0.86) 46%, rgba(22, 21, 28, 0.52) 100%), linear-gradient(180deg, transparent 55%, var(--gg-bg) 100%); --gg-grain: rgba(255, 255, 255, 0.022); } } /* ─── 2. RESET / BASE ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--gg-header-h) + 24px); -webkit-text-size-adjust: 100%; } body { min-height: 100vh; background: var(--gg-bg); color: var(--gg-text); font-family: var(--gg-font-body); font-size: var(--gg-fs-base); line-height: var(--gg-lh-base); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body[data-drawer-open="true"] { overflow: hidden; } h1, h2, h3, h4 { font-family: var(--gg-font-head); color: var(--gg-brand); font-weight: 700; line-height: var(--gg-lh-tight); letter-spacing: -0.03em; text-wrap: balance; } h1 { font-size: var(--gg-fs-3xl); } h2 { font-size: var(--gg-fs-2xl); } h3 { font-size: var(--gg-fs-lg); } h4 { font-size: var(--gg-fs-md); } p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } .gg-prose a, p > a:not([class]), li > a:not([class]) { color: var(--gg-accent); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } .gg-prose a:hover, p > a:not([class]):hover, li > a:not([class]):hover { text-decoration-thickness: 2px; } img, svg, video { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } hr { border: none; border-top: 1px solid var(--gg-border); } em { color: var(--gg-accent); font-style: italic; } strong { font-weight: 700; } ::selection { background: var(--gg-gold); color: var(--gg-primary-ink); } :focus-visible { outline: 3px solid var(--gg-focus); outline-offset: 2px; border-radius: var(--gg-r-sm); } /* ─── 3. LAYOUT ──────────────────────────────────────────────────────────── */ .gg-main { display: block; } .gg-container { width: min(100% - 2 * var(--gg-sp-5), var(--gg-container)); margin-inline: auto; } .gg-container--narrow { max-width: var(--gg-container-narrow); } .gg-container--wide { max-width: 1320px; } .gg-section { position: relative; padding-block: var(--gg-sp-9); } .gg-section--tight { padding-block: var(--gg-sp-8); } .gg-section--flush-top { padding-top: var(--gg-sp-7); } /* Les surfaces teintées entrent et sortent en fondu : aucune arête horizontale dure, aucune bordure rectiligne entre deux sections. */ .gg-section--tint { background: linear-gradient(180deg, transparent 0%, var(--gg-bg-tint) 9%, var(--gg-bg-tint) 91%, transparent 100%); } .gg-section--sunken { background: linear-gradient(180deg, transparent 0%, var(--gg-surface-2) 8%, var(--gg-surface-2) 92%, transparent 100%); } /* Séparateur organique : une courbe douce, jamais une barre sèche. */ .gg-wave { display: block; width: 100%; height: 56px; color: var(--gg-bg-tint); } .gg-wave svg { width: 100%; height: 100%; display: block; } .gg-wave--flip svg { transform: scaleY(-1); } .gg-wave--surface { color: var(--gg-surface); } .gg-wave--sunken { color: var(--gg-surface-2); } .gg-grid { display: grid; gap: var(--gg-sp-5); } .gg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* auto-fill (et non auto-fit) : une grille qui ne contient qu'un seul élément garde une largeur de carte normale au lieu de l'étirer sur toute la ligne. */ .gg-grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .gg-grid--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .gg-stack { display: flex; flex-direction: column; gap: var(--gg-sp-4); } .gg-row { display: flex; flex-wrap: wrap; gap: var(--gg-sp-3); align-items: center; } /* Groupes courts indissociables : montants, unités, durées, dates brèves. Jamais sur une phrase, un titre, un paragraphe ou un libellé de bouton. */ .nowrap { white-space: nowrap; } /* Dernière rangée incomplète recentrée : une grille de 5 blocs en 3 colonnes affiche 3 puis 2 centrés, sans emplacement vide apparent. Aucun JS, aucune hauteur forcée — on décale seulement le premier bloc de la rangée. */ /* Réservé aux grilles à 3 colonnes : la trame est doublée (6 sous-colonnes) pour pouvoir décaler la dernière rangée d'une demi-colonne. */ @media (min-width: 1024px) { .gg-grid--3.gg-grid--center-last { grid-template-columns: repeat(6, 1fr); } .gg-grid--3.gg-grid--center-last > * { grid-column: span 2; } /* reste de 2 → les deux blocs glissent d'une demi-colonne */ .gg-grid--3.gg-grid--center-last > *:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; } /* reste de 1 → le bloc seul occupe la trame centrale */ .gg-grid--3.gg-grid--center-last > *:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; } } /* 2 colonnes : reste de 1 → le dernier bloc occupe la trame centrale. */ @media (min-width: 561px) and (max-width: 1023px) { .gg-grid--3.gg-grid--center-last { grid-template-columns: repeat(4, 1fr); } .gg-grid--3.gg-grid--center-last > * { grid-column: span 2; } .gg-grid--3.gg-grid--center-last > *:last-child:nth-child(odd) { grid-column: 2 / span 2; } } @media (max-width: 560px) { .gg-grid--3.gg-grid--center-last { grid-template-columns: 1fr; } .gg-grid--3.gg-grid--center-last > * { grid-column: auto; } } /* Justification réservée aux paragraphes éditoriaux longs. Jamais de titre, de libellé, de note courte ni de message d'erreur. */ .gg-prose--justify > p, .gg-legal__block > p, .gg-justify { text-align: justify; text-justify: inter-word; hyphens: auto; } /* Une ligne justifiée trop longue fatigue : on borne la mesure. */ .gg-legal__block > p { max-width: var(--gg-measure); } /* Sous 768 px, une colonne étroite justifiée creuse des rivières blanches : on repasse au fer à gauche. */ @media (max-width: 768px) { .gg-prose--justify > p, .gg-legal__block > p, .gg-justify { text-align: left; hyphens: manual; } } /* ─── 4. SKIP LINK ───────────────────────────────────────────────────────── */ .gg-skip { position: absolute; left: var(--gg-sp-4); top: var(--gg-sp-4); z-index: 400; transform: translateY(-160%); padding: var(--gg-sp-3) var(--gg-sp-5); border-radius: var(--gg-r-pill); background: var(--gg-secondary); color: var(--gg-secondary-ink); font-size: var(--gg-fs-sm); font-weight: 700; box-shadow: var(--gg-shadow-md); transition: transform 0.18s ease; } .gg-skip:focus-visible { transform: translateY(0); } /* ─── 5. HEADER / NAVIGATION ─────────────────────────────────────────────── */ .gg-header { position: fixed; inset: var(--gg-sp-3) 0 auto; z-index: 300; display: flex; justify-content: center; pointer-events: none; } .gg-header__bar { pointer-events: auto; width: min(100% - 2 * var(--gg-sp-4), var(--gg-container)); /* Pas de hauteur minimale : la barre se règle sur son contenu (la marque et les boutons portent déjà leurs 44 px de cible tactile) au lieu d'imposer un vide. --gg-header-h reste la référence des décalages d'ancre. */ display: flex; align-items: center; gap: var(--gg-sp-4); padding: var(--gg-sp-2) var(--gg-sp-3) var(--gg-sp-2) var(--gg-sp-4); border: 1px solid var(--gg-border); border-radius: var(--gg-r-2xl); /* Aucun fond au repos : la barre laisse voir la page derrière elle. Le fond de surface n'apparaît qu'une fois la page défilée (règle [data-scrolled]). */ box-shadow: var(--gg-shadow-md); transition: box-shadow 0.2s ease, background 0.2s ease; } .gg-header[data-scrolled="true"] .gg-header__bar { background: var(--gg-surface); box-shadow: var(--gg-shadow-lg); } .gg-brand { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--gg-r-md); flex: 0 0 auto; } /* Plaque de lisibilité du logo en thème sombre (couleurs du logo intactes). */ .gg-brand__plate { display: inline-flex; align-items: center; padding: var(--gg-logo-plate-pad); border-radius: var(--gg-r-md); background: var(--gg-logo-plate); transition: background 0.2s ease; } .gg-logo { width: 152px; height: auto; } .gg-logo--footer { width: 178px; } .gg-nav { display: flex; align-items: center; gap: var(--gg-sp-1); margin-left: auto; } .gg-nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--gg-sp-4); border-radius: var(--gg-r-pill); color: var(--gg-text-soft); font-size: var(--gg-fs-sm); font-weight: 600; white-space: nowrap; transition: background 0.16s ease, color 0.16s ease; } .gg-nav__link:hover { background: var(--gg-surface-2); color: var(--gg-text); } .gg-nav__link[aria-current="page"] { color: var(--gg-text); background: var(--gg-gold-soft); } .gg-header__actions { display: flex; align-items: center; gap: var(--gg-sp-2); flex: 0 0 auto; } .gg-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--gg-r-pill); border: 1px solid var(--gg-border); background: var(--gg-surface); color: var(--gg-text); transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .gg-icon-btn:hover { background: var(--gg-surface-2); border-color: var(--gg-border-strong); } .gg-icon-btn:active { transform: scale(0.95); } .gg-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Bascule de thème : une seule icône visible à la fois. */ .gg-theme-toggle .gg-theme-toggle__moon { display: none; } :root[data-theme="dark"] .gg-theme-toggle .gg-theme-toggle__sun { display: none; } :root[data-theme="dark"] .gg-theme-toggle .gg-theme-toggle__moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gg-theme-toggle .gg-theme-toggle__sun { display: none; } :root:not([data-theme="light"]) .gg-theme-toggle .gg-theme-toggle__moon { display: block; } } .gg-burger { display: none; } /* Drawer mobile */ .gg-drawer-backdrop { position: fixed; inset: 0; z-index: 310; background: var(--gg-overlay); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease; } .gg-drawer-backdrop[data-open="true"] { opacity: 1; visibility: visible; } .gg-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 320; width: min(88vw, 380px); display: flex; flex-direction: column; gap: var(--gg-sp-4); padding: var(--gg-sp-5); background: var(--gg-surface); border-left: 1px solid var(--gg-border); border-radius: var(--gg-r-xl) 0 0 var(--gg-r-xl); box-shadow: var(--gg-shadow-lg); transform: translateX(102%); visibility: hidden; overflow-y: auto; overscroll-behavior: contain; transition: transform 0.26s cubic-bezier(0.32, 0.72, 0.24, 1), visibility 0.26s; } .gg-drawer[data-open="true"] { transform: translateX(0); visibility: visible; } .gg-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gg-sp-3); padding-bottom: var(--gg-sp-4); border-bottom: 1px solid var(--gg-border); } .gg-drawer__nav { display: flex; flex-direction: column; gap: var(--gg-sp-1); } .gg-drawer__link { display: flex; align-items: center; min-height: 52px; padding: 0 var(--gg-sp-4); border-radius: var(--gg-r-md); color: var(--gg-text); font-size: var(--gg-fs-md); font-weight: 600; transition: background 0.16s ease; } .gg-drawer__link:hover { background: var(--gg-surface-2); } .gg-drawer__link[aria-current="page"] { background: var(--gg-gold-soft); } .gg-drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--gg-sp-3); padding-top: var(--gg-sp-4); border-top: 1px solid var(--gg-border); } .gg-drawer__theme { display: flex; align-items: center; justify-content: space-between; gap: var(--gg-sp-3); font-size: var(--gg-fs-sm); color: var(--gg-muted); } /* ─── 6. FOOTER ──────────────────────────────────────────────────────────── */ .gg-footer { position: relative; margin-top: var(--gg-sp-9); padding: var(--gg-sp-8) 0 var(--gg-sp-6); background: var(--gg-surface-2); border-top: 1px solid var(--gg-border); border-radius: var(--gg-r-2xl) var(--gg-r-2xl) 0 0; } .gg-footer__grid { display: grid; grid-template-columns: minmax(240px, 1.2fr) repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gg-sp-7); align-items: start; } .gg-footer__tagline { margin-top: var(--gg-sp-4); max-width: 34ch; color: var(--gg-muted); font-size: var(--gg-fs-sm); } .gg-footer__col-title { margin-bottom: var(--gg-sp-3); font-family: var(--gg-font-body); font-size: var(--gg-fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gg-muted); } .gg-footer__links { display: flex; flex-direction: column; gap: var(--gg-sp-1); } .gg-footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--gg-sp-1) 0; color: var(--gg-text-soft); font-size: var(--gg-fs-sm); font-weight: 500; transition: color 0.16s ease; } .gg-footer__links a:hover { color: var(--gg-accent); } .gg-footer__bottom { margin-top: var(--gg-sp-7); padding-top: var(--gg-sp-5); border-top: 1px solid var(--gg-border); display: flex; flex-wrap: wrap; gap: var(--gg-sp-3); align-items: center; justify-content: space-between; color: var(--gg-muted); font-size: var(--gg-fs-xs); } /* ─── 7. BOUTONS ─────────────────────────────────────────────────────────── */ .gg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gg-sp-2); min-height: 48px; padding: var(--gg-sp-3) var(--gg-sp-6); border: 1px solid transparent; border-radius: var(--gg-r-pill); font-family: var(--gg-font-body); font-size: var(--gg-fs-sm); font-weight: 700; letter-spacing: -0.005em; text-align: center; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .gg-btn:active { transform: translateY(1px); } .gg-btn:disabled, .gg-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .gg-btn--primary { background: var(--gg-primary); color: var(--gg-primary-ink); box-shadow: 0 6px 20px color-mix(in srgb, var(--gg-primary) 32%, transparent); } .gg-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--gg-primary-hover); box-shadow: 0 10px 28px color-mix(in srgb, var(--gg-primary) 42%, transparent); } .gg-btn--secondary { background: var(--gg-secondary); color: var(--gg-secondary-ink); } .gg-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--gg-secondary-hover); } .gg-btn--outline { background: transparent; border-color: var(--gg-border-strong); color: var(--gg-text); } .gg-btn--outline:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--gg-surface-2); border-color: var(--gg-text-soft); } .gg-btn--ghost { background: transparent; color: var(--gg-text-soft); } .gg-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--gg-surface-2); color: var(--gg-text); } .gg-btn--sm { min-height: 44px; padding: var(--gg-sp-2) var(--gg-sp-4); font-size: var(--gg-fs-xs); } .gg-btn--lg { min-height: 56px; padding: var(--gg-sp-4) var(--gg-sp-7); font-size: var(--gg-fs-md); } .gg-btn--block { width: 100%; } .gg-btn__arrow { transition: transform 0.18s ease; } .gg-btn:hover .gg-btn__arrow { transform: translateX(3px); } .gg-link-arrow { display: inline-flex; align-items: center; gap: var(--gg-sp-2); min-height: 44px; color: var(--gg-accent); font-size: var(--gg-fs-sm); font-weight: 700; } .gg-link-arrow:hover { text-decoration: underline; text-underline-offset: 0.25em; } .gg-link-arrow span[aria-hidden="true"] { transition: transform 0.18s ease; } .gg-link-arrow:hover span[aria-hidden="true"] { transform: translateX(3px); } /* ─── 8. CARTES ──────────────────────────────────────────────────────────── */ .gg-card { position: relative; display: flex; flex-direction: column; gap: var(--gg-sp-3); padding: var(--gg-sp-6); background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-xl); box-shadow: var(--gg-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .gg-card--hover:hover { transform: translateY(-4px); box-shadow: var(--gg-shadow-md); border-color: var(--gg-border-strong); } .gg-card--flat { box-shadow: none; background: var(--gg-surface-2); } /* Cartes d'offre — 4 colonnes en desktop, 2 en tablette, 1 en mobile. */ .gg-offers { grid-template-columns: 1fr; } @media (min-width: 560px) { .gg-offers { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .gg-offers { grid-template-columns: repeat(4, 1fr); } } /* Repli robuste (navigateurs sans subgrid) : flex colonne, les prestations absorbent le mou pour que le CTA — dernier enfant — s'aligne en bas grace a l'etirement de la grille (cartes de hauteur egale par rangee). */ .gg-offer { position: relative; display: flex; flex-direction: column; gap: var(--gg-sp-3); padding: var(--gg-sp-6); background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-xl); box-shadow: var(--gg-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .gg-offer__cta { margin-top: var(--gg-sp-2); } .gg-offer:hover { transform: translateY(-4px); box-shadow: var(--gg-shadow-md); } .gg-offer--featured { border-color: var(--gg-gold-line); box-shadow: var(--gg-shadow-md); background: radial-gradient(120% 80% at 50% 0%, var(--gg-gold-soft) 0%, transparent 62%), var(--gg-surface); } .gg-offer__flag { position: absolute; top: calc(-1 * var(--gg-sp-3)); left: var(--gg-sp-6); padding: var(--gg-sp-1) var(--gg-sp-4); border-radius: var(--gg-r-pill); background: var(--gg-gold); color: var(--gg-primary-ink); font-size: var(--gg-fs-xs); font-weight: 800; letter-spacing: 0.02em; box-shadow: var(--gg-shadow-sm); } .gg-offer__name { font-family: var(--gg-font-body); font-size: var(--gg-fs-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gg-muted); } .gg-offer__price { font-family: var(--gg-font-head); font-size: var(--gg-fs-2xl); font-weight: 700; line-height: 1; color: var(--gg-brand); /* Le symbole monétaire ne quitte jamais le montant. */ white-space: nowrap; } .gg-offer__title { font-family: var(--gg-font-head); font-size: var(--gg-fs-md); line-height: var(--gg-lh-snug); color: var(--gg-brand); text-wrap: pretty; } .gg-offer__marker { align-self: flex-start; padding: var(--gg-sp-1) var(--gg-sp-3); border-radius: var(--gg-r-pill); border: 1px dashed var(--gg-border-strong); color: var(--gg-text-soft); font-size: var(--gg-fs-xs); font-weight: 600; } .gg-offer__features { display: flex; flex-direction: column; gap: var(--gg-sp-2); margin-block: 0; flex: 1 1 auto; } .gg-offer__features li { display: grid; grid-template-columns: 20px 1fr; gap: var(--gg-sp-2); font-size: var(--gg-fs-sm); line-height: var(--gg-lh-snug); color: var(--gg-text-soft); } .gg-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--gg-r-pill); background: var(--gg-gold-soft); color: var(--gg-accent); font-size: 0.7rem; font-weight: 800; } .gg-offer__note { color: var(--gg-muted); font-size: var(--gg-fs-xs); line-height: var(--gg-lh-snug); } /* Alignement structurel des zones homologues via subgrid (tablette/desktop) : nom, prix, titre, intention, prestations, note et CTA partagent des rangees communes ; un contenu plus long ne decale jamais la zone voisine, et tous les CTA s'alignent sur la meme arete basse. Aucune hauteur fixe, aucun !important. Le drapeau est en position absolue, hors flux de grille. */ @supports (grid-template-rows: subgrid) { @media (min-width: 560px) { .gg-offer { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: var(--gg-sp-3); align-content: start; } .gg-offer__features { flex: none; } .gg-offer__cta { margin-top: 0; align-self: end; } } } /* Cartes de voyage / repères terrain */ .gg-trip { position: relative; display: flex; flex-direction: column; gap: var(--gg-sp-3); padding: var(--gg-sp-5); background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); box-shadow: var(--gg-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .gg-trip:hover { transform: translateY(-3px); box-shadow: var(--gg-shadow-md); border-color: var(--gg-border-strong); } .gg-trip__marker { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--gg-r-md); background: var(--gg-surface-2); border: 1px solid var(--gg-border); font-size: 1.25rem; } .gg-trip__eyebrow { font-size: var(--gg-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gg-muted); } .gg-trip__title { font-size: var(--gg-fs-lg); } .gg-trip__text { color: var(--gg-text-soft); font-size: var(--gg-fs-sm); line-height: var(--gg-lh-snug); } .gg-trip__meta { display: flex; flex-wrap: wrap; gap: var(--gg-sp-2); font-size: var(--gg-fs-xs); color: var(--gg-muted); } .gg-trip__meta span { padding: var(--gg-sp-1) var(--gg-sp-3); border-radius: var(--gg-r-pill); background: var(--gg-surface-2); border: 1px solid var(--gg-border); } .gg-trip__foot { margin-top: auto; padding-top: var(--gg-sp-2); } /* Toute la carte devient cliquable sans dupliquer le lien pour l'AT. */ .gg-trip__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .gg-trip__cover { margin: calc(-1 * var(--gg-sp-5)) calc(-1 * var(--gg-sp-5)) 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--gg-r-lg) var(--gg-r-lg) 0 0; background: var(--gg-surface-sunken); } .gg-trip__cover img { width: 100%; height: 100%; object-fit: cover; } .gg-trip__cover { max-height: 260px; } /* Étapes numérotées */ .gg-steps { counter-reset: gg-step; display: grid; gap: var(--gg-sp-5); } .gg-step { position: relative; padding: var(--gg-sp-5); padding-top: var(--gg-sp-7); background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); } .gg-step__num { position: absolute; top: calc(-1 * var(--gg-sp-3)); left: var(--gg-sp-5); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--gg-r-pill); background: var(--gg-secondary); color: var(--gg-secondary-ink); font-family: var(--gg-font-head); font-size: var(--gg-fs-md); font-weight: 700; } .gg-step h3 { margin-bottom: var(--gg-sp-2); } .gg-step p { color: var(--gg-text-soft); font-size: var(--gg-fs-sm); line-height: var(--gg-lh-snug); } /* Statistiques */ /* Statistiques — chaque bloc est autonome, de largeur comparable, aligné sur une rangée commune. Le chiffre domine, le libellé se centre dessous. */ .gg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gg-sp-4); align-items: stretch; } .gg-stat { display: grid; grid-template-rows: auto 1fr; justify-items: center; align-content: start; gap: var(--gg-sp-stat); padding: var(--gg-sp-6) var(--gg-sp-4); text-align: center; background: var(--gg-surface); border: 1px solid #e6dccd47; border-radius: var(--gg-r-lg); } .gg-stat__value { font-family: var(--gg-font-head); font-size: var(--gg-fs-3xl); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--gg-accent); /* L'unité ne se détache jamais du nombre. */ white-space: nowrap; } .gg-stat__label { max-width: var(--gg-measure-narrow); font-size: var(--gg-fs-sm); color: var(--gg-muted); line-height: var(--gg-lh-snug); text-wrap: balance; } /* Monuments — un croquis au trait s'invite dans l'angle supérieur droit de la carte, puis s'efface en fondu vers le centre. Purement décoratif : le trait reste derrière le chiffre et le libellé, jamais devant. */ .gg-stat { position: relative; overflow: hidden; isolation: isolate; } .gg-stat > * { position: relative; z-index: 1; } .gg-stat--monument::before { content: ""; position: absolute; z-index: 0; top: var(--gg-sp-2); right: var(--gg-sp-2); /* Hauteur pilotée par la carte : le croquis reste entier, jamais recadré. */ height: min(78%, 124px); aspect-ratio: 120 / 170; background-repeat: no-repeat; background-position: top right; background-size: contain; opacity: 0.5; pointer-events: none; /* Le masque radial part de l'angle haut-droit : pleine densité au bord, plus rien au centre de la carte — donc aucun contour rectangulaire visible. */ -webkit-mask-image: radial-gradient(115% 115% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.28) 58%, transparent 82%); mask-image: radial-gradient(115% 115% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.28) 58%, transparent 82%); } .gg-stat--eiffel::before { background-image: url("/img/monuments/eiffel-tower.svg"); } .gg-stat--pisa::before { background-image: url("/img/monuments/pisa-tower.svg"); } .gg-stat--skytree::before { background-image: url("/img/monuments/tokyo-skytree.svg"); } .gg-stat--burj::before { background-image: url("/img/monuments/burj-khalifa.svg"); } @media (max-width: 640px) { .gg-stat--monument::before { height: min(70%, 96px); opacity: 0.4; } } @media (prefers-contrast: more) { .gg-stat--monument::before { opacity: 0.2; } } @media (forced-colors: active) { .gg-stat--monument::before { display: none; } } /* ─── OPTION PONCTUELLE ────────────────────────────────────────────────────── Une bande compacte alignée sur le conteneur, séparée des offres par un simple espace : ni carte indépendante, ni cinquième offre, ni section pleine hauteur. */ .gg-option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--gg-sp-4) var(--gg-sp-6); padding-block: var(--gg-sp-5); border-top: 1px solid var(--gg-border); } .gg-option__body { display: grid; gap: var(--gg-sp-2); } .gg-option__title { font-size: var(--gg-fs-lg); margin: 0; } .gg-option__text { margin: 0; max-width: 56ch; font-size: var(--gg-fs-base); color: var(--gg-text-soft); line-height: var(--gg-lh-snug); } .gg-option__aside { display: flex; align-items: center; gap: var(--gg-sp-4); flex-wrap: wrap; justify-content: flex-end; } .gg-option__price { font-family: var(--gg-font-head); font-size: var(--gg-fs-xl); font-weight: 700; line-height: 1; color: var(--gg-accent); white-space: nowrap; } @media (max-width: 768px) { .gg-option { grid-template-columns: 1fr; } .gg-option__aside { justify-content: flex-start; } } /* ─── SÉPARATEUR DE ROUTE ──────────────────────────────────────────────────── Ondulation pointillée d'une seule teinte, avion minimaliste au bout. SVG inline, aucune image, aucune requête. Décoratif : aria-hidden côté balisage. */ /* Bande pleine largeur : elle porte le fondu de couleur d'une section à l'autre. Assez haute pour que le dégradé n'ait aucune arête, et le trait y est posé au centre avec de l'air autour. */ .gg-route-divider { --gg-fade-from: transparent; --gg-fade-to: transparent; position: relative; width: 100%; max-width: 100%; overflow: hidden; /* jamais de scroll horizontal */ padding-block: var(--gg-sp-7); line-height: 0; background: linear-gradient(180deg, var(--gg-fade-from) 0%, transparent 46%, transparent 54%, var(--gg-fade-to) 100%); } .gg-route-divider__inner { display: flex; align-items: center; gap: var(--gg-sp-2); width: min(100% - 2 * var(--gg-sp-4), var(--gg-container)); margin-inline: auto; /* Le trait est un élément graphique assumé, pas un filet effacé. */ color: var(--gg-accent); opacity: 1; } /* La ligne s'étire, jamais l'avion. */ .gg-route-divider__wave { flex: 1 1 auto; min-width: 0; display: block; height: 32px; } .gg-route-divider__craft { flex: 0 0 auto; display: block; width: 26px; height: 26px; } .gg-route-divider__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 16 7 4 7; /* tirets et points volontairement irréguliers */ vector-effect: non-scaling-stroke; } .gg-route-divider__plane { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* Bandeau CTA */ .gg-cta-band { position: relative; overflow: hidden; margin-block: var(--gg-sp-9) 0; padding: var(--gg-sp-8) var(--gg-sp-5); text-align: center; border-radius: var(--gg-r-2xl); border: 1px solid var(--gg-border); background: radial-gradient(100% 120% at 50% 0%, var(--gg-gold-soft) 0%, transparent 60%), var(--gg-surface); box-shadow: var(--gg-shadow-sm); } .gg-cta-band__media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.22; } .gg-cta-band__inner { position: relative; display: grid; gap: var(--gg-sp-4); justify-items: center; } .gg-cta-band p { max-width: 56ch; color: var(--gg-text-soft); } /* ─── 9. BADGES ──────────────────────────────────────────────────────────── */ .gg-badge { display: inline-flex; align-items: center; gap: var(--gg-sp-2); padding: var(--gg-sp-1) var(--gg-sp-3); border-radius: var(--gg-r-pill); background: var(--gg-surface-2); border: 1px solid var(--gg-border); color: var(--gg-text-soft); font-size: var(--gg-fs-xs); font-weight: 700; } .gg-badge--gold { background: var(--gg-gold-soft); border-color: var(--gg-gold-line); color: var(--gg-accent); } .gg-badge--success { background: var(--gg-success-soft); border-color: transparent; color: var(--gg-success); } .gg-badge--danger { background: var(--gg-danger-soft); border-color: transparent; color: var(--gg-danger); } .gg-badge--warning { background: var(--gg-warning-soft); border-color: transparent; color: var(--gg-warning); } .gg-badge--info { background: var(--gg-info-soft); border-color: transparent; color: var(--gg-info); } /* ─── 10. SECTIONS ÉDITORIALES ───────────────────────────────────────────── */ .gg-eyebrow { display: inline-flex; align-items: center; gap: var(--gg-sp-2); font-family: var(--gg-font-body); font-size: var(--gg-fs-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gg-accent); } /* Rythme du chapeau de section : le sur-titre reste collé à son titre, le sous-titre respire davantage. Un `gap` uniforme écrasait cette hiérarchie. */ .gg-section-head { display: grid; gap: var(--gg-sp-2); max-width: var(--gg-measure); margin-bottom: var(--gg-sp-7); } .gg-section-head > .gg-lede { margin-top: var(--gg-sp-2); } .gg-section-head--center { margin-inline: auto; justify-items: center; text-align: center; } .gg-lede { color: var(--gg-text-soft); font-size: var(--gg-fs-md); line-height: var(--gg-lh-base); } .gg-prose { max-width: var(--gg-measure); } .gg-prose > * + * { margin-top: var(--gg-sp-4); } .gg-prose p { color: var(--gg-text-soft); } .gg-prose h2 { margin-top: var(--gg-sp-7); } .gg-prose h3 { margin-top: var(--gg-sp-5); } .gg-prose ul, .gg-prose ol { padding-left: var(--gg-sp-5); color: var(--gg-text-soft); } .gg-prose ul li { list-style: disc; margin-bottom: var(--gg-sp-2); } .gg-prose ol li { list-style: decimal; margin-bottom: var(--gg-sp-2); } /* Pages légales */ .gg-legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gg-sp-7); } .gg-legal__toc { align-self: start; padding: var(--gg-sp-5); background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); } .gg-legal__toc-title { margin-bottom: var(--gg-sp-3); font-size: var(--gg-fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gg-muted); } .gg-legal__toc ol { display: flex; flex-direction: column; gap: var(--gg-sp-1); counter-reset: gg-toc; } .gg-legal__toc a { display: flex; align-items: center; min-height: 44px; padding: var(--gg-sp-2) var(--gg-sp-3); border-radius: var(--gg-r-sm); color: var(--gg-text-soft); font-size: var(--gg-fs-sm); line-height: var(--gg-lh-snug); } .gg-legal__toc a:hover { background: var(--gg-surface-2); color: var(--gg-accent); } .gg-legal__block { scroll-margin-top: calc(var(--gg-header-h) + 32px); padding: var(--gg-sp-6); background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); } .gg-legal__block + .gg-legal__block { margin-top: var(--gg-sp-4); } .gg-legal__block h2 { margin-bottom: var(--gg-sp-3); font-size: var(--gg-fs-lg); scroll-margin-top: calc(var(--gg-header-h) + 32px); } .gg-legal__block > * + * { margin-top: var(--gg-sp-3); } .gg-legal__block p, .gg-legal__block li { color: var(--gg-text-soft); font-size: var(--gg-fs-sm); line-height: var(--gg-lh-base); max-width: var(--gg-measure); } .gg-legal__block ul { padding-left: var(--gg-sp-5); } .gg-legal__block ul li { list-style: disc; margin-bottom: var(--gg-sp-2); } .gg-legal__date { color: var(--gg-muted); font-size: var(--gg-fs-xs); font-style: italic; } /* ─── 11. HERO / EN-TÊTE DE PAGE ─────────────────────────────────────────── */ .gg-hero { position: relative; overflow: hidden; padding-top: calc(var(--gg-header-h) + var(--gg-sp-9)); padding-bottom: var(--gg-sp-9); /* Aucun rayon en bas : le raccord avec la suite se fait par un fondu de couleur, jamais par une arête arrondie ni une bande dure. */ background: var(--gg-bg-tint); } /* Fondu de sortie du hero vers le fond de page. */ .gg-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--gg-sp-8); background: linear-gradient(180deg, transparent 0%, var(--gg-bg) 100%); pointer-events: none; } .gg-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; } .gg-hero__scrim { position: absolute; inset: 0; background: var(--gg-hero-scrim); } .gg-hero__inner { position: relative; display: grid; gap: var(--gg-sp-5); max-width: 780px; } .gg-hero h1 { font-size: var(--gg-fs-3xl); } .gg-hero__accent { color: var(--gg-accent); } .gg-hero p { max-width: 60ch; color: var(--gg-text-soft); font-size: var(--gg-fs-md); } .gg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gg-sp-3); margin-top: var(--gg-sp-2); } .gg-hero__actions .gg-btn--outline { background: var(--gg-surface); } .gg-hero__proof { display: flex; flex-wrap: wrap; gap: var(--gg-sp-2) var(--gg-sp-5); margin-top: var(--gg-sp-4); color: var(--gg-muted); font-size: var(--gg-fs-xs); } .gg-hero__proof li { display: inline-flex; align-items: center; gap: var(--gg-sp-2); } .gg-pagehead { position: relative; overflow: hidden; padding-top: calc(var(--gg-header-h) + var(--gg-sp-8)); padding-bottom: var(--gg-sp-8); /* Même règle que le hero : ni arête arrondie, ni filet horizontal dur — le raccord se fait par un fondu de couleur. */ background: var(--gg-bg-tint); } .gg-pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--gg-sp-7); background: linear-gradient(180deg, transparent 0%, var(--gg-bg) 100%); pointer-events: none; } .gg-pagehead__media { position: absolute; inset: 0; background-size: cover; background-position: center; } .gg-pagehead__scrim { position: absolute; inset: 0; background: var(--gg-hero-scrim); } .gg-pagehead__inner { position: relative; display: grid; gap: var(--gg-sp-4); max-width: 780px; } .gg-pagehead p { max-width: 62ch; color: var(--gg-text-soft); font-size: var(--gg-fs-md); } .gg-pagehead--compact { padding-bottom: var(--gg-sp-7); } /* ─── 12. ACCORDÉONS (
) ─────────────────────────────────────────── */ .gg-accordion { display: flex; flex-direction: column; gap: var(--gg-sp-3); } .gg-details { background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); overflow: hidden; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .gg-details[open] { border-color: var(--gg-gold-line); box-shadow: var(--gg-shadow-sm); } .gg-details__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--gg-sp-4); min-height: 56px; padding: var(--gg-sp-4) var(--gg-sp-5); cursor: pointer; list-style: none; font-family: var(--gg-font-head); font-size: var(--gg-fs-md); font-weight: 700; color: var(--gg-brand); transition: background 0.16s ease; } .gg-details__summary::-webkit-details-marker { display: none; } .gg-details__summary:hover { background: var(--gg-surface-2); } .gg-details__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--gg-r-pill); background: var(--gg-gold-soft); color: var(--gg-accent); font-size: 1rem; font-weight: 800; transition: transform 0.2s ease; } .gg-details[open] .gg-details__icon { transform: rotate(45deg); } .gg-details__body { padding: 0 var(--gg-sp-5) var(--gg-sp-5); } .gg-details__body p, .gg-details__body li { color: var(--gg-text-soft); font-size: var(--gg-fs-sm); line-height: var(--gg-lh-base); max-width: var(--gg-measure); } .gg-details__body > * + * { margin-top: var(--gg-sp-3); } /* Variante secondaire, discrète */ .gg-details--soft { background: var(--gg-surface-2); box-shadow: none; } .gg-details--soft .gg-details__summary { font-family: var(--gg-font-body); font-size: var(--gg-fs-sm); min-height: 48px; } /* ─── 13. FORMULAIRES ────────────────────────────────────────────────────── */ .gg-form { display: flex; flex-direction: column; gap: var(--gg-sp-5); } .gg-fieldset { border: none; display: flex; flex-direction: column; gap: var(--gg-sp-4); } .gg-legend { padding: 0; font-family: var(--gg-font-head); font-size: var(--gg-fs-lg); font-weight: 700; color: var(--gg-brand); } .gg-field { display: flex; flex-direction: column; gap: var(--gg-sp-2); } .gg-field__label { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--gg-sp-2); font-size: var(--gg-fs-sm); font-weight: 700; color: var(--gg-text); } .gg-field__hint, .gg-hint { font-size: var(--gg-fs-xs); font-weight: 500; color: var(--gg-muted); line-height: var(--gg-lh-snug); } .gg-req { padding: 1px var(--gg-sp-2); border-radius: var(--gg-r-pill); background: var(--gg-gold-soft); color: var(--gg-accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .gg-optional { padding: 1px var(--gg-sp-2); border-radius: var(--gg-r-pill); background: var(--gg-surface-2); border: 1px solid var(--gg-border); color: var(--gg-muted); font-size: 0.68rem; font-weight: 700; } .gg-input, .gg-select, .gg-textarea { width: 100%; min-height: 48px; padding: var(--gg-sp-3) var(--gg-sp-4); border: 1px solid var(--gg-border-strong); border-radius: var(--gg-r-md); background: var(--gg-surface); color: var(--gg-text); font-size: var(--gg-fs-base); transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .gg-input::placeholder, .gg-textarea::placeholder { color: var(--gg-muted); opacity: 0.85; } .gg-input:hover, .gg-select:hover, .gg-textarea:hover { border-color: var(--gg-text-soft); } .gg-input:focus-visible, .gg-select:focus-visible, .gg-textarea:focus-visible { outline: none; border-color: var(--gg-focus); box-shadow: var(--gg-focus-ring); } .gg-textarea { min-height: 120px; resize: vertical; line-height: var(--gg-lh-base); } .gg-select { appearance: none; padding-right: var(--gg-sp-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 24px) 22px, calc(100% - 18px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .gg-field--invalid .gg-input, .gg-field--invalid .gg-select, .gg-field--invalid .gg-textarea, .gg-input[aria-invalid="true"], .gg-select[aria-invalid="true"], .gg-textarea[aria-invalid="true"] { border-color: var(--gg-danger); background: var(--gg-danger-soft); } .gg-field__error { display: none; align-items: center; gap: var(--gg-sp-2); color: var(--gg-danger); font-size: var(--gg-fs-xs); font-weight: 700; line-height: var(--gg-lh-snug); } .gg-field__error:not(:empty) { display: flex; } /* Grille de champs */ .gg-field-grid { display: grid; gap: var(--gg-sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Choix (radios / cases) rendus en tags tactiles */ .gg-choices { display: flex; flex-wrap: wrap; gap: var(--gg-sp-2); } .gg-choice { position: relative; display: inline-flex; align-items: center; gap: var(--gg-sp-2); min-height: 44px; padding: var(--gg-sp-2) var(--gg-sp-4); border: 1px solid var(--gg-border-strong); border-radius: var(--gg-r-pill); background: var(--gg-surface); color: var(--gg-text-soft); font-size: var(--gg-fs-sm); font-weight: 600; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease; } .gg-choice:hover { border-color: var(--gg-text-soft); background: var(--gg-surface-2); } .gg-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .gg-choice:has(input:checked) { background: var(--gg-gold-soft); border-color: var(--gg-gold); color: var(--gg-text); } .gg-choice:has(input:focus-visible) { outline: 3px solid var(--gg-focus); outline-offset: 2px; } /* Cartes de choix (offres dans le brief) */ .gg-choice-cards { display: grid; gap: var(--gg-sp-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .gg-choice-card { position: relative; display: flex; flex-direction: column; gap: var(--gg-sp-2); padding: var(--gg-sp-5); border: 1px solid var(--gg-border-strong); border-radius: var(--gg-r-lg); background: var(--gg-surface); cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .gg-choice-card:hover { border-color: var(--gg-text-soft); box-shadow: var(--gg-shadow-sm); } .gg-choice-card input { position: absolute; opacity: 0; width: 1px; height: 1px; } .gg-choice-card:has(input:checked) { border-color: var(--gg-gold); background: var(--gg-gold-soft); box-shadow: var(--gg-shadow-sm); } .gg-choice-card:has(input:focus-visible) { outline: 3px solid var(--gg-focus); outline-offset: 2px; } .gg-choice-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gg-sp-3); } .gg-choice-card__name { font-family: var(--gg-font-head); font-size: var(--gg-fs-md); font-weight: 700; color: var(--gg-brand); } .gg-choice-card__price { font-family: var(--gg-font-head); font-size: var(--gg-fs-lg); font-weight: 700; color: var(--gg-accent); white-space: nowrap; } .gg-choice-card__marker { color: var(--gg-muted); font-size: var(--gg-fs-xs); font-weight: 600; } .gg-choice-card__features { display: flex; flex-direction: column; gap: var(--gg-sp-1); } .gg-choice-card__features li { display: grid; grid-template-columns: 16px 1fr; gap: var(--gg-sp-2); font-size: var(--gg-fs-xs); color: var(--gg-text-soft); line-height: var(--gg-lh-snug); } .gg-choice-card__features li::before { content: '\2713'; color: var(--gg-accent); font-weight: 800; } /* Case à cocher de consentement */ .gg-consent { display: grid; grid-template-columns: 28px 1fr; gap: var(--gg-sp-3); padding: var(--gg-sp-5); background: var(--gg-surface-2); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); cursor: pointer; } .gg-consent input[type="checkbox"] { width: 28px; height: 28px; margin-top: 1px; accent-color: var(--gg-accent); cursor: pointer; } .gg-consent span { font-size: var(--gg-fs-xs); line-height: var(--gg-lh-base); color: var(--gg-text-soft); } .gg-consent:has(input:focus-visible) { outline: 3px solid var(--gg-focus); outline-offset: 2px; } /* Encadré d'information dans un formulaire */ .gg-notice { display: flex; gap: var(--gg-sp-3); padding: var(--gg-sp-4); border-radius: var(--gg-r-md); background: var(--gg-gold-soft); border: 1px solid var(--gg-gold-line); color: var(--gg-text-soft); font-size: var(--gg-fs-xs); line-height: var(--gg-lh-base); } .gg-submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gg-sp-4); } .gg-submit-row p { color: var(--gg-muted); font-size: var(--gg-fs-xs); } /* ─── 14. BRIEF — PARCOURS PAR ÉTAPES ────────────────────────────────────── */ .gg-brief { display: grid; gap: var(--gg-sp-6); } .gg-stepper { position: sticky; top: calc(var(--gg-header-h) + var(--gg-sp-4)); z-index: 20; display: grid; gap: var(--gg-sp-3); padding: var(--gg-sp-4) var(--gg-sp-5); background: color-mix(in srgb, var(--gg-surface) 94%, transparent); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); box-shadow: var(--gg-shadow-sm); backdrop-filter: blur(12px); } .gg-stepper__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gg-sp-2) var(--gg-sp-4); } .gg-stepper__count { font-size: var(--gg-fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gg-accent); } .gg-stepper__title { font-family: var(--gg-font-head); font-size: var(--gg-fs-md); font-weight: 700; color: var(--gg-brand); } .gg-stepper__hint { color: var(--gg-muted); font-size: var(--gg-fs-xs); } .gg-progress { height: 8px; border-radius: var(--gg-r-pill); background: var(--gg-surface-sunken); overflow: hidden; } .gg-progress__fill { height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg, var(--gg-gold) 0%, var(--gg-accent) 100%); transition: width 0.3s ease; } .gg-step-panel { display: grid; gap: var(--gg-sp-5); padding: var(--gg-sp-6); background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-xl); box-shadow: var(--gg-shadow-sm); } .gg-step-panel__head { display: grid; gap: var(--gg-sp-2); padding-bottom: var(--gg-sp-4); border-bottom: 1px solid var(--gg-border); } .gg-step-panel__eyebrow { display: flex; align-items: center; gap: var(--gg-sp-3); font-size: var(--gg-fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gg-muted); } .gg-step-panel__title { font-family: var(--gg-font-head); font-size: var(--gg-fs-xl); font-weight: 700; color: var(--gg-brand); } /* Le JS masque les étapes une fois amorcé ; sans JS tout reste visible. */ .gg-brief-form--stepped .gg-step-panel[hidden] { display: none; } .gg-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gg-sp-3); padding: var(--gg-sp-4) var(--gg-sp-5); background: var(--gg-surface-2); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); } .gg-step-actions__position { margin-inline: auto; color: var(--gg-muted); font-size: var(--gg-fs-xs); font-weight: 700; } .gg-step-errors { display: grid; gap: var(--gg-sp-2); padding: var(--gg-sp-4); border-radius: var(--gg-r-md); background: var(--gg-danger-soft); border: 1px solid color-mix(in srgb, var(--gg-danger) 40%, transparent); color: var(--gg-danger); font-size: var(--gg-fs-xs); font-weight: 600; } .gg-step-errors ul { padding-left: var(--gg-sp-5); } .gg-step-errors li { list-style: disc; } .gg-step-errors[hidden] { display: none; } /* Champs conditionnels */ .gg-conditional { display: none; margin-top: var(--gg-sp-3); } .gg-conditional[data-visible="true"] { display: block; animation: gg-reveal 0.24s ease; } @keyframes gg-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Compteur de voyageurs */ .gg-travelers { display: grid; gap: var(--gg-sp-4); grid-template-columns: minmax(120px, 160px) 1fr; align-items: start; } .gg-travelers__ages { display: flex; flex-wrap: wrap; gap: var(--gg-sp-3); align-items: flex-end; } .gg-travelers__list { display: flex; flex-wrap: wrap; gap: var(--gg-sp-3); } .gg-travelers__age { display: grid; gap: var(--gg-sp-1); width: 96px; } .gg-travelers__age label { font-size: var(--gg-fs-xs); font-weight: 700; color: var(--gg-muted); } .gg-travelers__add { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--gg-r-pill); border: 1px dashed var(--gg-border-strong); background: var(--gg-surface-2); color: var(--gg-accent); font-size: 1.25rem; font-weight: 700; } .gg-travelers__add:hover { border-color: var(--gg-gold); background: var(--gg-gold-soft); } /* Rappel de l'offre choisie */ .gg-offer-recap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gg-sp-3); padding: var(--gg-sp-4) var(--gg-sp-5); border-radius: var(--gg-r-lg); background: var(--gg-gold-soft); border: 1px solid var(--gg-gold-line); font-size: var(--gg-fs-sm); } .gg-offer-recap strong { color: var(--gg-brand); } .gg-offer-recap__price { margin-left: auto; font-family: var(--gg-font-head); font-size: var(--gg-fs-lg); font-weight: 700; color: var(--gg-accent); } /* ─── 15. TABLEAUX ───────────────────────────────────────────────────────── */ .gg-table-wrap { overflow-x: auto; border-radius: var(--gg-r-lg); border: 1px solid var(--gg-border); background: var(--gg-surface); } .gg-table { width: 100%; border-collapse: collapse; font-size: var(--gg-fs-sm); } .gg-table th, .gg-table td { padding: var(--gg-sp-3) var(--gg-sp-4); text-align: left; border-bottom: 1px solid var(--gg-border); } .gg-table thead th { position: sticky; top: 0; background: var(--gg-surface-2); color: var(--gg-brand); font-family: var(--gg-font-head); font-size: var(--gg-fs-sm); font-weight: 700; white-space: nowrap; } .gg-table tbody tr:last-child td { border-bottom: none; } .gg-table td:not(:first-child), .gg-table th:not(:first-child) { text-align: center; } .gg-table__price { display: block; color: var(--gg-accent); font-family: var(--gg-font-body); font-size: var(--gg-fs-xs); font-weight: 700; white-space: nowrap; } .gg-table__featured { background: var(--gg-gold-soft); } .gg-table__yes { color: var(--gg-success); font-weight: 800; } .gg-table__no { color: var(--gg-muted); } /* ─── 16. ALERTES / TOASTS ───────────────────────────────────────────────── */ .gg-alert { display: flex; gap: var(--gg-sp-3); padding: var(--gg-sp-4) var(--gg-sp-5); border-radius: var(--gg-r-md); border: 1px solid transparent; font-size: var(--gg-fs-sm); line-height: var(--gg-lh-base); } .gg-alert__icon { flex: 0 0 auto; font-size: 1.1rem; line-height: 1.3; } .gg-alert--danger { background: var(--gg-danger-soft); border-color: color-mix(in srgb, var(--gg-danger) 40%, transparent); color: var(--gg-danger); } .gg-alert--warning { background: var(--gg-warning-soft); border-color: color-mix(in srgb, var(--gg-warning) 40%, transparent); color: var(--gg-warning); } .gg-alert--success { background: var(--gg-success-soft); border-color: color-mix(in srgb, var(--gg-success) 40%, transparent); color: var(--gg-success); } .gg-alert--info { background: var(--gg-info-soft); border-color: color-mix(in srgb, var(--gg-info) 40%, transparent); color: var(--gg-info); } .gg-alert strong { color: inherit; } .gg-alert a { color: inherit; text-decoration: underline; } .gg-toasts { position: fixed; top: calc(var(--gg-header-h) + var(--gg-sp-5)); right: var(--gg-sp-4); z-index: 340; display: flex; flex-direction: column; gap: var(--gg-sp-2); width: min(92vw, 360px); pointer-events: none; } .gg-toast { pointer-events: auto; padding: var(--gg-sp-3) var(--gg-sp-4); border-radius: var(--gg-r-md); background: var(--gg-surface); border: 1px solid var(--gg-border); box-shadow: var(--gg-shadow-md); font-size: var(--gg-fs-sm); animation: gg-toast-in 0.24s ease; } @keyframes gg-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ─── 17. ÉTATS VIDES / LOADERS ──────────────────────────────────────────── */ .gg-empty { display: grid; justify-items: center; gap: var(--gg-sp-4); padding: var(--gg-sp-8) var(--gg-sp-5); text-align: center; background: var(--gg-surface); border: 1px dashed var(--gg-border-strong); border-radius: var(--gg-r-xl); } .gg-empty__icon { font-size: 2.4rem; } .gg-empty p { max-width: 46ch; color: var(--gg-muted); font-size: var(--gg-fs-sm); } .gg-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gg-spin 0.7s linear infinite; } @keyframes gg-spin { to { transform: rotate(360deg); } } /* Mini-cartes d'inspiration des pages de confirmation */ .confirmation-inspirations { margin-top: var(--gg-sp-7); } .confirmation-inspirations-intro { margin-bottom: var(--gg-sp-4); color: var(--gg-muted); font-size: var(--gg-fs-sm); font-weight: 600; } .confirmation-inspiration-grid { display: grid; gap: var(--gg-sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .confirmation-inspiration-card { display: grid; grid-template-columns: 72px 1fr; gap: var(--gg-sp-4); align-items: center; padding: var(--gg-sp-4); background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); box-shadow: var(--gg-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .confirmation-inspiration-card:hover { transform: translateY(-3px); box-shadow: var(--gg-shadow-md); border-color: var(--gg-border-strong); } .confirmation-inspiration-media { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--gg-r-md); font-size: 1.5rem; background: radial-gradient(120% 120% at 30% 20%, var(--gg-gold-soft) 0%, transparent 70%), var(--gg-surface-2); border: 1px solid var(--gg-border); } .confirmation-inspiration-media--usa { background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--gg-info) 22%, transparent) 0%, transparent 70%), var(--gg-surface-2); } .confirmation-inspiration-media--fallback { font-size: 1.05rem; letter-spacing: -0.05em; } .confirmation-inspiration-body { display: grid; gap: var(--gg-sp-1); } .confirmation-inspiration-meta { font-size: var(--gg-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gg-muted); } .confirmation-inspiration-title { font-family: var(--gg-font-head); font-size: var(--gg-fs-md); color: var(--gg-brand); } .confirmation-inspiration-text { font-size: var(--gg-fs-xs); line-height: var(--gg-lh-snug); color: var(--gg-text-soft); } .confirmation-inspiration-link { margin-top: var(--gg-sp-1); font-size: var(--gg-fs-xs); font-weight: 700; color: var(--gg-accent); } /* ─── 18. PAGINATION / RETOUR / FIL D'ARIANE ─────────────────────────────── */ .gg-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--gg-sp-2); margin-top: var(--gg-sp-7); } .gg-pagination a, .gg-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--gg-sp-3); border-radius: var(--gg-r-pill); border: 1px solid var(--gg-border); background: var(--gg-surface); color: var(--gg-text-soft); font-size: var(--gg-fs-sm); font-weight: 700; } .gg-pagination a:hover { border-color: var(--gg-border-strong); background: var(--gg-surface-2); } .gg-pagination [aria-current="page"] { background: var(--gg-gold-soft); border-color: var(--gg-gold); color: var(--gg-text); } .gg-pagination .gg-pagination__gap { border: none; background: none; min-width: 24px; color: var(--gg-muted); } .gg-back { display: inline-flex; align-items: center; gap: var(--gg-sp-2); min-height: 44px; padding: 0 var(--gg-sp-4) 0 var(--gg-sp-3); border-radius: var(--gg-r-pill); border: 1px solid var(--gg-border); background: color-mix(in srgb, var(--gg-surface) 80%, transparent); color: var(--gg-text-soft); font-size: var(--gg-fs-sm); font-weight: 700; } .gg-back:hover { background: var(--gg-surface); color: var(--gg-text); } /* Le fil d'Ariane est une navigation, pas du texte courant : ses liens respectent donc la cible tactile de 44 px. */ .gg-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--gg-sp-1); align-items: center; font-size: var(--gg-fs-xs); color: var(--gg-muted); } .gg-breadcrumb a, .gg-breadcrumb > span { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--gg-sp-1); } .gg-breadcrumb a { color: var(--gg-text-soft); } .gg-breadcrumb a:hover { color: var(--gg-accent); text-decoration: underline; } /* Timeline d'étapes de voyage */ .gg-timeline { display: grid; gap: var(--gg-sp-6); } .gg-timeline__item { display: grid; grid-template-columns: 48px 1fr; gap: var(--gg-sp-4); } .gg-timeline__aside { display: flex; flex-direction: column; align-items: center; gap: var(--gg-sp-2); } .gg-timeline__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--gg-r-pill); background: var(--gg-secondary); color: var(--gg-secondary-ink); font-family: var(--gg-font-head); font-weight: 700; } .gg-timeline__line { flex: 1; width: 2px; min-height: 24px; background: var(--gg-border-strong); border-radius: 2px; } .gg-timeline__body { display: grid; gap: var(--gg-sp-3); padding: var(--gg-sp-5); background: var(--gg-surface); border: 1px solid var(--gg-border); border-radius: var(--gg-r-lg); } .gg-timeline__date { font-size: var(--gg-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gg-accent); } .gg-timeline__body p { color: var(--gg-text-soft); font-size: var(--gg-fs-sm); } .gg-timeline__img { overflow: hidden; border-radius: var(--gg-r-md); } .gg-timeline__img img { width: 100%; height: auto; object-fit: cover; } /* ─── 19. UTILITAIRES ────────────────────────────────────────────────────── */ .gg-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .gg-center { text-align: center; } .gg-mt-4 { margin-top: var(--gg-sp-4); } .gg-mt-6 { margin-top: var(--gg-sp-6); } .gg-mt-7 { margin-top: var(--gg-sp-7); } .gg-muted { color: var(--gg-muted); } .gg-small { font-size: var(--gg-fs-xs); } .gg-flow > * + * { margin-top: var(--gg-sp-4); } .gg-justify-center { justify-content: center; } /* ─── 20. RESPONSIVE ─────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .gg-nav__link { padding: 0 var(--gg-sp-3); } .gg-footer__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } @media (max-width: 900px) { :root { --gg-header-h: 64px; } .gg-nav { display: none; } .gg-burger { display: inline-flex; } .gg-header__theme-desktop { display: none; } .gg-section { padding-block: var(--gg-sp-8); } .gg-hero { padding-top: calc(var(--gg-header-h) + var(--gg-sp-8)); padding-bottom: var(--gg-sp-8); } .gg-travelers { grid-template-columns: 1fr; } } @media (min-width: 901px) { .gg-drawer, .gg-drawer-backdrop { display: none; } } @media (max-width: 768px) { .gg-container { width: min(100% - 2 * var(--gg-sp-4), var(--gg-container)); } .gg-legal__toc { position: static; } .gg-step-panel { padding: var(--gg-sp-5) var(--gg-sp-4); } .gg-cta-band { padding: var(--gg-sp-7) var(--gg-sp-4); border-radius: var(--gg-r-xl); } } @media (max-width: 640px) { .gg-hero, .gg-pagehead { border-radius: 0 0 var(--gg-r-xl) var(--gg-r-xl); } .gg-footer { border-radius: var(--gg-r-xl) var(--gg-r-xl) 0 0; } .gg-hero__actions .gg-btn, .gg-cta-band .gg-btn { width: 100%; } .gg-field-grid { grid-template-columns: 1fr; } .gg-choice-cards { grid-template-columns: 1fr; } .gg-stepper { position: static; } .gg-step-actions { flex-direction: column-reverse; align-items: stretch; } .gg-step-actions .gg-btn { width: 100%; } .gg-step-actions__position { margin: 0 0 var(--gg-sp-2); text-align: center; } .gg-submit-row { flex-direction: column; align-items: stretch; } .gg-submit-row .gg-btn { width: 100%; } .gg-timeline__item { grid-template-columns: 36px 1fr; gap: var(--gg-sp-3); } .gg-timeline__num { width: 36px; height: 36px; font-size: var(--gg-fs-sm); } .gg-timeline__body { padding: var(--gg-sp-4); } .gg-footer__bottom { flex-direction: column; align-items: flex-start; } .gg-toasts { top: auto; bottom: var(--gg-sp-4); right: var(--gg-sp-3); left: var(--gg-sp-3); width: auto; } /* Comparatif : le tableau devient une pile de cartes lisibles. */ .gg-table--stack thead { display: none; } .gg-table--stack, .gg-table--stack tbody, .gg-table--stack tr, .gg-table--stack td { display: block; width: 100%; } .gg-table--stack tr { padding: var(--gg-sp-4); border-bottom: 1px solid var(--gg-border); } .gg-table--stack tr:last-child { border-bottom: none; } .gg-table--stack td { border: none; padding: var(--gg-sp-2) 0; text-align: left !important; } .gg-table--stack td[data-label]::before { content: attr(data-label) ' : '; font-weight: 700; color: var(--gg-muted); } .gg-table--stack td:first-child { font-family: var(--gg-font-head); font-weight: 700; color: var(--gg-brand); padding-bottom: var(--gg-sp-3); } .gg-table--stack .gg-table__featured { background: none; } } @media (max-width: 400px) { .gg-logo { width: 132px; } .gg-header__bar { padding-left: var(--gg-sp-3); } } /* ─── 21. MOUVEMENT RÉDUIT / IMPRESSION ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .gg-card--hover:hover, .gg-offer:hover, .gg-trip:hover { transform: none; } } @media print { .gg-header, .gg-drawer, .gg-drawer-backdrop, .gg-footer, .gg-toasts, .gg-skip { display: none !important; } body { background: #fff; color: #000; } .gg-card, .gg-offer, .gg-legal__block { box-shadow: none; border-color: #ccc; } }