/* ========================================================================== GROUPE NGF, Design system / base.css Tokens, reset, typographie, boutons, motifs éditoriaux. Direction artistique : corporate industriel premium, navy profond, azur technique, labels mono, grille stricte, beaucoup d'air. ========================================================================== */ /* ---------- Tokens -------------------------------------------------------- */ :root { /* Marque (logo officiel NGF) */ --navy-950: #04122a; --navy-900: #071e3e; --navy-800: #0a2c5b; --navy-700: #0f3a72; --azure: #16a7e0; --azure-dark: #0e86b8; --azure-light: #7fd0f2; /* Rappel marin : le turquoise ne sert qu'aux fonds et aux lavis, l'azur du logo reste la seule couleur d'accent (liens, puces, boutons). Les quatre variables ci-dessous sont le seul point d'entrée du thème : chaque filiale les redéfinit sur son (voir filiale.css). */ --wash-a: rgba(20, 179, 196, .17); /* lavis principal des sections claires */ --wash-b: rgba(22, 167, 224, .13); /* lavis secondaire, coin opposé */ --deep-sea: linear-gradient(158deg, var(--navy-950) 0%, var(--navy-900) 46%, #0a3f56 100%); --footer-deep: #06283a; /* bas du dégradé de pied de page */ --accent-bar: linear-gradient(90deg, var(--azure) 0%, #14b3c4 44%, var(--navy-700) 100%); /* Neutres */ --ink: #101828; --body: #45536b; --muted: #68758e; --line: #dde8ee; --bg: #ffffff; --bg-soft: #e9f4f7; /* Typographie */ --f-head: "Archivo", -apple-system, "Segoe UI", sans-serif; --f-body: "Inter", -apple-system, "Segoe UI", sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; /* Géométrie */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --container: 1240px; --gutter: clamp(20px, 4vw, 44px); --section-y: clamp(76px, 9vw, 132px); /* Ombres */ --sh-sm: 0 1px 2px rgba(7, 30, 62, .05), 0 4px 14px rgba(7, 30, 62, .06); --sh-md: 0 6px 18px rgba(7, 30, 62, .08), 0 20px 50px rgba(7, 30, 62, .10); --sh-lg: 0 24px 70px rgba(4, 18, 42, .22); --ease: cubic-bezier(.22, 1, .36, 1); } /* ---------- Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--f-body); font-size: 16.5px; line-height: 1.7; color: var(--body); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } button, input, textarea, select { font: inherit; color: inherit; } figure { margin: 0; } :focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--azure); color: #fff; } [id] { scroll-margin-top: 110px; } /* ---------- Typographie --------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--f-head); color: var(--navy-800); font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 5.2vw, 4.3rem); font-weight: 800; } h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); font-weight: 800; } h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.25; } h4 { font-size: 1rem; } p { text-wrap: pretty; } strong { color: var(--ink); font-weight: 600; } .mono { font-family: var(--f-mono); font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; } /* Label technique au-dessus des titres */ .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--azure-dark); } .kicker::before { content: ""; width: 9px; height: 9px; background: var(--azure); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .on-dark .kicker, .kicker.kicker--light { color: var(--azure-light); } /* ---------- Mise en page --------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } /* Fond « mer » : aplat turquoise très clair réveillé par deux lavis diagonaux, pour que la section respire au lieu de paraître grise. */ .section--soft { background: radial-gradient(115% 85% at 6% -12%, var(--wash-a), transparent 60%), radial-gradient(95% 72% at 100% 112%, var(--wash-b), transparent 62%), var(--bg-soft); } .section--navy { background: var(--deep-sea); } .section--navy :is(h2, h3) { color: #fff; } .section--navy p { color: rgba(226, 236, 248, .78); } /* En-tête de section éditorial : index + titre + intro */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); } .sec-head__main { max-width: 680px; } .sec-head__main .kicker { margin-bottom: 16px; } .sec-head__main .lead { margin-top: 16px; font-size: 1.08rem; color: var(--muted); max-width: 58ch; } .section--navy .sec-head__main .lead { color: rgba(226, 236, 248, .68); } .sec-index { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; color: var(--muted); white-space: nowrap; padding-bottom: 10px; } .sec-index b { color: var(--azure-dark); font-weight: 600; } .section--navy .sec-index { color: rgba(226, 236, 248, .5); } .section--navy .sec-index b { color: var(--azure-light); } @media (max-width: 700px) { .sec-index { display: none; } } /* ---------- Boutons -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; font-family: var(--f-head); font-size: .95rem; font-weight: 700; letter-spacing: .01em; color: #fff; background: var(--navy-800); border: 1px solid var(--navy-800); border-radius: var(--r-sm); cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .btn:hover { background: var(--navy-700); border-color: var(--navy-700); transform: translateY(-1px); box-shadow: var(--sh-sm); } .btn:active { transform: none; } .btn svg { flex: none; } .btn--azure { background: var(--azure); border-color: var(--azure); } .btn--azure:hover { background: var(--azure-dark); border-color: var(--azure-dark); box-shadow: 0 8px 22px rgba(22, 167, 224, .3); } .btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--line); } .btn--ghost:hover { background: var(--bg-soft); border-color: var(--navy-800); box-shadow: none; } .btn--white { background: #fff; color: var(--navy-800); border-color: #fff; } .btn--white:hover { background: #e6f4f8; border-color: #e6f4f8; } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); } .btn--outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; box-shadow: none; } /* Lien fléché */ .arrow-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-head); font-weight: 700; font-size: .95rem; color: var(--azure-dark); } .arrow-link svg { transition: transform .25s var(--ease); } .arrow-link:hover svg { transform: translateX(5px); } .on-dark .arrow-link { color: var(--azure-light); } /* ---------- Listes à coches ------------------------------------------------ */ .ticks { display: grid; gap: 12px; } .ticks li { display: flex; gap: 12px; align-items: baseline; } .ticks .tk { flex: none; width: 18px; height: 18px; transform: translateY(3px); color: var(--azure); } /* ---------- Chips / références --------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-family: var(--f-mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-800); background: #fff; border: 1px solid var(--line); border-radius: var(--r-xs); } .section--navy .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #dbe7f5; } /* ---------- Apparition au scroll ------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- Accessibilité -------------------------------------------------- */ .skip-link { position: absolute; top: -60px; left: 16px; z-index: 300; padding: 12px 20px; background: var(--navy-800); color: #fff; border-radius: 0 0 var(--r-sm) var(--r-sm); transition: top .2s; } .skip-link:focus { top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; } }