/* ========================================================================== CPTS Toulon Littoral : thème « Clinique » (v2) Épuré, clair, un seul bleu santé, typographie d'interface. ========================================================================== */ @font-face { font-family: "Geist"; src: url(../fonts/geist-latin-wght-normal.woff2) format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Geist"; src: url(../fonts/geist-latin-ext-wght-normal.woff2) format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; } /* ---------- Jetons ---------- */ :root { --texte: #0E1726; --texte-2: #3A475A; --gris: #5F6E82; --gris-clair: #94A1B3; --ligne: #E5EAF1; --ligne-2: #D6DEE8; --fond: #FFFFFF; --surface: #F6F8FB; --bleu: #2B59F5; --bleu-fonce: #1D44D1; --bleu-pale: #EEF3FF; --bleu-pale-2: #DCE6FF; --aqua: #39C2D7; --nuit: #091326; --nuit-2: #0F1D36; --nuit-texte: #A9B6CA; --ok: #12A16B; --f: "Geist", "Inter", "Segoe UI", system-ui, sans-serif; --t-xs: .8125rem; --t-sm: .9375rem; --t-base: 1.0625rem; --t-md: 1.25rem; --t-lg: 1.5rem; --t-xl: 2rem; --t-2xl: clamp(2rem, 1.4rem + 2vw, 3rem); --t-3xl: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 24px; --ombre-1: 0 1px 2px rgba(14, 23, 38, .04), 0 1px 1px rgba(14, 23, 38, .03); --ombre-2: 0 1px 2px rgba(14, 23, 38, .04), 0 12px 32px -12px rgba(14, 23, 38, .12); --ombre-3: 0 2px 4px rgba(14, 23, 38, .04), 0 24px 64px -24px rgba(14, 40, 100, .25); --w: 1200px; --gout: clamp(1.25rem, 4vw, 2.5rem); --section: clamp(4.5rem, 9vw, 7.5rem); --ease: cubic-bezier(.2, .8, .2, 1); --header-h: 72px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--f); font-size: var(--t-base); line-height: 1.6; color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: var(--bleu); text-underline-offset: .2em; text-decoration-thickness: 1px; } p { margin: 0 0 1em; } h1, h2, h3, h4 { font-weight: 600; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 .5em; text-wrap: balance; color: var(--texte); } h1 { font-size: var(--t-3xl); letter-spacing: -.045em; line-height: 1.02; } h2 { font-size: var(--t-2xl); letter-spacing: -.035em; } h3 { font-size: var(--t-md); letter-spacing: -.02em; line-height: 1.25; } ul { padding-left: 1.2em; } :focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--bleu-pale-2); } .wrap { width: min(100% - 2 * var(--gout), var(--w)); margin-inline: auto; } .lede { font-size: var(--t-md); line-height: 1.55; color: var(--gris); max-width: 40ch; letter-spacing: -.01em; } .mesure { max-width: 64ch; color: var(--texte-2); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--bleu); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-s); font-weight: 600; } .skip:focus { top: 1rem; } /* ---------- Boutons ---------- */ .btn { --bg: var(--texte); --fg: #fff; --bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .5em; height: 44px; padding: 0 1.15em; border-radius: 999px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font: 550 .9375rem/1 var(--f); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease), color .2s, border-color .2s; } .btn:hover { transform: translateY(-1px); } .btn--primaire { --bg: var(--bleu); box-shadow: 0 1px 2px rgba(43, 89, 245, .3), inset 0 1px 0 rgba(255, 255, 255, .18); } .btn--primaire:hover { --bg: var(--bleu-fonce); box-shadow: 0 8px 20px -8px rgba(43, 89, 245, .6), inset 0 1px 0 rgba(255, 255, 255, .18); } .btn--ligne { --bg: var(--fond); --fg: var(--texte); --bd: var(--ligne-2); box-shadow: var(--ombre-1); } .btn--ligne:hover { --bd: var(--gris-clair); } .btn--lg { height: 52px; padding: 0 1.4em; font-size: 1rem; } .btn svg { width: 1.1em; height: 1.1em; flex: none; } .lien-fort { display: inline-flex; align-items: center; gap: .4rem; font-weight: 550; color: var(--texte); text-decoration: none; font-size: var(--t-sm); padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--ligne-2); background: var(--fond); box-shadow: var(--ombre-1); transition: border-color .2s; } .lien-fort::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-left: .1rem; transition: transform .25s var(--ease); } .lien-fort:hover { border-color: var(--gris-clair); } .lien-fort:hover::after { transform: translateX(2px) rotate(45deg); } .puce { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-xs); font-weight: 500; color: var(--texte-2); padding: .3rem .75rem .3rem .4rem; border-radius: 999px; background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-1); } .puce i { width: 18px; height: 18px; border-radius: 50%; background: var(--bleu-pale); display: grid; place-items: center; } .puce i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); } /* ========================================================================== En-tête ========================================================================== */ .entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s; } .entete.est-compacte { border-bottom-color: var(--ligne); } .entete__in { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); } .marque { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--texte); flex: none; } .marque__signe { width: 34px; height: 34px; } .marque__nom { font-weight: 650; font-size: 1.02rem; line-height: 1.1; letter-spacing: -.025em; } .marque__nom small { display: block; font-weight: 450; font-size: .75rem; letter-spacing: 0; color: var(--gris); margin-top: .1rem; } .nav { margin-left: auto; } .nav__liste { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; } .nav__lien { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .8rem; border-radius: 999px; font: 500 .9375rem/1 var(--f); color: var(--texte-2); text-decoration: none; background: none; border: 0; cursor: pointer; transition: background-color .2s, color .2s; letter-spacing: -.01em; } .nav__lien:hover, .nav__item.est-ouvert > .nav__lien { background: var(--surface); color: var(--texte); } .nav__lien svg { width: 14px; height: 14px; opacity: .6; transition: transform .3s var(--ease); } .nav__item.est-ouvert > .nav__lien svg { transform: rotate(180deg); } .panneau { position: absolute; top: calc(100% + 12px); left: 50%; width: 580px; padding: .5rem; background: rgba(255, 255, 255, .97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--ligne); border-radius: var(--r-l); box-shadow: var(--ombre-3); display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; opacity: 0; visibility: hidden; transform: translate(-50%, -6px) scale(.98); transform-origin: top center; transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s; } .panneau::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; } .nav__item.est-ouvert .panneau { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .2s, transform .3s var(--ease); } .panneau__lien { display: grid; grid-template-columns: 38px 1fr; gap: .1rem .8rem; align-items: center; padding: .75rem; border-radius: var(--r-m); text-decoration: none; color: var(--texte); transition: background-color .2s; } .panneau__lien:hover { background: var(--surface); } .panneau__lien strong { grid-column: 2; font-weight: 550; font-size: .95rem; line-height: 1.3; letter-spacing: -.01em; } .panneau__lien > span:not(.panneau__ico) { grid-column: 2; font-size: .84rem; color: var(--gris); line-height: 1.35; } .panneau__ico { grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-1); color: var(--bleu); transition: border-color .2s; } .panneau__lien:hover .panneau__ico { border-color: var(--bleu-pale-2); } .panneau__ico svg { width: 18px; height: 18px; } .panneau--etroit { width: 400px; grid-template-columns: 1fr; } .ext::after { content: "↗"; font-size: .8em; margin-left: .3em; color: var(--gris-clair); } .entete__actions { display: flex; align-items: center; gap: .4rem; margin-left: .5rem; } .entete__compte { height: 40px; padding: 0 .85rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .45rem; color: var(--texte-2); font: 500 .9375rem var(--f); text-decoration: none; transition: background-color .2s; letter-spacing: -.01em; } .entete__compte:hover { background: var(--surface); color: var(--texte); } .entete__compte svg { width: 18px; height: 18px; } .entete__actions .btn { height: 40px; } .burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ligne-2); background: var(--fond); cursor: pointer; position: relative; } .burger span, .burger span::before, .burger span::after { position: absolute; left: 50%; width: 18px; height: 1.5px; background: var(--texte); border-radius: 2px; transition: transform .3s var(--ease), background-color .2s; } .burger span { top: 50%; transform: translate(-50%, -50%); } .burger span::before, .burger span::after { content: ""; left: 0; } .burger span::before { transform: translateY(-5px); } .burger span::after { transform: translateY(5px); } .menu-ouvert .burger span { background: transparent; } .menu-ouvert .burger span::before { transform: rotate(45deg); } .menu-ouvert .burger span::after { transform: rotate(-45deg); } /* ========================================================================== Héros ========================================================================== */ .heros { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4rem); isolation: isolate; } .heros::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--ligne) 1px, transparent 1px), linear-gradient(90deg, var(--ligne) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 75%); opacity: .7; } .heros::after { content: ""; position: absolute; z-index: -1; width: 900px; height: 700px; right: -220px; top: -260px; background: radial-gradient(closest-side, rgba(57, 194, 215, .2), transparent 70%), radial-gradient(closest-side at 35% 60%, rgba(43, 89, 245, .18), transparent 75%); filter: blur(20px); } .heros__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .heros .puce { margin-bottom: 1.5rem; } .heros h1 { margin-bottom: .45em; max-width: 13ch; } .heros h1 span { color: var(--gris-clair); } .heros .lede { margin-bottom: 2rem; max-width: 46ch; } /* Aiguillage */ .aiguillage { background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: .4rem; box-shadow: var(--ombre-3); max-width: 540px; } .aiguillage__onglets { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border-radius: 18px; padding: 3px; border: 1px solid var(--ligne); } .aiguillage__curseur { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 15px; background: var(--fond); box-shadow: var(--ombre-2); transition: transform .45s var(--ease); } .aiguillage[data-public="pro"] .aiguillage__curseur { transform: translateX(100%); } .aiguillage__onglet { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: .7rem .5rem; font: 550 .9375rem/1.15 var(--f); color: var(--gris); transition: color .3s; letter-spacing: -.01em; } .aiguillage__onglet[aria-selected="true"] { color: var(--texte); } .aiguillage__panneau { padding: .9rem .6rem .4rem; } .aiguillage__panneau[hidden] { display: none; } .aiguillage__panneau.entre { animation: entrer .45s var(--ease) both; } @keyframes entrer { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } } .action-principale { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--r-m); text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--bleu) 0%, #3F6BFF 60%, #4C8DFF 100%); box-shadow: 0 1px 2px rgba(43, 89, 245, .3), 0 14px 30px -14px rgba(43, 89, 245, .7), inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .3s var(--ease), box-shadow .3s var(--ease); isolation: isolate; } .action-principale::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s var(--ease); } .action-principale:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(43, 89, 245, .3), 0 20px 40px -16px rgba(43, 89, 245, .8), inset 0 1px 0 rgba(255, 255, 255, .2); } .action-principale:hover::after { transform: translateX(100%); } .action-principale--pro { background: linear-gradient(135deg, #0E1726 0%, #1F2E4A 100%); box-shadow: 0 1px 2px rgba(14, 23, 38, .3), 0 14px 30px -14px rgba(14, 23, 38, .6), inset 0 1px 0 rgba(255, 255, 255, .1); } .action-principale--pro:hover { box-shadow: 0 1px 2px rgba(14, 23, 38, .3), 0 20px 40px -16px rgba(14, 23, 38, .7), inset 0 1px 0 rgba(255, 255, 255, .1); } .action-principale__ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); display: grid; place-items: center; flex: none; } .action-principale__ico svg { width: 22px; height: 22px; } .action-principale strong { display: block; font-size: 1.12rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; } .action-principale small { display: block; font-size: .875rem; opacity: .82; margin-top: .15rem; } .action-principale__fleche { margin-left: auto; width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease); } .action-principale:hover .action-principale__fleche { transform: translateX(3px); } .raccourcis { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; } .raccourcis a { display: flex; align-items: center; gap: .6rem; padding: .65rem .5rem; border-radius: var(--r-s); color: var(--texte-2); text-decoration: none; font-weight: 500; font-size: .9375rem; line-height: 1.25; transition: background-color .2s, color .2s; letter-spacing: -.01em; } .raccourcis a:hover { background: var(--surface); color: var(--texte); } .raccourcis svg { width: 18px; height: 18px; flex: none; color: var(--bleu); } /* Carte du territoire */ .carte { position: relative; width: 100%; } .carte__cadre { position: relative; border-radius: 28px; background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre-3); overflow: hidden; } .carte svg { width: 100%; height: auto; aspect-ratio: 480 / 470; } .carte .mer { fill: url(#degradeMer); } .carte .terre { fill: #fff; } .carte .points { fill: url(#points); } .carte .relief { fill: none; stroke: #E6ECF3; stroke-width: 1; } .carte .cote { fill: none; stroke: #A8B9D1; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .carte .perimetre { fill: rgba(43, 89, 245, .05); stroke: var(--bleu); stroke-width: 1.2; stroke-dasharray: 3 5; stroke-opacity: .55; } .carte .lien { fill: none; stroke: var(--bleu); stroke-width: 1; stroke-opacity: .32; } .carte .noeud { fill: #fff; stroke: var(--bleu); stroke-width: 1.8; } .carte .noeud--hopital { fill: var(--aqua); stroke: #fff; stroke-width: 2.5; } .carte .noeud--mimosa { fill: var(--bleu); stroke: #fff; stroke-width: 3; } .carte .halo { fill: var(--bleu); opacity: 0; } .carte .signal { fill: var(--bleu); } .carte .lieu { font: 500 12px var(--f); fill: var(--gris); letter-spacing: -.01em; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; } .carte .lieu--mer { fill: #7C93B5; font-weight: 450; stroke: none; } .carte .lieu--fort { font: 600 14px var(--f); fill: var(--texte); } .carte .cadre { display: none; } .carte.anime .cote, .carte.anime .relief { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: tracer 1.8s var(--ease) forwards; } .carte.anime .relief { animation-duration: 2.4s; animation-delay: .2s; } .carte.anime .perimetre { opacity: 0; animation: apparaitre .8s ease 1.1s forwards; } .carte.anime .lien { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: tracer .9s var(--ease) forwards; animation-delay: calc(1.5s + var(--i) * 40ms); } .carte.anime .noeud { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: poindre .5s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(1.2s + var(--i) * 60ms); } .carte.anime .lieu { opacity: 0; animation: apparaitre .6s ease forwards; animation-delay: calc(1.7s + var(--i) * 70ms); } @keyframes tracer { to { stroke-dashoffset: 0; } } @keyframes apparaitre { to { opacity: 1; } } @keyframes poindre { to { transform: scale(1); } } .carte .halo.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 3.2s ease-out infinite; } @keyframes pulse { 0% { opacity: .3; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(2.8); } } /* Pastilles flottantes en verre */ .flottant { position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem; padding: .65rem .9rem .65rem .65rem; border-radius: var(--r-m); background: rgba(255, 255, 255, .8); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, .95); box-shadow: var(--ombre-3); font-size: .8rem; color: var(--gris); line-height: 1.3; } .flottant b { display: block; font-size: 1.05rem; color: var(--texte); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .flottant__ico { width: 34px; height: 34px; border-radius: 10px; background: var(--bleu-pale); color: var(--bleu); display: grid; place-items: center; flex: none; } .flottant__ico svg { width: 18px; height: 18px; } .flottant--a { left: -32px; top: 12%; } .flottant--b { right: -24px; bottom: 14%; } .js .flottant { opacity: 0; transform: translateY(10px); } .js .carte.pret .flottant { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .carte.pret .flottant--b { transition-delay: .15s; } .carte__legende { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin-top: 1rem; font-size: .8rem; color: var(--gris); } .carte__legende span { display: flex; align-items: center; gap: .45rem; } .carte__legende i { width: 10px; height: 10px; border-radius: 50%; border: 1.8px solid var(--bleu); background: #fff; flex: none; } .carte__legende i.h { background: var(--aqua); border-color: var(--aqua); } .carte__legende i.p { width: 16px; height: 0; border: 0; border-top: 1.5px dashed var(--bleu); border-radius: 0; } /* ========================================================================== Bandeau kiné de garde ========================================================================== */ .garde { padding: 0 0 1rem; } .garde__in { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.6rem; align-items: center; padding: 1rem 1.1rem 1rem 1.3rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-2); } .garde__pastille { display: inline-flex; align-items: center; gap: .5rem; font-weight: 550; color: #0B7A51; font-size: .8rem; padding: .35rem .75rem; border-radius: 999px; background: #E8F7F0; white-space: nowrap; } .garde__pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: battement 2s infinite; } @keyframes battement { 0% { box-shadow: 0 0 0 0 rgba(18, 161, 107, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(18, 161, 107, 0); } } .garde__titre { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.3; letter-spacing: -.015em; } .garde__infos { display: flex; flex-wrap: wrap; gap: .2rem 1rem; color: var(--gris); font-size: .9rem; margin-top: .15rem; } .garde__infos a { color: var(--bleu); font-weight: 550; text-decoration: none; font-variant-numeric: tabular-nums; } .garde__note { font-size: .8rem; color: var(--gris-clair); margin: .2rem 0 0; } /* ========================================================================== Sections ========================================================================== */ .section { padding: var(--section) 0; } .section--ecume { background: var(--surface); border-block: 1px solid var(--ligne); } .section--encre { background: var(--nuit); color: #fff; position: relative; overflow: hidden; isolation: isolate; } .section--encre::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 80% at 80% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 50%, #000, transparent 75%); } .section--encre::after { content: ""; position: absolute; z-index: -1; width: 700px; height: 500px; right: -150px; top: 10%; background: radial-gradient(closest-side, rgba(43, 89, 245, .35), transparent); filter: blur(30px); } .section__tete { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); flex-wrap: wrap; } .section__tete h2 { margin: 0; max-width: 18ch; } .section__tete p { margin: .8rem 0 0; color: var(--gris); max-width: 52ch; } /* ---------- Agenda ---------- */ .agenda { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; } .evt-une { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 440px; border-radius: var(--r-l); overflow: hidden; color: #fff; text-decoration: none; background: var(--nuit); isolation: isolate; box-shadow: var(--ombre-3); } .evt-une__visuel { position: absolute; inset: 0; z-index: -1; } .evt-une__visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 19, 38, 0) 25%, rgba(9, 19, 38, .9) 85%); } .evt-une__visuel .ph { height: 100%; border-radius: 0; place-items: start end; padding: 1.5rem; transition: transform 1s var(--ease); } .evt-une:hover .evt-une__visuel .ph { transform: scale(1.03); } .evt-une__date { margin: 1.25rem; align-self: start; justify-self: start; background: rgba(255, 255, 255, .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r-m); padding: .6rem .9rem .7rem; text-align: center; line-height: 1; } .evt-une__date b { display: block; font-size: 2rem; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .evt-une__date span { font-size: .8rem; font-weight: 500; opacity: .85; } .evt-une__corps { padding: 1.6rem; } .evt-une__corps h3 { font-size: var(--t-lg); color: #fff; margin-bottom: .5rem; max-width: 20ch; letter-spacing: -.03em; } .evt-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .9rem; opacity: .85; margin-bottom: 1.2rem; } .evt-meta span { display: inline-flex; align-items: center; gap: .4rem; } .evt-meta svg { width: 16px; height: 16px; } .evt-une .btn { pointer-events: none; } .evt-une .btn--primaire { --bg: #fff; --fg: var(--texte); } .evt-liste { display: flex; flex-direction: column; gap: 1rem; } .evt { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; padding: 1.1rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); text-decoration: none; color: var(--texte); box-shadow: var(--ombre-1); transition: border-color .2s, box-shadow .3s var(--ease), transform .3s var(--ease); flex: 1; } .evt:hover { border-color: var(--ligne-2); box-shadow: var(--ombre-2); transform: translateY(-2px); } .evt__date { border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--ligne); text-align: center; padding: .55rem .2rem; line-height: 1; } .evt__date b { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.04em; color: var(--texte); font-variant-numeric: tabular-nums; } .evt__date span { font-size: .75rem; font-weight: 500; color: var(--gris); } .evt h3 { font-size: 1.02rem; margin: .1rem 0 .2rem; } .evt .evt-meta { font-size: .84rem; color: var(--gris); margin: 0; opacity: 1; } .evt__type { display: inline-block; font-size: .75rem; font-weight: 550; padding: .15rem .5rem; border-radius: 6px; margin-bottom: .35rem; } .evt__type--cpts { background: var(--bleu-pale); color: var(--bleu-fonce); } .evt__type--ext { background: #EAF8FA; color: #127E8E; } .evt-une .evt__type--cpts { background: rgba(255, 255, 255, .16); color: #fff; } .agenda-complet { margin-top: 1rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); overflow: hidden; box-shadow: var(--ombre-1); } .agenda-complet summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; font-weight: 600; letter-spacing: -.015em; } .agenda-complet summary::-webkit-details-marker { display: none; } .agenda-complet summary small { display: block; font-weight: 400; font-size: .875rem; color: var(--gris); margin-top: .1rem; letter-spacing: 0; } .plus { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ligne-2); position: relative; flex: none; transition: background-color .2s, border-color .2s; } .plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--texte); transform: translate(-50%, -50%); transition: transform .35s var(--ease), background-color .2s; } .plus::after { transform: translate(-50%, -50%) rotate(90deg); } details[open] > summary .plus { background: var(--bleu); border-color: var(--bleu); } details[open] > summary .plus::before { background: #fff; } details[open] > summary .plus::after { transform: translate(-50%, -50%) rotate(0); background: #fff; } .agenda-complet__corps { padding: 0 1.4rem 1.4rem; } .emplacement { border: 1.5px dashed var(--ligne-2); border-radius: var(--r-m); min-height: 240px; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--gris); background: var(--surface); font-size: .9rem; } .emplacement strong { display: block; color: var(--texte); font-size: 1rem; margin-bottom: .3rem; font-weight: 600; } .emplacement code { font-size: .8rem; background: var(--fond); border: 1px solid var(--ligne); padding: .15rem .4rem; border-radius: 6px; } .integration iframe { width: 100%; border: 0; border-radius: var(--r-m); } /* ---------- Chiffres ---------- */ .chiffres { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .chiffres__intro h2 { color: #fff; } .chiffres__intro p { color: var(--nuit-texte); max-width: 40ch; } .chiffres__maj { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--nuit-texte); margin-top: .8rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); } .chiffres__maj::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3DD68C; box-shadow: 0 0 0 3px rgba(61, 214, 140, .2); } .compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-l); overflow: hidden; } .compteur { padding: 1.5rem 1.4rem; background: var(--nuit); } .compteur b { display: block; font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); line-height: 1; font-weight: 550; letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; } .compteur span { display: block; margin-top: .55rem; color: var(--nuit-texte); font-size: .9rem; line-height: 1.35; max-width: 20ch; } .compteurs-titre { grid-column: 1 / -1; font-size: .875rem; font-weight: 550; color: #fff; padding: 1.1rem 1.4rem; margin: 0; background: var(--nuit-2); } .compteurs-titre small { font-weight: 400; color: var(--nuit-texte); } .compteurs--cpts { grid-column: 1 / -1; border: 0; border-radius: 0; } .compteurs--cpts .compteur { background: linear-gradient(180deg, rgba(43, 89, 245, .14), rgba(43, 89, 245, .03)), var(--nuit); } .compteurs--cpts .compteur b { background: linear-gradient(120deg, #fff 20%, #9DB8FF 65%, #7FDCE9); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Missions ---------- */ .missions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); } .missions__intro { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } .missions__intro h2 { max-width: 12ch; } .missions__liste { display: flex; flex-direction: column; gap: .75rem; } .mission { border: 1px solid var(--ligne); border-radius: var(--r-l); background: var(--fond); box-shadow: var(--ombre-1); transition: border-color .25s, box-shadow .3s var(--ease); } .mission:hover { border-color: var(--ligne-2); } .mission[open] { box-shadow: var(--ombre-2); border-color: var(--ligne-2); } .mission summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr auto; gap: 1rem; align-items: center; padding: 1.2rem 1.3rem; } .mission summary::-webkit-details-marker { display: none; } .mission summary::before { content: ""; width: 44px; height: 44px; border-radius: 12px; background: var(--bleu-pale) var(--ico) center / 22px no-repeat; } .mission h3 { margin: 0; font-size: 1.1rem; } .mission summary p { margin: .2rem 0 0; color: var(--gris); font-size: .9375rem; line-height: 1.5; max-width: 54ch; } .mission__corps { padding: 0 1.3rem 1.4rem calc(1.3rem + 44px + 1rem); } .mission__corps ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1.5rem; } .mission__corps li { padding: .4rem 0 .4rem 1.6rem; position: relative; line-height: 1.45; font-size: .9375rem; color: var(--texte-2); } .mission__corps li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 16px; height: 16px; border-radius: 50%; background: var(--bleu-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B59F5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; } .missions__pdf { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; } .mission:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B59F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2h-2z'/%3E%3C/svg%3E"); } .mission:nth-child(2) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B59F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E"); } .mission:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B59F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); } .mission:nth-child(4) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B59F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .mission:nth-child(5) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B59F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } /* ---------- Définition + principes ---------- */ .definition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); align-items: start; } .definition blockquote { margin: 0; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.35; font-weight: 500; letter-spacing: -.025em; color: var(--texte); padding-left: 1.5rem; border-left: 2px solid var(--bleu); } .definition blockquote footer { font-size: .875rem; font-weight: 400; color: var(--gris); margin-top: 1rem; letter-spacing: 0; } .mots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .mot { padding: 1.5rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-1); position: relative; overflow: hidden; } .mot b { display: block; font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: .5rem; } .mot p { color: var(--gris); font-size: .9375rem; margin: 0; line-height: 1.5; } /* ---------- Équipe ---------- */ .equipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .membre { display: flex; flex-direction: column; padding: .5rem .5rem 1.4rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-1); } .membre .ph { aspect-ratio: 5 / 4; border-radius: 18px; margin-bottom: 1.1rem; } .membre h3, .membre p { padding-inline: .9rem; } .membre h3 { font-size: 1.1rem; margin-bottom: .15rem; } .membre__role { color: var(--bleu); font-weight: 500; font-size: .875rem; margin-bottom: .6rem; } .membre p:last-child { color: var(--gris); font-size: .9375rem; margin: 0; line-height: 1.5; } /* ---------- Actualités ---------- */ .actus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .actu { text-decoration: none; color: var(--texte); display: flex; flex-direction: column; padding: .5rem .5rem 1.3rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-1); transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .actu:hover { box-shadow: var(--ombre-2); transform: translateY(-3px); } .actu .ph { aspect-ratio: 16 / 10; border-radius: 18px; margin-bottom: 1rem; } .actu time, .actu h3 { padding-inline: .8rem; } .actu time { font-size: .8rem; color: var(--gris); font-weight: 500; } .actu h3 { font-size: 1.02rem; line-height: 1.35; margin: .3rem 0 0; } /* ---------- Appel adhésion ---------- */ .rejoindre { position: relative; overflow: hidden; border-radius: 28px; background: var(--nuit); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; isolation: isolate; } .rejoindre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 400px at 100% 0%, rgba(43, 89, 245, .45), transparent 70%), radial-gradient(500px 360px at 0% 120%, rgba(57, 194, 215, .22), transparent 70%); } .rejoindre::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(90deg, transparent 20%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000); } .rejoindre h2 { color: #fff; max-width: 15ch; } .rejoindre p { color: var(--nuit-texte); max-width: 46ch; } .rejoindre__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; } .rejoindre .btn--primaire { --bg: #fff; --fg: var(--texte); } .rejoindre .btn--primaire:hover { --bg: var(--bleu-pale); } .rejoindre .btn--ligne { --bg: rgba(255, 255, 255, .06); --fg: #fff; --bd: rgba(255, 255, 255, .2); box-shadow: none; } .rejoindre .btn--ligne:hover { --bd: rgba(255, 255, 255, .5); } .rejoindre__liste { list-style: none; padding: 1.4rem; margin: 0; display: flex; flex-direction: column; gap: .9rem; border-radius: var(--r-l); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); } .rejoindre__liste li { display: grid; grid-template-columns: 22px 1fr; gap: .75rem; color: #DCE4F0; line-height: 1.45; font-size: .9375rem; } .rejoindre__liste svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(43, 89, 245, .45); color: #fff; margin-top: .1rem; } .rejoindre__motif { display: none; } /* ---------- Placeholders d'images ---------- */ .ph { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #EEF2F8, #E2E9F3); color: var(--gris); text-align: center; font-size: .8rem; border-radius: var(--r-m); } .ph::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(14, 23, 38, .09) 1px, transparent 1px); background-size: 14px 14px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); } .ph span { position: relative; padding: .35rem .75rem; background: rgba(255, 255, 255, .85); border: 1px solid var(--ligne); border-radius: 999px; font-weight: 500; } .ph--sombre { background: radial-gradient(500px 300px at 80% 0%, rgba(43, 89, 245, .5), transparent), linear-gradient(160deg, #1A2B4A, #091326); color: #C6D2E4; } .ph--sombre::before { background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); } .ph--sombre span { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .15); color: #fff; } .ph--initiales span { background: none; border: 0; font-size: 2.6rem; font-weight: 600; letter-spacing: -.05em; color: #A5B4CA; padding: 0; } /* ========================================================================== Pied de page ========================================================================== */ .pied { background: var(--surface); border-top: 1px solid var(--ligne); color: var(--gris); padding: clamp(3.5rem, 7vw, 5rem) 0 2rem; font-size: .9375rem; } .pied a { color: var(--texte-2); text-decoration: none; transition: color .2s; } .pied a:hover { color: var(--bleu); } .lettre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: center; padding: 2rem; margin-bottom: 3.5rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-2); } .lettre h2 { font-size: var(--t-lg); margin: 0 0 .3rem; } .lettre p { margin: 0; } .lettre form { display: flex; flex-direction: column; gap: .7rem; } .lettre__champ { display: flex; gap: .4rem; background: var(--surface); border: 1px solid var(--ligne-2); border-radius: 999px; padding: .3rem .3rem .3rem 1.1rem; transition: border-color .2s, box-shadow .2s; } .lettre__champ:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 4px var(--bleu-pale); } .lettre__champ input { flex: 1; min-width: 0; background: none; border: 0; color: var(--texte); font: inherit; outline: none; } .lettre__champ input::placeholder { color: var(--gris-clair); } .lettre__accord { display: flex; gap: .6rem; align-items: start; font-size: .8rem; line-height: 1.45; } .lettre__accord input { margin-top: .15rem; accent-color: var(--bleu); width: 16px; height: 16px; flex: none; } .pied__grille { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; } .pied h3 { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 1rem; color: var(--texte); } .pied ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; } .pied .marque { margin-bottom: 1rem; } .marque--pied { display: inline-block; margin-bottom: 1.4rem !important; } .marque--pied .marque__logo { display: block; height: 72px; width: auto; max-width: 240px; object-fit: contain; } .pied__contact a { display: inline-flex; align-items: center; gap: .5rem; } .pied__contact svg { width: 16px; height: 16px; color: var(--bleu); } .pied__contact li.petit { font-size: .84rem; margin-top: .3rem; } .reseaux { display: flex; gap: .5rem; margin-top: 1.2rem; } .reseaux a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--ligne-2); background: var(--fond); transition: border-color .2s, color .2s; } .reseaux a:hover { border-color: var(--bleu); } .reseaux svg { width: 16px; height: 16px; } .partenaires { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ligne); } .partenaires p { margin: 0; font-size: .8rem; } .partenaires__logos { display: flex; flex-wrap: wrap; gap: .7rem; } .partenaires__logos .ph { width: 116px; height: 44px; font-size: .72rem; background: var(--fond); border: 1px solid var(--ligne); } .partenaires__logos .ph::before { display: none; } .partenaires__logos .ph span { background: none; border: 0; } .pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2rem; font-size: .8rem; color: var(--gris-clair); } /* ========================================================================== Page intérieure ========================================================================== */ .page-tete { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--ligne); } .page-tete::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--ligne) 1px, transparent 1px), linear-gradient(90deg, var(--ligne) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 60% 90% at 85% 20%, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 20%, #000, transparent 70%); opacity: .7; } .page-tete::after { content: ""; position: absolute; z-index: -1; width: 700px; height: 500px; right: -200px; top: -200px; background: radial-gradient(closest-side, rgba(57, 194, 215, .16), transparent 70%), radial-gradient(closest-side at 30% 70%, rgba(43, 89, 245, .14), transparent); filter: blur(20px); } .fil { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.8rem; font-size: .84rem; color: var(--gris); } .fil li + li::before { content: "/"; margin-right: .5rem; color: var(--ligne-2); } .fil a { color: var(--gris); text-decoration: none; } .fil a:hover { color: var(--texte); } .page-tete__grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; } .page-tete h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); max-width: 15ch; } .porteurs { background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--r-l); padding: 1.4rem; border: 1px solid var(--ligne); box-shadow: var(--ombre-2); font-size: .9375rem; } .porteurs strong { display: block; font-size: 1rem; font-weight: 600; margin-bottom: .3rem; } .porteurs p { margin: 0 0 1rem; color: var(--gris); line-height: 1.5; } .porteurs__logos { display: flex; gap: .5rem; flex-wrap: wrap; } .porteurs__logos .ph { width: 92px; height: 40px; font-size: .7rem; background: var(--surface); border: 1px solid var(--ligne); } .porteurs__logos .ph::before { display: none; } .porteurs__logos .ph span { background: none; border: 0; } .etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: etape; } .etape { counter-increment: etape; position: relative; padding: 1.4rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-1); } .etape::before { content: counter(etape); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bleu-pale); color: var(--bleu); font-size: .85rem; font-weight: 600; margin-bottom: 1.3rem; } .etape::after { content: ""; position: absolute; top: calc(1.4rem + 15px); left: calc(1.4rem + 42px); right: 1.4rem; height: 1px; background: linear-gradient(90deg, var(--bleu-pale-2), transparent); } .etape h3 { font-size: 1.02rem; margin-bottom: .35rem; } .etape p { color: var(--gris); font-size: .9375rem; margin: 0; line-height: 1.5; } .projet { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .projet__visuels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .projet__visuels .ph:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: var(--r-l); } .projet__visuels .ph { aspect-ratio: 1; border-radius: var(--r-l); } .soignants { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.2rem 0 0; } .soignants li { padding: .4rem .85rem; border-radius: 999px; background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-1); color: var(--texte-2); font-weight: 500; font-size: .875rem; } /* ---------- Formulaire en étapes ---------- */ .formulaire { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .formulaire__aside { position: sticky; top: calc(var(--header-h) + 2rem); } .progression { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; } .progression li { display: flex; align-items: center; gap: .85rem; padding: .55rem 0; color: var(--gris-clair); font-weight: 500; font-size: .9375rem; transition: color .3s; position: relative; } .progression li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ligne-2); background: var(--fond); transition: all .3s var(--ease); flex: none; position: relative; z-index: 1; } .progression li + li::after { content: ""; position: absolute; left: 5.5px; bottom: calc(50% + 7px); height: calc(100% - 14px); width: 1px; background: var(--ligne-2); } .progression li.actif { color: var(--texte); } .progression li.actif::before { border-color: var(--bleu); background: var(--bleu); box-shadow: 0 0 0 4px var(--bleu-pale); } .progression li.fait { color: var(--texte-2); } .progression li.fait::before { border-color: var(--bleu); background: var(--bleu); } .carte-form { background: var(--fond); border: 1px solid var(--ligne); border-radius: 28px; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--ombre-3); } .etape-form[hidden] { display: none; } .etape-form.entre { animation: entrer .45s var(--ease) both; } .etape-form h3 { font-size: var(--t-lg); margin-bottom: .3rem; letter-spacing: -.03em; } .etape-form > p { color: var(--gris); margin-bottom: 1.6rem; } fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .question { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--ligne); } .question:last-of-type { border-bottom: 1px solid var(--ligne); } .question legend { float: left; padding: 0; font-weight: 500; font-size: 1rem; line-height: 1.4; letter-spacing: -.01em; } .ouinon { display: inline-flex; background: var(--surface); border: 1px solid var(--ligne); border-radius: 999px; padding: 3px; gap: 2px; } .ouinon label { position: relative; cursor: pointer; } .ouinon input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .ouinon span { display: block; padding: .45rem 1.05rem; border-radius: 999px; font-weight: 550; font-size: .9rem; color: var(--gris); transition: background-color .25s, color .25s, box-shadow .25s; } .ouinon input:checked + span { background: var(--fond); color: var(--texte); box-shadow: var(--ombre-2); } .ouinon input[value="Oui" i]:checked + span { background: var(--bleu); color: #fff; } .ouinon input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px; } .verdict { margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--ligne); display: grid; grid-template-columns: 32px 1fr; gap: .8rem; align-items: start; transition: background-color .3s, border-color .3s; } .verdict svg { width: 22px; height: 22px; color: var(--gris); margin-top: .1rem; } .verdict strong { display: block; font-weight: 600; margin-bottom: .1rem; letter-spacing: -.01em; } .verdict p { margin: 0; color: var(--gris); font-size: .9rem; } .verdict.ok { background: var(--bleu-pale); border-color: var(--bleu-pale-2); } .verdict.ok svg { color: var(--bleu); } .champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; } .champ { display: flex; flex-direction: column; gap: .4rem; } .champ--plein { grid-column: 1 / -1; } .champ label { font-weight: 500; font-size: .9rem; color: var(--texte-2); } .champ label i { font-style: normal; color: var(--gris-clair); font-weight: 400; } .champ input, .champ select, .champ textarea { font: inherit; font-size: 1rem; color: var(--texte); height: 48px; padding: 0 .95rem; border-radius: var(--r-s); border: 1px solid var(--ligne-2); background: var(--fond); box-shadow: var(--ombre-1); transition: border-color .2s, box-shadow .2s; width: 100%; } .champ textarea { height: auto; min-height: 110px; padding: .8rem .95rem; resize: vertical; } .champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--gris-clair); } .champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px var(--bleu-pale); } .consentement { display: flex; gap: .75rem; align-items: start; padding: 1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--ligne); margin-top: 1.3rem; font-size: .9rem; line-height: 1.5; color: var(--texte-2); cursor: pointer; } .consentement input { width: 18px; height: 18px; accent-color: var(--bleu); margin-top: .15rem; flex: none; } .form-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; flex-wrap: wrap; } .btn-retour { background: none; border: 0; font: 500 .9375rem var(--f); color: var(--gris); cursor: pointer; padding: .5rem 0; display: inline-flex; align-items: center; gap: .4rem; } .btn-retour:hover { color: var(--texte); } .btn-retour svg { width: 16px; height: 16px; } .mentions-form { font-size: .8rem; color: var(--gris); margin-top: 1.4rem; line-height: 1.5; } .merci { text-align: center; padding: 2rem 0; } .merci__ico { width: 72px; height: 72px; margin: 0 auto 1.4rem; border-radius: 50%; background: var(--bleu-pale); display: grid; place-items: center; color: var(--bleu); box-shadow: 0 0 0 10px rgba(43, 89, 245, .05); } .merci__ico svg { width: 32px; height: 32px; } .merci__ico path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tracer .6s .2s var(--ease) forwards; } /* ---------- Apparition au défilement ---------- */ .js .revele { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); } .js .revele.vu { opacity: 1; transform: none; filter: none; } /* ========================================================================== Éléments propres au thème WordPress ========================================================================== */ /* ---------- Bandeau d'alerte ---------- */ .alerte { background: var(--texte); color: #fff; font-size: .9rem; } .alerte__in { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; } .alerte svg { width: 18px; height: 18px; flex: none; color: #FFB547; } .alerte p { margin: 0; } .alerte a { color: #fff; font-weight: 600; margin-left: .4rem; } /* ---------- Logo personnalisé ---------- */ .marque--logo img { height: 48px; width: auto; display: block; } .marque--logo a { display: block; } .nav__lien.est-actif { color: var(--texte); background: var(--surface); } /* ---------- États vides ---------- */ .vide { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: 1.5rem; border-radius: var(--r-l); background: var(--fond); border: 1px dashed var(--ligne-2); } .vide__ico { width: 48px; height: 48px; border-radius: 14px; background: var(--bleu-pale); color: var(--bleu); display: grid; place-items: center; } .vide__ico svg { width: 22px; height: 22px; } .vide h3 { font-size: 1.05rem; margin: 0 0 .2rem; } .vide p { margin: 0; color: var(--gris); font-size: .9375rem; } /* ---------- Agenda (variantes) ---------- */ .agenda--seul { grid-template-columns: 1fr; } .agenda--seul .evt-une { min-height: 380px; } .agenda-complet--ouvert { margin-top: 2rem; padding: 1.4rem 0 0; } .agenda-complet--ouvert .agenda-complet__corps { padding: 0 1.4rem 1.4rem; } .evt-une__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .evt-une:hover .evt-une__visuel img { transform: scale(1.03); } .evt-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .evt-grille .evt { opacity: .8; } .section__tete--petit { margin: clamp(3rem, 6vw, 4.5rem) 0 1.4rem; } .section__tete--petit h2 { font-size: var(--t-xl); } /* Fiche événement */ .evt-fiche { background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 1.4rem; box-shadow: var(--ombre-2); display: flex; flex-direction: column; gap: 1rem; } .evt-fiche__date { display: flex; align-items: baseline; gap: .6rem; } .evt-fiche__date b { font-size: 3rem; font-weight: 600; letter-spacing: -.05em; line-height: 1; } .evt-fiche__date span { color: var(--gris); font-weight: 500; } .evt-fiche ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; color: var(--texte-2); } .evt-fiche li { display: flex; gap: .6rem; align-items: start; } .evt-fiche li svg { width: 18px; height: 18px; color: var(--bleu); flex: none; margin-top: .2rem; } .evt-fiche__passe { margin: 0; padding: .6rem .9rem; border-radius: var(--r-s); background: var(--surface); color: var(--gris); font-size: .9rem; } .page-tete .evt__type { margin-top: .5rem; } /* ---------- Page intérieure : contenus ---------- */ .section--page { padding: clamp(2.5rem, 5vw, 4rem) 0 var(--section); } .page-tete--aside .page-tete__grille { align-items: end; } .page-tete .lede { margin-bottom: 1.5rem; } .page-tete .lien-fort { margin-top: .5rem; } .porteurs__pied { font-size: .85rem; margin: 0 !important; color: var(--bleu) !important; font-weight: 500; } .contenu { max-width: 780px; margin-inline: auto; font-size: 1.0625rem; color: var(--texte-2); } .contenu--large { max-width: none; } .contenu > * + * { margin-top: 1.2em; } .contenu :where(h2) { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); margin: 2.2em 0 .6em; color: var(--texte); } .contenu :where(h3) { font-size: 1.3rem; margin: 1.8em 0 .5em; color: var(--texte); } .contenu :where(h4) { font-size: 1.1rem; margin: 1.5em 0 .4em; color: var(--texte); } .contenu > :first-child { margin-top: 0; } .contenu :where(p, li) { line-height: 1.7; } .contenu :where(ul, ol):not([class]) , .contenu :where(.wp-block-list) { padding-left: 1.3em; } .contenu :where(li) + li { margin-top: .35em; } .contenu :where(a):not([class]) { color: var(--bleu); text-decoration: underline; text-decoration-color: var(--bleu-pale-2); text-underline-offset: .2em; transition: text-decoration-color .2s; } .contenu :where(a):not([class]):hover { text-decoration-color: var(--bleu); } .contenu :where(strong, b) { color: var(--texte); font-weight: 600; } .contenu :where(img) { border-radius: var(--r-m); } .contenu :where(hr) { border: 0; border-top: 1px solid var(--ligne); margin: 2.5em 0; } .contenu :where(blockquote) { margin: 1.5em 0; padding: .2em 0 .2em 1.3em; border-left: 2px solid var(--bleu); font-size: 1.15rem; color: var(--texte); } .contenu :where(table) { width: 100%; border-collapse: collapse; font-size: .9375rem; } .contenu :where(th, td) { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--ligne); vertical-align: top; } .contenu :where(th) { color: var(--texte); font-weight: 600; background: var(--surface); } .contenu :where(iframe) { width: 100%; border: 0; border-radius: var(--r-m); } .contenu :where(figure) { margin: 0; } .contenu :where(figcaption) { font-size: .85rem; color: var(--gris); margin-top: .5rem; } /* Blocs WordPress */ .wp-block-columns { display: flex; gap: clamp(1rem, 3vw, 2rem); margin: 1.5em 0; flex-wrap: wrap; } .wp-block-column { flex: 1 1 0; min-width: 220px; } .wp-block-column > :first-child { margin-top: 0; } .wp-block-columns:has(> .wp-block-column:nth-child(4)) .wp-block-column { flex-basis: calc(25% - 2rem); min-width: 180px; } .wp-block-image img { height: auto; max-width: 100%; } .wp-block-image.aligncenter, .aligncenter { margin-inline: auto; text-align: center; } .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4em 0; } .wp-block-button__link, .wp-element-button, .contenu input[type="submit"], .contenu button[type="submit"]:not(.btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .6rem 1.25rem; border-radius: 999px; background: var(--bleu); color: #fff !important; font: 550 .9375rem/1.2 var(--f); text-decoration: none !important; border: 1px solid transparent; cursor: pointer; box-shadow: 0 1px 2px rgba(43, 89, 245, .3), inset 0 1px 0 rgba(255, 255, 255, .18); transition: background-color .2s, transform .25s var(--ease); } .wp-block-button__link:hover, .wp-element-button:hover { background: var(--bleu-fonce); transform: translateY(-1px); } .is-style-outline .wp-block-button__link { background: var(--fond); color: var(--texte) !important; border-color: var(--ligne-2); box-shadow: var(--ombre-1); } .is-style-outline .wp-block-button__link:hover { background: var(--fond); border-color: var(--gris-clair); } .wp-block-separator { border: 0; border-top: 1px solid var(--ligne); } .alignwide { max-width: var(--w); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Galerie de documents (page Documentation) */ .galerie-docs .wp-block-column { flex: 1 1 200px; max-width: 280px; } .galerie-docs img { border: 1px solid var(--ligne); box-shadow: var(--ombre-2); transition: transform .3s var(--ease); } .galerie-docs a:hover img { transform: translateY(-3px); } /* Éléments convertis depuis Elementor */ .boite { display: flex; gap: 1rem; align-items: start; padding: 1.2rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-1); } .boite__ico { width: 44px; height: 44px; object-fit: contain; border-radius: 0 !important; flex: none; } .boite h3 { margin: 0 0 .3rem !important; font-size: 1.1rem; } .boite p { margin: 0; font-size: .9375rem; color: var(--gris); } .appel { position: relative; overflow: hidden; border-radius: var(--r-l); padding: 1.6rem; min-height: 180px; display: flex; flex-direction: column; justify-content: end; gap: .6rem; color: #fff; background: linear-gradient(180deg, rgba(9, 19, 38, .1), rgba(9, 19, 38, .85)), var(--fond, var(--nuit)) center / cover; } .appel h3 { color: #fff !important; margin: 0 !important; } .appel p { color: #DCE4F0; margin: 0; } .appel .wp-block-button__link { align-self: start; background: #fff; color: var(--texte) !important; } .chiffre { display: inline-flex; flex-direction: column; padding: 1rem 1.2rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--ligne); margin: .3rem; } .chiffre b { font-size: 2rem; font-weight: 600; letter-spacing: -.04em; color: var(--texte); } .chiffre span { color: var(--gris); font-size: .9rem; } .logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1.2rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); } .logos img { height: 56px; width: auto; object-fit: contain; border-radius: 0 !important; filter: grayscale(.2); } .pdf iframe { width: 100%; height: min(80vh, 900px); border: 1px solid var(--ligne); border-radius: var(--r-m); background: var(--surface); } details.accordeon { border: 1px solid var(--ligne); border-radius: var(--r-m); background: var(--fond); margin: .6rem 0; box-shadow: var(--ombre-1); } details.accordeon summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; color: var(--texte); list-style: none; display: flex; justify-content: space-between; gap: 1rem; } details.accordeon summary::-webkit-details-marker { display: none; } details.accordeon summary::after { content: "+"; font-weight: 400; color: var(--gris); font-size: 1.3rem; line-height: 1; } details.accordeon[open] summary::after { content: "−"; } details.accordeon > div { padding: 0 1.2rem 1.2rem; } .avis { padding: .9rem 1.1rem; border-radius: var(--r-s); background: #FFF6E5; border: 1px solid #FFE1A8; color: #7A4B00; font-size: .9rem; } /* Sections pleine largeur insérées par code court dans une page */ .pleine { margin: clamp(2.5rem, 5vw, 4rem) 0; } .pleine--bord { margin-inline: calc(50% - 50vw); } .contenu .missions__liste { margin: 1.5em 0; } .contenu .mission h3 { margin: 0; } .contenu .rejoindre h2 { margin-top: 0; color: #fff; } .contenu .rejoindre p { color: var(--nuit-texte); } .contenu .chiffres__intro h2 { margin-top: 0; color: #fff; } /* Qui sommes-nous */ .personnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 1.4em 0 2.5em; } .personne { display: flex; flex-direction: column; padding: .5rem .5rem 1.2rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-1); } .personne img, .personne__init { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px !important; margin-bottom: 1rem; background: linear-gradient(135deg, #EEF2F8, #E2E9F3); } .personne__init { display: grid; place-items: center; font-size: 2.4rem; font-weight: 600; letter-spacing: -.05em; color: #A5B4CA; } .personne b, .personne > span:not(.personne__init), .personne small { padding-inline: .7rem; } .personne b { font-size: 1.02rem; color: var(--texte); letter-spacing: -.015em; } .personne > span:not(.personne__init) { color: var(--bleu); font-size: .875rem; font-weight: 500; margin-top: .15rem; } .personne small { color: var(--gris); font-size: .84rem; line-height: 1.45; margin-top: .3rem; } .personnes--equipe { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .ca { list-style: none; padding: 0 !important; margin: 1.2em 0 2.5em; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; } .ca li { margin: 0 !important; display: flex; flex-direction: column; padding: .85rem 1rem; border-radius: var(--r-m); background: var(--fond); border: 1px solid var(--ligne); line-height: 1.4 !important; } .ca b { font-size: .95rem; color: var(--texte); font-weight: 600; } .ca span { font-size: .84rem; color: var(--gris); } /* Outils intégrés */ .outil { max-width: 1040px; margin-inline: auto; } .integration { border-radius: var(--r-l); } .integration iframe { display: block; width: 100%; border: 0; border-radius: var(--r-l); } .outil > .integration { background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-2); padding: clamp(.5rem, 2vw, 1rem); } /* ---------- Articles ---------- */ .actu__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; margin-bottom: 1rem; display: block; } div.actu__img { display: grid; place-items: center; color: #A5B4CA; } div.actu__img svg { width: 34px; height: 34px; position: relative; } .actu__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-inline: .8rem; font-size: .8rem; color: var(--gris); font-weight: 500; } .actu__meta time { padding: 0; } .actu__cat { padding: .1rem .5rem; border-radius: 6px; background: var(--bleu-pale); color: var(--bleu-fonce); } .actus--liste { grid-template-columns: repeat(3, 1fr); } .actus--liste .actu:not(:has(.actu__img)) { padding: 1.3rem .5rem; } .article__meta { color: var(--gris); font-size: .9rem; margin: 0; } .article__une { margin: 0 0 2rem !important; } .article__une img { width: 100%; border-radius: var(--r-l); } .article__nav { max-width: 780px; margin: 3.5rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .article__voisin { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: var(--r-l); border: 1px solid var(--ligne); background: var(--fond); text-decoration: none; color: var(--texte); font-weight: 550; line-height: 1.35; box-shadow: var(--ombre-1); transition: box-shadow .3s var(--ease); } .article__voisin:hover { box-shadow: var(--ombre-2); } .article__voisin small { color: var(--gris); font-weight: 450; font-size: .8rem; } .article__voisin--suiv { text-align: right; grid-column: 2; } .pagination, .navigation.pagination { margin-top: 3rem; } .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; } .page-numbers { min-width: 42px; height: 42px; padding: 0 .9rem; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--ligne-2); background: var(--fond); color: var(--texte); text-decoration: none; font-weight: 500; font-size: .9375rem; } .page-numbers.current { background: var(--bleu); border-color: var(--bleu); color: #fff; } .page-numbers.dots { border: 0; background: none; } .liens-utiles { max-width: 780px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } .liens-utiles a { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; border-radius: var(--r-l); border: 1px solid var(--ligne); background: var(--fond); color: var(--texte); text-decoration: none; font-weight: 550; box-shadow: var(--ombre-1); transition: box-shadow .3s var(--ease); } .liens-utiles a:hover { box-shadow: var(--ombre-2); } .liens-utiles svg { width: 20px; height: 20px; color: var(--bleu); } /* ---------- Équipe (photo réelle) ---------- */ .membre__photo { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 18px; margin-bottom: 1.1rem; } /* ---------- Partenaires ---------- */ .partenaire { height: 52px; min-width: 110px; padding: 0 1rem; display: grid; place-items: center; border-radius: var(--r-s); background: var(--fond); border: 1px solid var(--ligne); color: var(--gris) !important; font-size: .78rem; font-weight: 500; } .partenaire img { max-height: 34px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; } .partenaire:hover img { filter: none; opacity: 1; } /* ---------- Moteur de formulaires ---------- */ .cpts-form { max-width: 780px; margin: 2rem auto; } .contenu .cpts-form { margin: 2rem 0; } .cpts-form__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cpts-form__progression { height: 4px; border-radius: 4px; background: var(--surface); overflow: hidden; margin-bottom: .8rem; } .cpts-form__progression span { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, var(--bleu), #4C8DFF); border-radius: 4px; transition: width .5s var(--ease); } .cpts-form__etape-num { font-size: .82rem; color: var(--gris); margin: 0 0 1.4rem; } .cpts-form__etape[hidden] { display: none; } .cpts-form__etape.entre { animation: entrer .45s var(--ease) both; } .choix legend { font-weight: 500; font-size: .95rem; color: var(--texte); margin-bottom: .6rem; line-height: 1.45; float: none; width: 100%; padding: 0; } .choix legend i, .champ label i { font-style: normal; color: var(--gris-clair); font-weight: 400; } .choix__liste { display: flex; flex-wrap: wrap; gap: .45rem; } .choix__item { position: relative; cursor: pointer; } .choix__item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .choix__item span { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--ligne-2); background: var(--fond); font-size: .9rem; color: var(--texte-2); line-height: 1.3; transition: all .2s; box-shadow: var(--ombre-1); } .choix__item span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ligne-2); flex: none; transition: all .2s; background: var(--fond); } .choix__item input[type="checkbox"] + span::before { border-radius: 4px; } .choix__item:hover span { border-color: var(--gris-clair); } .choix__item input:checked + span { border-color: var(--bleu); background: var(--bleu-pale); color: var(--texte); } .choix__item input:checked + span::before { border-color: var(--bleu); background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; } .choix__item input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px; } .champ.est-invalide input, .champ.est-invalide select, .champ.est-invalide textarea { border-color: #E5484D; box-shadow: 0 0 0 4px #FDECEC; } .choix.est-invalide legend, .consentement.est-invalide { color: #C62D32; } .cpts-form__message { margin: 1rem 0 0; font-size: .9375rem; min-height: 1px; } .cpts-form__message.ok { padding: .9rem 1.1rem; border-radius: var(--r-m); background: #E8F7F0; color: #0B6B47; border: 1px solid #C5EBDA; } .cpts-form__message.erreur { padding: .9rem 1.1rem; border-radius: var(--r-m); background: #FDECEC; color: #A3262A; border: 1px solid #F8CFD0; } .cpts-form.envoi button[type="submit"], form.envoi button[type="submit"] { opacity: .6; pointer-events: none; } .cpts-form.fini .cpts-form__etape, .cpts-form.fini .cpts-form__progression, .cpts-form.fini .cpts-form__etape-num { display: none; } .lettre .cpts-form__message { margin: 0; font-size: .85rem; } .lettre form.fini .lettre__champ, .lettre form.fini .lettre__accord { display: none; } /* Champs génériques (ARMember, Formidable, connexion WordPress) */ .contenu :where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="date"], select, textarea) { font: inherit; font-size: 1rem; color: var(--texte); min-height: 48px; padding: .6rem .95rem; border-radius: var(--r-s); border: 1px solid var(--ligne-2); background: var(--fond); box-shadow: var(--ombre-1); width: 100%; max-width: 100%; } .contenu :where(input, select, textarea):focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px var(--bleu-pale); } .contenu :where(label) { font-weight: 500; font-size: .9rem; color: var(--texte-2); } .connexion { max-width: 420px; padding: 1.6rem; border-radius: var(--r-l); background: var(--fond); border: 1px solid var(--ligne); box-shadow: var(--ombre-2); } .connexion p { margin: 0 0 1rem; } .connexion label { display: block; margin-bottom: .35rem; } .connexion .login-remember label { display: flex; gap: .5rem; align-items: center; } .connexion input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--bleu); } /* ARMember : voir assets/css/armember.css */ /* Formidable */ .contenu .frm_forms .frm_primary_label { font-weight: 500; color: var(--texte-2); } .contenu .frm_forms .frm_button_submit { background: var(--bleu) !important; border-radius: 999px !important; border: 0 !important; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1120px) { .nav, .entete__actions .btn, .entete__compte span { display: none; } .burger { display: block; } .entete__actions { margin-left: auto; } .burger { margin-left: 0; } .menu-ouvert .entete { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--fond); border-bottom-color: var(--ligne); } .menu-ouvert .nav { display: block; position: fixed; top: var(--nav-haut, var(--header-h)); left: 0; right: 0; bottom: 0; height: auto; max-height: none; z-index: 60; background: var(--fond); overflow-y: auto; overscroll-behavior: contain; padding: .5rem var(--gout) calc(2rem + env(safe-area-inset-bottom)); animation: entrer .35s var(--ease); } .menu-ouvert { overflow: hidden; } .nav__liste { flex-direction: column; align-items: stretch; gap: 0; } .nav__item { border-bottom: 1px solid var(--ligne); } .nav__lien { width: 100%; justify-content: space-between; padding: 1.1rem 0; font-size: 1.1rem; color: var(--texte); border-radius: 0; background: none !important; } .panneau, .nav__item.est-ouvert .panneau { position: static; width: auto; transform: none; box-shadow: none; border: 0; padding: 0 0 1rem; grid-template-columns: 1fr; display: none; opacity: 1; visibility: visible; background: none; backdrop-filter: none; } .nav__item.est-ouvert .panneau { display: grid; } .nav .nav__mobile-cta { display: flex !important; flex-direction: column; gap: .6rem; margin-top: 1.5rem; } } .nav__mobile-cta { display: none !important; } @media (max-width: 960px) { .heros__grille, .page-tete__grille, .agenda, .chiffres, .missions, .definition, .rejoindre, .lettre, .projet, .formulaire { grid-template-columns: 1fr; } .heros__carte { max-width: 540px; margin: 1rem auto 0; width: 100%; } .missions__intro, .formulaire__aside { position: static; } .garde__in { grid-template-columns: 1fr; gap: .7rem; } .garde__pastille { justify-self: start; } .equipe, .actus { grid-template-columns: 1fr 1fr; } .mots { grid-template-columns: 1fr 1fr; } .pied__grille { grid-template-columns: 1fr 1fr; } .etapes { grid-template-columns: 1fr 1fr; } .evt-une { min-height: 400px; } .flottant--a { left: 10px; } .actus--liste, .evt-grille { grid-template-columns: 1fr 1fr; } .vide { grid-template-columns: auto 1fr; } .vide .btn { grid-column: 1 / -1; justify-self: start; } .flottant--b { right: 10px; } } @media (max-width: 640px) { :root { --header-h: 64px; --t-base: 1rem; } .entete .marque__nom small { display: none; } .marque { min-width: 0; } .raccourcis { grid-template-columns: 1fr; } .compteurs { grid-template-columns: 1fr 1fr; } .compteurs--cpts { grid-template-columns: repeat(3, 1fr); } .compteurs--cpts .compteur { padding: 1.2rem 1rem; } .equipe, .actus, .mots, .etapes { grid-template-columns: 1fr; } .mission summary { grid-template-columns: 1fr auto; } .mission summary::before { display: none; } .mission__corps { padding-left: 1.3rem; } .mission__corps ul { grid-template-columns: 1fr; } .pied__grille { grid-template-columns: 1fr; } .champs { grid-template-columns: 1fr; } .question { grid-template-columns: 1fr; gap: .6rem; } .flottant { font-size: .72rem; padding: .45rem .65rem; } .flottant b { font-size: .92rem; } .flottant__ico { display: none; } .evt { grid-template-columns: 56px 1fr; } .actus--liste, .evt-grille, .liens-utiles, .article__nav { grid-template-columns: 1fr; } .article__voisin--suiv { grid-column: auto; text-align: left; } .wp-block-column { flex-basis: 100% !important; } .galerie-docs .wp-block-column { max-width: none; } .personnes { grid-template-columns: 1fr 1fr; } .lettre { padding: 1.4rem; } .lettre__champ { flex-direction: column; border-radius: var(--r-m); padding: .5rem; } .lettre__champ input { padding: .5rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .revele, .js .flottant { opacity: 1; transform: none; filter: none; } } /* Les éléments de grille ne doivent jamais déborder à cause d'une image large */ .actus > *, .equipe > *, .agenda > *, .evt-liste > *, .evt-grille > *, .personnes > *, .mots > *, .etapes > *, .chiffres > *, .missions > *, .projet > *, .formulaire > *, .heros__grille > *, .page-tete__grille > * { min-width: 0; } .actu__img, .membre__photo, .projet__visuels img { max-width: 100%; height: auto; } .projet__visuels img { width: 100%; border-radius: var(--r-l); object-fit: cover; aspect-ratio: 1; border: 1px solid var(--ligne); } .projet__visuels > a:first-child { grid-column: 1 / -1; } .projet__visuels > a:first-child img { aspect-ratio: 4 / 3; } .mission__corps li, .contenu .mission__corps li + li { margin: 0; } .contenu:not(.contenu--large) .pleine:not(.pleine--bord) { width: min(calc(100vw - 2 * var(--gout)), var(--w)); position: relative; left: 50%; transform: translateX(-50%); } .pleine--bord .section--encre { border-radius: 0; } .nav__lien, .entete__compte { white-space: nowrap; } @media (max-width: 1280px) and (min-width: 1121px) { .entete__compte span { display: none; } .nav__lien { padding-inline: .6rem; } } /* ---------- Thème clair imposé (les iframes, dont Ancora, ne passent plus en sombre) ---------- */ :root { color-scheme: light; } iframe { color-scheme: light; } .integration, .agenda-complet__corps { background: #fff; } .agenda-complet__corps.integration { padding: 1rem; border-top: 1px solid var(--ligne); } .agenda-complet--ouvert { background: #fff; padding: 0; overflow: hidden; } .agenda-complet--ouvert .agenda-complet__corps { padding: clamp(.5rem, 2vw, 1.25rem); border-top: 0; } .integration iframe { background: #fff; } /* ---------- LinkedIn ---------- */ .lien-fort__ico { width: 15px; height: 15px; color: #0A66C2; } .linkedin__posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; } .linkedin__posts--1 { grid-template-columns: minmax(0, 560px); } .linkedin__posts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .linkedin__post { min-width: 0; border-radius: var(--r-l); overflow: hidden; background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre-2); } .linkedin__post iframe { display: block; width: 100%; height: 620px; border: 0; } .linkedin__widget { min-height: 200px; } @media (max-width: 960px) { .linkedin__posts, .linkedin__posts--2 { grid-template-columns: 1fr; } .linkedin__post iframe { height: 560px; } } /* ---------- Lettre : un seul cadre, texte centré verticalement ---------- */ .lettre__champ { align-items: center; } .lettre__champ input, .lettre__champ input[type="email"] { -webkit-appearance: none; appearance: none; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 .2rem !important; height: 44px; min-height: 0 !important; line-height: 44px; font-size: 1rem; } .lettre__champ input:focus { box-shadow: none !important; } /* ---------- Agenda Ancora : sans cadre ---------- */ .agenda-complet--ouvert, .agenda-complet--ouvert .agenda-complet__corps, .agenda-complet__corps.integration { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; } .agenda-complet--ouvert { margin-top: 1.5rem; overflow: visible; } .agenda-complet__corps.integration { padding-top: .5rem !important; } .agenda-complet--ouvert iframe, .agenda-complet__corps.integration iframe { border-radius: 0 !important; background: transparent; } .agenda + .agenda-complet--ouvert, .vide + .agenda-complet--ouvert { margin-top: 2rem; } /* ---------- Conseil d'administration : photo facultative ---------- */ .ca li { flex-direction: row !important; align-items: center; gap: .75rem; } .ca__txt { display: flex; flex-direction: column; } .ca__photo { width: 40px; height: 40px; border-radius: 50% !important; object-fit: cover; flex: none; } /* ========================================================================== Espace adhérent : Ancora et avantages (au-dessus du panneau ARMember) ========================================================================== */ .adh { width: calc(min(var(--w), 100vw) - 2 * var(--gout)); margin: 0 0 clamp(1.5rem, 3vw, 2rem) 50%; translate: -50% 0; } .adh__salut { font-size: var(--t-md); line-height: 1.4; color: var(--texte-2); letter-spacing: -.01em; margin: 0 0 1.4rem; max-width: 60ch; } .adh__ancora { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: 28px; background: var(--nuit); color: var(--nuit-texte); box-shadow: var(--ombre-3); } .adh__ancora::before { content: ""; position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(57, 194, 215, .22), transparent 70%), radial-gradient(closest-side at 30% 70%, rgba(43, 89, 245, .35), transparent 70%); filter: blur(10px); pointer-events: none; } .adh__inclus { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem .3rem .5rem; border-radius: 999px; background: rgba(57, 194, 215, .14); color: #8FE3EE; font-size: var(--t-xs); font-weight: 550; } .adh__inclus svg { width: 15px; height: 15px; } .adh__ancora h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 620; margin: 1rem 0 .8rem; max-width: 20ch; } .adh__ancora p { margin: 0; line-height: 1.6; max-width: 58ch; } .adh__fonctions { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.4rem; } .adh__fonctions li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; } .adh__fonctions svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--aqua); } .adh__fonctions strong { color: #fff; font-weight: 600; } .adh__note { margin-top: 1.4rem !important; font-size: var(--t-xs); color: #7F8DA5; } .adh__ancora-acces { display: flex; flex-direction: column; gap: .75rem; justify-content: center; } .adh__acces-bloc { display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem 1.4rem; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(6px); } .adh__acces-bloc strong { color: #fff; font-weight: 600; font-size: 1rem; } .adh__acces-bloc > span { font-size: var(--t-sm); line-height: 1.5; margin-bottom: .7rem; } .adh__acces-bloc .btn { align-self: flex-start; } .btn--clair { --bg: rgba(255, 255, 255, .08); --fg: #fff; --bd: rgba(255, 255, 255, .22); } .btn--clair:hover { --bg: rgba(255, 255, 255, .14); --bd: rgba(255, 255, 255, .4); } .adh__avantages { list-style: none; padding: 0; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); } .adh__avantages li { display: flex; flex-direction: column; gap: .35rem; padding-top: 1.1rem; border-top: 1px solid var(--ligne-2); } .adh__avantages strong { color: var(--texte); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; } .adh__avantages li > span:last-child { color: var(--gris); font-size: var(--t-sm); line-height: 1.5; } .adh__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bleu-pale); color: var(--bleu); margin-bottom: .5rem; } .adh__ico svg { width: 18px; height: 18px; } .adh__agenda { margin: 1.4rem 0 0; } .adh__agenda a { display: inline-flex; align-items: center; gap: .4rem; color: var(--bleu); font-weight: 550; text-decoration: none; } .adh__agenda a:hover { text-decoration: underline; } .adh__agenda svg { width: 16px; height: 16px; } .adh__compte { margin: clamp(2.4rem, 5vw, 3.4rem) 0 0; padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--ligne); font-size: var(--t-lg); letter-spacing: -.03em; color: var(--texte); } @media (max-width: 900px) { .adh__ancora { grid-template-columns: 1fr; } .adh__avantages { grid-template-columns: 1fr; } } @media (max-width: 560px) { .adh__fonctions { grid-template-columns: 1fr; } .adh__acces-bloc .btn { align-self: stretch; } } .contenu .adh ul, .contenu .adh li { margin: 0; } .contenu .adh ul { padding: 0; } .contenu .adh .adh__avantages { margin-top: clamp(1.8rem, 4vw, 2.6rem); } .contenu .adh .adh__fonctions { margin-top: 1.5rem; } .contenu .adh a { text-decoration: none; } .contenu .adh .adh__agenda a:hover { text-decoration: underline; } .contenu .adh h2 { margin-bottom: 0; } .contenu .adh .adh__ancora h2 { margin: 1rem 0 .8rem; } .contenu .adh .adh__agenda a { display: inline; } .contenu .adh .adh__agenda svg { display: inline-block; vertical-align: -.15em; margin-left: .25rem; } /* ========================================================================== Page Adhérer : argumentaire à gauche, formulaire fixe à droite ========================================================================== */ .adhp { width: calc(min(var(--w), 100vw) - 2 * var(--gout)); margin-left: 50%; translate: -50% 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); grid-template-areas: "intro form" "argu form"; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .contenu > .adhp + * { margin-top: 2rem; } .adhp__intro { grid-area: intro; } .adhp__argu { grid-area: argu; } .adhp__form { grid-area: form; position: sticky; top: calc(var(--header-h) + 1.25rem); align-self: start; } .adhp__form-in { max-height: calc(100vh - var(--header-h) - 2.5rem); overflow-y: auto; overscroll-behavior: contain; border-radius: 28px; scrollbar-width: thin; } .admin-bar .adhp__form { top: calc(var(--header-h) + 32px + 1.25rem); } .admin-bar .adhp__form-in { max-height: calc(100vh - var(--header-h) - 32px - 2.5rem); } /* Le formulaire ARMember s'adapte à la colonne */ html body .adhp__form .arm_setup_form_container, html body .adhp__form [class*="arm_setup_form_"].arm-default-form, html body .adhp__form form.arm_membership_setup_form { width: 100% !important; max-width: none !important; margin: 0 !important; } html body .adhp__form form.arm_membership_setup_form { padding: 1.6rem !important; } html body .adhp__form .arm_module_plans_ul { grid-template-columns: 1fr !important; } html body .adhp__form .arm-df__fields-wrapper > .arm-df__form-group, html body .adhp__form .arm_field_col_2 { width: 100% !important; max-width: none !important; } .adhp__form-in > p { font-size: var(--t-xs); color: var(--gris); line-height: 1.5; margin: 1rem .5rem 0; } .adhp__form-in > p a { color: var(--texte-2); } /* Intro */ .contenu .adhp p, .contenu .adhp ul, .contenu .adhp ol, .contenu .adhp li, .contenu .adhp figure { margin: 0; } .contenu .adhp ul, .contenu .adhp ol { padding: 0; list-style: none; } .contenu .adhp a { text-decoration: none; } .adhp__accroche { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 620; color: var(--texte); max-width: 18ch; } .contenu .adhp .adhp__sous { margin-top: 1.1rem; font-size: var(--t-md); line-height: 1.5; color: var(--texte-2); max-width: 46ch; } .adhp__sous strong { color: var(--texte); font-weight: 600; } .contenu .adhp .adhp__faits { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; } .adhp__faits li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem .45rem .65rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--ligne); font-size: var(--t-xs); color: var(--texte-2); } .adhp__faits svg { width: 15px; height: 15px; color: var(--bleu); } /* Ancora */ .adhp__ancora { margin-top: clamp(3rem, 6vw, 4.5rem); } .contenu .adhp .adhp__ancora h2 { margin: 1rem 0 0; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem); line-height: 1.1; letter-spacing: -.035em; max-width: 20ch; } .contenu .adhp .adhp__lede { margin-top: .9rem; color: var(--texte-2); line-height: 1.6; max-width: 58ch; } .adhp .adh__inclus { background: var(--bleu-pale); color: var(--bleu); } .contenu .adhp .adhp__demos { display: flex; flex-direction: column; gap: clamp(2.2rem, 5vw, 3.2rem); margin-top: 2.2rem; } .adhp__demo figcaption { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.1rem; max-width: 56ch; } .adhp__demo figcaption strong { font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; color: var(--texte); } .adhp__demo figcaption span { color: var(--gris); line-height: 1.55; } /* Écran : fenêtre d'application sobre */ .adhp__ecran { position: relative; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--ligne); box-shadow: var(--ombre-3); aspect-ratio: 1016 / 800; } .adhp__ecran::before { content: ""; position: absolute; inset: 0 0 auto; height: 30px; z-index: 1; border-bottom: 1px solid var(--ligne); } .adhp__ecran::before { background: radial-gradient(circle at 18px 15px, #E3E8EF 4px, transparent 4.5px), radial-gradient(circle at 34px 15px, #E3E8EF 4px, transparent 4.5px), radial-gradient(circle at 50px 15px, #E3E8EF 4px, transparent 4.5px), #fff; } .adhp__ecran video { position: absolute; inset: 30px 0 0; width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: top center; display: block; } /* Téléphone */ .adhp__demo--mobile { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; } .adhp__demo--mobile figcaption { margin-top: 0; } .adhp__tel { border-radius: 34px; padding: 8px; background: var(--nuit); box-shadow: var(--ombre-3); } .adhp__tel video { display: block; width: 100%; height: auto; border-radius: 26px; background: var(--surface); } /* Avantages */ .adhp__plus { margin-top: clamp(3.5rem, 7vw, 5rem); padding-top: clamp(2rem, 4vw, 2.6rem); border-top: 1px solid var(--ligne); } .contenu .adhp .adhp__plus h2, .contenu .adhp .adhp__etapes h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -.035em; line-height: 1.15; } .contenu .adhp .adhp__avantages { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; margin-top: 1.8rem; } .adhp__avantages li { display: flex; gap: .9rem; align-items: flex-start; } .adhp__avantages .adh__ico { margin: 0; flex: none; } .adhp__avantages div { display: flex; flex-direction: column; gap: .2rem; } .adhp__avantages strong { color: var(--texte); font-weight: 600; } .adhp__avantages div span { color: var(--gris); font-size: var(--t-sm); line-height: 1.5; } .contenu .adhp .adh__agenda { margin-top: 1.6rem; } /* Étapes (vraie séquence : numérotée) */ .adhp__etapes { margin-top: clamp(3.5rem, 7vw, 5rem); padding-top: clamp(2rem, 4vw, 2.6rem); border-top: 1px solid var(--ligne); } .contenu .adhp .adhp__etapes ol { counter-reset: etape; display: grid; gap: 1.2rem; margin-top: 1.6rem; } .adhp__etapes li { counter-increment: etape; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .9rem; } .adhp__etapes li::before { content: counter(etape); grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; } .adhp__etapes li strong { color: var(--texte); font-weight: 600; align-self: end; } .adhp__etapes li span { color: var(--gris); font-size: var(--t-sm); line-height: 1.5; } @media (max-width: 1080px) { .adhp { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); } .contenu .adhp .adhp__avantages { grid-template-columns: 1fr; } } @media (max-width: 900px) { .adhp { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "argu"; row-gap: 2rem; } .adhp__form { position: static; } .adhp__form-in { max-height: none; overflow: visible; } .adhp__ancora { margin-top: 1rem; } } @media (max-width: 560px) { .adhp__demo--mobile { grid-template-columns: 1fr; } .adhp__tel { max-width: 220px; margin-inline: auto; } }