/* Direction « la lettre et le territoire » : structure en grotesque large (Archivo, proche du logo), voix humaine en serif (Newsreader) réservée à la lettre, aux promesses et aux numéros d'étapes. Fond blanc, panneaux gris-bleu clair, bleu 444 pour l'ossature, sable pour les accents. */ :root { --navy: #023146; --sand: #b0a48f; --bg: #ffffff; --panel: #eef1f3; --card: #ffffff; --ink: #023146; --ink-2: #4a5963; --sand-ink: #6f6553; --alert: #9a3b2e; --line: #dde3e7; --band: #023146; --band-ink: #ffffff; --band-ink-2: #c9d3d9; --btn-bg: #023146; --btn-edge: #011a26; --btn-ink: #ffffff; --tile-na: #b0a48f; --tile-na-ink: #023146; --tile-oc: #023146; --tile-oc-ink: #ffffff; --shadow: rgba(2, 49, 70, .45); --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Times New Roman", serif; --col: 1248px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #061d29; --panel: #0b2a3a; --card: #0f3446; --ink: #f1ede6; --ink-2: #b9c4ca; --sand-ink: #c9bea9; --alert: #e3917f; --line: #1d4153; --band: #021721; --band-ink: #f1ede6; --band-ink-2: #b9c4ca; --btn-bg: #b0a48f; --btn-ink: #021721; --btn-edge: #7d725f; --tile-oc: #f1ede6; --tile-oc-ink: #023146; --shadow: rgba(0, 0, 0, .6); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #061d29; --panel: #0b2a3a; --card: #0f3446; --ink: #f1ede6; --ink-2: #b9c4ca; --sand-ink: #c9bea9; --alert: #e3917f; --line: #1d4153; --band: #021721; --band-ink: #f1ede6; --band-ink-2: #b9c4ca; --btn-bg: #b0a48f; --btn-ink: #021721; --btn-edge: #7d725f; --tile-oc: #f1ede6; --tile-oc-ink: #023146; --shadow: rgba(0, 0, 0, .6); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; } .wrap { max-width: var(--col); margin-inline: auto; padding-inline: 32px; } @media (max-width: 520px) { .wrap { padding-inline: 20px; } } h1, h2, h3 { margin: 0; text-wrap: balance; } h1 { font-weight: 800; font-stretch: 120%; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); line-height: 1.03; letter-spacing: -0.02em; } h2 { font-weight: 800; font-stretch: 120%; font-size: clamp(1.7rem, 1.35rem + 1vw, 2.35rem); line-height: 1.06; letter-spacing: -0.015em; } h3 { font-weight: 700; font-stretch: 110%; font-size: 1.2rem; line-height: 1.25; } p { margin: 0; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; } .cta a:focus-visible, .cta button:focus-visible, .site-footer a:focus-visible, .estim-out a:focus-visible { outline-color: var(--sand); } .skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 12px 18px; border-radius: 8px; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .muted { color: var(--ink-2); } .lead { font-size: 1.125rem; color: var(--ink-2); max-width: 36em; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; font-weight: 600; border-radius: 8px; transition: transform .15s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px var(--shadow); } .textlink { font-weight: 600; text-decoration: underline; text-decoration-color: var(--sand); text-decoration-thickness: 2px; text-underline-offset: 6px; } .textlink:hover { text-decoration-color: currentColor; } section { padding-block: 96px; } @media (max-width: 860px) { section { padding-block: 72px; } } .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 48px; margin-bottom: 52px; } .head h2 { max-width: 15em; } .head > p { max-width: 26em; color: var(--ink); } .head > p.note { max-width: 32em; margin: 0; padding: 12px 18px; background: var(--panel); border-left: 3px solid var(--sand); border-radius: 0 10px 10px 0; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--sand-ink); text-wrap: pretty; } section[style*="--panel"] .head > p.note, .panel-band .head > p.note { background: var(--bg); } /* En-tête */ .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease; } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 24px -22px var(--shadow); } .topbar { background: #b0a48f; color: #023146; font-size: .9375rem; } .topbar { border-bottom: 14px solid #023146; } /* bandeau bleu sous le bandeau sable, sur toutes les pages */ @media (min-width: 0px) { :root.is-home .site-header > .wrap { padding-top: 22px !important; } } .topbar .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 24px; padding-block: 5px; } .topbar .tb-base { margin: 0; font-family: var(--sans); font-weight: 600; font-stretch: 110%; font-size: .75rem; letter-spacing: .01em; color: #023146; display: inline-flex; align-items: center; gap: 10px; } .topbar .tb-logo { height: 26px; width: auto; display: block; color: #023146; } @media (max-width: 1100px) { .topbar .tb-base { display: none; } .topbar .wrap { justify-content: flex-end; } } .topbar .tb-right { display: flex; align-items: center; gap: 8px; } .topbar .tb-long { display: inline-flex; align-items: center; } .topbar .tb-arrow { margin-left: 12px; font-size: 1.375rem; line-height: 1; font-weight: 700; position: relative; top: -1px; } .topbar .tb-long { color: #023146; font-weight: 500; font-size: .875rem; background: #e7e1d6; padding: 2px 10px; border-radius: 4px; border: 2px solid #023146; } .topbar .tb-btn { display: inline-block; background: #dbe6ec; color: #023146; border: 2px solid #023146; font-weight: 700; font-size: .875rem; text-decoration: none; padding: 4px 12px; border-radius: 4px; transition: background-color .2s ease, color .2s ease; } .topbar .tb-btn:hover, .topbar .tb-btn[aria-current] { background: #fff; color: #023146; } .topbar .tb-btn:focus-visible { outline: 3px solid #023146; outline-offset: 2px; } @media (max-width: 1100px) { .topbar .tb-base { display: none; } .topbar .wrap { justify-content: flex-end; } } @media (max-width: 600px) { .topbar .tb-long { display: none; } .topbar .wrap { justify-content: center; } } .site-header .wrap { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-block: 26px 10px; transition: padding .3s ease; } .site-header.scrolled .wrap { padding-block: 26px 10px; } .brand { display: block; color: var(--navy); line-height: 0; flex: none; margin-right: auto; } .brand { display: inline-flex; flex-direction: column; align-items: flex-end; text-decoration: none; } .brand-tag { display: block; width: 191px; margin-top: 2px; font-size: .71875rem; line-height: 1.3; font-weight: 500; color: var(--ink-2); text-align: right; } @media (max-width: 520px) { .brand-tag { width: 150px; font-size: .625rem; } } .theme-btn { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 50%; cursor: pointer; padding: 0; transition: border-color .2s ease; } .theme-btn:hover { border-color: var(--sand); } .theme-btn svg { width: 20px; height: 20px; } .theme-btn .i-sun { display: none; } .is-dark .theme-btn .i-sun { display: block; } .is-dark .theme-btn .i-moon { display: none; } .site-header .logo { height: 64px; width: auto; transition: height .3s ease; } .site-header.scrolled .logo { height: 64px; } .logo-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } } :root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: block; } .nav { display: flex; align-items: center; gap: 6px; font-size: 0.9375rem; } .nav a { text-decoration: none; white-space: nowrap; } .tab { color: var(--ink); font-weight: 600; padding: 11px 12px; border-radius: 8px; background: var(--card); border: 1.5px solid rgba(176, 164, 143, .7); transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .tab:hover { border-color: #9a8e78; background: #b0a48f; color: #023146; } .site-header a.btn:not(.ghost) { background: #dbe6ec; color: #023146; --btn-edge: #8fa6b3; box-shadow: inset 0 0 0 1.5px #023146, 0 3px 0 #023146; } .site-header a.btn:not(.ghost) { background: #dbe6ec; color: #023146; --btn-edge: #8fa6b3; } .site-header a.btn:not(.ghost):hover { background: #fff !important; color: #023146 !important; box-shadow: inset 0 0 0 1.5px #023146, 0 4px 0 #023146, 0 12px 22px -12px rgba(2,49,70,.45) !important; } .nav .btn { padding: 11px 16px; margin-left: 8px; } .tab[aria-current="page"] { border-color: var(--sand); background: rgba(176, 164, 143, .32); box-shadow: inset 0 -3px 0 var(--sand); } .nav { margin-right: 4px; } .menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 0 11px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; } .menu-btn span { display: block; height: 2px; background: var(--ink); border-radius: 1px; } @media (max-width: 1340px) { .menu-btn { display: flex; } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px 32px 20px; box-shadow: 0 18px 30px -24px var(--shadow); } .site-header.open .nav { display: flex; } .nav .btn { margin: 6px 0 0; } .tab { padding: 13px 15px; } } @media (max-width: 520px) { .site-header .logo, .site-header.scrolled .logo { height: 50px; } .nav { padding-inline: 20px; } } /* Ouverture */ .hero { padding-block: 12px 0; } .hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; } .hero-text { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; } @media (max-width: 860px) { .hero-text { padding-top: 20px; } } .hero .wrap > * { min-width: 0; } @media (max-width: 360px) { h1 { font-size: 1.8rem; } } .hero-text .kicker { font-size: 1.0625rem; font-weight: 700; color: var(--ink); line-height: 1.4; padding-left: 14px; border-left: 3px solid var(--sand); } .nw { white-space: nowrap; } .hero-text h1 { margin-top: 8px; } .hero-text .kicker small { display: block; font-size: .9375rem; font-weight: 500; color: var(--ink-2); margin-top: 2px; } .hero-text .baseline { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, .95rem + .35vw, 1.2rem); line-height: 1.35; color: var(--ink); max-width: 24em; text-wrap: balance; padding-left: 16px; border-left: 3px solid var(--sand); } .hero-text .terr { display: flex; gap: 8px; align-items: flex-start; font-size: .78125rem; line-height: 1.5; color: var(--ink-2); max-width: 34em; margin-top: -6px; } .hero-text .terr strong { color: var(--ink); font-weight: 600; } .hero-text .terr svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--sand-ink); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } .hero-actions .confid { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; color: var(--ink); } .hero-actions .confid svg { flex: none; width: 18px; height: 18px; color: var(--sand-ink); } .panel { background: var(--panel); border-radius: 22px; } .stat { padding: 18px 36px 16px; } .stat-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; } .stat-num { font-weight: 900; font-stretch: 122%; font-size: clamp(2.8rem, 2.2rem + 1.8vw, 4rem); line-height: .95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stat-label { font-size: 1.0625rem; line-height: 1.35; max-width: 20em; } .ratio { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; padding-top: 12px; } .ratio svg { width: 208px; max-width: 100%; height: auto; display: block; flex: none; } .ratio p { flex: 1 1 200px; font-size: .9375rem; line-height: 1.42; color: var(--ink-2); } .ratio strong { color: var(--ink); } .c-ok { fill: var(--ink); stroke: var(--ink); stroke-width: 2; } .c-lost { fill: none; stroke: var(--sand-ink); stroke-width: 2; } .c-lab { font: 700 15.5px var(--sans); fill: var(--ink); } .c-lab.lost { fill: var(--ink-2); } .c-num { font: 800 15px var(--sans); fill: var(--ink-2); } .c-num-1 { fill: var(--ink); } .c-x { fill: none; stroke: var(--alert); stroke-width: 3; stroke-linecap: round; opacity: .85; } .c-lab-1 { fill: var(--panel); } .c-lost-solid { opacity: 0; } .stat-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 10px; } .letter { position: relative; top: -7px; flex: 0 0 322px; margin-left: -72px; padding: 18px 20px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 24px 50px -30px var(--shadow); display: flex; flex-direction: column; gap: 8px; } .letter .from { font-size: 0.8125rem; color: var(--sand-ink); } .letter p { font-family: var(--serif); font-size: .9375rem; line-height: 1.45; } .letter .sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 2px; } .letter .sign-who { display: grid; grid-template-columns: 64px auto 64px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; justify-items: center; align-items: end; } .letter .person { display: contents; } .letter .person:first-child .name { grid-column: 1; grid-row: 1; } .letter .person:first-child img { grid-column: 1; grid-row: 2; } .letter .sign-who .et { grid-column: 2; grid-row: 1; margin-inline: .6em; } .letter .person:last-child .name { grid-column: 3; grid-row: 1; } .letter .person:last-child img { grid-column: 3; grid-row: 2; } .letter .person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; } .letter .sign .name { font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.2; color: var(--ink); white-space: nowrap; } .letter .sign-org { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: .9rem; font-weight: 600; color: var(--ink-2); line-height: 1.2; } .letter .sign-org .logo { height: 21px; width: auto; color: var(--navy); } .foot-right { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: 12px; } .source { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--ink-2); text-align: right; } .flow { display: grid; gap: 6px; } .flow-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .8125rem; color: var(--ink-2); } .flow-row b { font-weight: 800; font-stretch: 115%; font-size: 1.0625rem; color: var(--ink); font-variant-numeric: tabular-nums; } .flow { gap: 4px; } .flow-track { height: 10px; border-radius: 5px; background: rgba(2, 49, 70, .08); overflow: hidden; margin-bottom: 6px; } .flow-track i { display: block; height: 100%; border-radius: 6px; transform-origin: left center; } .flow-track .all { width: 100%; background: var(--ink); } .flow-track .pot { width: 20%; background: var(--sand); } .flow-track .real { width: 7.03%; background: var(--alert); } .flow-row b.few { color: var(--alert); } .flow-gap { margin: 2px 0 0; font-size: .875rem; color: var(--ink-2); } .flow-gap { color: var(--ink); font-weight: 600; } .flow-gap b { color: var(--alert); font-weight: 800; font-variant-numeric: tabular-nums; } .source a { text-underline-offset: 3px; } @media (max-width: 1180px) and (min-width: 861px) { .letter { margin-left: -56px; flex-basis: 290px; } } @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; gap: 36px; } .stat { padding: 28px 22px 0; } .stat-foot { flex-direction: column; align-items: stretch; } .letter { top: 0; flex-basis: auto; margin: 0 -6px; } .foot-right { max-width: none; order: 2; } .source { text-align: left; } } /* Ce que nous faisons */ .intro { padding-top: 112px; } @media (max-width: 860px) { .intro { padding-top: 72px; } } .intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; padding-top: 28px; border-top: 2px solid var(--ink); } .intro-grid p { font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); } .intro-grid p + p { margin-top: 16px; } .intro-grid .serif-line { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: #786b54; } .proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 44px 0 0; } .proofs div { padding: 4px 28px; display: flex; flex-direction: column; gap: 6px; } .proofs div:first-child { padding-left: 0; } .proofs div + div { border-left: 1px solid var(--sand); } .proofs dd { order: -1; margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 1.8rem + 1.2vw, 3rem); line-height: 1; color: var(--sand-ink); font-variant-numeric: lining-nums; } .proofs dt { font-size: .9375rem; color: var(--ink-2); line-height: 1.45; max-width: 22em; } .intro { padding-bottom: 96px; } @media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; gap: 20px; } .proofs { grid-template-columns: 1fr; gap: 0; } .proofs div, .proofs div:first-child { padding: 16px 0; } .proofs div + div { border-left: 0; border-top: 1px solid var(--sand); } } /* Approche 360° */ .a360 .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; } .ring-panel { padding: 36px; display: grid; place-items: center; gap: 12px; } .ring-pause { min-height: 44px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 .875rem var(--sans); cursor: pointer; } .ring-fig { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 420px; margin: 0; } .ring-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .r-base { fill: none; stroke: var(--line); stroke-width: .5; } .r-draw { fill: none; stroke: var(--sand); stroke-width: 1.1; } .r-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52%; text-align: center; display: grid; gap: 6px; justify-items: center; transition: opacity .25s ease; } .r-center.swap { opacity: 0; } .r-kicker { font-size: .8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; } .r-title { font-weight: 800; font-stretch: 100%; font-size: clamp(.95rem, .8rem + .5vw, 1.15rem); white-space: nowrap; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; } .is-default .r-title { font-stretch: 120%; font-size: clamp(2.2rem, 1.8rem + 1.4vw, 2.9rem); letter-spacing: -0.02em; } .r-desc { font-size: .84rem; color: var(--ink-2); line-height: 1.4; } .node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); background: none; border: 0; padding: 8px; margin: 0; cursor: pointer; font: inherit; color: var(--ink); border-radius: 50%; min-width: 44px; min-height: 44px; display: grid; place-items: center; } .node i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 2px solid var(--sand-ink); transition: transform .3s ease, background-color .3s ease; } .node span { position: absolute; white-space: nowrap; font-weight: 700; font-size: .875rem; font-stretch: 108%; color: var(--ink-2); transition: color .3s ease; } .n-top span { bottom: calc(100% - 2px); left: 50%; transform: translateX(-50%); } .n-bottom span { top: calc(100% - 2px); left: 50%; transform: translateX(-50%); } .n-right span { left: calc(100% + 2px); top: 50%; transform: translateY(-50%); } .n-left span { right: calc(100% + 2px); top: 50%; transform: translateY(-50%); } .node:hover i, .node.active i { background: var(--sand); transform: scale(1.4); } .node:focus { outline: none; } .node:focus-visible i { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--ink); } .node:hover span, .node.active span { color: var(--ink); } .phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 36px; } .phase h3 { font-size: 1.0625rem; display: flex; align-items: center; gap: 10px; } .phase h3::before { content: ""; width: 22px; height: 6px; border-radius: 3px; background: var(--sand); } .phase.after h3::before { background: var(--ink); } .phase ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; } .phase li { padding-left: 16px; border-left: 2px solid var(--line); color: var(--ink-2); line-height: 1.45; } .phase li strong { color: var(--ink); font-weight: 600; display: block; } @media (max-width: 860px) { .a360 .wrap { grid-template-columns: 1fr; gap: 40px; } .ring-panel { padding: 28px 18px; } } @media (max-width: 520px) { .phases { grid-template-columns: 1fr; } .node span { font-size: .78rem; } .r-center { width: 56%; } .r-desc { font-size: .8rem; } .r-title { font-size: .95rem; } } /* Engagements */ .promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } .promise { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 24px; } .promise::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: left; transition: background-color .3s ease; } .promise:hover::before { background: var(--sand); } .p-ic { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--panel); fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: background-color .3s ease, transform .3s ease; } .promise:hover .p-ic { background: var(--sand); transform: translateY(-2px); } .promise q { quotes: none; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.35; } .promise p { color: var(--ink-2); font-size: 1rem; } @media (max-width: 1000px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .promises { grid-template-columns: 1fr; gap: 28px; } } /* Démarche */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .step { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 22px; } .step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: left center; } .step .n { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--sand-ink); } .step p { color: var(--ink-2); font-size: 1rem; } .after-steps { margin-top: 44px; } .sec-kicker { margin: 0 0 22px; display: flex; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sand-ink); } .sec-kicker { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: .06em; color: var(--ink); gap: 16px; } .sec-kicker .tk { width: 30px; height: 26px; fill: var(--sand); flex: none; } .a360 .sec-kicker { grid-column: 1 / -1; } .a360 .wrap { row-gap: 0; } @media (max-width: 960px) { .a360 .wrap { row-gap: 28px; } .a360 .sec-kicker { margin-bottom: -6px; } } @media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; row-gap: 32px; } .step { flex-direction: row; flex-wrap: wrap; column-gap: 18px; } .step .n { font-size: 2.75rem; } .step h3 { flex: 1 1 60%; align-self: center; } .step p { flex-basis: 100%; } } /* Ce que nous recherchons */ .figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--sand); margin-bottom: 48px; } .figures div { padding: 20px 28px 4px; display: flex; flex-direction: column; gap: 4px; } .figures div:first-child { padding-left: 0; } .figures div + div { border-left: 1px solid var(--sand); } .figures dt { font-size: .9375rem; color: var(--ink-2); } .figures dd { margin: 0; font-weight: 800; font-stretch: 118%; font-size: clamp(1.5rem, 1.2rem + .9vw, 2.1rem); line-height: 1.1; font-variant-numeric: tabular-nums; } .figures dd em.min { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; font-size: .55em; color: var(--sand-ink); white-space: nowrap; } .fig-regions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .fig-regions a { display: inline-block; padding: 6px 10px; border-radius: 8px; font-size: .8125rem; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--panel); border: 1px solid var(--sand); } .fig-regions a:hover { background: var(--sand); color: #021721; } .figures small a { color: inherit; text-decoration-color: var(--sand); text-underline-offset: 3px; } .figures small { font-size: .875rem; color: var(--ink-2); } .target { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } .map-panel { padding: 32px 28px 26px; display: flex; flex-direction: column; align-items: center; gap: 22px; } .map { position: relative; width: 100%; max-width: 360px; aspect-ratio: 372 / 434; } .tile { position: absolute; width: 15.05%; aspect-ratio: 1; border-radius: 16%; display: flex; align-items: flex-end; padding: 4% 5%; box-sizing: border-box; font-weight: 700; font-stretch: 112%; font-size: clamp(.7rem, .55rem + .5vw, .95rem); font-variant-numeric: tabular-nums; } .tile.na { background: var(--tile-na); color: var(--tile-na-ink); } .tile.oc { background: var(--tile-oc); color: var(--tile-oc-ink); } .tile.home { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px #e3917f; } .map-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: .875rem; color: var(--ink-2); } .map-legend li { display: flex; align-items: center; gap: 8px; } .map-legend i { width: 13px; height: 13px; border-radius: 3px; display: block; } .map-legend i.home { background: var(--tile-oc); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px #e3917f; } .target h3 { font-size: 1.125rem; margin-bottom: 14px; } .situations { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .situations li { padding: 18px 20px; border-radius: 12px; background: var(--panel); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.4; } .sectors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .sectors li { padding: 12px 0; border-top: 1px solid var(--line); font-weight: 600; line-height: 1.35; } .sectors li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); } .sectors small { display: block; font-weight: 400; font-size: .875rem; color: var(--ink-2); margin-top: 2px; } .pro { margin-top: 48px; padding: 28px 32px; border-radius: 0 16px 16px 0; background: var(--band); color: var(--band-ink); border: 1px solid rgba(176, 164, 143, .35); border-left: 5px solid var(--sand); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 40px; } .pro p { font-size: 1.0625rem; color: var(--band-ink-2); line-height: 1.6; } .pro strong { display: block; color: var(--band-ink); font-size: 1.1875rem; font-stretch: 110%; margin-bottom: 6px; } .pro .btn { background: var(--sand); color: #021721; white-space: nowrap; } .pro a:focus-visible { outline-color: var(--sand); } .pro .pro-more { color: var(--band-ink); font-weight: 600; text-decoration-color: var(--sand); text-underline-offset: 3px; white-space: nowrap; } @media (max-width: 960px) { .target { grid-template-columns: 1fr; } .map-panel { max-width: 520px; } } @media (max-width: 700px) { .figures { grid-template-columns: 1fr; } .figures div, .figures div:first-child { padding: 14px 0; } .figures div + div { border-left: 0; border-top: 1px solid var(--sand); } .pro { grid-template-columns: 1fr; } } @media (max-width: 560px) { .situations, .sectors { grid-template-columns: 1fr; } .sectors li:nth-last-child(2) { border-bottom: 0; } } /* Estimateur express */ .estim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; } .estim form { margin: 0; padding: 30px 32px; display: grid; gap: 18px; align-content: start; } .estim .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } .estim label { display: grid; gap: 6px; font-size: .9375rem; font-weight: 600; min-width: 0; } .estim label small { font-weight: 400; font-size: .8125rem; color: var(--ink-2); } .estim .inp { display: flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .estim .inp:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(176, 164, 143, .35); } .estim input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 600 1.0625rem var(--sans); font-variant-numeric: tabular-nums; padding: 12px 12px; text-align: right; } .estim input:focus { outline: none; } .estim .inp span { padding: 0 12px; color: var(--ink-2); font-size: .875rem; } .estim .ex-note { font-size: .875rem; color: var(--ink-2); } .estim-out { background: var(--band); color: var(--band-ink); border-radius: 22px; padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; } .estim-out .k { font-size: .9375rem; color: var(--band-ink-2); } .estim-out .range { font-weight: 800; font-stretch: 118%; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.1; font-variant-numeric: tabular-nums; } .estim-out .range span { color: var(--band-ink-2); font-weight: 400; font-stretch: 100%; } .estim-out .cap { font-size: .9375rem; color: var(--band-ink-2); padding-top: 14px; border-top: 1px solid rgba(176, 164, 143, .35); } .estim-out .cap b { color: var(--band-ink); font-variant-numeric: tabular-nums; } .estim-out .params { font-size: .8125rem; color: var(--band-ink-2); } .ex-note.priv { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; color: var(--ink); font-weight: 500; } .ex-note.priv svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #b8543f; } .ex-note.priv .priv-k { color: #b8543f; font-weight: 600; } .crit-more { margin: 0 0 28px !important; } .estim-out .val { font-family: var(--sans); font-weight: 600; font-style: italic; font-size: .9375rem; line-height: 1.45; color: #e3917f; display: flex; gap: 10px; align-items: flex-start; } .estim-out .val::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid #e3917f; border-radius: 50%; font-style: normal; font-weight: 700; font-size: .75rem; line-height: 1; } .estim-out .msg { font-size: .9375rem; color: var(--band-ink); } .estim-out .btn { margin-top: auto; align-self: flex-start; background: var(--sand); color: #021721; } .explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; } .explain > div { padding-top: 18px; border-top: 2px solid var(--ink); } .explain h3 { font-size: 1.0625rem; margin-bottom: 10px; } .explain p, .explain li { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); } .explain ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .explain strong { color: var(--ink); } .explain p.key { font-family: var(--sans); font-weight: 700; font-stretch: 105%; font-size: .9375rem; line-height: 1.45; color: var(--ink); margin-bottom: 10px; padding-left: 14px; border-left: 3px solid var(--sand); } @media (max-width: 960px) { .explain { grid-template-columns: 1fr; gap: 24px; } } .estim-method { margin-top: 28px; font-size: .8125rem; line-height: 1.55; color: var(--ink-2); max-width: 80ch; } @media (max-width: 960px) { .estim { grid-template-columns: 1fr; } } @media (max-width: 560px) { .estim .fields { grid-template-columns: 1fr; } .estim form, .estim-out { padding: 24px 20px; } } /* Repères d'ancrage sous l'en-tête fixe */ section[id] { scroll-margin-top: 96px; } #equipe, #recherche, #demarche { scroll-margin-top: 48px; } #approche { scroll-margin-top: 144px; } @media (max-width: 860px) { #approche { scroll-margin-top: 120px; } } .hero-t1 ~ section[id] { scroll-margin-top: 101px !important; } @media (max-width: 600px) { .hero-t1 ~ section[id] { scroll-margin-top: 87px !important; } } .reassure { margin: -24px 0 24px; padding: 18px 22px; border-left: 4px solid var(--sand); background: var(--band); border-radius: 0 10px 10px 0; font-family: var(--sans); font-weight: 600; font-style: italic; font-size: 1.0625rem; line-height: 1.45; color: #e3917f; display: flex; gap: 12px; align-items: flex-start; } .reassure::before { content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid #e3917f; border-radius: 50%; font-style: normal; font-weight: 700; font-size: .8rem; line-height: 1; } /* Mentions légales et confidentialité */ .legal-dialog { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); } .legal-dialog::backdrop { background: rgba(2, 23, 33, .55); } .legal-dialog .lg-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 28px; background: var(--bg); border-bottom: 1px solid var(--line); } .legal-dialog .lg-head strong { font-weight: 800; font-stretch: 115%; font-size: 1.125rem; } .legal-dialog .lg-close { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 12px 16px; font: 600 .9375rem var(--sans); cursor: pointer; } .legal-dialog .lg-body { padding: 8px 28px 32px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); } .legal-dialog h2 { scroll-margin-top: 80px; font-size: 1.5rem; margin: 28px 0 10px; color: var(--ink); } .legal-dialog h3 { font-size: 1.0625rem; margin: 22px 0 6px; color: var(--ink); } .legal-dialog p + p, .legal-dialog ul { margin-top: 8px; } .legal-dialog ul { padding-left: 20px; } .legal-dialog .todo { color: var(--alert); font-weight: 600; } @media (max-width: 560px) { .legal-dialog .lg-head, .legal-dialog .lg-body { padding-inline: 18px; } } /* Équipe */ .team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; } .person { padding-top: 22px; border-top: 2px solid var(--ink); } .person .role { font-size: .9375rem; color: var(--sand-ink); margin-top: 4px; } .person p { color: var(--ink-2); margin-top: 12px; } .skills-title { margin: 64px 0 22px; font-size: 1.5rem; } .skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; } .skill { padding: 18px 0 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; align-content: start; } .skill svg { width: 22px; height: 22px; grid-row: span 2; } .skill strong { font-weight: 700; line-height: 1.3; } .skill span { color: var(--ink-2); font-size: .9375rem; line-height: 1.45; } .team-more { display: inline-flex; margin-top: 36px; } @media (max-width: 1000px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .team { grid-template-columns: 1fr; } } @media (max-width: 560px) { .skills { grid-template-columns: 1fr; } } /* Contact */ .cta { background: var(--band); color: var(--band-ink); } .cta .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; } .cta p { color: var(--band-ink-2); margin-top: 18px; max-width: 34em; } .cta .serif { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--sand); font-stretch: 100%; } .direct { display: grid; gap: 14px; } .direct .row { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid rgba(176, 164, 143, .35); } .direct .k { font-size: .875rem; color: var(--band-ink-2); } .direct .v { font-size: 1.25rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .cta .wrap { align-items: start; } .cta .direct { margin-top: 32px; max-width: 26em; } #formulaire { scroll-margin-top: 144px; } @media (max-width: 860px) { #formulaire { scroll-margin-top: 120px; } } .contact-form { background: rgba(255, 255, 255, .05); border: 1px solid rgba(176, 164, 143, .35); border-radius: 18px; padding: 28px; display: grid; gap: 18px; } .contact-form h3 { color: var(--band-ink); } .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .cf-field { display: grid; gap: 6px; font-size: .875rem; color: var(--band-ink-2); } .cf-field abbr { text-decoration: none; color: var(--sand); } .cf-wide { grid-column: 1 / -1; } .contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-size: 1rem; color: var(--band-ink); background: rgba(255, 255, 255, .07); border: 1px solid rgba(176, 164, 143, .5); border-radius: 8px; padding: 12px 14px; min-height: 46px; width: 100%; } .contact-form textarea { resize: vertical; min-height: 84px; } .contact-form select option { color: #023146; background: #fff; } .contact-form ::placeholder { color: var(--band-ink-2); opacity: .75; } .contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 3px solid var(--sand); outline-offset: 1px; } .cf-note { font-size: .8125rem; color: var(--band-ink-2); margin: 0 !important; } .cf-note a { color: var(--band-ink); } .contact-form .btn { justify-self: start; background: var(--sand); color: #021721; border: 0; cursor: pointer; font: inherit; font-weight: 600; } .cf-status { font-size: .9375rem; color: var(--band-ink); margin: 0 !important; } .cf-status:empty { display: none; } .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 560px) { .cf-grid { grid-template-columns: 1fr; } .contact-form { padding: 22px 18px; } } @media (max-width: 860px) { .cta .wrap { grid-template-columns: 1fr; } } /* Pied de page */ .site-footer { background: var(--band); color: var(--band-ink-2); border-top: 12px solid #b0a48f; padding-block: 48px 40px; font-size: .9375rem; } .site-footer .wrap { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 32px 56px; align-items: end; } .logo-foot { width: min(340px, 100%); height: auto; display: block; } .foot-brand { display: grid; gap: 14px; } .foot-terr { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--band-ink-2); max-width: 30em; } .foot-regions { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .foot-regions a { display: inline-block; padding: 8px 12px; border-radius: 8px; font-size: .8125rem; font-weight: 600; color: var(--band-ink); text-decoration: none; background: rgba(176, 164, 143, .14); border: 1px solid rgba(176, 164, 143, .45); transition: background-color .2s ease; } .foot-regions a:hover { background: rgba(176, 164, 143, .28); } .foot-terr strong { color: var(--band-ink); font-weight: 600; } .foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; } .foot-links a { text-decoration: none; } .foot-links a:hover { color: var(--band-ink); } .site-footer .foot-regions a { color: #023146; background: #b0a48f; border-color: #b0a48f; box-shadow: 0 2px 0 #7d725f; } .site-footer .foot-links a { color: #fff; text-decoration: underline; text-decoration-color: #b0a48f; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } .site-footer .foot-regions a:hover { color: #023146; background: #c2b7a3; } .site-footer .foot-regions { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 5px !important; } .site-footer .foot-regions a { padding: 2px 7px !important; font-size: .6875rem !important; line-height: 1.5; border-radius: 5px; white-space: nowrap; } @media (max-width: 600px) { .site-footer .foot-regions { gap: 4px !important; } .site-footer .foot-regions a { padding: 2px 5px !important; font-size: .5625rem !important; letter-spacing: -.01em; } } .site-footer .foot-links a:hover { color: #b0a48f; } .legal { grid-column: 1 / -1; font-size: .875rem; border-top: 1px solid rgba(176, 164, 143, .2); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; } @media (max-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr; } .foot-links { justify-content: flex-start; } } .site-footer .wrap { grid-template-columns: 1fr !important; align-items: start; gap: 28px; } .site-footer .foot-links { justify-content: space-between; gap: 8px 16px; width: 100%; } @media (min-width: 1000px) { .site-footer .foot-links { flex-wrap: nowrap; } .site-footer .foot-links a { white-space: nowrap; font-size: .875rem; } } @media (min-width: 1000px) and (max-width: 1339px) { .site-footer .foot-links { gap: 8px 10px; } .site-footer .foot-links a { font-size: .8125rem; } } @media (min-width: 1000px) and (max-width: 1099px) { .site-footer .foot-links { gap: 8px 8px; } .site-footer .foot-links a { font-size: .75rem; } } .site-footer .wrap > * { min-width: 0; } .site-footer svg.logo-foot { width: 280px !important; height: auto !important; max-width: 100%; } .site-footer .foot-kicker { font-size: .65rem !important; letter-spacing: .13em; } @media (max-width: 999px) { .site-footer .foot-links { justify-content: flex-start; gap: 8px 24px; } } .logo-foot [fill="#023146"] { fill: var(--band); } .logo-dark [fill="#023146"] { fill: var(--bg); } /* Le moment animé : l'ouverture, une seule fois */ @keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes drawshow { from { stroke-dashoffset: 100; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } } @keyframes fadeout { to { opacity: 0; } } @keyframes fadein { from { opacity: 0; } } @keyframes grow { from { transform: scaleX(0); } } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .motion .c-ring { stroke-dasharray: 100; animation: draw 1s ease both; } .motion .c-ring-1 { animation: draw 1s ease .9s both, fillin .5s ease 1.6s both; } @keyframes fillin { from { fill-opacity: 0; } to { fill-opacity: 1; } } .motion .c-lost-solid { stroke-dasharray: 100; } .motion .c-ls-2 { animation: drawshow 1s ease 1.2s both, fadeout .7s ease 2.4s forwards; } .motion .c-ls-3 { animation: drawshow 1s ease 1.5s both, fadeout .7s ease 2.7s forwards; } .motion .c-ld-2 { animation: fadein .7s ease 2.4s both; } .motion .c-ld-3 { animation: fadein .7s ease 2.7s both; } .motion .c-lab { animation: fadein .5s ease both; } .motion .c-lab-1 { animation-delay: 1.4s; } .motion .c-lab-2 { animation-delay: 2.5s; } .motion .c-lab-3 { animation-delay: 2.8s; } .motion .c-num { animation: fadein .5s ease .8s both; } .motion .c-x { stroke-dasharray: 80; animation: drawx .6s ease both; } .motion .c-x-2 { animation-delay: 3.1s; } .motion .c-x-3 { animation-delay: 3.4s; } @keyframes drawx { from { stroke-dashoffset: 80; opacity: 0; } to { stroke-dashoffset: 0; opacity: .85; } } .motion .flow-track i { animation: grow .9s cubic-bezier(.3, .6, .2, 1) both; } .motion .flow-track .all { animation-delay: 2.1s; } .motion .flow-track .pot { animation-delay: 2.5s; } .motion .flow-track .real { animation-delay: 2.9s; } .motion .flow-gap { animation: fadein .6s ease 3.4s both; } .motion .letter { animation: rise .8s cubic-bezier(.2, .7, .2, 1) 3.6s both; } .motion .ring-fig .r-draw { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.3, .6, .2, 1) .2s; } .motion .ring-fig.pending .r-draw { stroke-dashoffset: 100; } .motion .ring-fig .node { transition: opacity .45s ease calc(.9s + var(--k) * .15s), transform .45s cubic-bezier(.2, .7, .2, 1.3) calc(.9s + var(--k) * .15s); } .motion .ring-fig.pending .node { opacity: 0; transform: translate(-50%, -50%) scale(.5); } .motion .promises.revealing .promise::before { transition: transform .7s cubic-bezier(.3, .6, .2, 1) calc(var(--p) * .25s), background-color .3s ease; } .motion .promises.revealing .promise > * { transition: opacity .6s ease calc(var(--p) * .25s + .25s), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--p) * .25s + .25s); } .motion .promises.revealing .p-ic { transition: opacity .5s ease calc(var(--p) * .25s + .2s), transform .6s cubic-bezier(.3, 1.5, .5, 1) calc(var(--p) * .25s + .2s), background-color .3s ease; } .motion .promises.pending .promise::before { transform: scaleX(0); } .motion .promises.pending .promise > * { opacity: 0; transform: translateY(16px); } .motion .promises.pending .p-ic { transform: scale(.4); } .motion .rv.pending .rv-i { opacity: 0; transform: translateY(18px); } .motion .rv.revealing .rv-i { transition: opacity .6s ease calc(var(--i) * var(--rv-step, .12s)), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * var(--rv-step, .12s)); } .motion .map.rv.pending .tile { opacity: 0; transform: scale(.3); } .motion .map.rv.revealing .tile { transition: opacity .4s ease calc(var(--i) * .07s), transform .55s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .07s); } .motion .tile.home.ping::after { content: ""; position: absolute; inset: -5px; border-radius: 22%; border: 2px solid #e3917f; animation: ping 1.4s ease-out 2; } @keyframes ping { from { transform: scale(1); opacity: 1; } to { transform: scale(1.6); opacity: 0; } } .motion .skills.rv.pending .skill svg path, .motion .skills.rv.pending .skill svg circle { stroke-dashoffset: 1; } .motion .skills.rv .skill svg path, .motion .skills.rv .skill svg circle { stroke-dasharray: 1; } .motion .skills.rv.revealing .skill svg circle { transition: stroke-dashoffset .6s ease calc(var(--i) * .1s + .15s); } .motion .skills.rv.revealing .skill svg path { transition: stroke-dashoffset .4s ease calc(var(--i) * .1s + .55s); } .motion .steps.revealing .step::before { transition: transform .7s cubic-bezier(.3, .6, .2, 1) calc(var(--s) * .35s); } .motion .steps.revealing .step > * { transition: opacity .6s ease calc(var(--s) * .35s + .3s), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--s) * .35s + .3s); } .motion .steps.pending .step::before { transform: scaleX(0); } .motion .steps.pending .step > * { opacity: 0; transform: translateY(14px); } .motion .steps.pending .step .n { transform: translateY(24px); } } /* Signes discrets : tétraktys et croix */ .tk-wm { position: absolute; width: 120px; height: 105px; fill: none; stroke: var(--sand); stroke-width: .6; opacity: .08; pointer-events: none; } .stat { position: relative; } .stat > .tk-wm { top: 22px; right: 26px; } .site-footer { position: relative; overflow: hidden; } .tk-foot { right: 4%; top: 28px; width: 150px; height: 131px; opacity: .07; } .xs { width: 9px; height: 9px; margin: 0 9px; stroke: var(--sand); stroke-width: 1.3; stroke-linecap: round; vertical-align: 1px; } .tk-name { width: .68em; height: .6em; fill: var(--sand); margin-right: .4em; vertical-align: .02em; } .xs-role { width: 9px; height: 9px; margin: 0 8px 0 1px; vertical-align: 0; } .person p:not(.role):not(.li-link), .bio .txt, .prose p, .prose li, .takeaways li, details .a p, .intro-grid p, .letter p, .explain p, .detail-steps p, .next-steps p, .pillars p, .cards .card p, .facts p, .schemes li p, .estim-method, .two-col > div > p:not(.lead), ul.facts > li, ol.send li, .explain ul li, #contact .wrap > div > p, .pro > p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 600px) { main p, main li, main dd, main q, .contact-form p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } main .after-steps, main .crumbs, main .h-confid, main .cta-confid, main .sect-note { text-align: left; -webkit-hyphens: manual; hyphens: manual; } } .li-link { margin: 6px 0 0; font-size: .875rem; } .li-link a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); text-decoration: none; padding: 4px 0; } .li-link a:hover, .li-link a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .li-ico { width: 15px; height: 15px; fill: var(--sand); flex: none; } .bio .li-link { margin: 4px 0 10px; } .person .li-link { margin: 0 0 6px; } .steps-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; } .motion .steps-7.revealing .step::before { transition-delay: calc(var(--s) * .2s); } .motion .steps-7.revealing .step > * { transition-delay: calc(var(--s) * .2s + .25s); } @media (max-width: 1000px) { .steps-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .steps-7 { grid-template-columns: 1fr; row-gap: 32px; } } .reassure p, .estim-out .val { text-wrap: balance; } .hero a.btn::after, .land-hero a.btn:not(.ghost)::after, .cta-band a.btn::after, .cta a.btn::after, main a.btn:not(.ghost)::after { content: ""; flex: none; width: 20px; height: 20px; margin-left: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2014a8%208%200%200%201-8%208%27/%3E%3Cpath%20d%3D%27M18%2011v-1a2%202%200%200%200-2-2a2%202%200%200%200-2%202%27/%3E%3Cpath%20d%3D%27M14%2010V9a2%202%200%200%200-2-2a2%202%200%200%200-2%202v1%27/%3E%3Cpath%20d%3D%27M10%209.5V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v10%27/%3E%3Cpath%20d%3D%27M18%2011a2%202%200%201%201%204%200v3a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2014a8%208%200%200%201-8%208%27/%3E%3Cpath%20d%3D%27M18%2011v-1a2%202%200%200%200-2-2a2%202%200%200%200-2%202%27/%3E%3Cpath%20d%3D%27M14%2010V9a2%202%200%200%200-2-2a2%202%200%200%200-2%202v1%27/%3E%3Cpath%20d%3D%27M10%209.5V4a2%202%200%200%200-2-2a2%202%200%200%200-2%202v10%27/%3E%3Cpath%20d%3D%27M18%2011a2%202%200%201%201%204%200v3a8%208%200%200%201-8%208h-2c-2.8%200-4.5-.86-5.99-2.34l-3.6-3.6a2%202%200%200%201%202.83-2.82L7%2015%27/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; } .hero a.btn:hover::after, .land-hero a.btn:hover::after, .cta-band a.btn:hover::after, .cta a.btn:hover::after, main a.btn:not(.ghost):hover::after { transform: translate(2px, 2px) scale(.94); } a.btn:not(.ghost) { box-shadow: 0 3px 0 var(--btn-edge), 0 10px 22px -10px rgba(0,0,0,.45); } a.btn:not(.ghost):hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--btn-edge), 0 14px 26px -12px rgba(0,0,0,.5); } a.btn:not(.ghost):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge), 0 4px 10px -6px rgba(0,0,0,.4); } .site-header a.btn::after, .nav a.btn::after { content: none; } @media (prefers-reduced-motion: reduce) { a.btn::after { transition: none; } } .person-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; display: block; } @media (min-width: 1181px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 625px); gap: 80px; } .stat { padding: 16px 32px 14px; } .stat-fig { gap: 6px; } .stat-num { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); } .stat-label { font-size: 1rem; } .ratio { padding-top: 11px; gap: 12px 18px; } .ratio svg { width: 205px; } .ratio p { font-size: .875rem; line-height: 1.42; flex-basis: 260px; } .stat-foot { margin-top: 8px; } .letter { flex: 0 0 300px; margin-left: -64px; padding: 16px 18px 14px; } .letter p { font-size: 1rem; line-height: 1.42; } .foot-right { gap: 10px; } .flow-row span { font-size: .8125rem; } .flow-row b { font-size: 1.0625rem; } .flow-gap { font-size: .84375rem; } .source { font-size: .71875rem; } .stat .tk-wm { width: 90px; } } .btn-read::before { content: ""; flex: none; width: 18px; height: 18px; margin-right: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%204h6a4%204%200%200%201%204%204v13a3%203%200%200%200-3-3H2z%27/%3E%3Cpath%20d%3D%27M22%204h-6a4%204%200%200%200-4%204v13a3%203%200%200%201%203-3h7z%27/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%204h6a4%204%200%200%201%204%204v13a3%203%200%200%200-3-3H2z%27/%3E%3Cpath%20d%3D%27M22%204h-6a4%204%200%200%200-4%204v13a3%203%200%200%201%203-3h7z%27/%3E%3C/svg%3E") center/contain no-repeat; } /* ===== Template T1 : bandeau bleu nuit, éco-conçu ===== */ .theme-btn { display: none !important; } .hero-t1 { background: #021721; color: #f1ede6; padding-block: 56px 64px !important; position: relative; overflow: hidden; } .hero-t1 .wrap { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important; gap: 40px !important; align-items: center !important; } .hero-t1 .hero-text { gap: 20px; padding-top: 0; } .h-kicker { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b0a48f; } .hero-t1 h1 { color: #f6f2ea; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 13em; } .hero-t1 h1 .acc { color: #9c8f77; } .hero-t1 .lead { color: #c9d2d7; max-width: 34em; } .h-proof { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .9375rem; color: #dfe5e8; } .h-proof svg { width: 18px; height: 18px; color: #b0a48f; flex: none; } .h-stat { align-items: center; gap: 14px; max-width: 36em; padding-left: 14px; border-left: 3px solid #b0a48f; } .h-stat strong { font-size: 1.75rem; font-weight: 800; line-height: 1; color: #e3917f; white-space: nowrap; letter-spacing: -0.01em; } .h-stat span { line-height: 1.4; font-size: .84rem; } .h-stat .h-alert { color: #e3917f; font-weight: 700; } .h-stat em { font-style: italic; color: #9c8f77; font-weight: 600; } .hero-t1 .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-t1 .btn:not(.ghost) { background: #dbe6ec; color: #023146; --btn-edge: #8fa6b3; } .hero-t1 .btn:not(.ghost):hover { background: #fff; } .hero-t1 .h-ghost { background: #b0a48f !important; color: #021721 !important; border: 1.5px solid #b0a48f !important; box-shadow: 0 3px 0 #7d725f !important; } .hero-t1 .h-ghost::after { content: none !important; } .hero-t1 .h-ghost:hover { border-color: #c2b7a3 !important; background: #c2b7a3 !important; box-shadow: 0 4px 0 #7d725f, 0 12px 22px -12px rgba(0,0,0,.6) !important; } .hero-t1 .h-ghost:active { box-shadow: 0 1px 0 #7d725f !important; } .hero-t1 .h-stat + .hero-actions, .hero-t1 .h-stat ~ .hero-actions { margin-top: 12px; } .h-confid { margin: 0; font-size: .875rem; } .h-confid .confid { display: inline-flex; align-items: center; gap: 10px; color: #c9bea9; font-weight: 600; } .h-confid svg { width: 22px; height: 22px; color: #e3917f; flex: none; } .h-visual { position: relative; z-index: 0; pointer-events: none; transform: scale(1.4); transform-origin: 40% 50%; } .hero-t1 .hero-text { position: relative; z-index: 1; } .h444 { width: 100%; height: auto; display: block; } .constat { padding-block: 72px; } .constat .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 625px); gap: 64px; align-items: center; } .constat-text { display: grid; gap: 18px; align-content: start; } .constat-text h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); } .constat .panel.stat { margin: 0; } .constat .baseline { margin: 0; padding-left: 16px; border-left: 3px solid var(--sand); font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1.45; color: var(--ink); } @media (max-width: 960px) { .hero-t1 .wrap, .constat .wrap { grid-template-columns: 1fr !important; } .h-visual { max-width: 420px; justify-self: center; } } @media (max-width: 600px) { .hero-t1 { padding-block: 24px 48px !important; } .hero-t1 .h-kicker { display: none; } .hero-t1 .h-visual { display: block; order: -1; margin: -8px auto -16px !important; width: min(360px, 92vw); } .hero-t1 .h444 { width: 100% !important; transform: translateX(-4.2%) scale(1.1) !important; transform-origin: 50% 50%; } } .foot-kicker { font-size: .75rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b0a48f !important; line-height: 1.7; } .h-visual.no-deco .h-deco { display: none; } :root.is-inner, :root.is-inner[data-theme] { --bg: #f8f5ef !important; --panel: #efe9df !important; --card: #fffdf9 !important; --ink: #023146 !important; --ink-2: #4a5963 !important; --sand-ink: #6f6553 !important; --alert: #9a3b2e !important; --line: #e3dccf !important; --band: #023146 !important; --band-ink: #ffffff !important; --band-ink-2: #c9d3d9 !important; --btn-bg: #023146 !important; --btn-edge: #011a26 !important; --btn-ink: #ffffff !important; --tile-oc: #023146 !important; --tile-oc-ink: #ffffff !important; --shadow: rgba(2, 49, 70, .45) !important; color-scheme: light !important; } :root.is-inner body { background: var(--bg) !important; color: var(--ink); } :root.is-inner.bg-sable { --bg: #f6f4f2 !important; --panel: #e5e1da !important; } :root.is-inner.bg-sable body { background-color: #f6f4f2 !important; background-image: none !important; } .is-inner main > section[style*="--panel"], .is-inner main > section.related { background: #eef3f6 !important; --panel: #e2eaef; --bg: #f9fbfc; --card: #fbfdfe; --line: #d5dfe5; } /* Accueil : alternance sable tramé / bleu très clair */ .hero-t1 ~ #approche, .hero-t1 ~ #engagements, .hero-t1 ~ #recherche, .hero-t1 ~ #equipe { --bg: #eef3f6; --panel: #e2eaef; --card: #fbfdfe; --line: #d5dfe5; background: #eef3f6; } .hero-t1 ~ #approche, .hero-t1 ~ #engagements, .hero-t1 ~ #recherche, .hero-t1 ~ #equipe { background: #eef3f6 !important; } .hero-t1 ~ #demarche { background: transparent !important; } .hero-t1 ~ .intro { --bg: #eef3f6; --panel: #e2eaef; --card: #fbfdfe; --line: #d5dfe5; background: #eef3f6 !important; } .hero-t1 ~ .intro + #equipe { padding-top: 0 !important; } .hero-t1 ~ #estimer, .hero-t1 ~ #ressources, .hero-t1 ~ #demarche, .hero-t1 ~ #equipe, .hero-t1 ~ #recherche, .hero-t1 ~ #approche { padding-top: 96px !important; } @media (max-width: 860px) { .hero-t1 ~ #estimer, .hero-t1 ~ #ressources, .hero-t1 ~ #demarche, .hero-t1 ~ #equipe, .hero-t1 ~ #recherche, .hero-t1 ~ #approche { padding-top: 72px !important; } } :root.is-inner.bg-bleu { --bg: #eef3f6 !important; --panel: #e2eaef !important; --card: #fbfdfe !important; --line: #d5dfe5 !important; } :root.is-inner.bg-bleu body { background-color: #eef3f6 !important; background-image: repeating-linear-gradient(135deg, rgba(2, 49, 70, .06) 0 1px, transparent 1px 7px) !important; } .site-header { background: #fff; --bg: #fff; --panel: #eef1f3; --card: #fff; --ink: #023146; --ink-2: #4a5963; --sand-ink: #6f6553; --line: #dde3e7; --btn-bg: #023146; --btn-ink: #fff; --btn-edge: #011a26; color: var(--ink); } :root[data-theme="dark"] .site-header .logo-light { display: block; } :root[data-theme="dark"] .site-header .logo-dark { display: none; } .motion .wait-view:not(.in-view), .motion .wait-view:not(.in-view) * { animation-play-state: paused !important; } .dims7 { display: grid; } .d7 { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; padding: 28px 0; border-top: 1px solid var(--line); } .d7:last-child { border-bottom: 1px solid var(--line); } .d7 h3 { font-size: 1.25rem; color: var(--ink); } .d7 p { color: var(--ink-2); line-height: 1.55; } .d7 .dim-k { margin-bottom: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sand-ink); } .d7 .dim-k.after { color: var(--ink); } @media (max-width: 860px) { .d7 { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; } } .pillars-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } @media (max-width: 860px) { .pillars-2 { grid-template-columns: 1fr; gap: 24px; } } .ap-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } /* Schéma de fonds v2 : on commence en bleu clair, les sections « panel » passent en sable, encadrés en sable */ :root.is-inner.bg-sable { --bg: #eef3f6 !important; --panel: #e5e1da !important; --card: #fbfdfe !important; --line: #d5dfe5 !important; } :root.is-inner.bg-sable body { background-color: #eef3f6 !important; } :root.is-inner:not(.is-home) main > section[style*="--panel"], :root.is-inner:not(.is-home) main > section.related { background: #f6f4f2 !important; --panel: #dde7ee; --bg: #fbfaf8; --card: #fbfaf8; --line: #e3ded5; } .hero-t1 ~ #approche, .hero-t1 ~ #engagements, .hero-t1 ~ #recherche, .hero-t1 ~ .intro, .hero-t1 ~ #equipe { background: #f6f4f2 !important; --bg: #fbfaf8; --panel: #dde7ee; --card: #fbfaf8; --line: #e3ded5; } .hero-t1 ~ #demarche { background: transparent !important; } /* Encadrés et boutons secondaires : contraste avec le fond (sable sur bleu, bleu sur sable) */ .hero-t1 ~ #approche, .hero-t1 ~ #engagements, .hero-t1 ~ #recherche, .hero-t1 ~ .intro, .hero-t1 ~ #equipe, :root.is-inner:not(.is-home) main > section[style*="--panel"], :root.is-inner:not(.is-home) main > section.related { --panel: #dde7ed; } .hero-t1 ~ #approche .btn.ghost, .hero-t1 ~ #engagements .btn.ghost, .hero-t1 ~ #recherche .btn.ghost, .hero-t1 ~ .intro .btn.ghost, .hero-t1 ~ #equipe .btn.ghost, :root.is-inner:not(.is-home) main > section[style*="--panel"] .btn.ghost, :root.is-inner:not(.is-home) main > section.related .btn.ghost { background: #dbe6ec !important; border-color: #8fa6b3 !important; box-shadow: 0 3px 0 #8fa6b3, 0 8px 18px -12px rgba(0,0,0,.3) !important; } .hero-t1 ~ #approche .btn.ghost:hover, .hero-t1 ~ #engagements .btn.ghost:hover, .hero-t1 ~ #recherche .btn.ghost:hover, .hero-t1 ~ .intro .btn.ghost:hover, .hero-t1 ~ #equipe .btn.ghost:hover, :root.is-inner:not(.is-home) main > section[style*="--panel"] .btn.ghost:hover, :root.is-inner:not(.is-home) main > section.related .btn.ghost:hover { background: #fff !important; box-shadow: 0 4px 0 #8fa6b3, 0 12px 22px -12px rgba(0,0,0,.35) !important; } .hero-t1 ~ #approche .btn.ghost:active, .hero-t1 ~ #engagements .btn.ghost:active, .hero-t1 ~ #recherche .btn.ghost:active, .hero-t1 ~ .intro .btn.ghost:active, .hero-t1 ~ #equipe .btn.ghost:active, :root.is-inner:not(.is-home) main > section[style*="--panel"] .btn.ghost:active, :root.is-inner:not(.is-home) main > section.related .btn.ghost:active { box-shadow: 0 1px 0 #8fa6b3 !important; } /* Contraste des encadrés : sur fond sable, encadrés et boutons secondaires en bleu clair */ .hero-t1 ~ #approche .btn.ghost, .hero-t1 ~ #engagements .btn.ghost, .hero-t1 ~ #recherche .btn.ghost, .hero-t1 ~ .intro .btn.ghost, .hero-t1 ~ #equipe .btn.ghost, :root.is-inner:not(.is-home) main > section[style*="--panel"] .btn.ghost, :root.is-inner:not(.is-home) main > section.related .btn.ghost { background: #dbe6ec !important; border-color: #8fa6b3 !important; color: #023146 !important; box-shadow: 0 3px 0 #8fa6b3, 0 8px 18px -12px rgba(0,0,0,.3) !important; } .hero-t1 ~ #approche .btn.ghost:hover, .hero-t1 ~ #engagements .btn.ghost:hover, .hero-t1 ~ #recherche .btn.ghost:hover, .hero-t1 ~ .intro .btn.ghost:hover, .hero-t1 ~ #equipe .btn.ghost:hover, :root.is-inner:not(.is-home) main > section[style*="--panel"] .btn.ghost:hover, :root.is-inner:not(.is-home) main > section.related .btn.ghost:hover { background: #fff !important; box-shadow: 0 4px 0 #8fa6b3, 0 12px 22px -12px rgba(0,0,0,.35) !important; } /* Charte des blocs : fond bleu → blocs et boutons sable ; fond sable → blocs et boutons bleu clair */ :root.is-inner.bg-sable { --bg: #e5e1da !important; } .hero-t1 ~ #approche, .hero-t1 ~ #engagements, .hero-t1 ~ #recherche, .hero-t1 ~ .intro, .hero-t1 ~ #equipe, :root.is-inner:not(.is-home) main > section[style*="--panel"], :root.is-inner:not(.is-home) main > section.related { --bg: #dde7ee !important; --card: #dde7ee !important; } main .head > p.note { background: #e5e1da !important; } .hero-t1 ~ #approche .head > p.note, .hero-t1 ~ #engagements .head > p.note, .hero-t1 ~ #recherche .head > p.note, .hero-t1 ~ .intro .head > p.note, .hero-t1 ~ #equipe .head > p.note, :root.is-inner:not(.is-home) main > section[style*="--panel"] .head > p.note, :root.is-inner:not(.is-home) main > section.related .head > p.note { background: #dde7ee !important; } main a.btn:not(.ghost) { background: #b0a48f; color: #023146; --btn-edge: #7d725f; } main a.btn:not(.ghost):hover { background: #c2b7a3; } .hero-t1 ~ #approche a.btn:not(.ghost), .hero-t1 ~ #engagements a.btn:not(.ghost), .hero-t1 ~ #recherche a.btn:not(.ghost), .hero-t1 ~ .intro a.btn:not(.ghost), .hero-t1 ~ #equipe a.btn:not(.ghost), :root.is-inner:not(.is-home) main > section[style*="--panel"] a.btn:not(.ghost), :root.is-inner:not(.is-home) main > section.related a.btn:not(.ghost) { background: #dbe6ec; color: #023146; --btn-edge: #8fa6b3; } .hero-t1 ~ #approche a.btn:not(.ghost):hover, .hero-t1 ~ #engagements a.btn:not(.ghost):hover, .hero-t1 ~ #recherche a.btn:not(.ghost):hover, .hero-t1 ~ .intro a.btn:not(.ghost):hover, .hero-t1 ~ #equipe a.btn:not(.ghost):hover, :root.is-inner:not(.is-home) main > section[style*="--panel"] a.btn:not(.ghost):hover, :root.is-inner:not(.is-home) main > section.related a.btn:not(.ghost):hover { background: #fff; } main .pro a.btn:not(.ghost), main .estim-out a.btn:not(.ghost), main .aside-cta a.btn:not(.ghost) { background: #b0a48f !important; color: #023146 !important; --btn-edge: #7d725f !important; } main .ring-panel .r-center { background: transparent; } .sect-note { margin: -4px 0 10px; font-size: .8125rem; font-style: italic; color: var(--ink-2); } /* Téléphone en paysage : texte à gauche, 444 à droite, comme sur ordinateur */ @media (max-width: 960px) and (orientation: landscape) and (max-height: 520px) { .hero-t1 .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) !important; gap: 16px !important; } .hero-t1 .h-kicker { display: none; } .hero-t1 .h-visual { display: block !important; order: 0; margin: -24px -8px 0 0 !important; align-self: start; } .hero-t1 .wrap { align-items: start !important; } .hero-t1 .h444 { width: 100% !important; transform: none !important; } .hero-t1 h1 { font-size: clamp(1.7rem, 1rem + 2.6vw, 2.3rem); } } .site-footer .legal .copy { color: #b0a48f; } @media (max-width: 600px) { .ring-fig .node[data-title="Juridique"] span { right: auto; left: 50%; top: calc(100% + 2px); transform: translateX(-80%); } .ring-fig .r-center { width: 60%; top: 47%; gap: 3px; } .ring-fig .r-desc { font-size: .72rem; line-height: 1.28; } .ring-fig .node[data-title="Opérations"] span { left: 50%; top: calc(100% + 2px); transform: translateX(-20%); } } /* Accueil : séquence d'apparition du 444 (une seule fois au chargement) */ .h444 .e-mini { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .h444 .h-layer { animation: e-fade 1.2s ease both; } .h444 .e-mini { animation: e-in .6s ease both, e-out .9s ease 3.4s forwards; } .h444 .e-s { animation-delay: 1.1s, 3.4s; } .h444 .e-m { animation-delay: 1.7s, 3.4s; } .h444 .e-l { animation-delay: 2.3s, 3.4s; } .h444 .e-big { animation: e-big 1.1s cubic-bezier(.2, .7, .2, 1) 3s both; transform-box: fill-box; transform-origin: center; } } @keyframes e-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes e-in { from { opacity: 0; } to { opacity: var(--o); } } @keyframes e-out { from { opacity: var(--o); } to { opacity: 0; } } @keyframes e-big { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } } /* Menu : onglets épurés, soulignement sable et petit 444 au survol */ @media (min-width: 861px) { .site-header .tab { position: relative; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 10px 12px !important; border-radius: 0; color: #023146; } .site-header .tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: #b0a48f; transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; } .site-header .tab::before { content: ""; position: absolute; left: 50%; top: -20px; width: 34px; height: 28px; margin-left: -17px; background: #8a7d64; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24.3 361.6 75.6 61.6'%3E%3Cpath d='M89.76,404.7v-15.89l-10.35,15.89h10.35ZM88.17,403.11h-5.82l5.82-8.93v8.93Z'/%3E%3Cpath d='M39.32,404.7v-15.89l-10.35,15.89h10.35ZM37.73,403.11h-5.82l5.82-8.93v8.93Z'/%3E%3Cpath d='M64.54,404.7v-15.89l-10.35,15.89h10.35ZM62.95,403.11h-5.82l5.82-8.93v8.93Z'/%3E%3Cpath d='M99.4,398.47c-.05-1.77-.22-3.51-.5-5.2-.21-1.45-.45-2.66-.67-3.16-.71-2.72-1.72-5.32-2.99-7.76h.04l-.67-1.19c-.09-.16-.19-.3-.28-.46-.23-.39-.47-.78-.71-1.16-.17-.26-.33-.52-.5-.78-.36-.54-.74-1.07-1.13-1.59-.2-.27-.41-.52-.61-.78-.24-.31-.49-.61-.74-.91-.23-.27-.46-.54-.69-.8-.27-.31-.56-.61-.84-.91-.21-.22-.41-.44-.62-.65-.47-.47-.96-.93-1.46-1.38-.19-.17-.38-.33-.57-.5-.39-.34-.8-.67-1.21-1-.16-.13-.33-.26-.49-.39-1.21-.93-2.48-1.78-3.8-2.56-.04-.02-.08-.05-.13-.07-4.1-2.39-8.69-4.02-13.59-4.7-.14-.02-.28-.04-.42-.05-.62-.08-1.24-.14-1.86-.19-.19-.01-.38-.03-.57-.04-.76-.05-1.52-.08-2.3-.08-.64,0-1.28.02-1.91.05-.03,0-.06,0-.08,0-16.49.86-30.12,12.32-34.11,27.86-.01.05-.02.09-.04.14-.11.44-.21.89-.31,1.34-.05.21-.09.41-.13.62-.06.29-.11.59-.16.89-.06.36-.12.71-.17,1.07-.02.16-.04.32-.06.48-.06.48-.12.97-.16,1.45,0,.06,0,.12-.01.18-.05.58-.09,1.15-.11,1.74,0,0,0,0,0,0v2.62c.09,3.41.65,6.71,1.61,9.83h-.02l.36,1.05c.04.11.08.22.12.33.09.27.19.54.29.8.12.32.24.63.37.94.07.18.14.36.22.54,1.34,3.15,3.09,6.05,5.16,8.64h2.1c-2-2.33-3.72-4.91-5.08-7.7-.03-.06-.05-.11-.08-.16-.22-.47-.44-.94-.64-1.42-.02-.04-.04-.08-.05-.12-.18-.43-.35-.87-.52-1.31h9.04v6.01h10.12v-6.01h15.1v6.01h10.12v-6.01h15.1v6.01h4.45c-.13.22-.27.43-.41.64-.2.31-.4.62-.61.93-.21.31-.43.61-.64.9-.17.23-.34.46-.52.69-.24.31-.48.62-.72.92-.14.18-.3.34-.44.52-.03.04-.07.07-.1.11h2.07s.06-.08.1-.12c.39-.49.77-1,1.14-1.52.23-.32.46-.64.67-.96.2-.29.38-.59.57-.89.22-.35.44-.71.65-1.07.11-.19.23-.36.33-.55l.66-1.18h-.05c1.86-3.62,3.14-7.58,3.73-11.76h0l.08-.7s0-.02,0-.03c.09-.72.16-1.45.2-2.19,0-.03,0-.07,0-.1.04-.73.07-1.46.07-2.2,0-.3,0-.65-.03-1.01ZM26.72,394.75c.05-.35.1-.7.15-1.05.05-.31.11-.62.17-.93.04-.21.08-.43.12-.64,3.03-14.42,14.78-25.67,29.46-27.95.03,0,.06,0,.09-.01.51-.08,1.03-.14,1.54-.2.09,0,.18-.02.28-.03.47-.05.95-.08,1.43-.11.12,0,.25-.02.37-.03.59-.03,1.19-.05,1.79-.05.72,0,1.43.03,2.14.07.18.01.35.03.53.04.56.04,1.13.1,1.68.16.15.02.3.04.45.06,4.47.61,8.74,2.05,12.62,4.22,0,0,0,0,0,0,.61.34,1.2.7,1.79,1.07.09.06.17.11.26.17.54.35,1.08.72,1.6,1.11.06.04.11.08.17.12.55.4,1.08.83,1.6,1.26.17.14.34.29.51.44.33.28.65.57.97.87.22.21.44.41.66.63.26.26.52.52.78.79.22.23.44.45.65.69.4.44.79.89,1.17,1.35.22.26.42.53.63.8.21.27.41.53.61.81.2.27.4.55.59.83.21.31.42.63.63.95.12.19.24.37.36.56h-5.62l-13.83,20.28v-20.28h-11.39l-13.83,20.28v-20.28h-11.39l-9.78,14.34c.01-.11.03-.23.04-.34ZM93.54,416.46h-3.78v-6.01h-18.28v6.01h-6.93v-6.01h-18.28v6.01h-6.93v-6.01h-11.19c-1.12-3.46-1.73-7.14-1.73-10.97,0-.4.02-.8.03-1.2l10.87-15.94h8.96v22.35h1.69v-.98l14.57-21.37h8.96v22.35h1.69v-.98l14.57-21.37h5.71c1.4,2.55,2.5,5.28,3.24,8.16v14.2h.76c-.62,4.2-1.96,8.17-3.91,11.76Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24.3 361.6 75.6 61.6'%3E%3Cpath d='M89.76,404.7v-15.89l-10.35,15.89h10.35ZM88.17,403.11h-5.82l5.82-8.93v8.93Z'/%3E%3Cpath d='M39.32,404.7v-15.89l-10.35,15.89h10.35ZM37.73,403.11h-5.82l5.82-8.93v8.93Z'/%3E%3Cpath d='M64.54,404.7v-15.89l-10.35,15.89h10.35ZM62.95,403.11h-5.82l5.82-8.93v8.93Z'/%3E%3Cpath d='M99.4,398.47c-.05-1.77-.22-3.51-.5-5.2-.21-1.45-.45-2.66-.67-3.16-.71-2.72-1.72-5.32-2.99-7.76h.04l-.67-1.19c-.09-.16-.19-.3-.28-.46-.23-.39-.47-.78-.71-1.16-.17-.26-.33-.52-.5-.78-.36-.54-.74-1.07-1.13-1.59-.2-.27-.41-.52-.61-.78-.24-.31-.49-.61-.74-.91-.23-.27-.46-.54-.69-.8-.27-.31-.56-.61-.84-.91-.21-.22-.41-.44-.62-.65-.47-.47-.96-.93-1.46-1.38-.19-.17-.38-.33-.57-.5-.39-.34-.8-.67-1.21-1-.16-.13-.33-.26-.49-.39-1.21-.93-2.48-1.78-3.8-2.56-.04-.02-.08-.05-.13-.07-4.1-2.39-8.69-4.02-13.59-4.7-.14-.02-.28-.04-.42-.05-.62-.08-1.24-.14-1.86-.19-.19-.01-.38-.03-.57-.04-.76-.05-1.52-.08-2.3-.08-.64,0-1.28.02-1.91.05-.03,0-.06,0-.08,0-16.49.86-30.12,12.32-34.11,27.86-.01.05-.02.09-.04.14-.11.44-.21.89-.31,1.34-.05.21-.09.41-.13.62-.06.29-.11.59-.16.89-.06.36-.12.71-.17,1.07-.02.16-.04.32-.06.48-.06.48-.12.97-.16,1.45,0,.06,0,.12-.01.18-.05.58-.09,1.15-.11,1.74,0,0,0,0,0,0v2.62c.09,3.41.65,6.71,1.61,9.83h-.02l.36,1.05c.04.11.08.22.12.33.09.27.19.54.29.8.12.32.24.63.37.94.07.18.14.36.22.54,1.34,3.15,3.09,6.05,5.16,8.64h2.1c-2-2.33-3.72-4.91-5.08-7.7-.03-.06-.05-.11-.08-.16-.22-.47-.44-.94-.64-1.42-.02-.04-.04-.08-.05-.12-.18-.43-.35-.87-.52-1.31h9.04v6.01h10.12v-6.01h15.1v6.01h10.12v-6.01h15.1v6.01h4.45c-.13.22-.27.43-.41.64-.2.31-.4.62-.61.93-.21.31-.43.61-.64.9-.17.23-.34.46-.52.69-.24.31-.48.62-.72.92-.14.18-.3.34-.44.52-.03.04-.07.07-.1.11h2.07s.06-.08.1-.12c.39-.49.77-1,1.14-1.52.23-.32.46-.64.67-.96.2-.29.38-.59.57-.89.22-.35.44-.71.65-1.07.11-.19.23-.36.33-.55l.66-1.18h-.05c1.86-3.62,3.14-7.58,3.73-11.76h0l.08-.7s0-.02,0-.03c.09-.72.16-1.45.2-2.19,0-.03,0-.07,0-.1.04-.73.07-1.46.07-2.2,0-.3,0-.65-.03-1.01ZM26.72,394.75c.05-.35.1-.7.15-1.05.05-.31.11-.62.17-.93.04-.21.08-.43.12-.64,3.03-14.42,14.78-25.67,29.46-27.95.03,0,.06,0,.09-.01.51-.08,1.03-.14,1.54-.2.09,0,.18-.02.28-.03.47-.05.95-.08,1.43-.11.12,0,.25-.02.37-.03.59-.03,1.19-.05,1.79-.05.72,0,1.43.03,2.14.07.18.01.35.03.53.04.56.04,1.13.1,1.68.16.15.02.3.04.45.06,4.47.61,8.74,2.05,12.62,4.22,0,0,0,0,0,0,.61.34,1.2.7,1.79,1.07.09.06.17.11.26.17.54.35,1.08.72,1.6,1.11.06.04.11.08.17.12.55.4,1.08.83,1.6,1.26.17.14.34.29.51.44.33.28.65.57.97.87.22.21.44.41.66.63.26.26.52.52.78.79.22.23.44.45.65.69.4.44.79.89,1.17,1.35.22.26.42.53.63.8.21.27.41.53.61.81.2.27.4.55.59.83.21.31.42.63.63.95.12.19.24.37.36.56h-5.62l-13.83,20.28v-20.28h-11.39l-13.83,20.28v-20.28h-11.39l-9.78,14.34c.01-.11.03-.23.04-.34ZM93.54,416.46h-3.78v-6.01h-18.28v6.01h-6.93v-6.01h-18.28v6.01h-6.93v-6.01h-11.19c-1.12-3.46-1.73-7.14-1.73-10.97,0-.4.02-.8.03-1.2l10.87-15.94h8.96v22.35h1.69v-.98l14.57-21.37h8.96v22.35h1.69v-.98l14.57-21.37h5.71c1.4,2.55,2.5,5.28,3.24,8.16v14.2h.76c-.62,4.2-1.96,8.17-3.91,11.76Z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: translateY(5px) scale(.8); transition: opacity .25s ease, transform .25s ease; pointer-events: none; } .site-header .tab:hover::after, .site-header .tab:focus-visible::after, .site-header .tab[aria-current="page"]::after { transform: scaleX(1); } .site-header .tab:hover::before, .site-header .tab:focus-visible::before, .site-header .tab[aria-current="page"]::before { opacity: 1; transform: none; } .site-header .tab[aria-current="page"]::before { background: #8a7d64; } .site-header .tab:hover { color: #023146; background: transparent !important; } } /* Bandeau haut : libellé en capitales espacées et flèche ronde animée */ .topbar .tb-long { background: transparent !important; border: 0 !important; padding: 0 !important; font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: #023146 !important; } .topbar .tb-arrow { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 12px; border-radius: 50%; background: #023146; color: #e3917f; font-size: .95rem !important; top: 0 !important; letter-spacing: 0; } @media (prefers-reduced-motion: no-preference) { .topbar .tb-arrow { animation: tb-nudge 1.8s ease-in-out .8s 4; } } @keyframes tb-nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(4px); } } .letter .sign-who.sw2 { display: flex; flex-direction: column; align-items: center; gap: 6px; } .letter .sw2 .sign-names { display: flex; align-items: baseline; justify-content: center; gap: 10px; } .letter .sw2 .sign-pics { display: flex; gap: 22px; } .letter .sw2 img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; } .site-header a.btn:not(.ghost), .site-header a.btn:not(.ghost):hover, .site-header a.btn:not(.ghost):active { box-shadow: inset 0 0 0 2px #023146 !important; transform: none !important; } .k-coral { color: #b8543f; font-weight: 600; } .h-confid .k-coral { color: inherit !important; font-weight: inherit !important; } .hero-t1 .k-coral, .cta .k-coral, .cta-band .k-coral, .site-footer .k-coral, .pro .k-coral, .estim-out .k-coral { color: #e3917f; } .ex-note .ex-u { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .estim .e-calc, #estim-form .e-calc { display: flex; justify-content: center; width: 100%; margin-top: 18px; padding: 15px 20px; background: #023146 !important; color: #fff !important; border: 0; border-radius: 10px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 3px 0 #011a26; transition: background-color .2s ease, transform .15s ease; } #estim-form .e-calc:hover { background: #0a4560 !important; transform: translateY(-1px); } #estim-form .e-calc:active { transform: translateY(2px); box-shadow: 0 1px 0 #011a26; } .estim-out.flash { animation: e-flash 1.1s ease; } @keyframes e-flash { 0% { box-shadow: 0 0 0 0 rgba(227, 145, 127, .9); } 100% { box-shadow: 0 0 0 18px rgba(227, 145, 127, 0); } } /* Formulaire de contact : carte sable sur fond bleu nuit */ .contact-form { background: #e5e1da !important; border-color: #b0a48f !important; color: #023146; } .contact-form h3, .contact-form .cf-status, .cf-note a { color: #023146 !important; } .contact-form .cf-field, .contact-form .cf-note { color: #3d4a52 !important; } .contact-form .cf-field abbr { color: #9a3b2e !important; } .contact-form input, .contact-form select, .contact-form textarea { color: #023146 !important; background: #fff !important; border-color: #b0a48f !important; } .contact-form ::placeholder { color: #6b7780 !important; opacity: 1; } .contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline-color: #023146 !important; } .contact-form .btn { background: #023146 !important; color: #fff !important; --btn-edge: #011a26; } .contact-form .btn:hover { background: #0a4560 !important; } .hero-t1 .hero-text { position: relative; z-index: 2; } @media (min-width: 1181px) { .hero-t1 .h-kicker { white-space: nowrap; } } .hero-t1 .h-visual { z-index: 1; margin: -60px -40px -60px -130px; } .hero-t1 .h444 { width: 92%; display: block; margin: 0 auto; } @media (prefers-reduced-motion: no-preference) { .h444 .h-drift { animation: hdrift calc(var(--d) * .7) ease-in-out var(--dl) infinite alternate; transform-box: fill-box; transform-origin: center; } .h444 .h-pulse { animation: hpulse calc(var(--d) * .5) ease-in-out var(--dl) infinite alternate; transform-box: fill-box; transform-origin: center; } } @keyframes hdrift { 0% { transform: translate(0, 0) scale(1); opacity: .45; } 35% { transform: translate(calc(var(--dx) * 3), calc(var(--dy) * -2)) scale(1.15); opacity: 1; } 70% { transform: translate(calc(var(--dx) * -2), calc(var(--dy) * 3)) scale(.9); opacity: .6; } 100% { transform: translate(calc(var(--dx) * 4), calc(var(--dy) * 4)) scale(1.1); opacity: .9; } } @keyframes hpulse { 0% { transform: translate(0, 0) scale(.6); opacity: .2; } 50% { transform: translate(calc(var(--dx) * 1.5), calc(var(--dy) * -1.5)) scale(1.3); opacity: 1; } 100% { transform: translate(calc(var(--dx) * -1.5), calc(var(--dy) * 2)) scale(.85); opacity: .5; } } @media (max-width: 960px) { .hero-t1 .h-visual { margin: -20px 0 0; } .hero-t1 .h444 { transform: none; } } /* Sable clair PANTONE 7501 C (#D9C89E) : textes, accents, pictos et motifs sur fond bleu. Le logo garde son grège (7536 C). */ :root { --sand-7501: #D9C89E; } .hero-t1 h1 .acc, .h-stat em, .h-kicker, .foot-kicker, .site-footer .legal .copy { color: var(--sand-7501) !important; } .h-proof svg { color: var(--sand-7501) !important; } .h-stat { border-left-color: var(--sand-7501) !important; } .site-footer .foot-links a { text-decoration-color: var(--sand-7501) !important; } .site-footer .foot-links a:hover { color: var(--sand-7501) !important; } .pro { border-left-color: var(--sand-7501) !important; } .pro .pro-more { text-decoration-color: var(--sand-7501) !important; } .cta .serif { color: var(--sand-7501) !important; } .cas-k { color: #7A6E58 !important; font-weight: 700; } .disp-k { color: #b8543f !important; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } /* Accessibilité RGAA : contrastes ≥ 4,5:1, masquage accessible, reflow 320 px */ .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } :root:root, :root.is-inner, :root.is-inner[data-theme] { --sand-ink: #635949 !important; } .k-coral, .ex-note.priv .priv-k, .disp-k { color: #a5432e !important; } .hero-t1 .k-coral, .cta .k-coral, .cta-band .k-coral, .site-footer .k-coral, .pro .k-coral, .estim-out .k-coral, .aside-cta .k-coral { color: #e3917f !important; } .h-confid .k-coral { color: inherit !important; } .cas-k { font-size: 1.1875rem; } @media (max-width: 380px) { .pro { padding: 22px 18px; } .pro strong { overflow-wrap: anywhere; } .pro .btn { white-space: normal; text-align: center; } } .estim .fields.fsets { align-items: start; } .estim .fset { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; min-width: 0; } .estim .fset > label { display: flex; flex-direction: column; padding: 14px 16px 16px; border: 1px solid #c3d3dd; border-radius: 12px; background: #dde7ee; } .estim .fset > label .inp { margin-top: 10px; } .estim .fset legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #023146; } .estim .fset legend + label { clear: both; } /* Audit accessibilité (27/10) */ html { scroll-padding-top: 110px; } .estim .inp { border-color: #7A6E58; } .estim .inp:focus-within { outline: 3px solid #023146; outline-offset: 2px; } #formulaire input, #formulaire select, #formulaire textarea { border-color: #7A6E58 !important; } @media (min-width: 1000px) { .site-footer .foot-links { flex-wrap: wrap; } } .contact-form .cf-req, .contact-form .cf-req abbr { font-size: .875rem; margin: 0 0 12px; color: #023146 !important; } #estim-form.panel { background: #d8d2c7 !important; } #estim-form .priv-k { color: #93382a !important; } .estim .fields label small { font-style: italic; } /* Calculateur : bulles d'information */ .estim .fset > .fcard { display: flex; flex-direction: column; padding: 14px 16px 16px; border: 1px solid #c3d3dd; border-radius: 12px; background: #dde7ee; } .estim .fcard .fhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .estim .fset { grid-template-columns: minmax(0, 1fr); } .estim .fset > .fcard { min-width: 0; } .estim .fcard .fhead label { flex: 1; min-width: 0; display: block; font-weight: 700; color: #023146; line-height: 1.4; } .estim .fcard .fshort { margin: 4px 0 0; font-size: .875rem; font-style: italic; color: var(--ink-2); } .estim .info-btn { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #b8543f; color: #fff; font: italic 700 1.125rem/1 Georgia, serif; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(184,84,63,.35); transition: transform .15s; } .estim .info-btn:hover { transform: scale(1.08); } .estim .info-btn[aria-expanded="true"] { background: #023146; } .estim .info-btn:focus-visible { outline: 3px solid #023146; outline-offset: 2px; } .estim .fbubble { position: relative; margin: 12px 0 0; padding: 12px 14px; background: #fff; border-left: 4px solid #b8543f; border-radius: 8px; box-shadow: 0 6px 18px rgba(2,49,70,.12); font-size: .875rem; line-height: 1.5; color: #023146; } .estim .fbubble p { margin: 0; } .estim .fcard .inp { margin-top: 10px; } /* Offre de conseil : diagnostic de transmission */ .offer-cards > div { display: flex; flex-direction: column; } .offer-cards .offer-k { margin: 0 0 6px; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a5432e; } .offer-cards .offer-meta { margin-top: auto; padding-top: 14px; font-size: .9375rem; color: var(--ink-2); } .offer-cards .offer-price { margin: 4px 0 0; font-size: 1.25rem; font-weight: 800; color: #023146; } .offer-cards .offer-price small { display: block; font-size: .8125rem; font-weight: 400; font-style: italic; color: var(--ink-2); } .offer-cards .offer-main { border-top: 3px solid #b8543f !important; } .offer-cards p { text-align: left !important; } .diag-teaser { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .diag-teaser h2 { margin: 0 0 8px; } .diag-teaser p { margin: 0; max-width: 46em; } /* Pied de page : Contact et Espace partenaires en boutons */ .site-footer .foot-links .foot-cta { display: flex; gap: 12px; flex-basis: 100%; justify-content: flex-end; margin-top: 10px; } .site-footer .foot-links a.foot-btn { display: inline-block; padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: .9375rem !important; text-decoration: none !important; background: #D9C89E; color: #023146 !important; border: 2px solid #D9C89E; } .site-footer .foot-links a.foot-btn.ghost { background: transparent; color: #D9C89E !important; } .site-footer .foot-links a.foot-btn:hover { background: #fff; border-color: #fff; color: #023146 !important; } .site-footer .foot-links a.foot-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 999px) { .site-footer .foot-links .foot-cta { justify-content: flex-start; } } .rule-k { color: #a5432e; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } @media (min-width: 1341px) { .site-header .nav { gap: 0; } .site-header .tab { padding: 10px 9px !important; } } /* Formules du diagnostic en blocs de couleur */ .offer-cards { gap: 20px !important; } .offer-cards > div { background: #dde7ee; border: 1px solid #c3d3dd !important; border-top: 1px solid #c3d3dd !important; border-radius: 16px; padding: 26px 24px 24px !important; } .offer-cards > div.offer-main { background: #023146; border-color: #023146 !important; border-top: 1px solid #023146 !important; } .offer-cards .offer-main h3, .offer-cards .offer-main .offer-price { color: #fff !important; } .offer-cards .offer-main p { color: #e6edf1 !important; } .offer-cards .offer-main .offer-k { color: #e3917f !important; } .offer-cards .offer-main .offer-meta, .offer-cards .offer-main .offer-price small { color: #D9C89E !important; } .offer-cards .offer-price { padding-top: 12px; margin-top: 8px !important; border-top: 1px solid rgba(2,49,70,.18); font-size: 1.375rem !important; } .offer-cards .offer-main .offer-price { border-top-color: rgba(217,200,158,.4); } .gain-cards { gap: 20px !important; } .gain-cards > div { background: #e5e1da; border: 1px solid #d6d0c4 !important; border-top: 1px solid #d6d0c4 !important; border-radius: 16px; padding: 24px !important; } .gain-cards h3 { margin-top: 0; } .gain-cards p { color: #023146 !important; text-align: left !important; } .rules-cards p, .rules-cards .rule-k { font-size: .9375rem; line-height: 1.6; } /* ===== Pages intérieures ===== */ .page-hero { padding-block: 36px 56px; } .crumbs { font-size: .875rem; color: var(--ink-2); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 6px; } .crumbs a { color: inherit; text-underline-offset: 3px; } .crumbs span[aria-hidden] { color: var(--sand-ink); } .page-hero h1 { font-size: clamp(2.1rem, 1.5rem + 1.8vw, 3.1rem); max-width: 17em; } .page-hero .lead { margin-top: 20px; max-width: 40em; } .page-hero .hero-actions { margin-top: 28px; } .sec-tight { padding-top: 0; } .cta-band { background: var(--band); color: var(--band-ink); } .cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; } .cta-band h2 { max-width: 18em; } .cta-band p { color: var(--band-ink-2); margin-top: 12px; max-width: 36em; } .cta-band .cta-confid { display: flex; align-items: flex-start; gap: 10px; color: #c9bea9; font-weight: 600; } .cta-band .cta-confid svg { width: 22px; height: 22px; flex: none; color: #e3917f; margin-top: 1px; } .cta-band .btn { background: var(--sand); color: #021721; } .cta-band a:focus-visible { outline-color: var(--sand); } .detail-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: st; } .detail-steps > li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 32px; padding: 36px 0; border-top: 2px solid var(--ink); } .detail-steps .n { font-family: var(--serif); font-size: 3.4rem; line-height: .9; color: var(--sand-ink); } .detail-steps h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); margin-bottom: 12px; } .detail-steps p { color: var(--ink-2); max-width: 44em; margin-top: 10px; } .detail-steps .ask { margin-top: 16px; padding: 14px 18px; background: var(--panel); border-radius: 10px; font-size: .9375rem; color: var(--ink); max-width: 44em; } .detail-steps .ask b { color: var(--sand-ink); font-weight: 700; } @media (max-width: 640px) { .detail-steps > li { grid-template-columns: 1fr; } .detail-steps .n { font-size: 2.6rem; } } .pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .pillars > div { padding-top: 20px; border-top: 1px solid var(--line); } .pillars h3 { margin-bottom: 8px; } .pillars p { color: var(--ink-2); } @media (max-width: 860px) { .pillars { grid-template-columns: 1fr; gap: 20px; } } .faq { max-width: 52rem; border-bottom: 1px solid var(--line); } .faq details { border-top: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat; transition: transform .25s ease, background-color .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover::after { border-color: var(--sand); } .faq summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; } .faq .a { padding: 0 52px 22px 0; color: var(--ink-2); } .faq .a p + p { margin-top: 10px; } .faq .a a { color: var(--ink); text-decoration-color: var(--sand); text-underline-offset: 3px; } .two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } @media (max-width: 960px) { .two-col { grid-template-columns: 1fr; gap: 28px; } } .dims { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } .dims li { padding: 16px 0; border-top: 1px solid var(--line); } .dims strong { display: block; } .dims span { color: var(--ink-2); font-size: .9375rem; } @media (max-width: 560px) { .dims { grid-template-columns: 1fr; } } .prescr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 24px 0 28px; } .prescr li { padding: 16px 18px; background: var(--panel); border-radius: 12px; font-weight: 600; } @media (max-width: 860px) { .prescr { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .prescr { grid-template-columns: 1fr; } } .prescr li { overflow-wrap: anywhere; } .keep-box { background: #e5e1da; border-radius: 18px; padding: 40px 44px; } .keep-box .head { margin-bottom: 28px; } .keep-box .pillars > div { border-top-color: #cfc8bb; } @media (max-width: 600px) { .keep-box { padding: 28px 22px; } } @media (min-width: 861px) { .keep-box .pillars.pillars-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 56px; } } .keep-box .btn.ghost { background: #dbe6ec !important; border-color: #8fa6b3 !important; color: #023146 !important; box-shadow: 0 3px 0 #8fa6b3, 0 8px 18px -12px rgba(0,0,0,.3) !important; } .keep-box .btn.ghost:hover { background: #fff !important; } .prescr li { background: transparent !important; border-radius: 0 !important; padding: 4px 0 4px 16px !important; border-left: 4px solid #b0a48f; color: #023146; line-height: 1.35; } .prescr li:nth-child(even) { border-left-color: #023146; } .people { display: grid; gap: 0; } .people .bio { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px 40px; padding: 40px 0; border-top: 2px solid var(--ink); } .people .bio img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; } .people .bio h2 { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.9rem); } .people .bio .role { color: var(--sand-ink); margin-top: 4px; } .people .bio p.txt { color: var(--ink-2); margin-top: 16px; max-width: 46em; } @media (max-width: 640px) { .people .bio { grid-template-columns: 1fr; } .people .bio img { width: 96px; height: 96px; } } .next-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .next-steps li { padding-top: 18px; border-top: 2px solid var(--ink); } .next-steps .n { font-family: var(--serif); font-size: 2rem; color: var(--sand-ink); line-height: 1; display: block; margin-bottom: 10px; } .next-steps p { color: var(--ink-2); margin-top: 6px; } @media (max-width: 860px) { .next-steps { grid-template-columns: 1fr; } } /* Ressources */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .chip { font: inherit; font-size: .9375rem; font-weight: 600; padding: 10px 16px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; } .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .cards, .cards.two { grid-template-columns: 1fr; } } .card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-3px); border-color: var(--sand); box-shadow: 0 18px 30px -24px var(--shadow); } .card .tag { align-self: flex-start; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sand-ink); } .card h3 { font-size: 1.1875rem; line-height: 1.3; } .card h3 a { text-decoration: none; } .card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; } .card h3 a:focus-visible { outline: none; } .card:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; } .card p { color: var(--ink-2); font-size: .9375rem; } .card .meta { margin-top: auto; font-size: .8125rem; color: var(--ink-2); padding-top: 8px; } .card[hidden] { display: none; } .home-res .head { margin-bottom: 36px; } /* Article */ .art-head { padding-block: 36px 40px; } .art-head h1 { font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem); max-width: 19em; } .art-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; font-size: .9375rem; color: var(--ink-2); } .art-meta .tag { font-weight: 700; color: var(--sand-ink); text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; } .art-layout { display: grid; grid-template-columns: minmax(0, min(44rem, 100%)) minmax(0, 1fr); gap: 64px; align-items: start; padding-bottom: 80px; } .art-aside { position: sticky; top: 130px; display: grid; gap: 20px; } .toc { padding: 22px 24px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); } .toc p { font-weight: 700; margin-bottom: 10px; } .toc ol { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; font-size: .9375rem; } .toc a { color: var(--ink-2); text-decoration: none; } .toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sand); } .aside-cta { padding: 24px; border-radius: 16px; background: var(--band); color: var(--band-ink); } .aside-cta p { color: var(--band-ink-2); margin: 8px 0 16px; font-size: .9375rem; } .aside-cta .btn { background: var(--sand); color: #021721; padding: 13px 18px; } @media (max-width: 1080px) { .art-layout { grid-template-columns: 1fr; gap: 40px; } .art-aside { position: static; } .toc { display: none; } } .prose { font-size: 1.0625rem; line-height: 1.7; } .prose > * + * { margin-top: 18px; } .prose h2 { font-size: clamp(1.4rem, 1.25rem + .5vw, 1.7rem); margin-top: 48px; scroll-margin-top: 130px; } .prose h3 { font-size: 1.2rem; margin-top: 32px; } .prose p, .prose li { color: var(--ink); } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: 8px; } .prose a { color: var(--ink); text-decoration-color: var(--sand); text-decoration-thickness: 2px; text-underline-offset: 3px; } .prose a:hover { text-decoration-color: currentColor; } .prose blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--sand); font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; } .prose .takeaways { padding: 22px 26px; border-radius: 0 14px 14px 0; background: var(--panel); border-left: 4px solid var(--sand); } .prose .takeaways h2 { margin-top: 0; font-size: 1.125rem; } .prose .takeaways ul { margin-top: 10px; } .prose .note { font-size: .9375rem; color: var(--ink-2); padding: 14px 18px; border: 1px dashed var(--line); border-radius: 10px; } .prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); } .art-end { text-align: center; margin-top: 48px !important; } .art-end .tk { width: 26px; height: 23px; fill: var(--sand); opacity: .8; } .related { padding-block: 64px; background: var(--panel); } .related h2 { margin-bottom: 28px; font-size: 1.6rem; } .related .card { background: var(--bg); } .crit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; } .crit > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); } .crit dt { font-weight: 700; } .crit dd { margin: 0; color: var(--ink-2); } @media (max-width: 860px) { .crit { grid-template-columns: 1fr; } .crit > div { grid-template-columns: 1fr; gap: 4px; } } .aud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .aud > div { padding: 26px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); } .aud h3 { margin-bottom: 10px; } .aud ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); display: grid; gap: 6px; } @media (max-width: 760px) { .aud { grid-template-columns: 1fr; } } .send { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 46rem; } .send li { position: relative; padding: 16px 0 16px 52px; border-top: 1px solid var(--line); color: var(--ink-2); } .send li strong { color: var(--ink); } .send li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--sand); font-weight: 700; font-size: .875rem; color: var(--ink); } .land-hero { padding-block: 40px 64px; } .land-hero h1 { font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem); max-width: 15em; } .land-hero .lead { margin-top: 20px; max-width: 38em; font-size: 1.1875rem; } .land-hero .hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; } .btn.ghost { background: #efe9df; color: #023146; border: 1px solid var(--sand); } .btn.ghost:hover { background: #e4dccd; border-color: #6f6553; } :root[data-theme="dark"] .btn.ghost { background: #6b6150; color: #f6f2ea; border-color: rgba(176, 164, 143, .55); } :root[data-theme="dark"] .btn.ghost:hover { background: #756a57; border-color: var(--sand); } .btn.ghost { border: 1.5px solid #8a7f6b; box-shadow: 0 3px 0 #8a7f6b, 0 8px 18px -12px rgba(0,0,0,.35); font-weight: 600; } .btn.ghost:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #8a7f6b, 0 12px 22px -12px rgba(0,0,0,.4); } .btn.ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a7f6b, 0 3px 8px -6px rgba(0,0,0,.3); } :root[data-theme="dark"] .btn.ghost { border-color: rgba(176, 164, 143, .8); box-shadow: 0 3px 0 rgba(176, 164, 143, .55), 0 8px 18px -12px rgba(0,0,0,.6); } :root[data-theme="dark"] .btn.ghost:hover { box-shadow: 0 4px 0 rgba(176, 164, 143, .7), 0 12px 22px -12px rgba(0,0,0,.6); } :root[data-theme="dark"] .btn.ghost:active { box-shadow: 0 1px 0 rgba(176, 164, 143, .55); } .mini-team { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-top: 8px; } .mini-team div { display: flex; align-items: center; gap: 14px; } .mini-team img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } section[style*="--panel"] .situations li { background: var(--bg); } .mini-team span { display: block; color: var(--ink-2); font-size: .9375rem; } .depts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .depts li { padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; } .depts li span { color: var(--sand-ink); font-weight: 800; font-stretch: 112%; margin-right: 8px; font-variant-numeric: tabular-nums; } .facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .facts li { padding: 18px 0; border-top: 1px solid var(--sand); } .facts li p { color: var(--ink); } .facts li small { display: block; margin-top: 6px; color: var(--ink-2); font-size: .8125rem; } .facts li small a { color: inherit; text-underline-offset: 3px; } .schemes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .schemes li { padding: 22px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 6px; } .schemes li strong { font-size: 1.0625rem; } .schemes li span { color: var(--ink-2); font-size: .9375rem; } .schemes li a { font-size: .875rem; color: var(--ink); text-decoration-color: var(--sand); text-underline-offset: 3px; } @media (max-width: 760px) { .schemes { grid-template-columns: 1fr; } } .aids-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } @media (max-width: 860px) { .aids-grid { grid-template-columns: 1fr; gap: 28px; } } .aids-grid .facts li { overflow-wrap: anywhere; } .terr-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } /* Mobile : visuel 444 plus compact pour que le titre et le bouton apparaissent dès le premier écran */ @media (max-width: 600px) { .hero-t1 { padding-block: 12px 40px !important; } .hero-t1 .h-visual { width: min(210px, 56vw) !important; margin: -4px auto -20px !important; } .hero-t1 .hero-text { gap: 14px; } .hero-t1 .h-stat { order: 3; margin-top: 6px; } } /* En-tête large écran (4 nov. 2026) : onglets rapprochés du logo, plus d'air entre eux et avant « Prendre contact » */ @media (min-width: 1341px) { .site-header .wrap, .topbar .wrap { max-width: max(var(--col), min(1340px, 100vw - 64px)); } .site-header .brand { margin-right: 40px; } .site-header .nav { flex: 1; gap: clamp(4px, calc((100vw - 1340px) / 6), 16px); } .site-header .tab { padding: 10px 12px !important; } .site-header .nav .btn { margin-left: auto; } } /* Halos de l'accueil : figés au bout de 15 secondes (accessibilité, critère « mettre en pause », 4 nov. 2026) */ .halo-still .h444 .h-drift, .halo-still .h444 .h-pulse { animation-play-state: paused !important; } /* Halos de l'accueil : ne plus couper les halos au bord du visuel (trait vertical visible sous le titre, 4 nov. 2026) */ .hero-t1 .h444 { overflow: visible; } .hero-t1 { overflow-x: clip; } /* Téléphone (portrait et paysage) : bandeau de tête resserré, 10 novembre 2026 */ @media (max-width: 860px), (max-height: 500px) and (max-width: 1340px) { .topbar { border-bottom-width: 5px; } .topbar .wrap { padding-block: 3px; } .topbar .tb-btn { padding: 2px 10px; font-size: .8125rem; } .topbar .tb-arrow { width: 20px; height: 20px; } .site-header .wrap, .site-header.scrolled .wrap, :root.is-home .site-header > .wrap { padding-block: 8px !important; } .site-header .logo, .site-header.scrolled .logo { height: 36px; } .menu-btn { width: 40px; height: 40px; padding: 0 10px; } } /* Téléphone et tablette : texte aligné à gauche (la justification crée de grands blancs sur écran étroit), 10 novembre 2026 */ @media (max-width: 860px), (max-height: 500px) and (max-width: 1340px) { main p, main li, main dd, main q, main blockquote, main .bio .txt, .contact-form p, .site-footer p { text-align: left !important; -webkit-hyphens: manual !important; hyphens: manual !important; } } /* Téléphone en paysage : bandeau encore plus compact */ @media (max-height: 500px) and (max-width: 1340px) { .topbar { border-bottom-width: 2px; } .topbar .wrap { padding-block: 1px; } .topbar .tb-btn { padding: 0 8px; font-size: .6875rem; line-height: 1.5; border-width: 1.5px; } .topbar .tb-long { font-size: .625rem !important; } .topbar .tb-arrow { width: 16px; height: 16px; margin-left: 8px; font-size: .75rem !important; } .site-header .wrap, .site-header.scrolled .wrap, :root.is-home .site-header > .wrap { padding-block: 4px !important; } .site-header .logo, .site-header.scrolled .logo { height: 26px; } .menu-btn { width: 34px; height: 30px; gap: 4px; padding: 0 9px; } } /* Panneau des 48 000 : animations plus rapides, déclenchées bloc par bloc au défilement (10 novembre 2026) */ @media (prefers-reduced-motion: no-preference) { .motion .c-num { animation: fadein .4s ease .1s both; } .motion .c-ring-1 { animation: draw .7s ease .15s both, fillin .4s ease .7s both; } .motion .c-ls-2 { animation: drawshow .7s ease .3s both, fadeout .5s ease 1s forwards; } .motion .c-ls-3 { animation: drawshow .7s ease .45s both, fadeout .5s ease 1.15s forwards; } .motion .c-ld-2 { animation: fadein .5s ease 1s both; } .motion .c-ld-3 { animation: fadein .5s ease 1.15s both; } .motion .c-lab { animation: fadein .4s ease both; } .motion .c-lab-1 { animation-delay: .6s; } .motion .c-lab-2 { animation-delay: 1.1s; } .motion .c-lab-3 { animation-delay: 1.25s; } .motion .c-x-2 { animation-delay: 1.3s; } .motion .c-x-3 { animation-delay: 1.45s; } .motion .flow-track i { animation: grow .7s cubic-bezier(.3, .6, .2, 1) both; } .motion .flow-track .all { animation-delay: .1s; } .motion .flow-track .pot { animation-delay: .3s; } .motion .flow-track .real { animation-delay: .5s; } .motion .flow-gap { animation: fadein .5s ease .9s both; } .motion .letter { animation: rise .6s cubic-bezier(.2, .7, .2, 1) .1s both; } } /* Accueil : séquence du 444 accélérée (grand 444 visible vers 2,2 s au lieu de 4,1 s) */ @media (prefers-reduced-motion: no-preference) { .h444 .h-layer { animation: e-fade .6s ease both; } .h444 .e-mini { animation: e-in .45s ease both, e-out .6s ease 1.6s forwards; } .h444 .e-s { animation-delay: .3s, 1.6s; } .h444 .e-m { animation-delay: .6s, 1.6s; } .h444 .e-l { animation-delay: .9s, 1.6s; } .h444 .e-big { animation: e-big .8s cubic-bezier(.2, .7, .2, 1) 1.4s both; } }