/* @override https://gorelkine.com/ICONOMEDIA/site.css https://4997-e0c7a1ad3cba.wptiger.fr/wp-content/themes/iconomedia-theme/assets/css/site.css?* */ /* Variables CSS regroupées dans colors_and_type.css (chargé avant ce fichier) */* { box-sizing: border-box}html { scroll-behavior: smooth; scroll-padding-top: 120px; overflow-x: clip; overflow-x: hidden; background: var(--navy-950); width: 100%}@media (max-width:990px) { html { scroll-padding-top: 88px }} @media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto }} html, body { margin: 0; padding: 0; width: 100%}body { background: var(--paper-50); color: var(--fg-1); font-family: var(--font-sans); -webkit-font-smoothing: antialiased}.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; position: relative; z-index: 2}section { padding: var(--section-pad-y) 0; position: relative; overflow: hidden}img { max-width: 100%; display: block} /* Accessibilité — skip link + texte lecteur d'écran */.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; background: var(--brand-green); color: #fff; padding: 12px 20px; border-radius: 8px; font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px -8px rgba(0,0,0,.4); transition: top 200ms ease-out}.skip-link:focus { top: 16px; outline: 2px solid #fff; outline-offset: 2px}.screen-reader-text { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0}#content:focus { outline: none} /* ============== CORNER ROTATING CIRCLES ============== */ /* A single circle pinned to a section corner (bottom-right or top-left), 50vw wide, 25% opacity, half off-screen. Section overflow:hidden clips the outside half. All circles spin clockwise on scroll-down (positive data-spin). */.corner-decor { position: absolute; width: 50vw; height: 50vw; z-index: 0; pointer-events: none; opacity: .5}.corner-decor img { width: 100%; height: 100%; object-fit: contain; will-change: transform; transform-origin: 50% 50%}.corner-decor.br { right: -25vw; bottom: -25vw}.corner-decor.tl { left: -25vw; top: -25vw}.corner-decor.tr { right: -25vw; top: -25vw}.corner-decor.bl { left: -25vw; bottom: -25vw}.corner-decor.tc { left: 50%; top: -25vw; transform: translateX(-50%)}.corner-decor.bc { left: 50%; bottom: -25vw; transform: translateX(-50%)} /* ============== NAV · wide-at-top, shrinking pill ============== */.nav { position: fixed; top: 28px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 18px 18px 18px 36px; display: flex; align-items: center; gap: 36px; width: max-content; min-width: min(calc(100vw - 36px),var(--container)); max-width: calc(100vw - 60px); box-sizing: border-box; background: rgba(251,250,247,.85); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-radius: var(--radius-pill); box-shadow: var(--shadow-pill); transition: top 300ms ease-in-out,min-width 300ms ease-in-out,padding 300ms ease-in-out,background 300ms ease-in-out,gap 300ms ease-in-out,backdrop-filter 300ms ease-in-out}.nav.scrolled { top: 16px; background: rgba(251,250,247,.8); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%)}.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none}.nav .brand img { height: 42px; display: block; width: auto; transition: height 300ms ease-in-out}.nav .brand { position: relative} /* ============== BURGER + MOBILE NAV ============== */.nav-burger, .nav-bubble { display: none}.mobile-menu { display: none}@media (max-width:990px) { .nav { padding: 12px 12px 12px 24px; min-width: 0; gap: 10px; left: 12px; right: 12px; width: auto; max-width: none; transform: none } .nav-burger { margin-left: auto; width: 42px!important; height: 42px!important } .nav-burger svg { width: 26px!important; height: 26px!important; stroke-width: 2 } .nav-bubble { width: 42px!important; height: 42px!important } .nav.scrolled { top: 14px } .nav .brand img { height: 42px } .nav-links, .nav-cta { display: none } .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: transparent; border: 0; color: var(--brand-navy); cursor: pointer; transition: background var(--dur-fast) var(--ease-out) } .nav-burger:hover { background: rgba(6,36,63,.06) } .nav-burger svg { width: 22px; height: 22px } .nav-bubble { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-green); color: #fff; text-decoration: none; box-shadow: 0 8px 22px -6px rgba(26,110,85,.4); transition: background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out) } .nav-bubble:hover { background: var(--hover-green); color: #fff; transform: scale(1.04) } .nav-bubble:hover svg { color: #fff; stroke: #fff } .nav-bubble svg { width: 20px; height: 20px } .mobile-menu { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(3,24,43,.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease-out) } .mobile-menu.open { opacity: 1; pointer-events: auto } .mobile-menu .mm-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); border: 0; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center } .mobile-menu .mm-close svg { width: 24px; height: 24px } .mobile-menu .mm-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: 40px } .mobile-menu a { font-family: var(--font-display); font-size: clamp(28px,6vw,42px); font-weight: 700; color: #fff; text-decoration: none; letter-spacing: -0.01em; transition: color var(--dur-fast) var(--ease-out) } .mobile-menu a:hover { color: var(--green-400) } .mobile-menu .mm-cta { margin-top: 24px; padding: 16px 32px; background: var(--brand-green); color: #fff; border-radius: var(--radius-pill); font-size: 16px; font-weight: 600; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans) } .mobile-menu .mm-cta:hover { background: var(--hover-green); color: #fff; } body.menu-open { overflow: hidden }} .nav-links { display: flex; gap: 28px; align-items: center; margin: 0 auto}.nav-links .has-submenu { position: relative; display: inline-flex; align-items: center}.nav-links .has-submenu > a { display: inline-flex; align-items: center; gap: 3px}.nav-links .has-submenu > a::after { content: ""; width: 4px; height: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 5px; margin-top: -2px; transition: transform 220ms var(--ease-out); opacity: .6}.nav-links .has-submenu:hover > a::after, .nav-links .has-submenu:focus-within > a::after { transform: rotate(225deg); margin-top: 1px}.nav-links .has-submenu::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 280px; max-width: 90vw; height: 24px; pointer-events: none}.nav-links .has-submenu:hover::after, .nav-links .has-submenu:focus-within::after { pointer-events: auto}.nav-links .submenu { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(251,250,247,.96); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-radius: 14px; padding: 12px; min-width: 280px; box-shadow: 0 14px 40px -8px rgba(6,36,63,.28),0 2px 6px rgba(6,36,63,.08); display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease-out),transform 220ms var(--ease-out); list-style: none}.nav-links .has-submenu:hover .submenu, .nav-links .has-submenu:focus-within .submenu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0)}.nav-links .submenu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; font-size: 16px; color: var(--fg-1); text-decoration: none; transition: background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out); white-space: nowrap; font-weight: 500}.nav-links .submenu a:hover, .nav-links .submenu a:hover .sub-tag { color: var(--hover-green)}.nav-links .submenu a:hover .sub-tag { opacity: .5}.nav-links a.active, .nav-links .has-submenu.active > a { color: var(--hover-green)}.nav-links .submenu a.active { color: var(--hover-green); font-weight: 700}.nav-links .submenu a.active .sub-tag { color: var(--hover-green); opacity: .5}.mobile-menu a.active, .mobile-menu .submenu-inline a.active { color: var(--green-400)}.nav-links .submenu .sub-tag { font-size: 11px; color: var(--fg-3); font-weight: 500; letter-spacing: .04em; text-transform: uppercase}.nav-links .submenu hr { border: 0; height: 1px; background: rgba(6,36,63,.08); margin: 6px 6px}.mobile-menu .mm-toggler { display: inline-flex; align-items: center; gap: 8px; cursor: pointer}.mobile-menu .mm-toggler::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 260ms var(--ease-out); margin-top: -4px; opacity: .6}.mobile-menu .mm-toggler.open::after { transform: rotate(225deg); margin-top: 2px}.mobile-menu .submenu-inline { display: flex; flex-direction: column; gap: 8px; align-items: center; max-height: 0; overflow: hidden; margin: 0; opacity: 0; transition: max-height 320ms var(--ease-out),opacity 220ms var(--ease-out),margin 320ms var(--ease-out)}.mobile-menu .submenu-inline.open { max-height: 600px; opacity: 1; margin: -12px 0 0}.mobile-menu .submenu-inline a { font-size: 18px; font-weight: 500; color: rgba(255,255,255,.78)}.mobile-menu .submenu-inline a:hover { color: var(--green-400)}.nav-links a { font-size: 17.5px; font-weight: 600; color: var(--fg-1); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); white-space: nowrap; letter-spacing: .005em}.nav-links a:hover { color: var(--hover-green)}.nav-cta { white-space: nowrap; padding: 14px 24px; background: var(--brand-green); color: #fff; border-radius: var(--radius-pill); font-size: 16px; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out); display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px -10px rgba(0,0,0,.4)}.nav-cta:hover { background: var(--hover-green); color: #fff}.nav-cta:active { transform: scale(.98)} /* Nav compact · entre 991 et 1200 px on resserre tout en préservant la largeur logo */@media (min-width:991px) and (max-width:1200px) { .nav { gap: 18px; padding: 14px 14px 14px 26px } .nav.scrolled { padding: 10px 10px 10px 22px } .nav-links { gap: 16px } .nav-links a { font-size: 16px; letter-spacing: 0 } .nav-links .has-submenu > a { gap: 2px } .nav-links .submenu { min-width: 240px } .nav-links .submenu a { font-size: 13.5px } .nav-cta { font-size: 13.5px; padding: 11px 18px; gap: 8px; letter-spacing: .03em } .nav .brand img { min-width: 150px; height: auto; width: 150px }} /* ============== BUTTONS · fills + shadows, no rings ============== */.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--radius-pill); font-family: inherit; font-weight: 600; font-size: 16px; letter-spacing: .04em; border: 0; cursor: pointer; text-decoration: none; transition: all var(--dur-base) var(--ease-out)}.btn-primary { background: var(--brand-green); color: #fff; box-shadow: 0 8px 24px -10px rgba(0,0,0,.4)}.btn-primary:hover { background: var(--green-exergue); color: #fff; box-shadow: none}.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(8px); box-shadow: 0 8px 24px -10px rgba(0,0,0,.4)}.btn-ghost-light:hover { background: var(--green-exergue); color: #fff; box-shadow: none}.btn-ghost { background: #fff; color: var(--brand-navy); box-shadow: 0 8px 24px -10px rgba(0,0,0,.4)}.btn-ghost:hover { background: var(--green-exergue); color: #fff; box-shadow: none}.btn .arrow { transition: transform var(--dur-base) var(--ease-out); display: inline-flex}.btn:hover .arrow { transform: translateX(2px)}.btn:active { transform: scale(.985)}.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-green); font-weight: 600; font-size: 16px; letter-spacing: .02em; text-decoration: none}.link-arrow svg { transition: transform var(--dur-base) var(--ease-out)}.link-arrow:hover { color: var(--hover-green)}.link-arrow:hover svg { transform: translateX(2px)} /* ============== HERO ============== */.hero { position: relative; min-height: 100vh; background: var(--navy-950); color: #fff; display: flex; align-items: center; padding: 140px 0 80px; overflow: hidden; isolation: isolate} /* Aurora · wow effect: animated radial gradients morphing slowly */.hero-aurora { position: absolute; inset: -15%; z-index: 0; pointer-events: none; background: radial-gradient(38% 42% at 22% 28%,rgba(91,192,147,.42) 0%,rgba(91,192,147,0) 70%),radial-gradient(36% 38% at 78% 72%,rgba(61,175,124,.38) 0%,rgba(61,175,124,0) 70%),radial-gradient(28% 30% at 60% 25%,rgba(126,212,170,.28) 0%,rgba(126,212,170,0) 70%),radial-gradient(34% 32% at 30% 80%,rgba(20,90,120,.5) 0%,rgba(20,90,120,0) 70%); filter: blur(70px) saturate(140%); animation: auroraShift 20s ease-in-out infinite alternate} @keyframes auroraShift {0% { transform: translate(0,0) scale(1) rotate(0deg); opacity: .85}50% { transform: translate(6%,-4%) scale(1.18) rotate(8deg); opacity: 1}100% { transform: translate(-5%,5%) scale(1.06) rotate(-5deg); opacity: .9}} body[data-anim="off"] .hero-aurora, @media (prefers-reduced-motion:reduce) { .hero-aurora{ animation: none}} /* Saison 2 watermark · centered right, lifted */.hero-saison { position: absolute; bottom: -2%; right: -6%; top: auto; transform: none; width: 54vh; height: 54vh; min-width: 420px; min-height: 420px; z-index: 1; pointer-events: none; opacity: .62; mix-blend-mode: screen; animation: saisonFloat 14s ease-in-out infinite alternate}.hero-saison img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 60px rgba(91,192,147,.25))} @keyframes saisonFloat {0% { transform: translateY(0) rotate(0deg)}100% { transform: translateY(-14px) rotate(8deg)}} body[data-anim="off"] .hero-saison { animation: none}.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%,rgba(3,24,43,0) 35%,rgba(3,24,43,.55) 100%); z-index: 1; pointer-events: none}.hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center}.hero-left { max-width: 680px; position: relative; z-index: 3}.hero .eyebrow { color: var(--green-400); display: inline-flex; align-items: center; gap: 10px}.hero .eyebrow .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 0 4px rgba(91,192,147,.18),0 0 16px rgba(91,192,147,.6)}.hero h1 { font-family: var(--font-display); font-size: clamp(38px,5.2vw,72px); font-weight: 800; line-height: 1.02; letter-spacing: -0.022em; margin: 22px 0 28px; text-wrap: balance; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.4)}.hero h1 .accent { background: linear-gradient(120deg,var(--green-400) 0%,var(--green-200) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap} /* Typewriter · rotating words */.type-wrap { display: inline-grid; vertical-align: baseline; position: relative; background: none; color: inherit; -webkit-text-fill-color: initial}.type-wrap > span { grid-area: 1/1; white-space: nowrap; padding-bottom: .14em; margin-bottom: -.14em; line-height: 1.16}.type-target { position: relative; z-index: 1; justify-self: start; background: linear-gradient(120deg,var(--green-400) 0%,var(--green-200) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent}.type-ghost { visibility: hidden; opacity: 0; pointer-events: none} .type-ghost::before { content: attr(data-text)}.type-target::after { content: ""; display: inline-block; width: .06em; height: .85em; margin-left: .06em; vertical-align: baseline; transform: translateY(.05em); background: var(--green-400); border-radius: 1px; box-shadow: 0 0 12px rgba(91,192,147,.5); animation: caretBlink 1s steps(1) infinite;} @keyframes caretBlink {0%,50% { opacity: 1}50.01%,100% { opacity: 0}} @media (prefers-reduced-motion:reduce) { .type-target::after { animation: none; opacity: 1 }} /* Hero entry animation */.hero h1, .hero .lead, .hero-actions { animation: heroRise 900ms cubic-bezier(.2,.6,.2,1) both}.hero h1 { animation-delay: 120ms}.hero .lead { animation-delay: 320ms}.hero-actions { animation-delay: 520ms}.hero-collage { opacity: 0; animation: heroIn 1100ms cubic-bezier(.2,.6,.2,1) 400ms forwards} @keyframes heroRise {from { transform: translateY(28px)}to { transform: translateY(0)}} @keyframes heroIn {from { opacity: 0; transform: translateY(28px)}to { opacity: 1; transform: translateY(0)}} @media (prefers-reduced-motion:reduce) { .hero h1, .hero .lead, .hero-actions, .hero-collage { animation: none; opacity: 1; transform: none }} .hero .lead { color: rgba(255,255,255,0.86); font-size: clamp(17px,1.35vw,21px); line-height: 1.55; max-width: 700px; margin: 0 0 40px}.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap}.hero-meta { display: flex; gap: 24px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--hairline-dark)}.hero-meta .h-meta { flex: 1}.hero-meta .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px}.hero-meta .v { font-size: 16px; color: #fff; font-weight: 500}.hero-right { position: relative; z-index: 3}.hero-collage { position: relative; width: 97%; aspect-ratio: 1; max-width: 800px; margin-left: auto; margin-right: -12%}.hero-collage > div { position: absolute; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px -16px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.08) inset; background: rgba(8,28,50,.6)}.hero-collage img { width: 100%; height: 100%; object-fit: contain; display: block}.hero-collage .collage-1 { top: 0; left: -8%; width: 60%; height: 74%; transform: rotate(-4deg); z-index: 2; animation: collageFloat1 6s ease-in-out infinite alternate}.hero-collage .collage-2 { bottom: -6%; right: -10%; width: 88%; height: 88%; transform: rotate(5deg); z-index: 1; animation: collageFloat2 7s ease-in-out infinite alternate} @keyframes collageFloat1 {0% { transform: rotate(-4deg) translateY(0)}100% { transform: rotate(-1deg) translateY(-26px)}} @keyframes collageFloat2 {0% { transform: rotate(3deg) translateY(0)}100% { transform: rotate(6deg) translateY(20px)}} body[data-anim="off"] .hero-collage > div { animation: none}.scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.62); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 5; text-decoration: none; cursor: pointer; transition: color var(--dur-fast) var(--ease-out)}.scroll-cue:hover { color: #fff}.scroll-cue::after { content: ""; width: 1px; height: 32px; background: rgba(255,255,255,0.4); animation: cuePulse 2s var(--ease-in-out) infinite} @keyframes cuePulse {0%,100% { transform: scaleY(1); opacity: .4}50% { transform: scaleY(.5); opacity: .9}} /* ============== SECTION HEADS ============== */.sec-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 56px; gap: 8px; max-width: none}.sec-head > div { width: 100%}.sec-head h2 { margin: 0 0; font-size: clamp(32px,3.8vw,52px); text-wrap: balance; line-height: 1.1;}.sec-head .lead { margin: 20px 0 0; max-width: 900px; font-size: clamp(18px,1.4vw,21px); line-height: 1.55}.sec-dark { background: var(--navy-950); color: #fff}.sec-dark .sec-head h2, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: #fff}.sec-dark .sec-head .lead, .sec-dark .lead { color: rgba(255,255,255,.78)}.sec-dark .eyebrow { color: var(--green-400)} /* ============== EXPERTISES ============== */.exp-thema-group { position: relative; overflow: hidden; background: var(--paper-50)}.exp-thema-group > .exp-saison { position: absolute; top: 50%; right: -10%; transform: translateY(-50%); width: min(1250px,101vw); height: min(1250px,101vw); opacity: .14; z-index: 0; pointer-events: none}.exp-thema-group > .exp-saison img { width: 100%; height: 100%; object-fit: contain}.expertises { background: transparent; position: relative; overflow: visible;}.thematiques { padding-top: 30px; background: transparent; position: relative; overflow: visible}.expertises .container { position: relative; z-index: 1}.exp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; position: relative; z-index: 1}.exp-card { background: var(--navy-925); color: #fff; border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-card-light); transition: transform 600ms cubic-bezier(.2,.6,.2,1),box-shadow 600ms cubic-bezier(.2,.6,.2,1); display: flex; flex-direction: column; min-height: 280px; position: relative; overflow: hidden}.exp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-light-hover)}.exp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-light-hover)}.exp-card .exp-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--green-exergue); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 0 24px; transition: all var(--dur-base) var(--ease-out); box-shadow: 0 8px 18px -8px rgba(0,0,0,.35)}.exp-card:hover .exp-icon { background: #fff; color: var(--green-exergue); box-shadow: 0 8px 18px -8px rgba(0,0,0,.35)}.exp-card h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -0.01em; font-weight: 700; color: #fff}.exp-card p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.78)} /* ============== ENTITES ============== */.entites { background: linear-gradient(165deg, rgba(10, 43, 74, 1) 0%, #e1f2e9 100%); color: #fff; padding-top: 100px;}.entites h2 { color: #fff}.entites .sec-head .lead { color: rgba(255,255,255,.72)}.entites .eyebrow { color: var(--green-400)}.entite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px}.entite { position: relative; background: linear-gradient(180deg,var(--navy-915) 0%,var(--navy-925) 100%); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 700ms cubic-bezier(.2,.6,.2,1),box-shadow 700ms cubic-bezier(.2,.6,.2,1),background 700ms ease; box-shadow: 0 0 0 rgba(61,175,124,0),0 24px 48px -16px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04); padding: 44px 44px 78px; min-height: 380px}.entite-grid .entite:nth-child(1), .entite-grid .entite:nth-child(2) { background: linear-gradient(135deg,#688893 0%,#1D3F4D 100%)}.entite:hover { transform: translateY(-3px); box-shadow: 0 0 50px rgba(161,204,58,.7),0 24px 48px -16px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}.entite .bg-icon { position: absolute; top: -4%; right: -4%; width: 42%; height: auto; aspect-ratio: 1; opacity: .6; pointer-events: none; z-index: 0}.entite .bg-icon[src*="display-reuse"] { width: 33.6%; top: calc(-4% + 30px)}.entite .ey { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-weight: 600; position: relative; z-index: 1; max-width: 350px}.entite h3 { margin: 14px 0 14px; font-size: 26px; letter-spacing: -0.015em; color: #fff; position: relative; z-index: 1; max-width: 350px; min-height: 3em; line-height: 1.15}.entite ul.bullets { list-style: none; padding: 0; margin: 0 0 28px; max-width: 400px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px}.entite ul.bullets li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.78)}.entite ul.bullets li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: #A1CC3A}.entite .btn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #fff; text-decoration: none; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); transition: background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out); position: absolute; bottom: 18px; right: 18px; z-index: 2}.entite .btn-pill:hover { background: var(--green-exergue); color: #fff; box-shadow: inset 0 0 0 1.5px var(--green-exergue)}.entite .btn-pill svg { transition: transform var(--dur-base) var(--ease-out)}.entite .btn-pill:hover svg { transform: translateX(2px)} /* ============== THEMATIQUES ============== */.thematiques { background: transparent}.thema-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; position: relative; z-index: 2}.thema { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; aspect-ratio: 4/5; background: var(--paper-200); box-shadow: var(--shadow-card-light); transition: transform 600ms cubic-bezier(.2,.6,.2,1),box-shadow 600ms cubic-bezier(.2,.6,.2,1)}.thema img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 700ms cubic-bezier(.2,.6,.2,1),opacity var(--dur-base) var(--ease-out)}.thema:hover img { transform: scale(1.06)}.thema::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(3,24,43,0) 0%,rgba(3,24,43,.55) 55%,rgba(3,24,43,.92) 100%); z-index: 1}.thema .num-chip { position: absolute; bottom: -20px; right: -5px; top: auto; left: auto; z-index: 3; color: var(--paper-50); opacity: .75; font-family: var(--font-display); font-weight: 800; font-size: 54cqw; line-height: .85; letter-spacing: -0.06em; pointer-events: none}.thema { container-type: inline-size}.thema .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 28px 26px; z-index: 2; color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px}.thema .info-text { display: flex; flex-direction: column; gap: 6px}.thema .info h3 { margin: 0; font-size: 22px; color: #fff; font-weight: 700; line-height: 1.2}.thema .info .sub { font-size: 16px; letter-spacing: .02em; color: var(--green-400); font-weight: 500; line-height: 1.5}.thema .arrow { position: absolute; top: 18px; right: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-925); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; transition: background var(--dur-base) var(--ease-out); box-shadow: 0 4px 12px rgba(0,0,0,.25)}.thema:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-light-hover)}.thema:hover .arrow { background: var(--hover-green)} /* ============== REPRENDRE ============== */.reprendre { background: var(--navy-950); color: #fff; isolation: isolate; padding-top: 100px;}.reprendre::before { content: ""; position: absolute; top: 50%; left: 50%; width: 110vh; height: 110vh; background: radial-gradient(circle at center,rgba(61,175,124,.32) 0%,rgba(61,175,124,0) 60%); transform: translate(-50%,-50%); z-index: 0; pointer-events: none}.rep-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: center}.rep-eyebrow { color: var(--green-400); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px}.rep-eyebrow .glyph { font-size: 18px}.rep-grid h2 { color: #fff; margin: 0 0 24px; font-size: clamp(32px,3.8vw,52px); line-height: 1.1; text-wrap: balance; max-width: 18ch}.rep-grid p.lead { color: rgba(255,255,255,.78); margin: 0 0 36px; max-width: 46ch; font-size: clamp(18px,1.4vw,21px); line-height: 1.55}.bignum { font-family: var(--font-display); font-size: clamp(112px,15.4vw,196px); font-weight: 800; line-height: .85; letter-spacing: -0.04em; background: linear-gradient(135deg,#fff 0%,var(--green-400) 60%,var(--green-exergue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; filter: drop-shadow(0 24px 80px rgba(91,192,147,.35))}.bignum-label { display: block; font-size: 18px; font-weight: 500; color: rgba(255,255,255,.78); max-width: none; white-space: nowrap; margin-top: 24px; line-height: 1.5}@media (max-width:760px) { .bignum-label { white-space: normal; font-size: 16px; max-width: 32ch }} .bignum-meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--hairline-dark)}.bignum-meta .stat { display: flex; flex-direction: column; gap: 6px}.bignum-meta .ico { width: 105px; height: 105px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: #02101e; border-radius: 50%; box-shadow: 0 0 50px rgba(61,175,124,1),inset 0 1px 0 rgba(255,255,255,.06)}.bignum-meta .ico img { width: 74%; height: 74%; object-fit: contain}.bignum-meta .k { font-family: var(--font-sans); font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--green-400); font-weight: 700; margin-bottom: 6px; line-height: 1.3}.bignum-meta .v { font-size: 16px; color: rgba(255,255,255,.78); font-weight: 500; line-height: 1.5}.rep-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px} /* ============== CONFIANCE ============== */.confiance { background: var(--navy-950); color: #fff; padding-top: 120px; padding-bottom: 120px; position: relative; z-index: 3; overflow: hidden; isolation: isolate; padding-top: 100px;}.confiance::before { content: ""; position: absolute; top: 50%; left: 50%; width: 110vh; height: 110vh; background: radial-gradient(circle at center,rgba(61,175,124,.32) 0%,rgba(61,175,124,0) 60%); transform: translate(-50%,-50%); z-index: 0; pointer-events: none}.confiance .container { position: relative; z-index: 2}.confiance .lab { font-family: var(--font-display); font-size: clamp(28px,3.4vw,48px); font-weight: 800; letter-spacing: -0.015em; color: #fff; text-align: center; margin: 0 auto 56px; max-width: 22ch; line-height: 1.15}.logo-wall { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; background: rgba(255,255,255,.08); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); width: 100%; max-width: 100%; border: 1px solid rgba(255,255,255,.06)}.logo-cell { background: rgba(6, 30, 58, 0); padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 120px; min-width: 0; overflow: hidden; transition: background var(--dur-base) var(--ease-out);}.logo-cell .lg { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: rgba(255,255,255,.45); letter-spacing: -0.01em; filter: grayscale(1); opacity: .85; transition: all var(--dur-base) var(--ease-out); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis}.logo-cell:hover { }.logo-cell:hover .lg { filter: none; opacity: 1; color: #fff} /* ============== À PROPOS ============== */.apropos { background: var(--green-100); color: var(--fg-1)}.apropos-stats { position: relative}.apropos .apropos-ring { position: absolute; top: 50%; left: 50%; right: auto; transform: translate(-50%,-50%); width: min(1500px,90vw); height: min(1500px,90vw); aspect-ratio: 1; opacity: .5; z-index: 0; pointer-events: none}.apropos-stats > div { position: relative; z-index: 1}@media (max-width:760px) { .apropos .apropos-ring { right: auto; left: 50%; transform: translate(-50%,-50%); width: min(800px,156vw); height: min(800px,156vw) }} .apropos h2 { color: var(--fg-1); margin: 0 0 24px; font-size: clamp(32px,3.8vw,52px); line-height: 1.1; text-wrap: balance; max-width: 18ch}.apropos .lead { color: var(--fg-3); max-width: 48ch; font-size: clamp(18px,1.4vw,21px); line-height: 1.55}.apropos .eyebrow { color: var(--green-700)}.apropos-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center}.apropos-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px}.apropos-stats div { display: flex; flex-direction: column; gap: 4px}.apropos-stats strong { font-family: var(--font-display); font-size: clamp(36px,4.4vw,56px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; background: linear-gradient(135deg,var(--brand-green) 0%,var(--green-400) 100%); -webkit-background-clip: text; background-clip: text; color: transparent}.apropos-stats span { font-size: 13px; color: var(--fg-3); letter-spacing: .02em}.apropos .signers { margin: 32px 0 36px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.55); text-transform: uppercase}@media (max-width:760px) { .apropos-grid { grid-template-columns: 1fr; gap: 48px } .apropos-stats { padding-top: 32px }} /* ============== EQUIPE (legacy, kept for any reference) ============== */.equipe { background: var(--navy-950); color: #fff}.equipe h2 { color: #fff}.equipe .sec-head .lead { color: rgba(255,255,255,.72)}.equipe .eyebrow { color: var(--green-400)}.equipe .eq-card .nm { color: #fff}.equipe .eq-card .ro { color: rgba(255,255,255,.6)}.eq-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px}.eq-card { background: transparent; border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out)}.eq-card:hover { transform: translateY(-2px)}.eq-card .media { display: block; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card-dark)}.eq-card .media img { width: 100%; height: 100%; object-fit: cover}.eq-card .nm { margin-top: 18px; font-size: 18px; font-weight: 700}.eq-card .ro { font-size: 13px; margin-top: 2px}.eq-foot { margin-top: 48px; display: flex; align-items: center; justify-content: center; gap: 18px} /* ============== ACTUALITES ============== */.news { background: var(--paper-50); padding-top: 100px;}.news .sec-head { margin-bottom: 30px}.news .sec-head h2 { min-height: 0}.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px}.news-foot { margin-top: 48px; display: flex; justify-content: center}.news-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; transition: transform 600ms cubic-bezier(.2,.6,.2,1),box-shadow 600ms cubic-bezier(.2,.6,.2,1); cursor: pointer; box-shadow: var(--shadow-card-light); display: flex; flex-direction: column}.news-card .media { display: block; aspect-ratio: 5/4; overflow: hidden; margin-bottom: 0}.news-card .media img { width: 100%; height: 100%; object-fit: cover}.news-card .body { padding: 24px 26px 28px}.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-light-hover)}.news-card .meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 11px; letter-spacing: .14em; color: var(--green-exergue); font-weight: 700; text-transform: uppercase; margin-bottom: 10px}.news-card .meta .cat { color: var(--green-exergue); font-weight: 700}.news-card .meta .dot { width: 3px; height: 3px; background: var(--green-exergue); border-radius: 50%; opacity: .6}.news-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; font-weight: 700}.news-card .ex { font-size: 16px; color: var(--fg-3); line-height: 1.55; margin: 0} /* ============== CONTACT ============== */.contact { background: linear-gradient(180deg,var(--paper-50) 0%,var(--green-100) 100%); position: relative; overflow: hidden; z-index: 1; padding-top: 100px;}.news-contact-group { position: relative; overflow: hidden; margin: 0; padding: 0}.news-contact-group > section { margin-bottom: 0}.news-contact-group > .news, .news-contact-group > .contact { overflow: visible}.news-contact-group > .contact-saison, .contact > .contact-saison { position: absolute; left: 50%; right: auto; bottom: auto; width: 80%; max-width: 1100px; aspect-ratio: 1; opacity: .18; z-index: 0; pointer-events: none}.news-contact-group > .contact-saison { top: 50%; transform: translate(-50%,-50%)}.contact > .contact-saison { top: auto; bottom: -10%; transform: translate(-50%,0)}.news-contact-group > .contact-saison img, .contact > .contact-saison img { width: 100%; height: 100%; object-fit: contain}.news .container, .contact .container { position: relative; z-index: 1}.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start}.contact h2 { margin: 18px 0 24px; max-width: 18ch; font-size: clamp(32px,3.8vw,52px); line-height: 1.1; text-wrap: balance}.contact .lead { margin-bottom: 40px; max-width: 48ch; font-size: clamp(18px,1.4vw,21px); line-height: 1.55}.studio { padding-top: 32px; margin-top: 8px; border-top: 1px solid rgba(6,36,63,.18)}.studio h3, .studio h4 { font-family: inherit; line-height: inherit; margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-1)}.studio p { margin: 0 0 4px; font-size: 15.5px; color: var(--fg-2); line-height: 1.6}.studio p a { color: var(--brand-green); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(26,110,85,.3); transition: color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.studio p a:hover { color: var(--hover-green); border-bottom-color: var(--hover-green)}.form-submit { align-self: stretch; width: 100%; justify-content: center; padding-top: 16px; padding-bottom: 16px}form { background: #fff; padding: 36px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box}form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px}.field { display: flex; flex-direction: column; gap: 6px}.field label { font-size: 16px; font-weight: 700; color: var(--green-900); letter-spacing: .01em}.field input, .field select, .field textarea { font-family: inherit; font-size: 16px; padding: 12px 14px; background: var(--paper-50); border: 0; box-shadow: var(--shadow-input); border-radius: var(--radius-md); color: var(--fg-1); outline: 0; transition: box-shadow var(--dur-fast) var(--ease-out); width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box}.field select { padding-right: 40px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px}.field input:focus, .field select:focus, .field textarea:focus { box-shadow: var(--shadow-input),0 0 0 3px var(--green-100)}.field textarea { resize: vertical; font-family: inherit} /* ============== FOOTER ============== */footer { background: var(--navy-950); color: rgba(255,255,255,.65); padding: 96px 0 32px; overflow: hidden; position: relative}.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px}footer img.brand { height: 52px; width: auto; margin-bottom: 24px}footer .tag { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.65); max-width: 32ch; margin: 0 0 24px}footer .glyph-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--green-400); text-transform: uppercase; font-weight: 600}footer h5 { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff}footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px}footer ul a { color: rgba(255,255,255,.65); text-decoration: none; font-size: 16px; transition: color var(--dur-fast) var(--ease-out)}footer ul a:hover { color: var(--hover-green)}footer ul li.socials { display: flex; gap: 14px; margin-top: 6px}footer ul li.socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.06); transition: background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}footer ul li.socials a:hover { background: var(--hover-green); color: #fff}footer ul li.socials svg { width: 18px; height: 18px}.foot-bottom { display: flex; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--hairline-dark); font-size: 12px; color: rgba(255,255,255,.72); letter-spacing: .04em; flex-wrap: wrap; gap: 16px}.foot-bottom .legal { display: flex; gap: 24px; flex-wrap: wrap}.foot-bottom a { color: inherit; text-decoration: none}.foot-bottom a:hover { color: var(--hover-green)} /* ============== REVEAL ============== */.reveal { opacity: 0; transform: translateY(16px); transition: opacity 520ms cubic-bezier(0.22,1,0.36,1),transform 700ms cubic-bezier(0.22,1,0.36,1),box-shadow 700ms cubic-bezier(.2,.6,.2,1),background 700ms ease}.reveal.in { opacity: 1; transform: translateY(0)}@media (prefers-reduced-motion:reduce) { .reveal { opacity: 1; transform: none; transition: none } .corner-decor img { transform: none !important }} a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--hover-green); outline-offset: 3px; border-radius: 4px}@media (max-width:1100px) { .hero { align-items: flex-start; padding: 140px 0 60px; min-height: auto } .hero .container { grid-template-columns: 1fr; gap: 48px; align-items: start } .hero-left { max-width: none } .hero-saison { top: auto; bottom: -10%; right: -20%; transform: none; width: 60vh; height: 60vh; min-width: 380px; min-height: 380px; opacity: .4 } .hero-collage { max-width: 420px; margin: 0; justify-self: end; width: 100% } .exp-grid, .thema-grid, .news-grid { grid-template-columns: repeat(2,1fr) } .logo-wall { grid-template-columns: repeat(4,1fr) } .eq-grid { grid-template-columns: repeat(2,1fr) } .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px } .foot-grid > div:nth-child(5) { grid-column: 1/-1 }} @media (max-width:760px) { section { padding: 96px 0 } .container { padding: 0 24px } .hero { padding: 120px 0 80px; min-height: auto } .hero h1 { font-size: clamp(36px,9.5vw,60px); word-break: break-word; overflow-wrap: break-word } .hero h1 .accent { white-space: normal } .hero h1 br { display: none } .hero { padding: 110px 0 60px } .hero .lead { font-size: 16px } .hero-actions { flex-direction: column; align-items: stretch; gap: 10px } .hero-actions .btn { justify-content: center } .news-contact-group > .contact-saison { top: auto; bottom: 30%; left: 50%; right: auto; transform: translateX(-50%) } .hero-saison { width: 80vw; height: 80vw; min-width: 0; min-height: 0; right: -15%; top: auto; bottom: -5%; transform: none } .logo-wall { grid-template-columns: repeat(3,1fr) } .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px } .sec-head { flex-direction: column; align-items: flex-start } form { padding: 28px } form .row { grid-template-columns: 1fr } .scroll-cue { display: none } .reprendre .rep-grid { grid-template-columns: 1fr; gap: 48px } .hero-meta { flex-direction: column; gap: 16px } .corner-decor { width: 90vw; height: 90vw } .corner-decor.br { right: -45vw; bottom: -45vw } .corner-decor.tl { left: -45vw; top: -45vw } .corner-decor.bl { left: -45vw; bottom: -45vw } .corner-decor.tr { right: -45vw; top: -45vw }} /* Burger breakpoint · placed last so it wins source-order cascade against base .nav-links/.nav-cta */@media (max-width:990px) { .nav-links, .nav-cta { display: none !important } .nav-burger, .nav-bubble { display: inline-flex !important }} @media (max-width:640px) { .exp-grid, .entite-grid, .thema-grid, .news-grid, .eq-grid, .contact-grid, .rep-grid { grid-template-columns: 1fr }} /* ============== POST-DEBRIEF 2026-05-20 · overrides + new blocks ============== */ /* Expertises : carte avec fond tonal coloré (placeholder image future) */.exp-card { position: relative; overflow: hidden; isolation: isolate}.exp-card > * { position: relative; z-index: 1}.exp-bg { position: absolute; inset: 0; z-index: 0; opacity: .45; transition: opacity var(--dur-base) var(--ease-out)}.exp-card:hover .exp-bg { opacity: .6}.exp-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block}.exp-card.has-image .exp-bg { opacity: 1; background: none}.exp-card.has-image:hover .exp-bg { opacity: 1}.exp-card.has-image .exp-bg img { filter: saturate(.85)}.exp-card.has-image .exp-bg::after { content: ""; position: absolute; inset: 0; background: rgba(3,24,43,.85); pointer-events: none; transition: background var(--dur-base) var(--ease-out)}.exp-card.has-image:hover .exp-bg::after { background: rgba(3,24,43,.7)}.exp-card[data-tone="navy"] .exp-bg { background: linear-gradient(135deg,#143C5E 0%,#06243F 100%)}.exp-card[data-tone="green"] .exp-bg { background: linear-gradient(135deg,#5BC093 0%,#1A6E55 100%)}.exp-card[data-tone="amber"] .exp-bg { background: linear-gradient(135deg,#E8A84A 0%,#B8702A 100%)}.exp-card[data-tone="violet"] .exp-bg { background: linear-gradient(135deg,#7C6BB1 0%,#3D2C7E 100%)}.exp-card[data-tone="teal"] .exp-bg { background: linear-gradient(135deg,#5EBFB0 0%,#2A7A6D 100%)}.exp-card[data-tone="rose"] .exp-bg { background: linear-gradient(135deg,#D88A9E 0%,#A04A66 100%)}.exp-card p { font-size: 16px; line-height: 1.45} /* ============== ENTITES · Features alternées avec images flottantes (v4 · gradient bg) ============== */.entite-rows { display: flex; flex-direction: column; gap: 72px; margin-top: 56px}.entite-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; background: transparent; border: 0; border-radius: 0; overflow: visible; padding: 0; position: relative; margin: 20px 0;} /* Inverser l'ordre des colonnes pour la 2e entité (Iconogreen) */.entite-feature.ef-reverse { grid-template-columns: 1fr 1fr}.entite-feature.ef-reverse .ef-visual { order: 0}.entite-feature.ef-reverse .ef-text { order: 1}.ef-text { padding: 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 520px}.ef-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); align-self: flex-start; margin-bottom: 2px}.entite--reuse .ef-eyebrow { color: rgba(255, 255, 255, 0.5);}.ef-text h3 { margin: 0; font-family: var(--font-display); font-size: clamp(28px,3vw,42px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff; max-width: 18ch;}.ef-claim { font-size: 18px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.9); margin: 0;}.entite--green .ef-claim { }.entite--reuse .ef-claim { }.ef-desc { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.82); margin: 0;}.ef-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; align-items: center}.ef-actions .btn { padding: 13px 22px; font-size: 16px; background: rgba(255,255,255,.94); color: var(--fg-1); box-shadow: 0 8px 24px -10px rgba(0,0,0,.4)}.ef-actions .btn:hover { background: var(--green-exergue); color: #fff; box-shadow: none}.ef-actions .btn i { flex-shrink: 0} /* Image flottante : pas de cadre, ombre douce, légère rotation, hover lift */.ef-visual { position: relative; background: transparent; min-height: 0; display: flex; align-items: center; justify-content: center;}.entite-feature.ef-reverse .ef-visual { justify-content: flex-start}.entite-feature:not(.ef-reverse) .ef-visual { justify-content: flex-end}.ef-visual img { position: relative; width: 100%; max-width: 560px; height: auto; display: block; border-radius: 18px; box-shadow: 0 40px 90px -24px rgba(0,0,0,.55),0 12px 32px -10px rgba(0,0,0,.35); transition: transform 700ms cubic-bezier(.2,.6,.2,1);}.entite-feature.ef-reverse .ef-visual img { transform: rotate(-2deg); animation: efFloatRev 7s ease-in-out infinite alternate; will-change: transform}.entite-feature:not(.ef-reverse) .ef-visual img { transform: rotate(2deg); animation: efFloat 6.5s ease-in-out infinite alternate; will-change: transform}/* Hero : compresser pour laisser place aux expertises sur la même vue */@media (min-width:991px) { .hero { min-height: 62vh } .expertises { min-height: 38vh; padding-top: 48px; padding-bottom: 70px } .entite-feature { margin: 30px 0; }} @keyframes efFloat {0% { transform: rotate(2deg) translateY(0)}100% { transform: rotate(3.5deg) translateY(-20px)}} @keyframes efFloatRev {0% { transform: rotate(-2deg) translateY(0)}100% { transform: rotate(-3.5deg) translateY(18px)}} @media (prefers-reduced-motion:reduce) { .entite-feature .ef-visual img, .entite-feature.ef-reverse .ef-visual img { animation: none }} @media (max-width:990px) { .entite-rows { gap: 48px; margin-top: 40px } .entite-feature, .entite-feature.ef-reverse { grid-template-columns: 1fr; gap: 24px } .entite-feature.ef-reverse .ef-visual, .entite-feature .ef-visual { justify-content: center!important; order: -1 } .hero-right { justify-content: center!important; } .entite-feature.ef-reverse .ef-text, .entite-feature .ef-text { order: 0; max-width: none } .ef-text h3 { max-width: none; white-space: nowrap } .ef-text h3 br { display: none } .ef-visual img { max-width: 420px }} @media (max-width:540px) { .ef-text h3 { white-space: normal } .logo-wall { grid-template-columns: repeat(2,1fr) }} @media (max-width:640px) { .ef-text h3 { font-size: 24px } .ef-visual img { max-width: 100% }} /* ============== ECO-STAT · 3 critères, pictos éclairés Lucide (réutilise bignum-meta lit look) ============== */.bignum-meta.eco-criteria { grid-template-columns: repeat(3,1fr); gap: 18px} /* Hérite du look lit (dark sphere + green glow) de .bignum-meta .ico, juste recolorisé pour Lucide */.eco-stat .ico { color: var(--green-400)}.eco-stat .ico i, .eco-stat .ico svg { width: 38px; height: 38px; stroke: var(--green-400); filter: drop-shadow(0 0 8px rgba(91,192,147,.55));}.eco-stat .v sup { font-size: .7em; vertical-align: super}ul.v { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px}ul.v li { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.78); position: relative; padding-left: 16px; font-weight: 400}ul.v li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--green-400)}.eco-stat .k { margin-bottom: 10px}@media (max-width:990px) { .bignum-meta.eco-criteria { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; text-align: left } .eco-stat { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; text-align: left } .eco-stat .ico { width: 72px; height: 72px; grid-row: span 2; margin-bottom: 0 } .eco-stat .ico i, .eco-stat .ico svg { width: 30px; height: 30px } .eco-stat .k, .eco-stat ul.v, .eco-stat ul.v li { text-align: left }} /* Cercle tournant du bloc Partenaires (même taille que le CTA des solutions) + suppression du dégradé de fond */.confiance-ring { position: absolute; top: 50%; left: 50%; width: min(1100px,90vw); height: min(1100px,90vw); transform: translate(-50%,-50%); opacity: .28; z-index: 1;}.confiance::before { display: none;}.logo-cell img { max-height: 60px; width: auto; max-width: 80%; object-fit: contain; opacity: .8; transition: opacity var(--dur-base) var(--ease-out);}.logo-cell:hover img { opacity: 1;} /* Réemploi : légende du grand chiffre + titres des 3 critères agrandis */.reprendre .bignum-label { font-size: clamp(21px,1.75vw,27px);}.reprendre .eco-stat .k { font-size: clamp(21px,1.65vw,26px);} /* Titre Solutions : mot animé en vert charte plein (pas de dégradé) */.thematiques .accent, .thematiques .type-target { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--green-400); color: var(--green-400);} /* Contact : une colonne sous 960 px */ @media (max-width:960px) { .contact-grid { grid-template-columns: 1fr; gap: 48px } } /* Menu mobile : sous-menu Solutions replié = même écart que les autres entrées ; chevron centré sur les capitales et décollé du texte */ .mobile-menu .submenu-inline { margin: -20px 0 0 } .mobile-menu .submenu-inline.open { margin: -12px 0 0 } .mobile-menu .mm-toggler { gap: 14px } .mobile-menu .mm-toggler::after { margin-top: -6px } .mobile-menu .mm-toggler.open::after { margin-top: 6px } /* Formulaire : le message de statut vide ne crée plus d'espace sous le bouton */ #contact .form-status:empty { margin: calc(-1 * var(--icono-form-gap, 18px)) 0 0 !important } /* Indicateur de défilement : trait seul (mot « Scroll » retiré), qui apparaît par le haut et disparaît par le bas */ .scroll-cue { padding: 8px 20px; gap: 0; background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)) center / 1px 40px no-repeat } .scroll-cue::after { height: 40px; background: rgba(255,255,255,.55); transform-origin: top; animation: cueDrop 2.4s cubic-bezier(.65,0,.35,1) infinite } .scroll-cue:hover::after { background: #fff } @keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top } 45% { transform: scaleY(1); transform-origin: top } 55% { transform: scaleY(1); transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } } @media (prefers-reduced-motion:reduce) { .scroll-cue::after { animation: none; transform: none } } /* Menu burger : entrées qui apparaissent l'une après l'autre (fondu + montée) ; délais sur l'apparition seulement, pas sur le survol */ .mobile-menu .mm-inner > a { opacity: 0; transform: translateY(18px); transition: opacity 420ms var(--ease-out), transform 560ms cubic-bezier(.22,1,.36,1), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out) } .mobile-menu.open .mm-inner > a { opacity: 1; transform: none } .mobile-menu.open .mm-inner > a:nth-child(1) { transition-delay: 115ms, 115ms, 0s, 0s } .mobile-menu.open .mm-inner > a:nth-child(2) { transition-delay: 170ms, 170ms, 0s, 0s } .mobile-menu.open .mm-inner > a:nth-child(3) { transition-delay: 225ms, 225ms, 0s, 0s } .mobile-menu.open .mm-inner > a:nth-child(4) { transition-delay: 280ms, 280ms, 0s, 0s } .mobile-menu.open .mm-inner > a:nth-child(5) { transition-delay: 335ms, 335ms, 0s, 0s } .mobile-menu.open .mm-inner > a:nth-child(6) { transition-delay: 390ms, 390ms, 0s, 0s } .mobile-menu.open .mm-inner > a:nth-child(7) { transition-delay: 445ms, 445ms, 0s, 0s } .mobile-menu.open .mm-inner > a:nth-child(8) { transition-delay: 500ms, 500ms, 0s, 0s } .mobile-menu .mm-cta .arrow { display: inline-flex } @media (prefers-reduced-motion:reduce) { .mobile-menu .mm-inner > a { transform: none } } /* Indicateur de défilement collé au bas du hero (le padding de 8 px reste sous le trait, hors de la zone visible) */ .scroll-cue { bottom: -8px } /* Pied de page : titres de colonnes en h3 (ordre des titres) avec le rendu de l'ancien h5 */ footer .foot-grid h3 { font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 16px } /* Bandeau et panneau de cookies (CookieAdmin) aux couleurs du site : bleu nuit translucide, texte clair, boutons pilule. Les couleurs de l'extension sont écrites en style en ligne, d'où les !important. */ .cookieadmin_law_container { font-family: var(--font-sans) !important; } .cookieadmin_law_container.cookieadmin_box { width: min(420px, calc(100vw - 32px)) !important; left: 16px !important; bottom: 16px !important; } .cookieadmin_law_container .cookieadmin_consent_inside { background: rgba(3,24,43,.9) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: var(--radius-lg) !important; padding: 20px 22px 14px !important; box-shadow: 0 24px 60px -20px rgba(0,0,0,.55) !important; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); color: rgba(255,255,255,.78) !important; } .cookieadmin_law_container #cookieadmin_notice_title { color: #fff !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .02em; padding: 0 !important; margin: 0 0 6px !important; line-height: 1.35 !important; } .cookieadmin_law_container #cookieadmin_notice { color: rgba(255,255,255,.72) !important; font-size: 12px !important; line-height: 1.5 !important; margin: 0 0 12px !important; padding: 0 !important; } .cookieadmin_law_container #cookieadmin_notice b { color: #fff; font-weight: 600; } .cookieadmin_law_container .cookieadmin_consent_btns { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 0 !important; } .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn { font-size: 13px !important; padding: 12px 16px !important; } .cookieadmin_btn { font-family: var(--font-sans) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .02em; line-height: 1 !important; padding: 9px 14px !important; border-radius: var(--radius-pill) !important; border: 1px solid rgba(255,255,255,.28) !important; background: transparent !important; color: #fff !important; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); margin: 0 !important; } .cookieadmin_btn:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.5) !important; } .cookieadmin_btn.cookieadmin_accept_btn, .cookieadmin_btn.cookieadmin_save_btn { background: var(--green-exergue) !important; border-color: var(--green-exergue) !important; } .cookieadmin_btn.cookieadmin_accept_btn:hover, .cookieadmin_btn.cookieadmin_save_btn:hover { background: var(--green-400) !important; border-color: var(--green-400) !important; } .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn { flex: 1 1 auto; } .cookieadmin-poweredby { opacity: .45; margin-top: 8px !important; font-size: 10px !important; } .cookieadmin-poweredby span { color: rgba(255,255,255,.8) !important; } .cookieadmin-poweredby svg { filter: brightness(0) invert(1); max-height: 12px; width: auto; } /* Panneau de personnalisation */ .cookieadmin_modal_overlay { background: rgba(3,24,43,.55) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .cookieadmin_cookie_modal { font-family: var(--font-sans) !important; background: rgba(3,24,43,.96) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: var(--radius-lg) !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6) !important; color: rgba(255,255,255,.75) !important; overflow: hidden; } .cookieadmin_cookie_modal .cookieadmin_mod_head { padding: 16px 20px 10px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } .cookieadmin_cookie_modal .cookieadmin_preference_title { color: #fff !important; font-size: 15px !important; font-weight: 600 !important; } .cookieadmin_cookie_modal .cookieadmin_close_pref { color: rgba(255,255,255,.7) !important; background: transparent !important; font-size: 14px !important; } .cookieadmin_cookie_modal .cookieadmin_close_pref:hover { color: #fff !important; } .cookieadmin_cookie_modal .cookieadmin_details_wrapper { padding: 12px 20px !important; color: rgba(255,255,255,.72) !important; } .cookieadmin_cookie_modal .cookieadmin_preference { font-size: 12px !important; line-height: 1.55 !important; color: rgba(255,255,255,.68) !important; } .cookieadmin_cookie_modal .cookieadmin_preference b { color: #fff; font-weight: 600; } .cookieadmin_cookie_modal .cookieadmin_types { border-color: rgba(255,255,255,.08) !important; padding: 10px 0 !important; } .cookieadmin_cookie_modal .cookieadmin_header { font-size: 13px !important; color: #fff !important; font-weight: 600; } .cookieadmin_cookie_modal .cookieadmin_desc { font-size: 12px !important; line-height: 1.5 !important; color: rgba(255,255,255,.62) !important; } .cookieadmin_cookie_modal .cookieadmin_remark { font-size: 11px !important; color: var(--green-400) !important; } .cookieadmin_cookie_modal .cookieadmin-nocookie-cat { font-size: 11px !important; color: rgba(255,255,255,.45) !important; } .cookieadmin_cookie_modal .cookieadmin_modal_footer { padding: 12px 20px 14px !important; border-top: 1px solid rgba(255,255,255,.08) !important; gap: 6px !important; background: transparent !important; } .cookieadmin_law_container .cookieadmin_notice_con { padding: 0 !important; } .cookieadmin_cookie_modal .cookieadmin_show_pref_cookies { color: #fff !important; font-size: 13px !important; font-weight: 600 !important; background: transparent !important; } .cookieadmin_cookie_modal .cookieadmin_slider { background-color: rgba(255,255,255,.22) !important; } .cookieadmin_cookie_modal .cookieadmin_toggle input:checked + .cookieadmin_slider { background-color: var(--green-exergue) !important; } /* Fenêtre de préférences réellement centrée (l'extension la place à 22 % du bord gauche et 10 % du haut), largeur d'origine conservée */ .cookieadmin_cookie_modal.cookieadmin_center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: min(90vw, max(60vw, 640px)) !important; max-width: none !important; } /* Pied de page : liens légaux et préférences cookies alignés à droite de la dernière ligne */ .foot-bottom .legal { margin-left: auto; justify-content: flex-end; } .foot-bottom .foot-cookies { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; } .foot-bottom .foot-cookies:hover { color: var(--hover-green); } /* Boutons du bandeau et de la fenêtre de cookies : mêmes dimensions et effets que les boutons du site (.btn) Tout accepter = vert vif (demande du 17/09) ; secondaires = .btn-ghost-light ; survol vert d'exergue sans ombre */ .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn, .cookieadmin_cookie_modal .cookieadmin_btn { display: inline-flex !important; align-items: center; justify-content: center; padding: 14px 24px !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: .04em; line-height: 1.2 !important; border: 0 !important; border-radius: var(--radius-pill) !important; background: rgba(255,255,255,.08) !important; color: #fff !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px -10px rgba(0,0,0,.4) !important; transition: all var(--dur-base) var(--ease-out) !important; } .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn:hover, .cookieadmin_cookie_modal .cookieadmin_btn:hover { background: var(--green-exergue) !important; color: #fff !important; box-shadow: none !important; } .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn.cookieadmin_accept_btn, .cookieadmin_cookie_modal .cookieadmin_btn.cookieadmin_accept_btn { background: var(--green-exergue) !important; } .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn.cookieadmin_accept_btn:hover, .cookieadmin_cookie_modal .cookieadmin_btn.cookieadmin_accept_btn:hover { background: var(--brand-green) !important; box-shadow: none !important; } .cookieadmin_btn:active { transform: scale(.985); } .cookieadmin_law_container.cookieadmin_box { width: min(460px, calc(100vw - 32px)) !important; } /* Pastille « modifier mes préférences » (CookieAdmin Pro) aux couleurs du site */ .cookieadmin_re_consent { background: rgba(3,24,43,.9) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 50% !important; box-shadow: 0 8px 24px -10px rgba(0,0,0,.4) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--dur-base) var(--ease-out) !important; } .cookieadmin_re_consent:hover { background: var(--green-exergue) !important; } .cookieadmin_re_consent img { filter: brightness(0) invert(1); } /* Fenêtre de préférences cookies : textes agrandis */ .cookieadmin_cookie_modal .cookieadmin_preference_title { font-size: 20px !important; } .cookieadmin_cookie_modal .cookieadmin_close_pref { font-size: 18px !important; } .cookieadmin_cookie_modal .cookieadmin_preference { font-size: 15px !important; line-height: 1.6 !important; } .cookieadmin_cookie_modal .cookieadmin_header, .cookieadmin_cookie_modal .cookieadmin_show_pref_cookies { font-size: 16px !important; } .cookieadmin_cookie_modal .cookieadmin_desc { font-size: 14px !important; line-height: 1.55 !important; } .cookieadmin_cookie_modal .cookieadmin_remark, .cookieadmin_cookie_modal .cookieadmin-nocookie-cat { font-size: 13px !important; } .cookieadmin_cookie_modal .cookieadmin_mod_head { padding: 20px 24px 14px !important; } .cookieadmin_cookie_modal .cookieadmin_details_wrapper { padding: 16px 24px !important; } .cookieadmin_cookie_modal .cookieadmin_types { padding: 14px 0 !important; } .cookieadmin_cookie_modal .cookieadmin_modal_footer { padding: 16px 24px 18px !important; gap: 10px !important; } /* Boutons cookies : taille réduite (14 px), mêmes couleurs et survols que ci-dessus ; sur mobile, boutons pleine largeur */ .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn, .cookieadmin_cookie_modal .cookieadmin_btn { padding: 11px 18px !important; font-size: 14px !important; } @media (max-width:760px) { .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn { flex: 1 1 calc(50% - 4px); } .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn.cookieadmin_accept_btn { flex-basis: 100%; } .cookieadmin_cookie_modal .cookieadmin_modal_footer { flex-direction: column !important; align-items: stretch !important; } .cookieadmin_cookie_modal .cookieadmin_modal_footer .cookieadmin_btn { width: 100%; } } /* Fenêtre cookies : croix de fermeture identique à celle du menu mobile (rond translucide, icône « x » du site) */ .cookieadmin_cookie_modal .cookieadmin_close_pref { font-size: 0 !important; color: transparent !important; width: 44px; height: 44px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; cursor: pointer; background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 22px no-repeat !important; transition: background-color var(--dur-fast) var(--ease-out) !important; flex-shrink: 0; } .cookieadmin_cookie_modal .cookieadmin_close_pref:hover { background-color: var(--green-exergue) !important; } /* Survol des boutons cookies : texte blanc ; « Tout accepter » garde son vert vif */ .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn:hover, .cookieadmin_cookie_modal .cookieadmin_btn:hover { color: #fff !important; } .cookieadmin_law_container .cookieadmin_consent_btns .cookieadmin_btn.cookieadmin_accept_btn:hover, .cookieadmin_cookie_modal .cookieadmin_btn.cookieadmin_accept_btn:hover { background: var(--green-exergue) !important; color: #fff !important; box-shadow: none !important; } /* Fenêtre cookies : fiches des cookies déclarés (visibles en dépliant une catégorie) */ .cookieadmin_cookie_modal .cookieadmin-cookie-card { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; padding: 12px 14px !important; margin: 10px 0 0 !important; color: rgba(255,255,255,.7) !important; } .cookieadmin_cookie_modal .cookieadmin-cookie-name { color: #fff !important; font-size: 14px !important; font-weight: 600; } .cookieadmin_cookie_modal .cookieadmin-cookie-duration { color: rgba(255,255,255,.6) !important; font-size: 13px !important; } .cookieadmin_cookie_modal .cookieadmin-cookie-duration b { color: rgba(255,255,255,.8); font-weight: 600; } .cookieadmin_cookie_modal .cookieadmin-cookie-description { color: rgba(255,255,255,.62) !important; font-size: 13px !important; line-height: 1.5 !important; margin: 6px 0 0 !important; } /* ============== PAGES SIMPLES (mentions légales, confidentialité) ============== */ .page-hero { background: var(--navy-950); color: #fff; padding: 150px 0 56px; } .page-hero .page-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 20px; } .page-hero .page-crumb a { color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .page-hero .page-crumb a:hover { color: var(--green-400); } .page-hero .page-crumb span[aria-hidden] { color: rgba(255,255,255,.35); } .page-hero .page-crumb .current { color: #fff; font-weight: 600; } .page-hero h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: #fff; } .page-body { background: var(--paper-50); padding: 64px 0 96px; } .page-prose { max-width: 800px; color: var(--fg-2); font-size: 16px; line-height: 1.7; } .page-prose > :first-child { margin-top: 0; } .page-prose h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--fg-1); margin: 48px 0 12px; } .page-prose h3 { font-size: 17px; font-weight: 700; color: var(--fg-1); margin: 28px 0 8px; } .page-prose p { margin: 0 0 14px; } .page-prose ul { margin: 0 0 16px; padding-left: 20px; } .page-prose li { margin: 0 0 6px; } .page-prose strong { color: var(--fg-1); font-weight: 600; } .page-prose em { color: var(--fg-3); } .page-prose a { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-out); } .page-prose a:hover { color: var(--hover-green); } .page-prose table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; line-height: 1.5; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card-light); } .page-prose th, .page-prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--hairline-light); } .page-prose th { background: var(--paper-100); color: var(--fg-1); font-weight: 600; } .page-prose tr:last-child td { border-bottom: 0; } @media (max-width:760px) { .page-hero { padding: 120px 0 40px; } .page-body { padding: 44px 0 72px; } .page-prose table { display: block; overflow-x: auto; white-space: nowrap; } } /* Pied de page sur mobile : copyright et liens légaux centrés, liens les uns au-dessus des autres */ @media (max-width:760px) { .foot-bottom { flex-direction: column; align-items: center; text-align: center; gap: 16px; } .foot-bottom .legal { margin-left: 0; flex-direction: column; align-items: center; gap: 10px; } }