/* * ActiveD - composants des pages internes (préfixe pg-). Chargé après theme.css, patterns-a.css et patterns-b.css. * N'utilise que les jetons :root de theme.css. Mode d'emploi et balisage : notes/CATALOGUE-pages.md. * Réutilise sans les redéfinir : .section, .section-suite, .clair, .wrap, .tete, .kicker, .ph, .lien, .btn-bloc, .faq, .faq-liste. */ /* 1. Marges de flux : les groupes gèrent leur espacement par gap (le blockGap de WordPress est neutralisé). */ .wp-block-group:is(.pg-intro, .pg-intro-texte, .pg-texte, .pg-duo, .pg-grille, .pg-carte, .pg-exemples, .pg-etapes, .pg-etape, .pg-accroche, .pg-accroche-texte, .pg-liens, .pg-lien-carte, .pg-chiffres, .pg-chiffre) > * { margin-block: 0; } .wp-block-group.alignfull.pg-section { margin-block: 0; } .pg-section { position: relative; isolation: isolate; } .pg-section > .wrap > * + * { margin-block-start: var(--s-7); } .pg-section > .wrap > .tete + * { margin-block-start: 0; } /* 2. Sections : variantes de fond et de rythme */ .pg-section--serre { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); } .pg-section--abysse { background: linear-gradient(180deg, var(--abysse), var(--nuit) 85%); border-top: 1px solid var(--ligne); } .pg-section--filet { border-top: 1px solid var(--ligne); } .pg-section--halo::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; right: 0; width: min(70%, 760px); height: min(100%, 560px); background: radial-gradient(closest-side, rgba(23,152,213,.14), transparent), radial-gradient(40% 40% at 30% 70%, rgba(101,216,192,.07), transparent); } /* Titres de section des pages internes : plus petits que le H1 du bandeau (t-3xl). */ .pg-section .tete h2, .pg-intro h2, .pg-texte h2, .pg-accroche h2 { font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.6rem); line-height: 1.06; letter-spacing: -.015em; font-variation-settings: "wdth" 115; } .pg-section .tete h2 em, .pg-texte h2 em, .pg-accroche h2 em { font-style: normal; color: var(--menthe); } .tete.pg-tete--centre { margin-inline: auto; text-align: center; justify-items: center; } /* 3. Introduction : titre à gauche, texte à droite */ .pg-intro { display: grid; gap: var(--s-5) var(--s-8); } .pg-intro > .tete { margin: 0; align-content: start; } .pg-intro-texte, .pg-texte { display: grid; gap: var(--s-4); align-content: start; min-width: 0; } .pg-intro-texte p, .pg-texte > p:not(.kicker) { color: var(--doux); font-size: var(--t-m); line-height: 1.7; max-width: 64ch; } .pg-intro-texte > p:first-child { color: var(--texte); font-size: var(--t-l); line-height: 1.5; } :is(.pg-intro-texte, .pg-texte, .pg-carte, .pg-etape, .pg-lien-carte) strong { color: var(--texte); font-weight: 650; } .pg-texte > .wp-block-buttons { margin-top: var(--s-2); } @media (min-width: 960px) { .pg-intro { grid-template-columns: 5fr 7fr; } } /* 4. Duo texte + emplacement d'image (inversion : image à gauche en bureau) */ .pg-duo { display: grid; gap: var(--s-6); align-items: center; } .pg-duo > .ph { width: 100%; aspect-ratio: 4 / 3; } @media (min-width: 900px) { .pg-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); } .pg-duo--inverse > .ph { order: -1; } } /* Emplacements d'image : ratios et liseré */ .ph.pg-ph-16x9 { aspect-ratio: 16 / 9; } .ph.pg-ph-4x3 { aspect-ratio: 4 / 3; } .ph.pg-ph-1x1 { aspect-ratio: 1; } .ph.pg-ph-21x9 { aspect-ratio: 21 / 9; } :is(.pg-duo, .pg-carte, .pg-section > .wrap) > .ph { box-shadow: inset 0 0 0 1px var(--ligne); } /* 5. Grilles de cartes */ .pg-grille { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .pg-grille:is(.pg-grille--2, .pg-grille--3, .pg-grille--4) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 999.98px) { /* 3 colonnes repliées en 2 : la dernière carte orpheline prend toute la largeur. */ .pg-grille--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (min-width: 1000px) { .pg-grille.pg-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-grille.pg-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 6. Carte : icône, titre h3, texte, liste, lien poussé en bas */ .pg-carte { --pg-pad: clamp(1.4rem, 1rem + 1.1vw, 2rem); position: relative; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--pg-pad); background: linear-gradient(170deg, rgba(18,57,74,.7), rgba(12,45,59,.55) 60%), var(--nuit); border: 1px solid var(--ligne); border-radius: var(--r-l); overflow: hidden; } .pg-carte::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(101,216,192,.7), transparent); opacity: .3; } .pg-carte:hover { border-color: var(--ligne-forte); } .pg-carte:hover::before { opacity: 1; } .pg-carte h3 { font-size: var(--t-l); line-height: 1.15; font-variation-settings: "wdth" 112; } .pg-carte p { color: var(--doux); font-size: var(--t-s); line-height: 1.6; max-width: 62ch; } .pg-carte > .lien { margin-top: auto; } .pg-carte > .ph:first-child { max-width: none; margin: calc(-1 * var(--pg-pad)) calc(-1 * var(--pg-pad)) var(--s-2); border-radius: 0; aspect-ratio: 16 / 9; box-shadow: none; border-bottom: 1px solid var(--ligne); } .pg-carte--accent { border-color: rgba(101,216,192,.35); background: linear-gradient(160deg, #0F3A4C, var(--abysse) 60%); } .pg-carte--accent .pg-pic { background: var(--menthe); color: var(--nuit); box-shadow: none; } /* Pictogramme décoratif (bloc HTML : span.pg-pic > svg, aria-hidden) */ .pg-pic { flex: none; align-self: flex-start; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(101,216,192,.1); color: var(--menthe); box-shadow: inset 0 0 0 1px rgba(101,216,192,.22); } .pg-pic svg { width: 26px; height: 26px; display: block; } /* Mention discrète (ex. « Exemple de moteurs : ... ») */ .pg-carte p.pg-mention, .pg-mention { font-size: var(--t-xs); line-height: 1.5; color: var(--ciel); letter-spacing: .01em; } /* 7. Exemples d'usage : liste encadrée */ .pg-exemples { display: grid; gap: var(--s-3); padding: var(--s-4) clamp(.85rem, .5rem + 1vw, 1rem) var(--s-4) clamp(1rem, .6rem + 1vw, 1.5rem); border: 1px solid var(--ligne); border-left: 2px solid var(--menthe); border-radius: var(--r-s) var(--r-m) var(--r-m) var(--r-s); background: rgba(7,31,42,.55); } .pg-carte p.pg-etiquette, .pg-etiquette { font-size: var(--t-xs); font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--menthe); font-variation-settings: "wdth" 115; } /* 8. Listes : coches (pg-liste) et points (pg-liste--points) */ ul.pg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); } ul.pg-liste > li { position: relative; margin: 0; padding-left: 1.85em; color: var(--doux); font-size: var(--t-s); line-height: 1.55; max-width: 64ch; } ul.pg-liste > li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.25em; height: 1.25em; border-radius: 50%; background: rgba(101,216,192,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2365D8C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E") center / 70% no-repeat; } ul.pg-liste--points > li { padding-left: 1.25em; } ul.pg-liste--points > li::before { top: .6em; left: .2em; width: 6px; height: 6px; background: var(--menthe); } ul.pg-liste--larges > li { font-size: var(--t-m); } /* 9. Étapes numérotées (groupes .pg-etape, numéro généré) */ .pg-etapes { counter-reset: pg-etape; display: grid; gap: var(--s-6) var(--s-5); } .pg-etape { counter-increment: pg-etape; position: relative; display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--ligne-forte); } .pg-etape::before { content: counter(pg-etape, decimal-leading-zero); font-weight: 800; font-size: clamp(2rem, 1.5rem + 1.5vw, 2.8rem); line-height: 1; letter-spacing: -.03em; font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.2px var(--menthe); } @supports not (-webkit-text-stroke: 1px black) { .pg-etape::before { color: var(--menthe); } } .pg-etape::after { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--menthe); } .pg-etape h3 { font-size: var(--t-l); line-height: 1.2; font-variation-settings: "wdth" 110; } .pg-etape p { color: var(--doux); font-size: var(--t-s); line-height: 1.6; } @media (min-width: 760px) { .pg-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1080px) { .pg-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-etapes.pg-etapes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 10. Citation ou accroche éditoriale (bloc Citation core/quote) */ .wp-block-quote.pg-citation { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-4); max-width: 920px; } .wp-block-quote.pg-citation::before { content: ""; width: 48px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--menthe), var(--ciel)); } .wp-block-quote.pg-citation p { font-size: var(--t-xl); line-height: 1.3; font-weight: 600; color: var(--texte); max-width: 40ch; font-variation-settings: "wdth" 106; } .wp-block-quote.pg-citation cite { margin: 0; font-size: var(--t-s); color: var(--doux); font-style: normal; } .wp-block-quote.pg-citation.pg-tete--centre { margin-inline: auto; justify-items: center; text-align: center; } /* 11. Bandeau d'accroche (appel à l'action dans une section sombre, avec visuel décoratif facultatif) */ .pg-accroche { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--s-6); align-items: center; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); border: 1px solid rgba(101,216,192,.3); border-radius: var(--r-l); color: var(--texte); background: radial-gradient(55% 120% at 100% 0%, rgba(23,152,213,.3), transparent 70%), radial-gradient(45% 100% at 0% 100%, rgba(101,216,192,.14), transparent 70%), linear-gradient(160deg, #0F3A4C, var(--abysse) 65%); } .pg-accroche::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(169,193,201,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(169,193,201,.07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(60% 90% at 85% 40%, #000, transparent); mask-image: radial-gradient(60% 90% at 85% 40%, #000, transparent); } .pg-accroche-texte { display: grid; gap: var(--s-4); justify-items: start; min-width: 0; } .pg-accroche h2 { color: var(--texte); max-width: 24ch; } .pg-accroche-texte > p:not(.kicker) { color: var(--doux); font-size: var(--t-m); max-width: 56ch; } .pg-visuel { display: none; color: var(--menthe); } .pg-visuel svg { display: block; width: 100%; height: auto; overflow: visible; } @media (min-width: 760px) { .pg-accroche { grid-template-columns: minmax(0, 1fr) auto; } .pg-visuel { display: block; width: clamp(140px, 6rem + 8vw, 220px); } } /* 12. Liens vers d'autres pages : cartes entièrement cliquables (lien du titre étendu) */ .pg-liens { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .pg-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .pg-liens { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-liens.pg-liens--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pg-lien-carte { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--ligne); border-radius: var(--r-m); background: rgba(12,45,59,.6); min-width: 0; } .pg-lien-carte p.kicker { font-size: .72rem; } .pg-lien-carte h3 { font-size: var(--t-m); line-height: 1.3; font-variation-settings: "wdth" 110; } .pg-lien-carte h3 a { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); min-height: 24px; color: var(--texte); text-decoration: none; } .pg-lien-carte h3 a::after { content: ""; flex: none; width: 18px; height: 18px; margin-top: .1em; background: var(--menthe); -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat; } .pg-lien-carte h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .pg-lien-carte h3 a:focus-visible { outline: none; } .pg-lien-carte:has(a:focus-visible) { outline: 3px solid var(--menthe); outline-offset: 3px; } .pg-lien-carte p:not(.kicker) { color: var(--doux); font-size: var(--t-s); line-height: 1.55; } .pg-lien-carte:hover { border-color: rgba(101,216,192,.55); background: rgba(18,57,74,.75); } /* 13. Chiffres clés */ .pg-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) 0; } .pg-chiffre { display: flex; flex-direction: column; gap: var(--s-2); padding-inline: var(--s-4); border-left: 1px solid var(--ligne-forte); min-width: 0; } .pg-chiffre-valeur { font-weight: 800; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: .95; letter-spacing: -.035em; font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; color: var(--texte); } .pg-chiffre-valeur sup, .pg-chiffre-valeur small { font-size: .5em; color: var(--menthe); vertical-align: top; position: static; margin-left: .04em; } .pg-chiffre-label { color: var(--doux); font-size: var(--t-s); line-height: 1.4; } @media (min-width: 900px) { .pg-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pg-chiffres.pg-chiffres--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 14. Fond clair (.clair) : déclinaison des composants */ .clair p.lien, .clair p.lien a, .clair .lien > a { color: var(--lien-clair); } .clair :is(.pg-intro-texte, .pg-texte, .pg-carte, .pg-etape, .pg-lien-carte) strong { color: var(--encre); } .clair .pg-intro-texte > p:first-child { color: var(--encre); } .clair :is(.pg-intro-texte, .pg-texte, .pg-carte, .pg-etape, .pg-lien-carte) p:not(.kicker):not(.pg-etiquette):not(.pg-mention):not(.lien), .clair ul.pg-liste > li, .clair .pg-chiffre-label { color: var(--gris); } .clair .pg-carte { background: var(--blanc); border-color: rgba(10,38,51,.1); box-shadow: 0 1px 2px rgba(10,38,51,.05), 0 18px 40px -28px rgba(10,38,51,.4); } .clair .pg-carte::before { background: linear-gradient(90deg, transparent, rgba(11,111,143,.6), transparent); } .clair .pg-carte:hover { border-color: rgba(10,38,51,.24); } .clair .pg-carte > .ph:first-child { border-bottom: 0; } .clair .pg-pic { background: rgba(11,111,143,.1); color: var(--lien-clair); box-shadow: inset 0 0 0 1px rgba(11,111,143,.2); } .clair :is(.pg-mention, .pg-etiquette), .clair .pg-carte p.pg-mention, .clair .pg-carte p.pg-etiquette { color: var(--lien-clair); } .clair .pg-exemples { background: var(--glace); border-color: rgba(10,38,51,.1); border-left-color: var(--lien-clair); } .clair ul.pg-liste > li::before { background-color: rgba(11,111,143,.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B6F8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E"); } .clair ul.pg-liste--points > li::before { background: var(--lien-clair); } .clair .pg-etape { border-top-color: rgba(10,38,51,.18); } .clair .pg-etape::before { -webkit-text-stroke-color: var(--lien-clair); } .clair .pg-etape::after { background: var(--lien-clair); } .clair .wp-block-quote.pg-citation p { color: var(--encre); } .clair .wp-block-quote.pg-citation cite { color: var(--gris); } .clair .wp-block-quote.pg-citation::before { background: linear-gradient(90deg, var(--lien-clair), var(--ciel)); } .clair .pg-lien-carte { background: var(--blanc); border-color: rgba(10,38,51,.12); } .clair .pg-lien-carte h3 a { color: var(--encre); } .clair .pg-lien-carte h3 a::after { background: var(--lien-clair); } .clair .pg-lien-carte:hover { border-color: var(--lien-clair); background: var(--blanc); } .clair .pg-lien-carte:has(a:focus-visible) { outline-color: var(--lien-clair); } .clair .pg-chiffre { border-left-color: rgba(10,38,51,.2); } .clair .pg-chiffre-valeur { color: var(--encre); } .clair .pg-chiffre-valeur :is(sup, small) { color: var(--lien-clair); } .clair .ph { box-shadow: none; } /* 15. Mouvements (coupés si l'utilisateur demande moins d'animations) */ @media (prefers-reduced-motion: no-preference) { .pg-carte, .pg-lien-carte { transition: border-color .3s, background-color .3s, transform .3s, box-shadow .3s; } .pg-carte::before { transition: opacity .4s; } .pg-carte:hover, .pg-lien-carte:hover { transform: translateY(-2px); } .pg-lien-carte h3 a::after { transition: transform .2s; } .pg-lien-carte:hover h3 a::after { transform: translateX(3px); } } /* Page Contact : les bureaux sont déjà dans la colonne de gauche, on retire la colonne « Bureaux » du pied de page uniquement sur cette page. */ body:has(main .contact) .pied .pied-bureaux { display: none; } /* Blog : filtres par catégorie et recherche au-dessus de la liste des articles. */ .filtres-blog { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-5); margin-bottom: var(--s-7); } .filtres-blog .filtres-liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .filtres-blog .filtres-liste > p, .filtres-blog .wp-block-categories { margin: 0; } .filtres-blog .wp-block-categories { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); } .filtres-blog .filtre-tous a, .filtres-blog .wp-block-categories a { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem; border: 1px solid var(--ligne-forte); border-radius: 999px; font-size: var(--t-s); font-weight: 600; text-decoration: none; color: inherit; } .filtres-blog .filtre-tous a:hover, .filtres-blog .wp-block-categories a:hover, .filtres-blog .wp-block-categories .current-cat a { border-color: var(--menthe); color: var(--menthe); } .filtres-blog .wp-block-search { margin: 0; flex: 0 1 420px; width: 100%; } /* ========================================================================== 20. Profondeur : fonds en parallaxe, entrée du bandeau, apparition au défilement Tout est coupé si l'utilisateur demande moins de mouvement ; le parallaxe fixe n'est actif que sur grand écran à la souris. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* Entrée du bandeau de page au chargement */ .bandeau-page .kicker { animation: pg-monte .8s cubic-bezier(.2,.7,.2,1) both; } .bandeau-page .titre { animation: pg-monte .9s .12s cubic-bezier(.2,.7,.2,1) both; } .bandeau-page .chapo { animation: pg-monte .9s .26s cubic-bezier(.2,.7,.2,1) both; } .bandeau-page .actions { animation: pg-monte .9s .4s cubic-bezier(.2,.7,.2,1) both; } .bandeau-page .titre::after { content: ""; display: block; width: 72px; height: 3px; margin-top: var(--s-4); border-radius: 2px; background: linear-gradient(90deg, var(--menthe), var(--ciel)); transform-origin: left; animation: pg-trait 1.1s .5s cubic-bezier(.2,.7,.2,1) both; } .bandeau-page::before { animation: pg-quadrillage 24s linear infinite; } @keyframes pg-monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes pg-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pg-quadrillage { to { background-position: 64px 64px, 64px 64px; } } /* Apparition au défilement (classes posées par theme.js, retirées une fois l'animation finie) */ .rv-on .rv:not(.rv-in) { opacity: 0; } .rv-on .rv.rv-in { animation: pg-monte .8s calc(var(--rv-d, 0) * 90ms) cubic-bezier(.2,.7,.2,1) both; } /* Dérive douce des illustrations pendant le défilement (navigateurs compatibles uniquement) */ @supports (animation-timeline: view()) { .pg-visuel, .pg-section .ph { animation: pg-derive linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } @keyframes pg-derive { from { transform: translateY(26px); } to { transform: translateY(-26px); } } } } /* Parallaxe : fonds fixes, la section agit comme une fenêtre sur un décor immobile (comme sur « Développement de A à Z ») */ @media (min-width: 900px) and (hover: hover) and (prefers-reduced-motion: no-preference) { .pg-section--abysse { background: radial-gradient(rgba(169,193,201,.22) 1px, transparent 1.7px) 0 0 / 30px 30px fixed, radial-gradient(520px 380px at 12% 30%, rgba(101,216,192,.13), transparent 70%) fixed, radial-gradient(640px 440px at 88% 70%, rgba(23,152,213,.18), transparent 70%) fixed, linear-gradient(180deg, var(--abysse), var(--nuit) 85%); } .pg-section--halo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgba(169,193,201,.16) 1px, transparent 1.7px) 0 0 / 34px 34px fixed, radial-gradient(560px 420px at 8% 80%, rgba(101,216,192,.09), transparent 70%) fixed; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); } .pg-parallaxe { background-attachment: fixed; background-size: cover; background-position: center; } } /* 21. Photos et illustrations dans les emplacements .ph, bandes parallaxe (bloc Couverture) */ .ph .wp-block-image { margin: 0; height: 100%; } .ph .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .ph .wp-block-image.is-mock { display: flex; align-items: center; justify-content: center; background: #fff; } .ph .wp-block-image.is-mock img { object-fit: contain; padding: 4%; } /* Bandes parallaxe : image plus haute que la bande (150 %), décalée par theme.js via --py (-1 à 1). Repli sans JS : image centrée. */ .wp-block-cover.pg-bande { margin-block: 0; border-radius: 0; min-height: 62vh; overflow: hidden; background: var(--nuit, #071f2a) center / cover no-repeat; } .wp-block-cover.pg-bande .wp-block-cover__background { opacity: .42; } .wp-block-cover.pg-bande > .wp-block-cover__background, .wp-block-cover.pg-bande > .wp-block-cover__image-background { max-width: none !important; margin: 0 !important; width: 100%; } .wp-block-cover.pg-bande .wp-block-cover__image-background.has-parallax { background-attachment: scroll; background-size: cover; background-position: 50% 50%; position: absolute; inset: auto 0 auto 0; top: -25%; height: 150%; will-change: transform; transform: translate3d(0, calc(var(--py, 0) * -16.6%), 0); } html.sc-statique .wp-block-cover.pg-bande .wp-block-cover__image-background.has-parallax { transform: none; } @media (max-width: 899px) { .wp-block-cover.pg-bande { min-height: 38vh; } } /* Chargement progressif : aperçu flou intégré (data URI), remplacé par la photo haute définition dès qu'elle est chargée. */ .wp-block-cover.pg-bande.lq-equipe{background-image:url("data:image/webp;base64,UklGRroAAABXRUJQVlA4IK4AAABwBQCdASogABIAPxFwrlAsJiQisAgBgCIJQBb3BH2v6N/Im8OHrIMTQ9QlqGMjrqPdhI+AAP7I3qOcAUCmAIyysGv4R+wrxY+f2BVhPsAFByN44LB7jk5tummvrUlOTT5qRaV2S4mQv/j1mDDjXNBpMxuDFNhe3LKQtWIMDo3Ar7OXyTpvIwlzCtxZLHrA0AgUC6boIIgqqL0JoP7kRVsBnXIElGIJQPng5Bm8AAA=")} .wp-block-cover.pg-bande.lq-rouge{background-image:url("data:image/webp;base64,UklGRtYAAABXRUJQVlA4IMoAAAAwBQCdASogABIAPxFwr1AsJiQisAgBgCIJbACdISAB+qRhWavZdL9RYFpSsvjLYNMg6AD+1ZMSTCKpHe9jtoSPeC2H8+IM4dpI3aSrjtyOmA/dbt/WbuNEAqVxTx58OioWrbSh4JI+HXKvFiKdYnU+kAPjxSvsFVYY/2XtvK7rcirTjzyqJd3Pg103gwztFRriorymyD05YDsxeZP9pZNvMlXDsXxGrKiGI2qWYOom3uWdG2d6GZ09arEpXT2Ve0FWYx9PhionvgAA")} .wp-block-cover.pg-bande.lq-openspace{background-image:url("data:image/webp;base64,UklGRuAAAABXRUJQVlA4INQAAABwBQCdASogABIAPxF6sFGsKCSisBgIAYAiCWQAvkgNrs47W9mSuTAUt7R+6FECPqblACQgAPihzDSJpmbYLsDlC9AP1F9+yFsUW1ctfk4Q2vRGrxXDtnS8hThgSdGtx64uSHwWAmzudkRyUJHs4FhuSrwq9LcN9AZTX2hqD6ZxVrcq8pGrmyBHUQ5KINQMWHwhHbYTrpPa6bXAmJ5alrCXbqoxgqRBYC3/h28H37HvmUCSSmfUwk3Z+9UfzhY2MmezYuLXTLpj6n35QOX7nWkioAAAAA==")} /* 22. Scènes au défilement : voir theme.js §9. --p (0 à 1) est posé par le JS ; sans JS la valeur par défaut est l'état final. */ .sc { --p: 1; position: relative; } .sc--tall { height: var(--sc-h, 260vh); } .sc--tall > .sc-stick { position: sticky; top: 0; height: 100vh; min-height: 520px; display: grid; align-content: center; overflow: hidden; } html.sc-statique .sc--tall { height: auto; } html.sc-statique .sc--tall > .sc-stick { position: static; height: auto; min-height: 0; overflow: visible; } @media (max-width: 899px) { .sc--tall { height: var(--sc-h-m, 220vh); } } /* ---- frise.css ---- */ .frise.frise { --nd: 44px; --ecart: var(--s-6); --col-noeud: 44px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecart); margin: 0; padding: 0; list-style: none; } .frise.frise::before, .frise.frise::after { content: none; display: none; } .frise.frise > .frise-item.frise-item { position: relative; display: grid; grid-template-columns: var(--col-noeud) minmax(0, 1fr); grid-template-rows: var(--nd) auto; column-gap: var(--s-4); row-gap: var(--s-2); align-content: start; margin: 0; padding: 0; text-align: left; grid-column: auto; } .frise.frise > .frise-item.frise-item > .frise-noeud { grid-column: 1; grid-row: 1; justify-self: center; align-self: start; } .frise.frise > .frise-item.frise-item > .frise-annee { grid-column: 2; grid-row: 1; align-self: center; justify-self: start; margin: 0; font-weight: 800; font-size: var(--t-xl); line-height: 1; letter-spacing: -.02em; font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; color: var(--texte); } .frise.frise > .frise-item.frise-item.cle > .frise-annee { color: var(--menthe); } .frise.frise > .frise-item.frise-item > p { grid-column: 2; grid-row: 2; justify-self: start; margin: 0; max-width: 62ch; color: var(--doux); font-size: var(--t-s); } .frise.frise > .frise-item.frise-item::before, .frise.frise > .frise-item.frise-item::after { content: ""; position: absolute; z-index: 0; right: auto; left: calc(var(--col-noeud) / 2 - 1px); top: calc(var(--nd) / 2); bottom: calc(-1 * (var(--ecart) + var(--nd) / 2)); width: 2px; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--ligne-forte); } .frise.frise > .frise-item.frise-item::after { z-index: 1; background: var(--menthe); transform-origin: top center; transform: scaleY(var(--seg, 1)); } .frise.frise > .frise-item.frise-item:last-child::before, .frise.frise > .frise-item.frise-item:last-child::after { display: none; } .frise.frise > .frise-item.frise-item > .frise-noeud { position: relative; z-index: 2; box-sizing: border-box; display: grid; place-items: center; width: var(--nd); height: var(--nd); margin: 0; border-radius: 50%; background: var(--nuit); border: 2px solid rgba(101, 216, 192, .55); color: rgba(101, 216, 192, .72); transition: background-color .35s, border-color .35s, color .35s, box-shadow .35s; } .frise .frise-noeud svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .frise.frise:not(.frise--js) > .frise-item.frise-item > .frise-noeud, .frise.frise > .frise-item.frise-item.on > .frise-noeud { background: #1C484B; border-color: var(--menthe); color: var(--menthe); box-shadow: 0 0 0 5px rgba(101, 216, 192, .14), 0 0 22px rgba(101, 216, 192, .26); } .frise.frise:not(.frise--js) > .frise-item.frise-item.cle > .frise-noeud, .frise.frise > .frise-item.frise-item.cle.on > .frise-noeud { background: var(--menthe); color: var(--nuit); box-shadow: 0 0 0 8px rgba(101, 216, 192, .22), 0 0 38px rgba(101, 216, 192, .5); } @media (prefers-reduced-motion: no-preference) { .frise.frise.frise--js > .frise-item.frise-item.on > .frise-noeud { animation: frise-pop .55s cubic-bezier(.34, 1.56, .64, 1); } .frise.frise.frise--js > .frise-item.frise-item.cle.on > .frise-noeud { animation-duration: .7s; animation-name: frise-pop-cle; } } @keyframes frise-pop { 0% { transform: scale(.82); } 55% { transform: scale(1.16); } 100% { transform: scale(1); } } @keyframes frise-pop-cle { 0% { transform: scale(.78); } 55% { transform: scale(1.26); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .frise .frise-noeud { transition: none; } } .rv-on .frise > .frise-item.rv:not(.rv-in) { opacity: 1; } .rv-on .frise > .frise-item.rv:not(.rv-in) > :not(.frise-noeud) { opacity: 0; } .rv-on .frise > .frise-item.rv.rv-in { animation: none; } .rv-on .frise > .frise-item.rv.rv-in > :not(.frise-noeud) { animation: pg-monte .8s calc(var(--rv-d, 0) * 90ms) cubic-bezier(.2, .7, .2, 1) both; } @media (min-width: 900px) { .frise.frise { --nd: 48px; --ecart: var(--s-6); --col-noeud: 72px; } .frise.frise > .frise-item.frise-item { grid-template-columns: minmax(0, 1fr) var(--col-noeud) minmax(0, 1fr); column-gap: 0; } .frise.frise > .frise-item.frise-item::before, .frise.frise > .frise-item.frise-item::after { left: calc(50% - 1px); } .frise.frise > .frise-item.frise-item > .frise-noeud { grid-column: 2; justify-self: center; } .frise.frise > .frise-item.frise-item:nth-child(odd) > .frise-annee, .frise.frise > .frise-item.frise-item:nth-child(odd) > p { grid-column: 1; justify-self: end; text-align: right; padding-right: var(--s-5); } .frise.frise > .frise-item.frise-item:nth-child(even) > .frise-annee, .frise.frise > .frise-item.frise-item:nth-child(even) > p { grid-column: 3; justify-self: start; text-align: left; padding-left: var(--s-5); } } /* ---- scenes-ia-1.css ---- */ .wp-block-group.alignfull.sc-ia { margin-block: 0; position: relative; background: linear-gradient(180deg, var(--abysse), var(--nuit) 92%); border-block: 1px solid var(--ligne); } .sc-ia.sc--tall > .sc-stick { height: 100vh; height: 100svh; box-sizing: border-box; padding: calc(var(--entete-h) + .5rem) 0 1rem; isolation: isolate; } .sc-ia .sc-stick::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgba(169,193,201,.15) 1px, transparent 1.7px) 0 0 / 32px 32px, radial-gradient(520px 380px at 90% 15%, rgba(23,152,213,.16), transparent 70%), radial-gradient(480px 360px at 4% 92%, rgba(101,216,192,.09), transparent 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); } html.sc-statique .sc-ia.sc--tall > .sc-stick { padding-block: var(--s-8); } @media (max-height: 560px) { .sc-ia.sc--tall { height: auto; } .sc-ia.sc--tall > .sc-stick { position: static; height: auto; min-height: 0; overflow: visible; padding-block: var(--s-7); } } @media (scripting: none) { .sc-ia.sc--tall { height: auto; } .sc-ia.sc--tall > .sc-stick { position: static; height: auto; min-height: 0; overflow: visible; padding-block: var(--s-8); } } .sc-ia :is(.sc-ia-cadre, .sc-ia-tete, .sc-ia-items, .sc-ia-etape, .sc-ia-phase, .sc-ia-etap, .sc-ia-fig) > * { margin-block: 0; } .sc-ia-cadre { display: grid; gap: var(--s-5); align-items: center; position: relative; } .sc-ia-tete { display: grid; gap: var(--s-3); max-width: 760px; } .sc-ia-tete h2 { font-size: clamp(1.4rem, 1.05rem + 1.7vw, 2.5rem); line-height: 1.06; letter-spacing: -.015em; font-variation-settings: "wdth" 115; } .sc-ia-tete h2 em { font-style: normal; color: var(--menthe); } .sc-ia-tete p:not(.kicker) { color: var(--doux); font-size: var(--t-m); line-height: 1.55; max-width: 60ch; } .sc-ia-items { display: grid; gap: var(--s-4); counter-reset: sc-ia-n; min-width: 0; } .sc-ia-items h3 { font-size: var(--t-m); line-height: 1.2; font-variation-settings: "wdth" 110; } .sc-ia-items p { color: var(--doux); font-size: var(--t-s); line-height: 1.5; } .sc-ia-etape > :is(h3, p), .sc-ia-phase > :is(h3, p), .sc-ia-etap > :is(h3, p) { opacity: var(--on); transform: translateY(calc((1 - var(--on)) * 16px)); } .sc-ia-fig { display: grid; justify-items: center; align-content: center; gap: var(--s-2); min-width: 0; } .sc-ia-fig .sc-ia-svg { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--entete-h) - 6rem); } .sc-ia-legende { font-size: var(--t-xs); line-height: 1.4; color: var(--doux); text-align: center; } .sc-ia-cadre--duo { grid-template-areas: "tete" "fig" "items"; } .sc-ia-cadre--duo > .sc-ia-tete { grid-area: tete; } .sc-ia-cadre--duo > .sc-ia-fig { grid-area: fig; } .sc-ia-cadre--duo > .sc-ia-items { grid-area: items; } .sc-ia-cadre--duo .sc-ia-phase, .sc-ia-cadre--duo .sc-ia-etap { position: relative; counter-increment: sc-ia-n; padding-left: 3.4rem; } .sc-ia-cadre--duo .sc-ia-phase::before, .sc-ia-cadre--duo .sc-ia-etap::before { content: counter(sc-ia-n, decimal-leading-zero); position: absolute; left: 0; top: -.05em; font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 125; color: transparent; -webkit-text-stroke: 1.2px var(--menthe); opacity: var(--on); } @media (min-width: 900px) { .sc-ia-cadre--duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "tete fig" "items fig"; column-gap: clamp(2rem, 1rem + 4vw, 5rem); } .sc-ia-cadre--duo > .sc-ia-tete { align-self: end; } .sc-ia-cadre--duo > .sc-ia-items { align-self: start; margin-top: var(--s-4); } .sc-ia-cadre--duo > .sc-ia-fig { align-self: center; } } @media (max-width: 899px) { .sc-ia-cadre { gap: var(--s-4); } .sc-ia-tete p:not(.kicker) { display: none; } .sc-ia-items { gap: var(--s-3); } .sc-ia-items p { font-size: .8125rem; line-height: 1.4; } .sc-ia-items h3 { font-size: .9375rem; } .sc-ia-fig .sc-ia-svg { max-height: 46svh; } .sc-ia-cadre--duo .sc-ia-phase, .sc-ia-cadre--duo .sc-ia-etap { padding-left: 2.6rem; } .sc-ia-cadre--duo .sc-ia-phase::before, .sc-ia-cadre--duo .sc-ia-etap::before { font-size: 1.15rem; } } @media (max-width: 899px) and (max-height: 700px) { .sc-ia-fig .sc-ia-svg { max-height: 34svh; } .sc-ia-cadre { gap: var(--s-3); } } .sc-ia-svg text { font-family: var(--f); fill: var(--texte); font-weight: 600; font-variation-settings: "wdth" 105; } .sc-ia-svg { overflow: visible; } .sc-ia-rail { display: none; } @media (min-width: 900px) { .sc-ia-rail { display: block; margin-top: var(--s-2); } .sc-ia-rail .sc-ia-svg { display: block; width: 100%; height: auto; } .sc-ia-parcours .sc-ia-cadre { gap: var(--s-4); } .sc-ia-parcours .sc-ia-tete { max-width: 860px; } .sc-ia-parcours .sc-ia-items { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; text-align: center; margin-top: calc(-1 * var(--s-2)); } .sc-ia-parcours .sc-ia-items h3 { font-size: var(--t-l); margin-bottom: var(--s-2); } .sc-ia-parcours .sc-ia-items h3 { padding-inline: var(--s-3); } .sc-ia-parcours .sc-ia-items p { margin-inline: auto; max-width: 27ch; font-size: var(--t-s); padding-inline: var(--s-2); } } @media (max-width: 899px) { .sc-ia-parcours .sc-ia-items { position: relative; padding-left: 3.6rem; gap: var(--s-4); } .sc-ia-parcours .sc-ia-items::before { content: ""; position: absolute; left: 19px; top: 14px; bottom: 14px; width: 2px; background: var(--ligne-forte); } .sc-ia-parcours .sc-ia-items::after { content: ""; position: absolute; left: 18.5px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--menthe), var(--ciel)); transform-origin: top; transform: scaleY(var(--tr)); } .sc-ia-parcours .sc-ia-etape { position: relative; counter-increment: sc-ia-n; } .sc-ia-parcours .sc-ia-etape::before, .sc-ia-parcours .sc-ia-etape::after { content: counter(sc-ia-n); position: absolute; left: -3.6rem; top: -.15rem; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; font-weight: 700; font-size: 1rem; font-variation-settings: "wdth" 120; } .sc-ia-parcours .sc-ia-etape::before { background: var(--nuit); border: 2px solid var(--ligne-forte); color: var(--doux); } .sc-ia-parcours .sc-ia-etape::after { background: var(--abysse); border: 2.5px solid var(--menthe); color: var(--menthe); opacity: var(--on); } .sc-ia-parcours .sc-ia-etape p { margin-top: .15rem; } } .sc-ia-note { color: var(--doux); font-size: var(--t-s); max-width: 70ch; } .sc-ia-parcours { --sc-h: 300vh; --sc-h-m: 280vh; } .sc-ia-parcours .sc-ia-svg-hub, .sc-ia-parcours .sc-ia-items { --tr: clamp(0, calc((var(--p) - 0.06) * 1.25), 1); } .sc-ia-trace-fond, .sc-ia-trace { fill: none; stroke-linecap: round; } .sc-ia-trace-fond { stroke: var(--ligne-forte); stroke-width: 2; stroke-dasharray: 2 9; } .sc-ia-trace { stroke: url(#sc-ia-g-hub); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--tr)); opacity: clamp(0, calc(var(--p) * 40), 1); } .sc-ia-noeud { --on: 1; } .sc-ia-noeud--1 { --on: clamp(0, calc((var(--p) - 0.12) * 16.67), 1); } .sc-ia-etape--1 { --on: clamp(0, calc((var(--p) - 0.12) * 16.67), 1); } .sc-ia-noeud--2 { --on: clamp(0, calc((var(--p) - 0.29) * 16.67), 1); } .sc-ia-etape--2 { --on: clamp(0, calc((var(--p) - 0.29) * 16.67), 1); } .sc-ia-noeud--3 { --on: clamp(0, calc((var(--p) - 0.46) * 16.67), 1); } .sc-ia-etape--3 { --on: clamp(0, calc((var(--p) - 0.46) * 16.67), 1); } .sc-ia-noeud--4 { --on: clamp(0, calc((var(--p) - 0.63) * 16.67), 1); } .sc-ia-etape--4 { --on: clamp(0, calc((var(--p) - 0.63) * 16.67), 1); } .sc-ia-noeud--5 { --on: clamp(0, calc((var(--p) - 0.8) * 16.67), 1); } .sc-ia-etape--5 { --on: clamp(0, calc((var(--p) - 0.8) * 16.67), 1); } .sc-ia-disque { fill: var(--nuit); stroke: var(--ligne-forte); stroke-width: 2; } .sc-ia-disque-on { fill: var(--abysse); stroke: var(--menthe); stroke-width: 2.5; opacity: var(--on); } .sc-ia-halo { fill: var(--menthe); opacity: calc(var(--on) * .16); transform: scale(calc(1 + var(--on) * .45)); } .sc-ia-icone { color: var(--doux); } .sc-ia-noeud .sc-ia-icone { color: var(--menthe); opacity: calc(.4 + var(--on) * .6); } .sc-ia-ic { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .sc-ia-svg .sc-ia-halo, .sc-ia-svg .sc-ia-disque, .sc-ia-svg .sc-ia-disque-on { transform-box: fill-box; transform-origin: center; } .sc-ia-audit { --sc-h: 320vh; --sc-h-m: 300vh; } .sc-ia-svg-audit { --bal: clamp(0, calc((var(--p) - 0.03) * 2.5), 1); --rad: calc(1 - clamp(0, calc((var(--p) - 0.5) * 7.14), 1)); --mat: clamp(0, calc((var(--p) - 0.46) * 8.33), 1); } .sc-ia-radar { opacity: var(--rad); } .sc-ia-anneau { fill: none; stroke: var(--ligne-forte); stroke-width: 1.5; } .sc-ia-rayon { stroke: var(--ligne); stroke-width: 1.2; } .sc-ia-proc { fill: var(--ciel); } .sc-ia-proc--1 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.04) * 25), 1)); } .sc-ia-proc--2 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.06) * 25), 1)); } .sc-ia-proc--3 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.09) * 25), 1)); } .sc-ia-proc--4 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.11) * 25), 1)); } .sc-ia-proc--5 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.13) * 25), 1)); } .sc-ia-proc--6 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.16) * 25), 1)); } .sc-ia-proc--7 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.18) * 25), 1)); } .sc-ia-proc--8 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.22) * 25), 1)); } .sc-ia-proc--9 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.24) * 25), 1)); } .sc-ia-proc--10 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.28) * 25), 1)); } .sc-ia-proc--11 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.3) * 25), 1)); } .sc-ia-proc--12 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.31) * 25), 1)); } .sc-ia-proc--13 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.35) * 25), 1)); } .sc-ia-proc--14 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.36) * 25), 1)); } .sc-ia-proc--15 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.41) * 25), 1)); } .sc-ia-proc--16 { opacity: calc(.16 + .84 * clamp(0, calc((var(--p) - 0.42) * 25), 1)); } .sc-ia-matrice { opacity: var(--mat); } .sc-ia-q { stroke: none; } .sc-ia-q--tl { fill: var(--menthe); fill-opacity: .08; } .sc-ia-q--tr { fill: var(--ciel); fill-opacity: .07; } .sc-ia-cadrem { fill: none; stroke: var(--ligne-forte); stroke-width: 2; } .sc-ia-axe { stroke: var(--ligne-forte); stroke-width: 1.5; stroke-dasharray: 3 7; } .sc-ia-fl { fill: none; stroke: var(--doux); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sc-ia-svg text { font-family: var(--f); fill: var(--texte); font-weight: 600; font-variation-settings: "wdth" 105; } .sc-ia-qt { font-size: 19px; font-weight: 700; font-variation-settings: "wdth" 115; } .sc-ia-qt--tl { fill: var(--menthe); opacity: clamp(0, calc((var(--p) - 0.66) * 12.5), 1); } .sc-ia-qt--tr { fill: var(--ciel); opacity: clamp(0, calc((var(--p) - 0.7) * 12.5), 1); } .sc-ia-qt--bl { fill: var(--doux); opacity: clamp(0, calc((var(--p) - 0.73) * 12.5), 1); } .sc-ia-qt--br { fill: var(--doux); opacity: clamp(0, calc((var(--p) - 0.77) * 12.5), 1); } .sc-ia-axet { font-size: 17px; fill: var(--doux); letter-spacing: .12em; text-transform: uppercase; } .sc-ia-faisceau { opacity: calc(1 - clamp(0, calc((var(--p) - 0.43) * 14.29), 1)); } .sc-ia-tour { transform: rotate(calc(var(--bal) * 360deg)); } .sc-ia-tranche { fill: var(--menthe); } .sc-ia-front { stroke: var(--menthe); stroke-width: 2.5; stroke-linecap: round; } .sc-ia-bout { fill: var(--menthe); } .sc-ia-pt-halo { fill: none; stroke-width: 2; } .sc-ia-pt-c { stroke: var(--nuit); stroke-width: 2.5; } .sc-ia-pt-tl .sc-ia-pt-c { fill: var(--menthe); } .sc-ia-pt-tl .sc-ia-pt-halo { stroke: var(--menthe); opacity: .45; } .sc-ia-pt-tr .sc-ia-pt-c { fill: var(--ciel); } .sc-ia-pt-tr .sc-ia-pt-halo { stroke: var(--ciel); opacity: .45; } .sc-ia-pt-bl .sc-ia-pt-c { fill: var(--doux); } .sc-ia-pt-bl .sc-ia-pt-halo { stroke: var(--doux); opacity: .45; } .sc-ia-pt-br .sc-ia-pt-c { fill: var(--doux); } .sc-ia-pt-br .sc-ia-pt-halo { stroke: var(--doux); opacity: .45; } .sc-ia-pt-br .sc-ia-pt-c { fill: var(--abysse); stroke: var(--doux); stroke-dasharray: 3 3; } .sc-ia-etiq { font-size: 18px; paint-order: stroke; stroke: var(--nuit); stroke-width: 4px; stroke-linejoin: round; } .sc-ia-pt--1 { --dx: -241.09; --dy: -26.89; --tm: clamp(0, calc((var(--p) - 0.52) * 4.2), 1); --te: calc(var(--tm) * (2 - var(--tm))); opacity: clamp(0, calc((var(--p) - 0.07) * 25), 1); transform: translate(calc(var(--dx) * var(--te) * 1px), calc(var(--dy) * var(--te) * 1px)); } .sc-ia-pt--1 .sc-ia-etiq { opacity: clamp(0, calc((var(--p) - 0.66) * 12.5), 1); } .sc-ia-pt--2 { --dx: -327.43; --dy: -82.07; --tm: clamp(0, calc((var(--p) - 0.55) * 4.2), 1); --te: calc(var(--tm) * (2 - var(--tm))); opacity: clamp(0, calc((var(--p) - 0.14) * 25), 1); transform: translate(calc(var(--dx) * var(--te) * 1px), calc(var(--dy) * var(--te) * 1px)); } .sc-ia-pt--2 .sc-ia-etiq { opacity: clamp(0, calc((var(--p) - 0.69) * 12.5), 1); } .sc-ia-pt--3 { --dx: -0.5; --dy: -199.27; --tm: clamp(0, calc((var(--p) - 0.58) * 4.2), 1); --te: calc(var(--tm) * (2 - var(--tm))); opacity: clamp(0, calc((var(--p) - 0.2) * 25), 1); transform: translate(calc(var(--dx) * var(--te) * 1px), calc(var(--dy) * var(--te) * 1px)); } .sc-ia-pt--3 .sc-ia-etiq { opacity: clamp(0, calc((var(--p) - 0.72) * 12.5), 1); } .sc-ia-pt--4 { --dx: 117; --dy: -190.24; --tm: clamp(0, calc((var(--p) - 0.61) * 4.2), 1); --te: calc(var(--tm) * (2 - var(--tm))); opacity: clamp(0, calc((var(--p) - 0.26) * 25), 1); transform: translate(calc(var(--dx) * var(--te) * 1px), calc(var(--dy) * var(--te) * 1px)); } .sc-ia-pt--4 .sc-ia-etiq { opacity: clamp(0, calc((var(--p) - 0.75) * 12.5), 1); } .sc-ia-pt--5 { --dx: -78.38; --dy: 80.28; --tm: clamp(0, calc((var(--p) - 0.64) * 4.2), 1); --te: calc(var(--tm) * (2 - var(--tm))); opacity: clamp(0, calc((var(--p) - 0.32) * 25), 1); transform: translate(calc(var(--dx) * var(--te) * 1px), calc(var(--dy) * var(--te) * 1px)); } .sc-ia-pt--5 .sc-ia-etiq { opacity: clamp(0, calc((var(--p) - 0.78) * 12.5), 1); } .sc-ia-pt--6 { --dx: 149.85; --dy: 211.57; --tm: clamp(0, calc((var(--p) - 0.67) * 4.2), 1); --te: calc(var(--tm) * (2 - var(--tm))); opacity: clamp(0, calc((var(--p) - 0.39) * 25), 1); transform: translate(calc(var(--dx) * var(--te) * 1px), calc(var(--dy) * var(--te) * 1px)); } .sc-ia-pt--6 .sc-ia-etiq { opacity: clamp(0, calc((var(--p) - 0.81) * 12.5), 1); } .sc-ia-phase--1 { --on: clamp(0, calc((var(--p) - 0.02) * 12.5), 1); } .sc-ia-phase--2 { --on: clamp(0, calc((var(--p) - 0.28) * 12.5), 1); } .sc-ia-phase--3 { --on: clamp(0, calc((var(--p) - 0.54) * 12.5), 1); } .sc-ia-agent { --sc-h: 340vh; --sc-h-m: 320vh; } .sc-ia-svg text { font-family: var(--f); fill: var(--texte); font-weight: 600; font-variation-settings: "wdth" 105; } .sc-ia-ring-fond { fill: none; stroke: var(--ligne-forte); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; } .sc-ia-arc, .sc-ia-lien { fill: none; stroke: url(#sc-ia-g-ag); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; } .sc-ia-lien-fond { fill: none; stroke: var(--ligne-forte); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; } .sc-ia-lien--in { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.02) * 8.33), 1)); opacity: clamp(0, calc((var(--p) - 0.02) * 60), 1); } .sc-ia-arc--a1 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.14) * 6.25), 1)); opacity: clamp(0, calc((var(--p) - 0.14) * 60), 1); } .sc-ia-arc--a2 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.3) * 3.57), 1)); opacity: clamp(0, calc((var(--p) - 0.3) * 60), 1); } .sc-ia-lien--out { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.6) * 8.33), 1)); opacity: clamp(0, calc((var(--p) - 0.6) * 60), 1); } .sc-ia-arc--a3 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.74) * 10), 1)); opacity: clamp(0, calc((var(--p) - 0.74) * 60), 1); } .sc-ia-arc--a4 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.84) * 12.5), 1)); opacity: clamp(0, calc((var(--p) - 0.84) * 60), 1); } .sc-ia-arc--a3, .sc-ia-arc--a4 { stroke-dasharray: .5 .5; stroke-dasharray: 1; } .sc-ia-chev { fill: none; stroke: var(--doux); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; } .sc-ia-env, .sc-ia-env-g { fill: var(--abysse); stroke: var(--texte); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .sc-ia-env-g { opacity: .4; } .sc-ia-env { transform: translate(calc((260 + 32.35 * clamp(0, calc((var(--p) - 0.14) * 37.5), 1) + 30.15 * clamp(0, calc((var(--p) - 0.17) * 37.5), 1) + 25.89 * clamp(0, calc((var(--p) - 0.19) * 37.5), 1) + 19.86 * clamp(0, calc((var(--p) - 0.22) * 37.5), 1) + 12.49 * clamp(0, calc((var(--p) - 0.25) * 37.5), 1) + 4.26 * clamp(0, calc((var(--p) - 0.27) * 37.5), 1) + -4.26 * clamp(0, calc((var(--p) - 0.3) * 25), 1) + -12.49 * clamp(0, calc((var(--p) - 0.34) * 25), 1) + -19.86 * clamp(0, calc((var(--p) - 0.38) * 25), 1) + -25.89 * clamp(0, calc((var(--p) - 0.5) * 37.5), 1) + -30.15 * clamp(0, calc((var(--p) - 0.53) * 37.5), 1) + -32.35 * clamp(0, calc((var(--p) - 0.55) * 37.5), 1)) * 1px), calc((45 + 130 * clamp(0, calc((var(--p) - 0) * 7.14), 1) + 4.26 * clamp(0, calc((var(--p) - 0.14) * 37.5), 1) + 12.49 * clamp(0, calc((var(--p) - 0.17) * 37.5), 1) + 19.86 * clamp(0, calc((var(--p) - 0.19) * 37.5), 1) + 25.89 * clamp(0, calc((var(--p) - 0.22) * 37.5), 1) + 30.15 * clamp(0, calc((var(--p) - 0.25) * 37.5), 1) + 32.35 * clamp(0, calc((var(--p) - 0.27) * 37.5), 1) + 32.35 * clamp(0, calc((var(--p) - 0.3) * 25), 1) + 30.15 * clamp(0, calc((var(--p) - 0.34) * 25), 1) + 25.89 * clamp(0, calc((var(--p) - 0.38) * 25), 1) + 19.86 * clamp(0, calc((var(--p) - 0.5) * 37.5), 1) + 12.49 * clamp(0, calc((var(--p) - 0.53) * 37.5), 1) + 4.26 * clamp(0, calc((var(--p) - 0.55) * 37.5), 1)) * 1px)); opacity: calc(clamp(0, calc(var(--p) * 60), 1) * (1 - clamp(0, calc((var(--p) - 0.56) * 25), 1))); } .sc-ia-jeton { fill: var(--menthe); stroke: var(--nuit); stroke-width: 3; transform: translate(260px, calc((425 + 62 * clamp(0, calc((var(--p) - 0.6) * 8.33), 1)) * 1px)); opacity: clamp(0, calc((var(--p) - 0.58) * 25), 1); } .sc-ia-jeton path { fill: none; stroke: var(--nuit); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .sc-ia-nd-base { fill: var(--abysse); stroke: var(--ligne-forte); stroke-width: 2.5; } .sc-ia-nd-on { fill: var(--surface); stroke: var(--menthe); stroke-width: 3; opacity: var(--on); } .sc-ia-nd-halo { fill: var(--menthe); opacity: calc(var(--on) * .15); transform: scale(calc(1 + var(--on) * .5)); } .sc-ia-nd-halo, .sc-ia-nd-base, .sc-ia-nd-on { transform-box: fill-box; transform-origin: center; } .sc-ia-ndic, .sc-ia-ndic2 { fill: none; stroke: var(--menthe); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: calc(.35 + var(--on) * .65); } .sc-ia-nd--percep { --on: clamp(0, calc((var(--p) - 0.14) * 20), 1); } .sc-ia-lib--percep { opacity: clamp(0, calc((var(--p) - 0.08) * 12.5), 1); } .sc-ia-nd--plan { --on: clamp(0, calc((var(--p) - 0.3) * 20), 1); } .sc-ia-lib--plan { opacity: clamp(0, calc((var(--p) - 0.24) * 12.5), 1); } .sc-ia-nd--action { --on: clamp(0, calc((var(--p) - 0.58) * 20), 1); } .sc-ia-lib--action { opacity: clamp(0, calc((var(--p) - 0.52) * 12.5), 1); } .sc-ia-nd--controle { --on: clamp(0, calc((var(--p) - 0.84) * 20), 1); } .sc-ia-lib--controle { opacity: clamp(0, calc((var(--p) - 0.78) * 12.5), 1); } .sc-ia-lib { font-size: 19px; fill: var(--texte); paint-order: stroke; stroke: var(--nuit); stroke-width: 4px; stroke-linejoin: round; } .sc-ia-svg .sc-ia-lib--outils { fill: var(--doux); font-size: 18px; opacity: clamp(0, calc((var(--p) - 0.66) * 12.5), 1); } .sc-ia-porte { --on: clamp(0, calc((var(--p) - 0.38) * 16.67), 1); } .sc-ia-porte-d { fill: var(--abysse); stroke: var(--ciel); stroke-width: 3; } .sc-ia-porte { opacity: var(--on); } .sc-ia-ndic2 { stroke: var(--ciel); opacity: 1; } .sc-ia-lib--porte { fill: var(--ciel); font-size: 17px; opacity: clamp(0, calc((var(--p) - 0.38) * 12.5), 1); } .sc-ia-jcadre { fill: var(--nuit); stroke: var(--ligne-forte); stroke-width: 2; } .sc-ia-jt { font-size: 15px; fill: var(--doux); letter-spacing: .1em; text-transform: uppercase; } .sc-ia-jl circle { fill: var(--menthe); } .sc-ia-jl rect { fill: var(--doux); opacity: .55; } .sc-ia-jl--1 { opacity: clamp(0, calc((var(--p) - 0.14) * 20), 1); } .sc-ia-jl--2 { opacity: clamp(0, calc((var(--p) - 0.3) * 20), 1); } .sc-ia-jl--3 { opacity: clamp(0, calc((var(--p) - 0.5) * 20), 1); } .sc-ia-jl--4 { opacity: clamp(0, calc((var(--p) - 0.84) * 20), 1); } .sc-ia-chip rect { fill: var(--abysse); stroke: var(--ligne-forte); stroke-width: 2; } .sc-ia-chip text { font-size: 19px; font-weight: 700; fill: var(--doux); letter-spacing: .04em; } .sc-ia-chip--1 { --on: clamp(0, calc((var(--p) - 0.72) * 20), 1); } .sc-ia-chip--1 rect { stroke: var(--menthe); stroke-opacity: var(--on); fill: var(--surface); fill-opacity: var(--on); } .sc-ia-chip--1 text { fill: var(--menthe); } .sc-ia-chip--2 { --on: clamp(0, calc((var(--p) - 0.75) * 20), 1); } .sc-ia-chip--2 rect { stroke: var(--menthe); stroke-opacity: var(--on); fill: var(--surface); fill-opacity: var(--on); } .sc-ia-chip--2 text { fill: var(--menthe); } .sc-ia-chip--3 { --on: clamp(0, calc((var(--p) - 0.78) * 20), 1); } .sc-ia-chip--3 rect { stroke: var(--menthe); stroke-opacity: var(--on); fill: var(--surface); fill-opacity: var(--on); } .sc-ia-chip--3 text { fill: var(--menthe); } .sc-ia-chip text { opacity: calc(.6 + var(--on) * .4); } .sc-ia-env-g path, .sc-ia-env path { fill: none; } .sc-ia-etap--1 { --on: clamp(0, calc((var(--p) - 0.08) * 12.5), 1); } .sc-ia-etap--2 { --on: clamp(0, calc((var(--p) - 0.24) * 12.5), 1); } .sc-ia-etap--3 { --on: clamp(0, calc((var(--p) - 0.5) * 12.5), 1); } .sc-ia-etap--4 { --on: clamp(0, calc((var(--p) - 0.78) * 12.5), 1); } @media (max-width: 899px) { .sc-ia-svg .sc-ia-lib { font-size: 23px; } .sc-ia-svg .sc-ia-lib--porte { font-size: 21px; } .sc-ia-svg .sc-ia-lib--outils { font-size: 22px; } .sc-ia-svg .sc-ia-chip text { font-size: 22px; } .sc-ia-svg .sc-ia-jt { font-size: 17px; } .sc-ia-svg .sc-ia-etiq { font-size: 21px; } .sc-ia-svg .sc-ia-qt { font-size: 22px; } .sc-ia-svg .sc-ia-axet { font-size: 19px; } } /* ---- scenes-mcp.css ---- */ .sc-mcp-scene { min-width: 0; width: 100%; } .sc-mcp-svg { display: block; width: 100%; height: auto; overflow: visible; } .sc-mcp-svg text { font-family: var(--f); font-variation-settings: "wdth" 100; } .sc-mcp-a { --sc-h: 300vh; --sc-h-m: 260vh; border-top: 1px solid var(--ligne); } .sc-mcp-a > .sc-stick { box-sizing: border-box; padding-block: calc(var(--entete-h) + var(--s-3)) var(--s-5); background: radial-gradient(48% 55% at 78% 52%, rgba(58,176,234,.11), transparent 72%), radial-gradient(30% 40% at 12% 80%, rgba(101,216,192,.06), transparent 70%); } .sc-mcp-grille { display: grid; gap: var(--s-5); align-items: center; } .sc-mcp-texte { display: grid; gap: var(--s-4); align-content: start; min-width: 0; } .wp-block-group.sc-mcp-texte > * { margin-block: 0; } .sc-mcp-texte h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.6rem); line-height: 1.06; letter-spacing: -.015em; font-variation-settings: "wdth" 115; } .sc-mcp-scene--a .sc-mcp-svg { max-height: calc(100vh - var(--entete-h) - 3rem); } ol.wp-block-list.sc-mcp-etapes { list-style: none; margin: 0; padding: 0; counter-reset: sc-mcp-e; display: grid; gap: var(--s-2); } .sc-mcp-etapes > li { --k: 1; counter-increment: sc-mcp-e; position: relative; margin: 0; padding: .7rem 1rem .7rem 3.1rem; border-radius: var(--r-m); border: 1px solid rgba(101,216,192, calc(.08 + .42 * var(--k))); background: rgba(12,45,59, calc(.35 + .4 * var(--k))); color: var(--doux); font-size: var(--t-s); line-height: 1.5; opacity: calc(.45 + .55 * var(--k)); } .sc-mcp-etapes > li::before { content: counter(sc-mcp-e, decimal-leading-zero); position: absolute; left: 1rem; top: .72rem; font-weight: 800; font-size: var(--t-s); color: var(--menthe); font-variation-settings: "wdth" 115; } .sc-mcp-etapes strong { color: var(--texte); font-weight: 650; } .sc-mcp-etapes > li:nth-child(2) { --k: clamp(0, calc((var(--p) - .2) * 14), 1); } .sc-mcp-etapes > li:nth-child(3) { --k: clamp(0, calc((var(--p) - .37) * 14), 1); } .sc-mcp-etapes > li:nth-child(4) { --k: clamp(0, calc((var(--p) - .69) * 14), 1); } p.sc-mcp-note { color: var(--doux); font-size: var(--t-xs); letter-spacing: .02em; } @media (min-width: 900px) { .sc-mcp-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 4vw, 5rem); } } @media (max-width: 899px) { .sc-mcp-a > .sc-stick { padding-block: calc(var(--entete-h) + var(--s-2)) var(--s-3); } .sc-mcp-grille { gap: var(--s-3); } .sc-mcp-texte { gap: var(--s-2); } .sc-mcp-texte h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2rem); } .sc-mcp-scene--a .sc-mcp-svg { max-height: 52vh; margin-inline: auto; } html.js:not(.sc-statique) .sc-mcp-etapes { grid-template-areas: "e"; } html.js:not(.sc-statique) .sc-mcp-etapes > li { grid-area: e; --on: 1; --off: 0; opacity: min(var(--on), calc(1 - var(--off))); } html.js:not(.sc-statique) .sc-mcp-etapes > li:nth-child(1) { --off: clamp(0, calc((var(--p) - .2) * 14), 1); } html.js:not(.sc-statique) .sc-mcp-etapes > li:nth-child(2) { --on: clamp(0, calc((var(--p) - .2) * 14), 1); --off: clamp(0, calc((var(--p) - .37) * 14), 1); } html.js:not(.sc-statique) .sc-mcp-etapes > li:nth-child(3) { --on: clamp(0, calc((var(--p) - .37) * 14), 1); --off: clamp(0, calc((var(--p) - .69) * 14), 1); } html.js:not(.sc-statique) .sc-mcp-etapes > li:nth-child(4) { --on: clamp(0, calc((var(--p) - .69) * 14), 1); } } html:not(.js) .sc-mcp-a.sc--tall { height: auto; } html:not(.js) .sc-mcp-a.sc--tall > .sc-stick { position: static; height: auto; min-height: 0; overflow: visible; padding-block: var(--s-section); } .sc-mcp-b, .sc-mcp-c { --q: clamp(0, calc((var(--p) - .12) * 2.6), 1); } .sc-mcp-c { --c1: clamp(0, calc((var(--q) - .05) / .14), 1); --c2: clamp(0, calc((var(--q) - .30) / .14), 1); --c3: clamp(0, calc((var(--q) - .55) / .14), 1); --c4: clamp(0, calc((var(--q) - .80) / .12), 1); } .sc-mcp-c-jeton { transform: translateY(calc((var(--c1) * 98 + var(--c2) * 92 + var(--c3) * 92 + var(--c4) * 92) * 1px)); } .sc-mcp-c-rail { stroke-dasharray: 1; stroke-dashoffset: calc(1 - (var(--c1) * 98 + var(--c2) * 92 + var(--c3) * 92 + var(--c4) * 92) / 374); } .pg-duo > .sc-mcp-scene { align-self: center; } @media (min-width: 900px) { .pg-duo > .sc-mcp-scene--c { max-width: 540px; justify-self: center; } } .sc-mcp-echanges { display: grid; gap: var(--s-6) var(--s-7); } .wp-block-group.sc-mcp-echange { display: grid; gap: var(--s-3); align-content: start; } .wp-block-group.sc-mcp-echange > * { margin-block: 0; } p.sc-mcp-q, p.sc-mcp-r { padding: .85rem 1.1rem; font-size: var(--t-s); line-height: 1.55; } p.sc-mcp-q { justify-self: end; max-width: 88%; background: var(--encre); color: var(--glace); border-radius: 18px 18px 4px 18px; } p.sc-mcp-r { justify-self: start; max-width: 94%; background: var(--blanc); color: var(--encre); border: 1px solid rgba(10,38,51,.1); border-radius: 18px 18px 18px 4px; box-shadow: 0 1px 2px rgba(10,38,51,.05), 0 10px 26px -16px rgba(10,38,51,.3); } .sc-mcp-qui { display: block; margin-bottom: .2rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .sc-mcp-q .sc-mcp-qui { color: var(--menthe); } .sc-mcp-r .sc-mcp-qui { color: var(--lien-clair); } .sc-mcp-echange.sc .sc-mcp-q { --k: clamp(0, calc((var(--p) - .06) * 7), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 16px)); } .sc-mcp-echange.sc .sc-mcp-r { --k: clamp(0, calc((var(--p) - .16) * 7), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 16px)); } @media (min-width: 900px) { .sc-mcp-echanges { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wp-block-group.sc-mcp-rgpd { display: grid; gap: var(--s-3); padding: clamp(1.25rem, .9rem + 2vw, 2.5rem); border: 1px solid var(--ligne-forte); border-radius: var(--r-l); background: linear-gradient(135deg, rgba(18,57,74,.7), rgba(12,45,59,.4)); } .wp-block-group.sc-mcp-rgpd > * { margin-block: 0; } .sc-mcp-rgpd h3 { font-size: var(--t-l); line-height: 1.2; font-variation-settings: "wdth" 110; } .sc-mcp-rgpd p { color: var(--doux); max-width: 78ch; line-height: 1.7; } .sc-mcp-rgpd strong { color: var(--texte); font-weight: 650; } @media (min-width: 900px) { .pg-duo--inverse > .sc-mcp-scene { order: -1; } } html.sc-statique .sc-mcp-a > .sc-stick { padding-block: var(--s-section); } .sc-mcp-a-l1 { --k: clamp(0, calc((var(--p) - 0.22) / 0.08), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-a-l2 { --k: clamp(0, calc((var(--p) - 0.3) / 0.08), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-a-l3a { --k: clamp(0, calc((var(--p) - 0.39) / 0.1), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-a-l3b { --k: clamp(0, calc((var(--p) - 0.42) / 0.1), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-a-l3c { --k: clamp(0, calc((var(--p) - 0.45) / 0.1), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-a-l4 { --k: clamp(0, calc((var(--p) - 0.7) / 0.08), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-a-q1 { --k: clamp(0, calc((var(--p) - 0.02) / 0.1), 1); clip-path: inset(-6px calc((1 - var(--k)) * 100%) -6px -2px); } .sc-mcp-a-q2 { --k: clamp(0, calc((var(--p) - 0.12) / 0.09), 1); clip-path: inset(-6px calc((1 - var(--k)) * 100%) -6px -2px); } .sc-mcp-a-halo1 { --k: clamp(0, calc((var(--p) - 0.2) / 0.06), 1); opacity: var(--k); } .sc-mcp-a-halo2 { --k: clamp(0, calc((var(--p) - 0.36) / 0.06), 1); opacity: var(--k); } .sc-mcp-a-mcpfond { --k: clamp(0, calc((var(--p) - 0.36) / 0.06), 1); opacity: var(--k); } .sc-mcp-a-c0 { --k: clamp(0, calc((var(--p) - 0.5) / 0.05), 1); opacity: var(--k); } .sc-mcp-a-c1 { --k: clamp(0, calc((var(--p) - 0.53) / 0.05), 1); opacity: var(--k); } .sc-mcp-a-c2 { --k: clamp(0, calc((var(--p) - 0.56) / 0.05), 1); opacity: var(--k); } .sc-mcp-a-d1-0 { --k: clamp(0, calc((var(--p) - 0.21) / 0.09), 1); transform: translate(calc(var(--k) * 0px), calc(var(--k) * 50px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d1-1 { --k: clamp(0, calc((var(--p) - 0.235) / 0.09), 1); transform: translate(calc(var(--k) * 0px), calc(var(--k) * 50px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d1-2 { --k: clamp(0, calc((var(--p) - 0.26) / 0.09), 1); transform: translate(calc(var(--k) * 0px), calc(var(--k) * 50px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d2-0 { --k: clamp(0, calc((var(--p) - 0.29) / 0.08), 1); transform: translate(calc(var(--k) * 38px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d2-1 { --k: clamp(0, calc((var(--p) - 0.315) / 0.08), 1); transform: translate(calc(var(--k) * 38px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d2-2 { --k: clamp(0, calc((var(--p) - 0.33999999999999997) / 0.08), 1); transform: translate(calc(var(--k) * 38px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d3a-0 { --k: clamp(0, calc((var(--p) - 0.38) / 0.1), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d3a-1 { --k: clamp(0, calc((var(--p) - 0.405) / 0.1), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d3a-2 { --k: clamp(0, calc((var(--p) - 0.43) / 0.1), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d3b-0 { --k: clamp(0, calc((var(--p) - 0.41) / 0.1), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d3b-1 { --k: clamp(0, calc((var(--p) - 0.435) / 0.1), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d3b-2 { --k: clamp(0, calc((var(--p) - 0.45999999999999996) / 0.1), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d3c-0 { --k: clamp(0, calc((var(--p) - 0.44) / 0.1), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * 66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d3c-1 { --k: clamp(0, calc((var(--p) - 0.465) / 0.1), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * 66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-d3c-2 { --k: clamp(0, calc((var(--p) - 0.49) / 0.1), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * 66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r3a-0 { --k: clamp(0, calc((var(--p) - 0.57) / 0.08), 1); transform: translate(calc(var(--k) * -60px), calc(var(--k) * 66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r3a-1 { --k: clamp(0, calc((var(--p) - 0.595) / 0.08), 1); transform: translate(calc(var(--k) * -60px), calc(var(--k) * 66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r3b-0 { --k: clamp(0, calc((var(--p) - 0.58) / 0.08), 1); transform: translate(calc(var(--k) * -60px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r3b-1 { --k: clamp(0, calc((var(--p) - 0.605) / 0.08), 1); transform: translate(calc(var(--k) * -60px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r3c-0 { --k: clamp(0, calc((var(--p) - 0.59) / 0.08), 1); transform: translate(calc(var(--k) * -60px), calc(var(--k) * -66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r3c-1 { --k: clamp(0, calc((var(--p) - 0.615) / 0.08), 1); transform: translate(calc(var(--k) * -60px), calc(var(--k) * -66px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r2-0 { --k: clamp(0, calc((var(--p) - 0.65) / 0.06), 1); transform: translate(calc(var(--k) * -38px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r2-1 { --k: clamp(0, calc((var(--p) - 0.675) / 0.06), 1); transform: translate(calc(var(--k) * -38px), calc(var(--k) * 0px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r4-0 { --k: clamp(0, calc((var(--p) - 0.69) / 0.08), 1); transform: translate(calc(var(--k) * 0px), calc(var(--k) * 46px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r4-1 { --k: clamp(0, calc((var(--p) - 0.715) / 0.08), 1); transform: translate(calc(var(--k) * 0px), calc(var(--k) * 46px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-r4-2 { --k: clamp(0, calc((var(--p) - 0.74) / 0.08), 1); transform: translate(calc(var(--k) * 0px), calc(var(--k) * 46px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-a-t1 { --k: clamp(0, calc((var(--p) - 0.76) / 0.06), 1); clip-path: inset(-6px calc((1 - var(--k)) * 100%) -6px -2px); } .sc-mcp-a-t2 { --k: clamp(0, calc((var(--p) - 0.8) / 0.05), 1); clip-path: inset(-6px calc((1 - var(--k)) * 100%) -6px -2px); } .sc-mcp-a-row0 { --k: clamp(0, calc((var(--p) - 0.83) / 0.04), 1); opacity: var(--k); } .sc-mcp-a-bar0 { --k: clamp(0, calc((var(--p) - 0.84) / 0.06), 1); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-mcp-a-row1 { --k: clamp(0, calc((var(--p) - 0.86) / 0.04), 1); opacity: var(--k); } .sc-mcp-a-bar1 { --k: clamp(0, calc((var(--p) - 0.87) / 0.06), 1); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-mcp-a-row2 { --k: clamp(0, calc((var(--p) - 0.8899999999999999) / 0.04), 1); opacity: var(--k); } .sc-mcp-a-bar2 { --k: clamp(0, calc((var(--p) - 0.8999999999999999) / 0.06), 1); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-mcp-a-pill { --k: clamp(0, calc((var(--p) - 0.94) / 0.05), 1); opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * 8px)); } .sc-mcp-a-rep { --k: clamp(0, calc((var(--p) - 0.71) / 0.06), 1); opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * 18px)); } .sc-mcp-b-cal { --k: clamp(0, calc((var(--q) - 0) / 0.1), 1); opacity: var(--k); } .sc-mcp-b-l0 { --k: clamp(0, calc((var(--q) - 0.1) / 0.16), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-b-d0-0 { --k: clamp(0, calc((var(--q) - 0.1) / 0.14), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -62px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-d0-1 { --k: clamp(0, calc((var(--q) - 0.15000000000000002) / 0.14), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -62px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-d0-2 { --k: clamp(0, calc((var(--q) - 0.2) / 0.14), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -62px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-l1 { --k: clamp(0, calc((var(--q) - 0.14) / 0.16), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-b-d1-0 { --k: clamp(0, calc((var(--q) - 0.15000000000000002) / 0.14), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -82px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-d1-1 { --k: clamp(0, calc((var(--q) - 0.2) / 0.14), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -82px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-d1-2 { --k: clamp(0, calc((var(--q) - 0.25) / 0.14), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -82px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-l2 { --k: clamp(0, calc((var(--q) - 0.18) / 0.16), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-b-d2-0 { --k: clamp(0, calc((var(--q) - 0.2) / 0.14), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -102px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-d2-1 { --k: clamp(0, calc((var(--q) - 0.25) / 0.14), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -102px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-d2-2 { --k: clamp(0, calc((var(--q) - 0.30000000000000004) / 0.14), 1); transform: translate(calc(var(--k) * 60px), calc(var(--k) * -102px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-titre { --k: clamp(0, calc((var(--q) - 0.22) / 0.1), 1); clip-path: inset(-6px calc((1 - var(--k)) * 100%) -6px -2px); } .sc-mcp-b-tx0 { --k: clamp(0, calc((var(--q) - 0.32) / 0.1), 1); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-mcp-b-tx1 { --k: clamp(0, calc((var(--q) - 0.37) / 0.1), 1); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-mcp-b-bar0 { --k: clamp(0, calc((var(--q) - 0.42) / 0.16), 1); transform-box: fill-box; transform-origin: center bottom; transform: scaleY(var(--k)); } .sc-mcp-b-bar1 { --k: clamp(0, calc((var(--q) - 0.47) / 0.16), 1); transform-box: fill-box; transform-origin: center bottom; transform: scaleY(var(--k)); } .sc-mcp-b-bar2 { --k: clamp(0, calc((var(--q) - 0.52) / 0.16), 1); transform-box: fill-box; transform-origin: center bottom; transform: scaleY(var(--k)); } .sc-mcp-b-bar3 { --k: clamp(0, calc((var(--q) - 0.5700000000000001) / 0.16), 1); transform-box: fill-box; transform-origin: center bottom; transform: scaleY(var(--k)); } .sc-mcp-b-bar4 { --k: clamp(0, calc((var(--q) - 0.62) / 0.16), 1); transform-box: fill-box; transform-origin: center bottom; transform: scaleY(var(--k)); } .sc-mcp-b-tz0 { --k: clamp(0, calc((var(--q) - 0.64) / 0.08), 1); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-mcp-b-tz1 { --k: clamp(0, calc((var(--q) - 0.68) / 0.08), 1); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-mcp-b-tz2 { --k: clamp(0, calc((var(--q) - 0.72) / 0.08), 1); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-mcp-b-env { --k: clamp(0, calc((var(--q) - 0.78) / 0.06), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-b-de0 { --k: clamp(0, calc((var(--q) - 0.77) / 0.07), 1); transform: translate(calc(var(--k) * 0px), calc(var(--k) * 30px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-de1 { --k: clamp(0, calc((var(--q) - 0.8) / 0.07), 1); transform: translate(calc(var(--k) * 0px), calc(var(--k) * 30px)); opacity: min(calc(var(--k) * 7), calc((1 - var(--k)) * 7)); } .sc-mcp-b-notif { --k: clamp(0, calc((var(--q) - 0.84) / 0.1), 1); opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * 22px)); } .sc-mcp-c-on0 { --k: clamp(0, calc((var(--q) - 0.2) / 0.06), 1); opacity: var(--k); } .sc-mcp-c-ok0 { --k: clamp(0, calc((var(--q) - 0.2) / 0.05), 1); opacity: var(--k); } .sc-mcp-c-n0 { --k: clamp(0, calc((var(--q) - 0.2) / 0.04), 1); opacity: var(--k); } .sc-mcp-c-v0 { --k: clamp(0, calc((var(--q) - 0.23) / 0.06), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-c-on1 { --k: clamp(0, calc((var(--q) - 0.45) / 0.06), 1); opacity: var(--k); } .sc-mcp-c-ok1 { --k: clamp(0, calc((var(--q) - 0.45) / 0.05), 1); opacity: var(--k); } .sc-mcp-c-n1 { --k: clamp(0, calc((var(--q) - 0.45) / 0.04), 1); opacity: var(--k); } .sc-mcp-c-v1 { --k: clamp(0, calc((var(--q) - 0.48) / 0.06), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-c-on2 { --k: clamp(0, calc((var(--q) - 0.7) / 0.06), 1); opacity: var(--k); } .sc-mcp-c-ok2 { --k: clamp(0, calc((var(--q) - 0.7) / 0.05), 1); opacity: var(--k); } .sc-mcp-c-n2 { --k: clamp(0, calc((var(--q) - 0.7) / 0.04), 1); opacity: var(--k); } .sc-mcp-c-v2 { --k: clamp(0, calc((var(--q) - 0.73) / 0.06), 1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-mcp-c-cible { --k: clamp(0, calc((var(--q) - 0.9) / 0.08), 1); opacity: var(--k); } .sc-mcp-c-maj { --k: clamp(0, calc((var(--q) - 0.92) / 0.08), 1); opacity: var(--k); } .sc-mcp-c-refus { --k: clamp(0, calc((var(--q) - 0.28) / 0.1), 1); opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * 12px)); } /* ---- scenes-n8n.css ---- */ .wp-block-group.alignfull.sc-n8n { margin-block: 0; --sc-h: 330vh; --sc-h-m: 300vh; position: relative; isolation: isolate; border-top: 1px solid var(--ligne); } .wp-block-group.alignfull.sc-n8n.sc-n8n-b { --sc-h: 250vh; --sc-h-m: 250vh; } .sc-n8n::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 85% 20%, rgba(23,152,213,.16), transparent 70%), radial-gradient(45% 45% at 10% 85%, rgba(101,216,192,.09), transparent 70%), linear-gradient(180deg, var(--abysse), var(--nuit) 90%); } .sc-n8n > .sc-stick { padding-block: calc(var(--entete-h) + .75rem) 1.25rem; } .sc-n8n-wrap.wrap { display: grid; gap: var(--s-3); justify-items: center; align-content: center; } .sc-n8n-wrap > * { margin-block: 0; max-width: 100%; } .sc-n8n-wrap > p.kicker { justify-self: start; } .sc-n8n-fig { width: 100%; display: grid; justify-items: center; } .sc-n8n-svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 17rem); min-height: 0; overflow: visible; } .sc-n8n-h { display: block; } .sc-n8n-m { display: none; } @media (max-width: 899px) { .sc-n8n-h { display: none; } .sc-n8n-m { display: block; max-width: 440px; max-height: calc(100vh - 15rem); } .sc-n8n > .sc-stick { padding-block: calc(var(--entete-h) + .25rem) .75rem; } } .sc-n8n-etapes { display: grid; width: 100%; max-width: 60rem; min-height: 5.6em; align-items: start; } .sc-n8n-etapes > p { grid-area: 1 / 1; margin: 0; color: var(--doux); font-size: var(--t-s); line-height: 1.55; } .sc-n8n-etapes > p strong { color: var(--texte); font-weight: 650; } @media (max-width: 899px) { .sc-n8n-etapes { min-height: 6.6em; } .sc-n8n-etapes > p { font-size: .875rem; line-height: 1.5; } } html.sc-statique .sc-n8n > .sc-stick { padding-block: var(--s-8); } html.sc-statique .sc-n8n-etapes { min-height: 0; gap: var(--s-3) var(--s-6); } html.sc-statique .sc-n8n-etapes > p { grid-area: auto; opacity: 1 !important; } html.sc-statique .sc-n8n-svg { max-height: none; } @media (min-width: 900px) { html.sc-statique .sc-n8n-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (scripting: none) { .sc-n8n.sc--tall { height: auto; } .sc-n8n.sc--tall > .sc-stick { position: static; height: auto; min-height: 0; overflow: visible; padding-block: var(--s-8); } .sc-n8n-etapes { min-height: 0; gap: var(--s-3) var(--s-6); } .sc-n8n-etapes > p { grid-area: auto; opacity: 1 !important; } .sc-n8n-svg { max-height: none; } } .sc-n8n-frame { fill: rgba(7,31,42,.55); stroke: var(--ligne-forte); stroke-width: 1; } .sc-n8n-dot { fill: rgba(169,193,201,.2); } .sc-n8n-ghost { fill: none; stroke: var(--doux); stroke-opacity: .28; stroke-width: 1.2; stroke-dasharray: 3 5; } .sc-n8n-disc { fill: var(--abysse); stroke: var(--ciel); stroke-width: 1.6; } .sc-n8n-ia .sc-n8n-disc { fill: #0F3A4C; } .sc-n8n-ring { fill: rgba(101,216,192,.14); stroke: var(--menthe); stroke-width: 2.2; } .sc-n8n-halo { stroke: none; } .sc-n8n-ico { fill: none; stroke: var(--texte); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sc-n8n-node, .sc-n8n-nd, .sc-n8n-card, .sc-n8n-bhub { transform-box: fill-box; transform-origin: center; } .sc-n8n-conn { fill: none; stroke: var(--ciel); stroke-opacity: .75; stroke-width: 2; stroke-dasharray: 1; } .sc-n8n-arw { fill: none; stroke: var(--ciel); stroke-opacity: .9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sc-n8n-t1 { fill: var(--texte); font-size: 15px; font-weight: 650; font-family: var(--f); font-variation-settings: "wdth" 105; } .sc-n8n-t2 { fill: var(--doux); font-size: 13px; font-family: var(--f); } .sc-n8n-mint { fill: var(--menthe); } .sc-n8n-yes, .sc-n8n-no { font-size: 13px; font-weight: 700; font-family: var(--f); letter-spacing: .06em; text-transform: uppercase; } .sc-n8n-yes { fill: var(--menthe); } .sc-n8n-no { fill: var(--ciel); } .sc-n8n-m .sc-n8n-t1 { font-size: 13.5px; } .sc-n8n-m .sc-n8n-t2 { font-size: 12.5px; } .sc-n8n-m .sc-n8n-yes, .sc-n8n-m .sc-n8n-no { font-size: 12.5px; } .sc-n8n-tok path { fill: none; stroke-linecap: round; stroke-dasharray: .0006 4; } .sc-n8n-tok-glow { stroke-width: 26; } .sc-n8n-tok-core { stroke: #fff; stroke-width: 9; } .sc-n8n-tok-a .sc-n8n-tok-glow { stroke: var(--menthe); stroke-opacity: .38; } .sc-n8n-tok-b .sc-n8n-tok-glow { stroke: var(--ciel); stroke-opacity: .42; } .sc-n8n-m .sc-n8n-tok-glow { stroke-width: 20; } .sc-n8n-m .sc-n8n-tok-core { stroke-width: 7; } .sc-n8n-card-bg { fill: var(--surface); stroke: var(--ligne-forte); stroke-width: 1.2; } .sc-n8n-box { fill: none; stroke: var(--doux); stroke-opacity: .3; stroke-width: 1.2; stroke-dasharray: 5 6; } .sc-n8n-hubt { fill: var(--texte); font-size: 24px; font-weight: 800; font-family: var(--f); font-variation-settings: "wdth" 120; letter-spacing: .02em; } .sc-n8n-m .sc-n8n-hubt { font-size: 21px; } .sc-n8n-tile { fill: #0F3A4C; stroke: rgba(101,216,192,.45); stroke-width: 1.4; } .sc-n8n-tile-ic { fill: rgba(101,216,192,.16); stroke: var(--menthe); stroke-width: 1.6; } .sc-n8n-check { fill: none; stroke: var(--menthe); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; } .sc-n8n-flow { fill: none; stroke: var(--menthe); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .05 .1; } .sc-n8n-panel { fill: rgba(12,45,59,.7); stroke: var(--ligne-forte); stroke-width: 1.2; } .sc-n8n-clk-base { fill: none; stroke: var(--doux); stroke-opacity: .4; stroke-width: 1.6; } .sc-n8n-clk-on { fill: rgba(101,216,192,.2); stroke: var(--menthe); stroke-width: 2; } .sc-n8n-clk-hand { fill: none; stroke: var(--doux); stroke-opacity: .6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sc-n8n-fixe { display: block; width: 100%; height: 100%; } .sc-n8n-a { --ta: clamp(0, calc((var(--p) - 0.62) * 3.333), 1); --tb: clamp(0, calc((var(--p) - 0.68) * 3.333), 1); } .sc-n8n-n1 > .sc-n8n-nd { --a: clamp(0, calc((var(--p) - 0.03) * 16.667), 1); opacity: var(--a); transform: scale(calc(.55 + .45 * var(--a))); } .sc-n8n-n1 > .sc-n8n-lab { opacity: clamp(0, calc((var(--p) - 0.08) * 20.000), 1); } .sc-n8n-n2 > .sc-n8n-nd { --a: clamp(0, calc((var(--p) - 0.15) * 16.667), 1); opacity: var(--a); transform: scale(calc(.55 + .45 * var(--a))); } .sc-n8n-n2 > .sc-n8n-lab { opacity: clamp(0, calc((var(--p) - 0.2) * 20.000), 1); } .sc-n8n-n3 > .sc-n8n-nd { --a: clamp(0, calc((var(--p) - 0.27) * 16.667), 1); opacity: var(--a); transform: scale(calc(.55 + .45 * var(--a))); } .sc-n8n-n3 > .sc-n8n-lab { opacity: clamp(0, calc((var(--p) - 0.32) * 20.000), 1); } .sc-n8n-n4 > .sc-n8n-nd { --a: clamp(0, calc((var(--p) - 0.41) * 16.667), 1); opacity: var(--a); transform: scale(calc(.55 + .45 * var(--a))); } .sc-n8n-n4 > .sc-n8n-lab { opacity: clamp(0, calc((var(--p) - 0.46) * 20.000), 1); } .sc-n8n-n5 > .sc-n8n-nd { --a: clamp(0, calc((var(--p) - 0.53) * 16.667), 1); opacity: var(--a); transform: scale(calc(.55 + .45 * var(--a))); } .sc-n8n-n5 > .sc-n8n-lab { opacity: clamp(0, calc((var(--p) - 0.58) * 20.000), 1); } .sc-n8n-n6 > .sc-n8n-nd { --a: clamp(0, calc((var(--p) - 0.41) * 16.667), 1); opacity: var(--a); transform: scale(calc(.55 + .45 * var(--a))); } .sc-n8n-n6 > .sc-n8n-lab { opacity: clamp(0, calc((var(--p) - 0.46) * 20.000), 1); } .sc-n8n-n7 > .sc-n8n-nd { --a: clamp(0, calc((var(--p) - 0.53) * 16.667), 1); opacity: var(--a); transform: scale(calc(.55 + .45 * var(--a))); } .sc-n8n-n7 > .sc-n8n-lab { opacity: clamp(0, calc((var(--p) - 0.58) * 20.000), 1); } .sc-n8n-c1 { --a: clamp(0, calc((var(--p) - 0.09) * 12.500), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-c1-a { opacity: clamp(0, calc((var(--p) - 0.155) * 66.667), 1); } .sc-n8n-c2 { --a: clamp(0, calc((var(--p) - 0.21) * 12.500), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-c2-a { opacity: clamp(0, calc((var(--p) - 0.275) * 66.667), 1); } .sc-n8n-c3y { --a: clamp(0, calc((var(--p) - 0.33) * 10.000), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-c3y-a { opacity: clamp(0, calc((var(--p) - 0.415) * 66.667), 1); } .sc-n8n-c3n { --a: clamp(0, calc((var(--p) - 0.33) * 10.000), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-c3n-a { opacity: clamp(0, calc((var(--p) - 0.415) * 66.667), 1); } .sc-n8n-c4 { --a: clamp(0, calc((var(--p) - 0.47) * 12.500), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-c4-a { opacity: clamp(0, calc((var(--p) - 0.535) * 66.667), 1); } .sc-n8n-c6 { --a: clamp(0, calc((var(--p) - 0.47) * 12.500), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-c6-a { opacity: clamp(0, calc((var(--p) - 0.535) * 66.667), 1); } .sc-n8n-c3y-l, .sc-n8n-c3n-l { opacity: clamp(0, calc((var(--p) - 0.38) * 20.000), 1); } .sc-n8n-h .sc-n8n-n1 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.000) * 40), 1); } .sc-n8n-h .sc-n8n-n2 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.221) * 40), 1); } .sc-n8n-h .sc-n8n-n3 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.457) * 40), 1); } .sc-n8n-h .sc-n8n-n4 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.749) * 40), 1); } .sc-n8n-h .sc-n8n-n5 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.985) * 40), 1); } .sc-n8n-h .sc-n8n-n6 .sc-n8n-lit { opacity: clamp(0, calc((var(--tb) - 0.749) * 40), 1); } .sc-n8n-h .sc-n8n-n7 .sc-n8n-lit { opacity: clamp(0, calc((var(--tb) - 0.985) * 40), 1); } .sc-n8n-m .sc-n8n-n1 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.000) * 40), 1); } .sc-n8n-m .sc-n8n-n2 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.203) * 40), 1); } .sc-n8n-m .sc-n8n-n3 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.421) * 40), 1); } .sc-n8n-m .sc-n8n-n4 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.703) * 40), 1); } .sc-n8n-m .sc-n8n-n5 .sc-n8n-lit { opacity: clamp(0, calc((var(--ta) - 0.985) * 40), 1); } .sc-n8n-m .sc-n8n-n6 .sc-n8n-lit { opacity: clamp(0, calc((var(--tb) - 0.776) * 40), 1); } .sc-n8n-m .sc-n8n-n7 .sc-n8n-lit { opacity: clamp(0, calc((var(--tb) - 0.985) * 40), 1); } .sc-n8n-tok-a { opacity: calc(clamp(0, calc(var(--ta) * 80), 1) * clamp(0, calc((1 - var(--ta)) * 25), 1)); } .sc-n8n-tok-a path { stroke-dashoffset: calc(var(--ta) * -1); } .sc-n8n-tok-b { opacity: calc(clamp(0, calc(var(--tb) * 80), 1) * clamp(0, calc((1 - var(--tb)) * 25), 1)); } .sc-n8n-tok-b path { stroke-dashoffset: calc(var(--tb) * -1); } .sc-n8n-a .sc-n8n-etapes > p:nth-child(1) { opacity: calc(1 * (1 - clamp(0, calc((var(--p) - 0.18) * 33.333), 1))); } .sc-n8n-a .sc-n8n-etapes > p:nth-child(2) { opacity: calc(clamp(0, calc((var(--p) - 0.24) * 33.333), 1) * (1 - clamp(0, calc((var(--p) - 0.36) * 33.333), 1))); } .sc-n8n-a .sc-n8n-etapes > p:nth-child(3) { opacity: calc(clamp(0, calc((var(--p) - 0.42) * 33.333), 1) * (1 - clamp(0, calc((var(--p) - 0.53) * 33.333), 1))); } .sc-n8n-a .sc-n8n-etapes > p:nth-child(4) { opacity: calc(clamp(0, calc((var(--p) - 0.6) * 33.333), 1)); } .sc-n8n-bd1 { --x: clamp(0, calc((var(--p) - 0.1) * 3.333), 1); --e: calc(1 - (1 - var(--x)) * (1 - var(--x))); transform: translate(calc((1 - var(--e)) * 190px), calc((1 - var(--e)) * 30px)) rotate(calc((1 - var(--e)) * -7deg)); } .sc-n8n-m .sc-n8n-bd1 { transform: translate(calc((1 - var(--e)) * 50px), calc((1 - var(--e)) * 40px)) rotate(calc((1 - var(--e)) * -8deg)); } .sc-n8n-bc1 { --a: clamp(0, calc((var(--p) - 0.42) * 7.143), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-bd2 { --x: clamp(0, calc((var(--p) - 0.13) * 3.333), 1); --e: calc(1 - (1 - var(--x)) * (1 - var(--x))); transform: translate(calc((1 - var(--e)) * 110px), calc((1 - var(--e)) * 80px)) rotate(calc((1 - var(--e)) * 6deg)); } .sc-n8n-m .sc-n8n-bd2 { transform: translate(calc((1 - var(--e)) * 0px), calc((1 - var(--e)) * 50px)) rotate(calc((1 - var(--e)) * 5deg)); } .sc-n8n-bc2 { --a: clamp(0, calc((var(--p) - 0.44) * 7.143), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-bd3 { --x: clamp(0, calc((var(--p) - 0.16) * 3.333), 1); --e: calc(1 - (1 - var(--x)) * (1 - var(--x))); transform: translate(calc((1 - var(--e)) * 40px), calc((1 - var(--e)) * 40px)) rotate(calc((1 - var(--e)) * 8deg)); } .sc-n8n-m .sc-n8n-bd3 { transform: translate(calc((1 - var(--e)) * -50px), calc((1 - var(--e)) * 36px)) rotate(calc((1 - var(--e)) * 9deg)); } .sc-n8n-bc3 { --a: clamp(0, calc((var(--p) - 0.46) * 7.143), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-bd4 { --x: clamp(0, calc((var(--p) - 0.19) * 3.333), 1); --e: calc(1 - (1 - var(--x)) * (1 - var(--x))); transform: translate(calc((1 - var(--e)) * 200px), calc((1 - var(--e)) * -70px)) rotate(calc((1 - var(--e)) * -6deg)); } .sc-n8n-m .sc-n8n-bd4 { transform: translate(calc((1 - var(--e)) * 60px), calc((1 - var(--e)) * -44px)) rotate(calc((1 - var(--e)) * 6deg)); } .sc-n8n-bc4 { --a: clamp(0, calc((var(--p) - 0.48) * 7.143), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-bd5 { --x: clamp(0, calc((var(--p) - 0.22) * 3.333), 1); --e: calc(1 - (1 - var(--x)) * (1 - var(--x))); transform: translate(calc((1 - var(--e)) * 60px), calc((1 - var(--e)) * -20px)) rotate(calc((1 - var(--e)) * 7deg)); } .sc-n8n-m .sc-n8n-bd5 { transform: translate(calc((1 - var(--e)) * -4px), calc((1 - var(--e)) * -52px)) rotate(calc((1 - var(--e)) * -7deg)); } .sc-n8n-bc5 { --a: clamp(0, calc((var(--p) - 0.5) * 7.143), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-bd6 { --x: clamp(0, calc((var(--p) - 0.25) * 3.333), 1); --e: calc(1 - (1 - var(--x)) * (1 - var(--x))); transform: translate(calc((1 - var(--e)) * 150px), calc((1 - var(--e)) * -120px)) rotate(calc((1 - var(--e)) * -8deg)); } .sc-n8n-m .sc-n8n-bd6 { transform: translate(calc((1 - var(--e)) * -60px), calc((1 - var(--e)) * -38px)) rotate(calc((1 - var(--e)) * 8deg)); } .sc-n8n-bc6 { --a: clamp(0, calc((var(--p) - 0.52) * 7.143), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-m .sc-n8n-bc1 { --a: clamp(0, calc((var(--p) - 0.5) * 10.000), 1); } .sc-n8n-bc1-a { opacity: clamp(0, calc((var(--p) - 0.585) * 66.667), 1); } .sc-n8n-bhub > .sc-n8n-nd { --a: clamp(0, calc((var(--p) - 0.38) * 8.333), 1); opacity: var(--a); transform: scale(calc(.6 + .4 * var(--a))); } .sc-n8n-bhub > .sc-n8n-lab { opacity: clamp(0, calc((var(--p) - 0.49) * 20.000), 1); } .sc-n8n-bhub .sc-n8n-lit { opacity: clamp(0, calc((var(--p) - 0.56) * 16.667), 1); } .sc-n8n-btr { --a: clamp(0, calc((var(--p) - 0.6) * 8.333), 1); stroke-dashoffset: calc(1 - var(--a)); } .sc-n8n-btr-a { opacity: clamp(0, calc((var(--p) - 0.705) * 66.667), 1); } .sc-n8n-flow { opacity: clamp(0, calc((var(--p) - 0.72) * 20.000), 1); stroke-dashoffset: calc(var(--p) * -1.6); } .sc-n8n-bout { opacity: clamp(0, calc((var(--p) - 0.7) * 10.000), 1); } .sc-n8n-check { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.78) * 10.000), 1)); } .sc-n8n-bk1 .sc-n8n-clk-on { opacity: clamp(0, calc((var(--p) - 0.58) * 20.000), 1); } .sc-n8n-bk2 .sc-n8n-clk-on { opacity: clamp(0, calc((var(--p) - 0.64) * 20.000), 1); } .sc-n8n-bk3 .sc-n8n-clk-on { opacity: clamp(0, calc((var(--p) - 0.7) * 20.000), 1); } .sc-n8n-bk4 .sc-n8n-clk-on { opacity: clamp(0, calc((var(--p) - 0.76) * 20.000), 1); } .sc-n8n-bk5 .sc-n8n-clk-on { opacity: clamp(0, calc((var(--p) - 0.82) * 20.000), 1); } .sc-n8n-bk6 .sc-n8n-clk-on { opacity: clamp(0, calc((var(--p) - 0.88) * 20.000), 1); } .sc-n8n-b .sc-n8n-etapes > p:nth-child(1) { opacity: calc(1 - clamp(0, calc((var(--p) - 0.46) * 25.000), 1)); } .sc-n8n-b .sc-n8n-etapes > p:nth-child(2) { opacity: clamp(0, calc((var(--p) - 0.54) * 25.000), 1); } /* ---- scenes-chiffres.css ---- */ .sc-ch-scene .wp-block-group > *, .sc-ch-scene .wp-block-group.sc-ch-rep > * { margin-block: 0; } .sc-ch-scene .wp-block-group.alignfull { margin-block: 0; } .sc-ch-scene :is(h2, h3) { margin: 0; } .sc-ch-scene :is(h2, h3) em { font-style: normal; color: var(--menthe); } .clair.sc-ch-scene :is(h2, h3) em { color: var(--lien-clair); } .sc-ch-scene--ca { --pc: clamp(0, calc((var(--p) - .06) / .8), 1); --sc-h: 300vh; --sc-ch-haut: var(--entete-h, 77px); background: radial-gradient(46% 60% at 88% 30%, rgba(23,152,213,.20), transparent 70%), radial-gradient(36% 50% at 12% 80%, rgba(101,216,192,.09), transparent 70%), var(--nuit); border-top: 1px solid var(--ligne); } .sc-ch-scene--ca > .sc-stick { box-sizing: border-box; padding-block: calc(var(--sc-ch-haut) + .75rem) 1.25rem; align-content: center; } .sc-ch-wrap { width: 100%; } .sc-ch-duo { display: grid; gap: var(--s-4); align-items: center; grid-template-columns: minmax(0, 1fr); } .sc-ch-texte { display: grid; gap: var(--s-3); align-content: center; min-width: 0; } .sc-ch-graphe { display: grid; gap: var(--s-3); min-width: 0; } .sc-ch-texte h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1.06; letter-spacing: -.015em; font-variation-settings: "wdth" 115; } .sc-ch-intro { color: var(--doux); font-size: var(--t-m); line-height: 1.5; max-width: 40ch; } @media (min-width: 900px) { .sc-ch-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); } .sc-ch-texte { gap: var(--s-4); } } @media (max-width: 899px) { .sc-ch-intro { display: none; } } .sc-ch-valeur { display: grid; gap: .35rem; margin-top: var(--s-2); } .sc-ch-lib { margin: 0; color: var(--doux); font-size: var(--t-s); letter-spacing: .04em; } .sc-ch-pile, .sc-ch-jalons { display: grid; margin: 0; padding: 0; list-style: none; } .sc-ch-pile > li { --v: calc(clamp(0, calc((var(--pc) - var(--lo)) * 600), 1) * (1 - clamp(0, calc((var(--pc) - var(--hi)) * 600), 1))); grid-area: 1 / 1; display: grid; gap: .2rem; align-content: start; opacity: var(--v); translate: 0 calc((1 - var(--v)) * 10px); } .sc-ch-an { color: var(--menthe); font-size: var(--t-s); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-variation-settings: "wdth" 118; } .sc-ch-eur { font-weight: 800; font-size: clamp(2.25rem, 1rem + 3.9vw, 4.4rem); line-height: .95; letter-spacing: -.035em; font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; color: var(--texte); white-space: nowrap; } .sc-ch-eur small { font-size: .5em; color: var(--menthe); vertical-align: top; margin-left: .05em; } .sc-ch-jalons { margin-top: var(--s-2); min-height: 4.2em; } .sc-ch-jalons > li { --v: calc(clamp(0, calc((var(--pc) - var(--lo)) * 600), 1) * (1 - clamp(0, calc((var(--pc) - var(--hi)) * 600), 1))); grid-area: 1 / 1; display: grid; gap: .15rem; align-content: start; padding-left: .9rem; border-left: 2px solid var(--menthe); opacity: var(--v); translate: 0 calc((1 - var(--v)) * 8px); } .sc-ch-jalons strong { color: var(--texte); font-size: var(--t-m); font-weight: 700; } .sc-ch-jalons span { color: var(--doux); font-size: var(--t-s); line-height: 1.4; } .sc-ch-fig { margin: 0; } .sc-ch-plot { position: relative; } .sc-ch-svg { display: block; width: 100%; height: auto; overflow: visible; } .sc-ch-quadrillage line { stroke: var(--ligne); stroke-width: 1.5; } .sc-ch-graduations line { stroke: var(--ligne-forte); stroke-width: 2; } .sc-ch-ligne { stroke: var(--menthe); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: butt; stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - var(--pc)); } .sc-ch-masque rect { opacity: clamp(0, calc((var(--pc) - var(--b0)) * var(--r)), 1); } .sc-ch-reperes circle { fill: var(--nuit); stroke: var(--menthe); stroke-width: 3.5; opacity: clamp(0, calc((var(--pc) - var(--lo)) * 600), 1); } .sc-ch-point { display: none; offset-distance: calc(var(--pc) * 100%); offset-rotate: 0deg; } @supports (offset-path: path("M0 0 L1 1")) { .sc-ch-point { display: inline; } } .sc-ch-halo { fill: var(--menthe); opacity: .26; } .sc-ch-coeur { fill: var(--menthe); stroke: var(--nuit); stroke-width: 3; } .sc-ch-yl { position: absolute; left: 0; transform: translateY(calc(-100% - 3px)); font-size: .8125rem; line-height: 1; color: var(--doux); font-variant-numeric: tabular-nums; } .sc-ch-axe { position: relative; height: 1.7rem; margin-top: .15rem; } .sc-ch-xl { position: absolute; top: 0; transform: translateX(-50%); font-size: .8125rem; line-height: 1.2; color: var(--doux); font-variant-numeric: tabular-nums; } @media (max-width: 899px) { .sc-ch-xl--s { display: none; } } .sc-ch-note { margin: 0; max-width: 62ch; font-size: .8125rem; line-height: 1.5; color: var(--doux); } @media (max-width: 899px) { .sc-ch-ligne { stroke-width: 7.5; } .sc-ch-quadrillage line { stroke-width: 2.5; } .sc-ch-graduations line { stroke-width: 3.5; } .sc-ch-reperes circle { r: 11px; stroke-width: 5; } .sc-ch-halo { r: 24px; } .sc-ch-coeur { r: 11px; stroke-width: 4; } .sc-ch-eur { font-size: 2.6rem; } .sc-ch-jalons { min-height: 4em; } } html.sc-statique .sc-ch-scene--ca > .sc-stick { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); } @media (scripting: none) { .sc-ch-scene--ca.sc--tall { height: auto; } .sc-ch-scene--ca.sc--tall > .sc-stick { position: static; height: auto; min-height: 0; overflow: visible; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); } } .sc-ch-scene--eff { --pb: clamp(0, calc((var(--p) - .27) / .27), 1); } .sc-ch-scene--eff { padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); } .sc-ch-scene--eff > .wrap > * + * { margin-block-start: var(--s-6); } .sc-ch-scene--eff > .wrap > .pg-intro + * { margin-block-start: var(--s-6); } .sc-ch-barres { position: relative; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: clamp(.15rem, .5vw, .6rem); align-items: end; height: clamp(210px, 26vw, 340px); border-bottom: 2px solid var(--gris); background: linear-gradient(rgba(10,38,51,.14) 1px, transparent 1px) 0 0 / 100% 33.3333%; } .sc-ch-col { --t: clamp(0, calc((var(--pb) - var(--d)) / .5), 1); position: relative; height: 100%; min-width: 0; } .sc-ch-barre { position: absolute; left: 10%; right: 10%; bottom: 0; height: calc(var(--v) * var(--t) * 1%); background: var(--lien-clair); border-radius: 5px 5px 0 0; } .sc-ch-col:last-child .sc-ch-barre { background: var(--encre); } .sc-ch-val { position: absolute; left: -20%; right: -20%; text-align: center; bottom: calc(var(--v) * var(--t) * 1% + 6px); font-size: .8125rem; font-weight: 700; line-height: 1; color: var(--encre); font-variant-numeric: tabular-nums; opacity: var(--t); } .sc-ch-annees { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: clamp(.15rem, .5vw, .6rem); margin-top: .5rem; } .sc-ch-ann { min-width: 0; text-align: center; font-size: .8125rem; line-height: 1.2; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 700px) { .sc-ch-barres { height: 210px; } .sc-ch-ann:nth-child(even) { visibility: hidden; } .sc-ch-ann { margin-inline: -.4rem; } } .clair .sc-ch-note { color: var(--gris); } .sc-ch-scene--eff .sc-ch-note { margin-top: var(--s-4); } .sc-ch-scene--rep { --pc3: clamp(0, calc((var(--p) - .2) / .3), 1); } .sc-ch-scene--rep .tete { margin-bottom: var(--s-6); } .sc-ch-grille-rep { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .sc-ch-grille-rep { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } } .sc-ch-rep { --t: clamp(0, calc((var(--pc3) - var(--d)) / .6), 1); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: clamp(1.1rem, .8rem + 1vw, 1.9rem); border: 1px solid var(--ligne); border-radius: var(--r-m, 14px); background: linear-gradient(160deg, rgba(18,57,74,.72), rgba(12,45,59,.4)); opacity: var(--t); translate: 0 calc((1 - var(--t)) * 28px); } .sc-ch-n { margin: 0; font-weight: 800; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.6rem); line-height: .95; letter-spacing: -.04em; font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; color: var(--texte); white-space: nowrap; } .sc-ch-n small { font-size: .38em; letter-spacing: 0; color: var(--menthe); vertical-align: baseline; } .sc-ch-pre { color: var(--menthe); } .sc-ch-n--mot { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.2rem); padding-block: .2em; color: var(--menthe); } .sc-ch-rep-titre { font-size: var(--t-l); font-weight: 700; line-height: 1.2; color: var(--texte); } .sc-ch-rep p:not(.sc-ch-n) { color: var(--doux); font-size: var(--t-s); line-height: 1.5; } @media (max-width: 899px) { .sc-ch-rep { padding: 1rem; } .sc-ch-n { font-size: 2.4rem; } .sc-ch-n--mot { font-size: 1.55rem; } .sc-ch-rep-titre { font-size: 1rem; } } @property --sc-ch-n { syntax: ""; inherits: false; initial-value: 0; } @supports (transition-behavior: allow-discrete) { .sc-ch-reel { --sc-ch-n: calc(var(--t) * var(--fin)); counter-reset: sc-ch-n var(--sc-ch-n); position: relative; color: transparent; } .sc-ch-reel::after { content: counter(sc-ch-n); content: counter(sc-ch-n) / ""; position: absolute; inset: 0 auto auto 0; color: var(--texte); } } .sc-ch-section-donnees { border-top: 1px solid var(--ligne); } .pg-section.pg-section--serre.sc-ch-section-donnees { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--nuit); } .pg-section.pg-section--serre.sc-ch-section-donnees.clair { background: var(--glace); border-top: 0; } .sc-ch-donnees { max-width: 760px; margin-inline: auto; } .wp-block-details.sc-ch-donnees > summary { font-weight: 650; } .sc-ch-sous-titre { margin-top: var(--s-4); } .sc-ch-liste { margin: var(--s-2) 0 var(--s-4); padding-left: 1.2em; display: grid; gap: .4rem; font-size: var(--t-s); line-height: 1.5; } .sc-ch-table { margin: var(--s-3) 0 var(--s-2); overflow-x: auto; } .sc-ch-table table { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; } .sc-ch-table :is(th, td) { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--ligne); } .sc-ch-table td:nth-child(2), .sc-ch-table th:nth-child(2) { text-align: right; } .sc-ch-table thead th { font-weight: 700; border-bottom: 2px solid var(--ligne-forte); } .sc-ch-table figcaption { margin-top: .6rem; font-size: .8125rem; line-height: 1.5; text-align: left; color: var(--doux); } .clair .sc-ch-table :is(th, td) { border-bottom-color: rgba(10,38,51,.16); } .clair .sc-ch-table figcaption { color: var(--gris); } .sc-ch-pile > li:nth-child(1) { --lo: -1; --hi: 0.04149; } .sc-ch-pile > li:nth-child(2) { --lo: 0.04149; --hi: 0.08668; } .sc-ch-pile > li:nth-child(3) { --lo: 0.08668; --hi: 0.13737; } .sc-ch-pile > li:nth-child(4) { --lo: 0.13737; --hi: 0.18289; } .sc-ch-pile > li:nth-child(5) { --lo: 0.18289; --hi: 0.2272; } .sc-ch-pile > li:nth-child(6) { --lo: 0.2272; --hi: 0.27318; } .sc-ch-pile > li:nth-child(7) { --lo: 0.27318; --hi: 0.31816; } .sc-ch-pile > li:nth-child(8) { --lo: 0.31816; --hi: 0.36333; } .sc-ch-pile > li:nth-child(9) { --lo: 0.36333; --hi: 0.41177; } .sc-ch-pile > li:nth-child(10) { --lo: 0.41177; --hi: 0.45588; } .sc-ch-pile > li:nth-child(11) { --lo: 0.45588; --hi: 0.49956; } .sc-ch-pile > li:nth-child(12) { --lo: 0.49956; --hi: 0.55889; } .sc-ch-pile > li:nth-child(13) { --lo: 0.55889; --hi: 0.60441; } .sc-ch-pile > li:nth-child(14) { --lo: 0.60441; --hi: 0.65457; } .sc-ch-pile > li:nth-child(15) { --lo: 0.65457; --hi: 0.69926; } .sc-ch-pile > li:nth-child(16) { --lo: 0.69926; --hi: 0.75073; } .sc-ch-pile > li:nth-child(17) { --lo: 0.75073; --hi: 0.79758; } .sc-ch-pile > li:nth-child(18) { --lo: 0.79758; --hi: 0.87386; } .sc-ch-pile > li:nth-child(19) { --lo: 0.87386; --hi: 0.92133; } .sc-ch-pile > li:nth-child(20) { --lo: 0.92133; --hi: 0.998; } .sc-ch-pile > li:nth-child(21) { --lo: 0.998; --hi: 2; } .sc-ch-jalons > li:nth-child(1) { --lo: -1; --hi: 0.08668; } .sc-ch-jalons > li:nth-child(2) { --lo: 0.08668; --hi: 0.13737; } .sc-ch-jalons > li:nth-child(3) { --lo: 0.13737; --hi: 0.18289; } .sc-ch-jalons > li:nth-child(4) { --lo: 0.18289; --hi: 0.27318; } .sc-ch-jalons > li:nth-child(5) { --lo: 0.27318; --hi: 0.998; } .sc-ch-jalons > li:nth-child(6) { --lo: 0.998; --hi: 2; } .sc-ch-masque rect:nth-child(1) { --b0: 0; --r: 22.99506; } .sc-ch-masque rect:nth-child(2) { --b0: 0.04349; --r: 22.13004; } .sc-ch-masque rect:nth-child(3) { --b0: 0.08868; --r: 19.72644; } .sc-ch-masque rect:nth-child(4) { --b0: 0.13937; --r: 21.96917; } .sc-ch-masque rect:nth-child(5) { --b0: 0.18489; --r: 22.56474; } .sc-ch-masque rect:nth-child(6) { --b0: 0.2292; --r: 21.75136; } .sc-ch-masque rect:nth-child(7) { --b0: 0.27518; --r: 22.22964; } .sc-ch-masque rect:nth-child(8) { --b0: 0.32016; --r: 22.14189; } .sc-ch-masque rect:nth-child(9) { --b0: 0.36533; --r: 20.64239; } .sc-ch-masque rect:nth-child(10) { --b0: 0.41377; --r: 22.66821; } .sc-ch-masque rect:nth-child(11) { --b0: 0.45788; --r: 22.89434; } .sc-ch-masque rect:nth-child(12) { --b0: 0.50156; --r: 16.85709; } .sc-ch-masque rect:nth-child(13) { --b0: 0.56089; --r: 21.96557; } .sc-ch-masque rect:nth-child(14) { --b0: 0.60641; --r: 19.93515; } .sc-ch-masque rect:nth-child(15) { --b0: 0.65657; --r: 22.3782; } .sc-ch-masque rect:nth-child(16) { --b0: 0.70126; --r: 19.4303; } .sc-ch-masque rect:nth-child(17) { --b0: 0.75273; --r: 21.34469; } .sc-ch-masque rect:nth-child(18) { --b0: 0.79958; --r: 13.10825; } .sc-ch-masque rect:nth-child(19) { --b0: 0.87586; --r: 21.06989; } .sc-ch-masque rect:nth-child(20) { --b0: 0.92333; --r: 13.04217; } .sc-ch-reperes circle:nth-child(1) { --lo: 0.08668; } .sc-ch-reperes circle:nth-child(2) { --lo: 0.13737; } .sc-ch-reperes circle:nth-child(3) { --lo: 0.18289; } .sc-ch-reperes circle:nth-child(4) { --lo: 0.27318; } .sc-ch-reperes circle:nth-child(5) { --lo: 0.998; } .sc-ch-yl:nth-child(1) { top: 69.318%; } .sc-ch-yl:nth-child(2) { top: 47.727%; } .sc-ch-yl:nth-child(3) { top: 26.136%; } .sc-ch-yl:nth-child(4) { top: 4.545%; } .sc-ch-xl:nth-child(1) { left: 5.0%; } .sc-ch-xl:nth-child(2) { left: 14.0%; } .sc-ch-xl:nth-child(3) { left: 23.0%; } .sc-ch-xl:nth-child(4) { left: 32.0%; } .sc-ch-xl:nth-child(5) { left: 41.0%; } .sc-ch-xl:nth-child(6) { left: 50.0%; } .sc-ch-xl:nth-child(7) { left: 59.0%; } .sc-ch-xl:nth-child(8) { left: 68.0%; } .sc-ch-xl:nth-child(9) { left: 77.0%; } .sc-ch-xl:nth-child(10) { left: 86.0%; } .sc-ch-xl:nth-child(11) { left: 95.0%; } .sc-ch-col:nth-child(1) { --v: 16.667; --d: 0.0; } .sc-ch-col:nth-child(2) { --v: 16.667; --d: 0.035; } .sc-ch-col:nth-child(3) { --v: 13.333; --d: 0.07; } .sc-ch-col:nth-child(4) { --v: 20.0; --d: 0.105; } .sc-ch-col:nth-child(5) { --v: 26.667; --d: 0.14; } .sc-ch-col:nth-child(6) { --v: 26.667; --d: 0.175; } .sc-ch-col:nth-child(7) { --v: 33.333; --d: 0.21; } .sc-ch-col:nth-child(8) { --v: 43.333; --d: 0.245; } .sc-ch-col:nth-child(9) { --v: 43.333; --d: 0.28; } .sc-ch-col:nth-child(10) { --v: 63.333; --d: 0.315; } .sc-ch-col:nth-child(11) { --v: 66.667; --d: 0.35; } .sc-ch-col:nth-child(12) { --v: 76.667; --d: 0.385; } .sc-ch-col:nth-child(13) { --v: 90.0; --d: 0.42; } .sc-ch-col:nth-child(14) { --v: 86.667; --d: 0.455; } .sc-ch-col:nth-child(15) { --v: 96.667; --d: 0.49; } .sc-ch-rep:nth-child(1) { --fin: 23; --d: 0.0; } .sc-ch-rep:nth-child(2) { --fin: 3; --d: 0.08; } .sc-ch-rep:nth-child(3) { --fin: 2; --d: 0.16; } .sc-ch-rep:nth-child(4) { --fin: 29; --d: 0.24; } .sc-ch-rep:nth-child(5) { --fin: 6; --d: 0.32; } .sc-ch-rep:nth-child(6) { --fin: 0; --d: 0.4; } .sc-ch-point { offset-path: path("M40.0 397.42 L76.0 393.82 L112.0 382.99 L148.0 361.02 L184.0 349.27 L220.0 357.23 L256.0 344.31 L292.0 334.08 L328.0 323.32 L364.0 305.2 L400.0 298.06 L436.0 293.11 L472.0 259.35 L508.0 247.58 L544.0 226.47 L580.0 217.19 L616.0 194.01 L652.0 179.07 L688.0 126.8 L724.0 110.58 L760.0 57.92"); } /* Bandes : version haute définition (AVIF 1920 px) posée par-dessus l'ancienne ; si le fichier AVIF n'est pas encore dans la médiathèque, la couche est ignorée et l'ancienne image reste affichée. */ .wp-block-cover.pg-bande.lq-equipe .wp-block-cover__image-background { background-image: url("/wp-content/uploads/2026/10/bande-equipe.avif"), url("/wp-content/uploads/2026/10/bande-equipe-active-developpement.webp") !important; } .wp-block-cover.pg-bande.lq-rouge .wp-block-cover__image-background { background-image: url("/wp-content/uploads/2026/10/bande-rouge.avif"), url("/wp-content/uploads/2026/10/bande-salle-reunion-rouge.webp") !important; } .wp-block-cover.pg-bande.lq-openspace .wp-block-cover__image-background { background-image: url("/wp-content/uploads/2026/10/bande-openspace.avif"), url("/wp-content/uploads/2026/10/bande-open-space.webp") !important; } /* @@BEGIN frise2 */ /* Frise v3 : suite de l'histoire jusqu'en 2025 et resserrement vertical (surcharges de la frise v2 ci-dessus dans ce fichier) */ .frise.frise { --ecart: 1.5rem; } @media (min-width: 900px) { .frise.frise { --ecart: .7rem; } } .frise-suite { margin: var(--s-6) 0 0; text-align: center; font-size: var(--t-s); } .frise-suite a { color: var(--doux); text-decoration: underline; text-decoration-color: rgba(101, 216, 192, .55); text-underline-offset: .28em; transition: color .2s, text-decoration-color .2s; } .frise-suite a::after { content: " \2192" / ""; color: var(--menthe); } .frise-suite a:hover, .frise-suite a:focus-visible { color: var(--menthe); text-decoration-color: var(--menthe); } /* @@END frise2 */ /* @@BEGIN chiffres2 */ /* Mission chiffres2 - page /chiffres-cles/ : point 2025 (groupe), effectif 2025, pavé « groupe Active Horizons ». Surcharge en lecture seule les valeurs générées sc-ch-* (courbe à 22 points) ; classes propres préfixées sc-c5-. */ /* Courbe : segment 2025 en pointillé ciel, révélé après 2024 (--t25 de 0 à 1) */ .sc-c5-l25 { stroke: var(--ciel); stroke-width: 4.5; stroke-dasharray: 7 5; } .sc-c5-m25 { stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - var(--t25)); } .sc-ch-reperes circle.sc-c5-r25 { stroke: var(--ciel); } .sc-c5-c25 { fill: var(--ciel); stroke: var(--nuit); stroke-width: 3; opacity: clamp(0, calc((var(--t25) - .02) * 50), 1); } .sc-ch-xl.sc-c5-xl25 { color: var(--ciel); font-weight: 700; } .sc-c5-li25 .sc-ch-an, .sc-c5-li25 .sc-ch-eur small { color: var(--ciel); } .sc-c5-precis { color: var(--doux); font-size: var(--t-s); line-height: 1.4; } .sc-c5-legende { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: .4rem 0 0; padding: 0; list-style: none; font-size: .8125rem; line-height: 1.35; color: var(--doux); } .sc-c5-legende li { display: flex; align-items: center; gap: .5rem; } .sc-c5-trait { flex: none; width: 26px; border-top: 3px solid var(--menthe); } .sc-c5-trait--g { border-top-style: dashed; border-top-color: var(--ciel); } @media (max-width: 899px) { .sc-c5-l25 { stroke-width: 7.5; stroke-dasharray: 9 6; } .sc-c5-c25 { r: 11px; stroke-width: 4; } .sc-c5-legende { gap: .2rem 1rem; font-size: .75rem; } .sc-ch-scene--ca .sc-ch-lib { display: none; } } @media (max-width: 899px) and (max-height: 760px) { .sc-ch-scene--ca .sc-ch-jalons { display: none; } } /* Effectif : 16 colonnes, 2025 (groupe) séparée par un pointillé */ .sc-ch-barres, .sc-ch-annees { grid-template-columns: repeat(16, minmax(0, 1fr)); } .sc-c5-col25::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(clamp(.15rem, .5vw, .6rem) / -2 - 1px); border-left: 2px dashed rgba(10,38,51,.35); } .sc-ch-ann.sc-c5-ann25 { font-weight: 700; color: var(--encre); } .sc-c5-legende--clair { margin-top: .9rem; color: var(--gris); } .sc-c5-carre { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--lien-clair); } .sc-c5-carre--g { background: var(--encre); } @media (max-width: 700px) { .sc-ch-ann:nth-child(15) { visibility: hidden; } .sc-ch-ann.sc-c5-ann25 { visibility: visible; } } /* Pavé « le groupe » : texte + organigramme qui se trace (--pg de 0 à 1) */ .sc-c5-scene { --pg: clamp(0, calc((var(--p) - .2) / .32), 1); } .sc-c5-scene .wp-block-group > * { margin-block: 0; } .sc-c5-scene h2 { margin: 0; } .sc-c5-duo { display: grid; gap: var(--s-5, 2rem); align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .sc-c5-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); } } @media (max-width: 899px) { .sc-c5-scene { --pg: clamp(0, calc((var(--p) - .3) / .3), 1); } } .sc-c5-org { margin: 0; display: grid; width: 100%; max-width: 560px; justify-self: center; } .sc-c5-rang { display: grid; grid-template-columns: 1fr 1fr; } .sc-c5-rang--1 { grid-template-columns: 1fr 2fr 1fr; } .sc-c5-rang--1 > .sc-c5-n { grid-column: 2; } .sc-c5-n { --t: clamp(0, calc((var(--pg) - var(--a)) / .1), 1); display: grid; gap: .15rem; align-content: center; margin-inline: .35rem; padding: .7rem .75rem; text-align: center; border: 1px solid var(--ligne-forte); border-radius: 12px; background: linear-gradient(160deg, rgba(18,57,74,.9), rgba(7,31,42,.55)); opacity: var(--t); translate: 0 calc((1 - var(--t)) * 14px); } .sc-c5-n strong { color: var(--texte); font-size: 1rem; font-weight: 700; line-height: 1.2; } .sc-c5-n span { color: var(--doux); font-size: .8125rem; line-height: 1.35; } .sc-c5-n--h { border-color: var(--menthe); background: linear-gradient(160deg, rgba(101,216,192,.18), rgba(18,57,74,.75)); } .sc-c5-n--h strong { font-size: 1.125rem; } .sc-c5-a3 { --a: 0; } .sc-c5-a4 { --a: .4; } .sc-c5-a5 { --a: .46; } .sc-c5-a6 { --a: .66; } .sc-c5-f { position: relative; height: 3.1rem; } .sc-c5-f i { --t: clamp(0, calc((var(--pg) - var(--a)) / .08), 1); position: absolute; width: 2px; margin-left: -1px; background: var(--menthe); transform: scaleY(var(--t)); transform-origin: 50% 0; } .sc-c5-f i.sc-c5-t3 { width: auto; left: 25%; right: 25%; top: 50%; height: 2px; margin: -1px 0 0; transform: scaleX(var(--t)); transform-origin: 50% 50%; } .sc-c5-f--haut .sc-c5-t1, .sc-c5-f--haut .sc-c5-t2 { top: 0; height: 50%; --a: .12; } .sc-c5-f--haut .sc-c5-t1, .sc-c5-f--bas .sc-c5-t1, .sc-c5-f--tige .sc-c5-t1 { left: 25%; } .sc-c5-f--haut .sc-c5-t2, .sc-c5-f--bas .sc-c5-t2 { left: 75%; } .sc-c5-f--haut .sc-c5-t3 { --a: .2; } .sc-c5-f--haut .sc-c5-t4 { left: 50%; top: 50%; height: 50%; --a: .27; } .sc-c5-f--bas .sc-c5-t4 { left: 50%; top: 0; height: 50%; --a: .1; } .sc-c5-f--bas .sc-c5-t3 { --a: .18; } .sc-c5-f--bas .sc-c5-t1, .sc-c5-f--bas .sc-c5-t2 { top: 50%; height: 50%; --a: .26; } .sc-c5-f--tige .sc-c5-t1 { top: 0; height: 100%; --a: .54; } .sc-c5-lab { position: absolute; font-size: .8125rem; font-weight: 700; line-height: 1; color: var(--menthe); white-space: nowrap; opacity: clamp(0, calc((var(--pg) - var(--a)) / .08), 1); } .sc-c5-lab--c { left: calc(50% + .6rem); top: calc(75% - .4rem); --a: .3; } .sc-c5-lab--g, .sc-c5-lab--d { top: calc(75% - .4rem); --a: .34; } .sc-c5-lab--g { left: calc(25% + .5rem); } .sc-c5-lab--d { left: calc(75% + .5rem); } .sc-c5-lab--t { left: calc(25% + .5rem); top: calc(50% - .4rem); --a: .6; } @media (max-width: 599px) { .sc-c5-n { margin-inline: .2rem; padding: .6rem .45rem; } .sc-c5-n strong { font-size: .9375rem; } .sc-c5-n--h strong { font-size: 1rem; } .sc-c5-n span { font-size: .75rem; } .sc-c5-lab { font-size: .75rem; } } /* Valeurs générées (courbe 2004-2025, colonnes, compteur) */ .sc-ch-pile>li:nth-child(1){--lo:-1;--hi:0.03869} .sc-ch-pile>li:nth-child(2){--lo:0.03869;--hi:0.08112} .sc-ch-pile>li:nth-child(3){--lo:0.08112;--hi:0.12919} .sc-ch-pile>li:nth-child(4){--lo:0.12919;--hi:0.17196} .sc-ch-pile>li:nth-child(5){--lo:0.17196;--hi:0.2135} .sc-ch-pile>li:nth-child(6){--lo:0.2135;--hi:0.25674} .sc-ch-pile>li:nth-child(7){--lo:0.25674;--hi:0.29897} .sc-ch-pile>li:nth-child(8){--lo:0.29897;--hi:0.34139} .sc-ch-pile>li:nth-child(9){--lo:0.34139;--hi:0.38715} .sc-ch-pile>li:nth-child(10){--lo:0.38715;--hi:0.42849} .sc-ch-pile>li:nth-child(11){--lo:0.42849;--hi:0.46937} .sc-ch-pile>li:nth-child(12){--lo:0.46937;--hi:0.52616} .sc-ch-pile>li:nth-child(13){--lo:0.52616;--hi:0.56893} .sc-ch-pile>li:nth-child(14){--lo:0.56893;--hi:0.61646} .sc-ch-pile>li:nth-child(15){--lo:0.61646;--hi:0.65838} .sc-ch-pile>li:nth-child(16){--lo:0.65838;--hi:0.70722} .sc-ch-pile>li:nth-child(17){--lo:0.70722;--hi:0.75137} .sc-ch-pile>li:nth-child(18){--lo:0.75137;--hi:0.82514} .sc-ch-pile>li:nth-child(19){--lo:0.82514;--hi:0.86991} .sc-ch-pile>li:nth-child(20){--lo:0.86991;--hi:0.94407} .sc-ch-pile>li:nth-child(21){--lo:0.94407;--hi:0.998} .sc-ch-pile>li:nth-child(22){--lo:0.998;--hi:2} .sc-ch-jalons>li:nth-child(1){--lo:-1;--hi:0.08112} .sc-ch-jalons>li:nth-child(2){--lo:0.08112;--hi:0.12919} .sc-ch-jalons>li:nth-child(3){--lo:0.12919;--hi:0.17196} .sc-ch-jalons>li:nth-child(4){--lo:0.17196;--hi:0.25674} .sc-ch-jalons>li:nth-child(5){--lo:0.25674;--hi:0.94407} .sc-ch-jalons>li:nth-child(6){--lo:0.94407;--hi:0.998} .sc-ch-jalons>li:nth-child(7){--lo:0.998;--hi:2} .sc-ch-masque rect:nth-child(1){--b0:0;--r:24.57454} .sc-ch-masque rect:nth-child(2){--b0:0.04069;--r:23.56859} .sc-ch-masque rect:nth-child(3){--b0:0.08312;--r:20.80547} .sc-ch-masque rect:nth-child(4){--b0:0.13119;--r:23.38143} .sc-ch-masque rect:nth-child(5){--b0:0.17396;--r:24.06959} .sc-ch-masque rect:nth-child(6){--b0:0.2155;--r:23.12862} .sc-ch-masque rect:nth-child(7){--b0:0.25874;--r:23.67832} .sc-ch-masque rect:nth-child(8){--b0:0.30097;--r:23.57612} .sc-ch-masque rect:nth-child(9){--b0:0.34339;--r:21.85186} .sc-ch-masque rect:nth-child(10){--b0:0.38915;--r:24.19075} .sc-ch-masque rect:nth-child(11){--b0:0.43049;--r:24.46309} .sc-ch-masque rect:nth-child(12){--b0:0.47137;--r:17.60788} .sc-ch-masque rect:nth-child(13){--b0:0.52816;--r:23.37724} .sc-ch-masque rect:nth-child(14){--b0:0.57093;--r:21.04182} .sc-ch-masque rect:nth-child(15){--b0:0.61846;--r:23.85157} .sc-ch-masque rect:nth-child(16){--b0:0.66038;--r:20.47514} .sc-ch-masque rect:nth-child(17){--b0:0.70922;--r:22.65287} .sc-ch-masque rect:nth-child(18){--b0:0.75337;--r:13.55491} .sc-ch-masque rect:nth-child(19){--b0:0.82714;--r:22.33671} .sc-ch-masque rect:nth-child(20){--b0:0.87191;--r:13.48448} .sc-ch-reperes circle:nth-child(1){--lo:0.08112} .sc-ch-reperes circle:nth-child(2){--lo:0.12919} .sc-ch-reperes circle:nth-child(3){--lo:0.17196} .sc-ch-reperes circle:nth-child(4){--lo:0.25674} .sc-ch-reperes circle:nth-child(5){--lo:0.94407} .sc-ch-reperes circle:nth-child(6){--lo:0.998} .sc-ch-xl:nth-child(1){left:5.0%} .sc-ch-xl:nth-child(2){left:13.571%} .sc-ch-xl:nth-child(3){left:22.142%} .sc-ch-xl:nth-child(4){left:30.714%} .sc-ch-xl:nth-child(5){left:39.286%} .sc-ch-xl:nth-child(6){left:47.858%} .sc-ch-xl:nth-child(7){left:56.429%} .sc-ch-xl:nth-child(8){left:65.0%} .sc-ch-xl:nth-child(9){left:73.571%} .sc-ch-xl:nth-child(10){left:82.142%} .sc-ch-xl:nth-child(11){left:95.0%} .sc-ch-col:nth-child(16){--v:96.667;--d:.5} .sc-ch-rep:nth-child(4){--fin:29} .sc-ch-point{offset-path:path("M40.0 397.42 L74.29 393.82 L108.57 382.99 L142.86 361.02 L177.14 349.27 L211.43 357.23 L245.71 344.31 L280.0 334.08 L314.29 323.32 L348.57 305.2 L382.86 298.06 L417.14 293.11 L451.43 259.35 L485.71 247.58 L520.0 226.47 L554.29 217.19 L588.57 194.01 L622.86 179.07 L657.14 126.8 L691.43 110.58 L725.71 57.92 L760.0 88.12")} .sc-ch-scene--ca .sc-ch-ligne{stroke-dashoffset:calc(1 - clamp(0, calc(var(--pc) * 1.057), 1))} .sc-ch-scene--ca{--t25:clamp(0, calc((var(--pc) - 0.94607) * 18.54318), 1)} /* @@END chiffres2 */ /* @@BEGIN webref */ /* ---- webref : pages /web/ et /references/ (préfixe wr-) ---- */ .wr-scene > *, .wr-col > *, .wr-type-texte > *, .wr-type-tete > *, .wr-plus > *, .wr-med > *, .wr-comite > *, .wr-type-grille > * { margin-block: 0; } .wr-plus.wp-block-group, .wr-plus { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); } .wr-plus .pg-duo { gap: clamp(1.75rem, 1rem + 3vw, 4rem); } /* Scène des deux piles (web) : les couches se posent au défilement, de bas en haut (de haut en bas en mobile) */ .wr-scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: stretch; } .wr-col { display: flex; flex-direction: column; min-width: 0; --wr-c: var(--menthe); } .wr-col--front { --wr-c: var(--ciel); } .wr-etiq { margin: 0 0 var(--s-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--doux); font-variation-settings: "wdth" 118; } .wr-couches { display: flex; flex: 1; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; } .wr-couches li, .wr-col--base .wr-base-ligne { --o: clamp(0, calc((var(--p) - .02 - var(--i, 0) * .035) * 9), 1); display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin: 0; padding: .95rem 1.25rem; min-height: 64px; border: 1px solid var(--ligne); border-left: 3px solid var(--wr-c); border-radius: var(--r-m); background: linear-gradient(170deg, rgba(18, 57, 74, .85), rgba(12, 45, 59, .72)); color: var(--texte); opacity: var(--o); transform: translateY(calc((1 - var(--o)) * -22px)); } .wr-couches li strong, .wr-base-ligne strong { font-size: var(--t-l); line-height: 1.15; font-weight: 750; letter-spacing: -.01em; font-variation-settings: "wdth" 112; } .wr-couches li span, .wr-base-ligne span { font-size: var(--t-s); color: var(--doux); } .wr-col--base .wr-base-ligne { flex: none; border-left-color: transparent; border-image: linear-gradient(90deg, var(--ciel), var(--menthe)) 1; border-width: 1px 1px 1px 3px; border-radius: 0; } .wr-col--base { --wr-c: var(--menthe); } .wr-col--base .wr-base-ligne { border-radius: 0 var(--r-m) var(--r-m) 0; } .wr-lien { position: relative; display: grid; place-items: center; min-height: 64px; --o: clamp(0, calc((var(--p) - .1) * 5), 1); } .wr-lien::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform-origin: top; transform: scaleY(var(--o)); background: linear-gradient(180deg, var(--ciel), var(--menthe)); } .wr-lien span { position: relative; padding: .3rem .8rem; border: 1px solid var(--ligne-forte); border-radius: 999px; background: var(--abysse); color: var(--menthe); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; opacity: var(--o); } .wr-scene > .wr-col--base { margin-top: 0; } .wr-couches li:nth-child(1) { --i: 0; } .wr-couches li:nth-child(2) { --i: 1; } .wr-col--serveur .wr-couches li:nth-child(1) { --i: 2; } .wr-col--serveur .wr-couches li:nth-child(2) { --i: 3; } .wr-col--serveur .wr-couches li:nth-child(3) { --i: 4; } .wr-col--serveur .wr-couches li:nth-child(4) { --i: 5; } .wr-col--serveur .wr-couches li:nth-child(5) { --i: 6; } .wr-col--base .wr-base-ligne { --i: 7; } @media (prefers-reduced-motion: no-preference) { .wr-lien::after { content: ""; position: absolute; left: calc(50% - 4px); top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 12px var(--menthe); opacity: clamp(0, calc((var(--p) - .3) * 8), 1); animation: wr-flux-v 2.6s ease-in-out infinite; } @keyframes wr-flux-v { 0%, 100% { top: 0; } 50% { top: calc(100% - 10px); } } @keyframes wr-flux-h { 0%, 100% { left: 0; } 50% { left: calc(100% - 10px); } } } @media (min-width: 900px) { .wr-scene { grid-template-columns: minmax(0, 1fr) clamp(96px, 11vw, 160px) minmax(0, 1.15fr); grid-template-areas: "front lien serveur" "base base base"; column-gap: 0; row-gap: var(--s-4); } .wr-col--front { grid-area: front; } .wr-col--serveur { grid-area: serveur; } .wr-col--base { grid-area: base; } .wr-scene > .wr-lien { grid-area: lien; align-self: center; min-height: 0; } .wr-lien::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; transform-origin: left; transform: scaleX(var(--o)); background: linear-gradient(90deg, var(--ciel), var(--menthe)); } .wr-lien span { margin: 0; } .wr-lien::after { top: calc(50% - 5px); left: 0; } .wr-couches li:nth-child(1) { --i: 3; } .wr-couches li:nth-child(2) { --i: 2; } .wr-col--serveur .wr-couches li:nth-child(1) { --i: 5; } .wr-col--serveur .wr-couches li:nth-child(2) { --i: 4; } .wr-col--serveur .wr-couches li:nth-child(3) { --i: 3; } .wr-col--serveur .wr-couches li:nth-child(4) { --i: 2; } .wr-col--serveur .wr-couches li:nth-child(5) { --i: 1; } .wr-col--base .wr-base-ligne { --i: 0; } .wr-couches li, .wr-col--base .wr-base-ligne { transform: translateY(calc((1 - var(--o)) * 22px)); } } @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .wr-lien::after { animation-name: wr-flux-h; top: calc(50% - 5px); } } /* Cartes des technologies : 5 cartes sur 6 colonnes (3 + 2) */ .wr-grille5 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } @media (min-width: 640px) { .wr-grille5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wr-grille5 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (min-width: 1000px) { .wr-grille5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .wr-grille5 > .wr-t2 { grid-column: span 2; } .wr-grille5 > .wr-t3 { grid-column: span 3; } .wr-grille5 > :last-child:nth-child(odd) { grid-column: span 3; } } /* Illustrations animées : templating et géo (le cadre .sc du conteneur pilote --p) */ .wr-tpl .wr-code text { --a: clamp(0, calc((var(--p) - .04 - var(--k) * .035) * 8), 1); opacity: var(--a); } .wr-tpl .wr-fleche { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - .2) * 6), 1)); } .wr-tpl .wr-pointe { opacity: clamp(0, calc((var(--p) - .26) * 10), 1); } .wr-tpl .wr-ligne { --a: clamp(0, calc((var(--p) - .26 - var(--k) * .035) * 8), 1); opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 14px)); } .wr-geo .wr-iso { --a: clamp(0, calc((var(--p) - var(--d, .1)) * 5), 1); transform-box: fill-box; transform-origin: center; opacity: var(--a); transform: scale(calc(.35 + .65 * var(--a))); } .wr-geo .wr-iso3 { --d: .05; } .wr-geo .wr-iso2 { --d: .1; } .wr-geo .wr-iso1 { --d: .15; } .wr-geo .wr-vague { --a: clamp(0, calc((var(--p) - .12 - var(--k) * .025) * 10), 1); transform-box: fill-box; transform-origin: center; opacity: var(--a); transform: scale(calc(.85 + .15 * var(--a))); } .wr-geo .wr-route { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - .22) * 5), 1)); } .wr-geo .wr-fin { opacity: clamp(0, calc((var(--p) - .4) * 12), 1); } .wr-geo .wr-pulse { transform-box: fill-box; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { .wr-geo .wr-pulse { animation: wr-pulse 2.8s ease-out infinite; } @keyframes wr-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } } } /* Références : sélecteur collant, sections par type, murs de logos */ .wr-choix { position: sticky; z-index: 40; top: calc(var(--entete-h, 77px) + var(--wp-admin--admin-bar--height, 0px)); background: rgba(12, 45, 59, .94); border-block: 1px solid var(--ligne); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .wr-choix .wrap { display: flex; align-items: center; gap: var(--s-4); padding-block: .6rem; min-width: 0; } .wr-choix-titre { margin: 0; flex: none; font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); font-variation-settings: "wdth" 118; } .wr-choix-titre strong { color: var(--texte); font-weight: 700; } .wr-choix ul { display: flex; flex: 1; gap: .5rem; margin: 0; padding: 4px 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; min-width: 0; } .wr-choix li { flex: none; margin: 0; } .wr-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1.05rem; border: 1px solid var(--ligne-forte); border-radius: 999px; color: var(--texte); font-size: var(--t-s); font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; } .wr-chip:hover { border-color: var(--menthe); color: var(--menthe); } .wr-chip:focus-visible { outline: 3px solid var(--ciel); outline-offset: 2px; } html:has(#grands-comptes:target) .wr-chip[href="#grands-comptes"], html:has(#institutionnel-culture-education:target) .wr-chip[href="#institutionnel-culture-education"], html:has(#eti:target) .wr-chip[href="#eti"], html:has(#tpe-pme:target) .wr-chip[href="#tpe-pme"], html:has(#editeurs:target) .wr-chip[href="#editeurs"], html:has(#sante:target) .wr-chip[href="#sante"] { background: var(--menthe); border-color: var(--menthe); color: var(--nuit); } @media (max-width: 719px) { .wr-choix-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 719px) { .wr-type { scroll-margin-top: 1rem; } } .wr-type-grille { display: grid; gap: var(--s-6); } .wr-type-texte { display: grid; gap: var(--s-4); align-content: start; min-width: 0; } .wr-type-tete { display: flex; align-items: center; gap: var(--s-4); } .wr-type-tete h2 { font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.6rem); line-height: 1.06; letter-spacing: -.015em; font-variation-settings: "wdth" 115; } .wr-type-texte h3.wr-slogan { font-size: var(--t-l); line-height: 1.3; font-weight: 650; color: var(--texte); max-width: 40ch; font-variation-settings: "wdth" 105; } .wr-type-texte > p { color: var(--doux); font-size: var(--t-m); line-height: 1.7; max-width: 60ch; } .wr-type-texte > .wp-block-buttons { margin-top: var(--s-2); } @media (min-width: 960px) { .wr-type-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; } } .wr-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 120px)); gap: .75rem; justify-content: start; margin: 0; padding: 0; list-style: none; } .wr-mur li { --o: clamp(0, calc((var(--p) - .03 - var(--i, 0) * .028) * 10), 1); display: grid; place-items: center; aspect-ratio: 1; margin: 0; padding: 6px; text-align: center; min-width: 0; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; border: 1px solid rgba(10, 38, 51, .14); border-radius: var(--r-m); background: #fff; color: var(--encre); font-size: clamp(.82rem, .78rem + .18vw, .95rem); font-weight: 800; line-height: 1.2; font-variation-settings: "wdth" 112; text-wrap: balance; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 16px)) scale(calc(.96 + .04 * var(--o))); transition: box-shadow .25s; } .wr-mur li img { display: block; width: 88px; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; } .wr-mur li:hover { box-shadow: 0 0 0 2px var(--menthe), 0 14px 28px -14px rgba(0, 0, 0, .7); } @media (min-width: 360px) and (max-width: 479px) { .wr-mur { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .wr-mur li:nth-child(1) { --i: 0; } .wr-mur li:nth-child(2) { --i: 1; } .wr-mur li:nth-child(3) { --i: 2; } .wr-mur li:nth-child(4) { --i: 3; } .wr-mur li:nth-child(5) { --i: 4; } .wr-mur li:nth-child(6) { --i: 5; } .wr-mur li:nth-child(7) { --i: 6; } .wr-mur li:nth-child(8) { --i: 7; } .wr-mur li:nth-child(9) { --i: 8; } .wr-mur li:nth-child(10) { --i: 9; } .wr-mur li:nth-child(11) { --i: 10; } .wr-mur li:nth-child(12) { --i: 11; } .wr-comite { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .wr-comite { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .wr-comite { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .wr-med { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); background: #fff; border: 1px solid rgba(10, 38, 51, .12); border-radius: var(--r-l); box-shadow: 0 12px 28px -22px rgba(10, 38, 51, .45); } .wr-med h3 { font-size: var(--t-l); line-height: 1.15; color: var(--encre); font-variation-settings: "wdth" 112; } .wr-med p { color: var(--gris); font-size: var(--t-s); line-height: 1.6; } .wr-med p a { color: var(--lien-clair); font-weight: 600; } .wr-photo { display: block; flex: none; justify-self: start; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--glace); box-shadow: 0 0 0 2px var(--menthe); } .wr-mono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--menthe), var(--ciel)); color: var(--nuit); font-size: 1.4rem; font-weight: 800; font-variation-settings: "wdth" 120; } .wr-plus .pg-texte h3 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem); line-height: 1.1; letter-spacing: -.012em; font-variation-settings: "wdth" 112; } @media (max-width: 719px) { .wr-choix ul { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); padding-right: 1.5rem; } } .wr-qual-grille { display: grid; gap: var(--s-6); align-items: center; } .wr-qual-grille > * { margin-block: 0; } .wr-fig { min-width: 0; } .wr-fig .motif { position: static; display: block; width: 100%; height: auto; max-width: 520px; margin-inline: auto; border-radius: var(--r-l); } @media (min-width: 960px) { .wr-qual-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); } } .wr-bal .wr-beam { --th: calc((1 - clamp(0, calc((var(--p) - .06) * 3.2), 1)) * -11); transform-origin: 260px 150px; transform: rotate(calc(var(--th) * 1deg)); } .wr-bal .wr-pan-l { transform-origin: 110px 150px; transform: rotate(calc(var(--th) * -1deg)); } .wr-bal .wr-pan-r { transform-origin: 410px 150px; transform: rotate(calc(var(--th) * -1deg)); } .wr-bal .wr-equi { opacity: clamp(0, calc((var(--p) - .34) * 12), 1); } @media (max-width: 719px) { .wr-type-texte .wp-block-buttons .wp-block-button.btn-bloc { max-width: 100%; } .wr-type-texte .wp-block-buttons .wp-block-button.btn-bloc .wp-block-button__link { white-space: normal; text-align: left; line-height: 1.3; border-radius: 26px; } } /* @@END webref */ /* @@BEGIN iapage */ /* Page /intelligence-artificielle/ (ID 20) : scènes réutilisées en version compacte (sc-ia-agent, sc-n8n-a, sc-ia-parcours) et liens contextuels. Mission iapage, 18/10/2026. */ .wp-block-group.sc.sc--tall.sc-ip-c { --sc-h: 210vh; --sc-h-m: 200vh; } .wp-block-group.sc.sc--tall.sc-ip-c.sc-ia-parcours { --sc-h: 170vh; --sc-h-m: 190vh; } .wp-block-group.section.sc-ip-avant { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); } .sc-ip .sc-ia-tete p.lien { display: block; font-size: var(--t-s); } .sc-ip-tete { justify-self: stretch; width: 100%; max-width: none; } .sc-ip-tete > * { margin-block: 0; } .sc-ip-n8n .sc-ip-tete { gap: var(--s-2); } .sc-ip-n8n .sc-ip-tete h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); } .sc-ip-n8n .sc-ip-tete p:not(.kicker):not(.lien) { max-width: 75ch; font-size: var(--t-s); } .sc-ip-n8n .sc-n8n-svg { max-height: calc(100vh - 23rem); } .sc-ip .sc-ia-etape h3 a { color: inherit; text-decoration: underline; text-decoration-color: rgba(101,216,192,.55); text-decoration-thickness: 1px; text-underline-offset: .22em; display: inline-block; padding-block: 3px; } .sc-ip .sc-ia-etape h3 a:hover { color: var(--menthe); text-decoration-color: currentColor; } .sc-ip .sc-ia-etape:focus-within > * { opacity: 1; transform: none; } @media (max-width: 899px) { .sc-ip-n8n .sc-n8n-svg.sc-n8n-m { max-height: calc(100svh - 21rem); } } html.sc-statique .sc-ip-n8n .sc-n8n-svg { max-height: none; } @media (scripting: none) { .sc-ip-n8n .sc-n8n-svg { max-height: none; } } /* @@END iapage */ /* @@BEGIN ia2b */ /* ia2b - compléments N8N (cas d’usage, rapport du lundi) et MCP (une question, quatre bases). Mécanique : .sc / --p du thème (theme.js §9), état final si --p = 1. */ .sc-i2-f{opacity:calc(.3 + .7 * var(--k,1))}.sc-i2-o{opacity:var(--k,1)}.sc-i2-d{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k,1))} .sc-i2-mini{--q:clamp(0,calc((var(--p) - .15) * 2.6),1);margin-top:auto;border-radius:var(--r-m);padding:.7rem .6rem .35rem;background:radial-gradient(rgba(169,193,201,.16) 1px,transparent 1.3px) 0 0/14px 14px,linear-gradient(135deg,#0C2D3B,#12394A)} .sc-i2-mini svg{display:block;width:100%;height:auto}.sc-i2-mini text{font-family:var(--f);font-size:12.5px;fill:#EAF4F6;text-anchor:middle}.sc-i2-mini text.sc-i2-w{font-size:11px;font-weight:800;fill:#65D8C0}.sc-i2-c{fill:#071F2A;stroke:#65D8C0;stroke-width:2}.sc-i2-i{fill:none;stroke:#EAF4F6;stroke-width:2.65;stroke-linecap:round;stroke-linejoin:round}.sc-i2-pt{fill:none;stroke:rgba(169,193,201,.28);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}.sc-i2-ln{fill:none;stroke:#3AB0EA;stroke-width:2.2;stroke-linecap:round} .sc-i2-mini .sc-i2-m1{--k:clamp(0,calc((var(--q) - 0) / 0.12),1)}.sc-i2-mini .sc-i2-m2{--k:clamp(0,calc((var(--q) - 0.12) / 0.16),1)}.sc-i2-mini .sc-i2-m3{--k:clamp(0,calc((var(--q) - 0.26) / 0.1),1)}.sc-i2-mini .sc-i2-m4{--k:clamp(0,calc((var(--q) - 0.34) / 0.16),1)}.sc-i2-mini .sc-i2-m5{--k:clamp(0,calc((var(--q) - 0.5) / 0.1),1)}.sc-i2-mini .sc-i2-m6{--k:clamp(0,calc((var(--q) - 0.58) / 0.16),1)}.sc-i2-mini .sc-i2-m7{--k:clamp(0,calc((var(--q) - 0.74) / 0.1),1)}.sc-i2-mini .sc-i2-m8{--k:clamp(0,calc((var(--q) - 0.86) / 0.1),1)} .pg-carte p.sc-i2-ex{font-size:var(--t-xs);line-height:1.55;padding-left:.75rem;border-left:2px solid var(--ciel)} .pg-carte p.sc-i2-ex em{font-style:normal;font-weight:650;color:var(--ciel)}.clair .pg-carte p.sc-i2-ex{border-left-color:var(--lien-clair)}.clair .pg-carte p.sc-i2-ex em{color:var(--lien-clair)} .pg-carte p.sc-i2-ex a{color:inherit;text-decoration:underline;text-underline-offset:.15em}.clair .pg-carte p.sc-i2-ex a{color:var(--lien-clair)} ol.wp-block-list.sc-i2-etapes{list-style:none;margin:0;padding:0;counter-reset:sc-i2;display:grid;gap:var(--s-2)} .sc-i2-etapes>li{counter-increment:sc-i2;position:relative;margin:0;padding:.65rem 1rem .65rem 3rem;border-radius:var(--r-m);border:1px solid rgba(101,216,192,.3);background:rgba(12,45,59,.6);color:var(--doux);font-size:var(--t-s);line-height:1.5} .sc-i2-etapes>li::before{content:counter(sc-i2,decimal-leading-zero);position:absolute;left:1rem;top:.68rem;font-weight:800;color:var(--menthe);font-variation-settings:"wdth" 115} .sc-i2-etapes strong{color:var(--texte);font-weight:650}p.sc-i2-note{color:var(--doux);font-size:var(--t-xs);letter-spacing:.02em} .pg-duo>.sc-i2-rap,.pg-duo>.sc-i2-bases{align-self:center}@media (min-width:900px){.pg-duo>.sc-i2-rap,.pg-duo>.sc-i2-bases{max-width:540px;justify-self:center}} .sc-i2-bx{fill:#0C2D3B;stroke:rgba(169,193,201,.35);stroke-width:1.5}.sc-i2-lt{fill:rgba(101,216,192,.12);stroke:#65D8C0;stroke-width:2} .section.sc-i2-sec{padding-bottom:calc(var(--s-section) * .7)}.sc-i2-sec{border-top:1px solid var(--ligne);background:radial-gradient(45% 55% at 78% 50%,rgba(242,196,109,.06),transparent 70%),radial-gradient(40% 50% at 15% 30%,rgba(58,176,234,.08),transparent 70%)} .sc-i2-rap,.sc-i2-bases{--q:clamp(0,calc((var(--p) - .12) * 2.6),1)} .sc-i2-rap .sc-i2-r1{--k:clamp(0,calc((var(--q) - 0) / 0.08),1)}.sc-i2-rap .sc-i2-r2{--k:clamp(0,calc((var(--q) - 0.06) / 0.06),1)}.sc-i2-rap .sc-i2-r3{--k:clamp(0,calc((var(--q) - 0.1) / 0.08),1)}.sc-i2-rap .sc-i2-r5{--k:clamp(0,calc((var(--q) - 0.16) / 0.06),1)}.sc-i2-rap .sc-i2-r6{--k:clamp(0,calc((var(--q) - 0.2) / 0.06),1)}.sc-i2-rap .sc-i2-r7{--k:clamp(0,calc((var(--q) - 0.24) / 0.08),1)}.sc-i2-rap .sc-i2-r8{--k:clamp(0,calc((var(--q) - 0.3) / 0.06),1)}.sc-i2-rap .sc-i2-r9{--k:clamp(0,calc((var(--q) - 0.34) / 0.08),1)}.sc-i2-rap .sc-i2-r10{--k:clamp(0,calc((var(--q) - 0.44) / 0.08),1)}.sc-i2-rap .sc-i2-r11{--k:clamp(0,calc((var(--q) - 0.54) / 0.06),1)}.sc-i2-rap .sc-i2-r12{--k:clamp(0,calc((var(--q) - 0.56) / 0.06),1)}.sc-i2-rap .sc-i2-r13{--k:clamp(0,calc((var(--q) - 0.58) / 0.06),1)}.sc-i2-rap .sc-i2-r14{--k:clamp(0,calc((var(--q) - 0.62) / 0.1),1)}.sc-i2-rap .sc-i2-r16{--k:clamp(0,calc((var(--q) - 0.7) / 0.06),1)}.sc-i2-rap .sc-i2-r17{--k:clamp(0,calc((var(--q) - 0.74) / 0.06),1)}.sc-i2-rap .sc-i2-r18{--k:clamp(0,calc((var(--q) - 0.78) / 0.08),1)}.sc-i2-rap .sc-i2-r20{--k:clamp(0,calc((var(--q) - 0.84) / 0.06),1)}.sc-i2-rap .sc-i2-r21{--k:clamp(0,calc((var(--q) - 0.88) / 0.08),1)} .sc-i2-rap .sc-i2-amb{opacity:min(var(--r8k),calc(1 - var(--r12k)))}.sc-i2-rap{--r8k:clamp(0,calc((var(--q) - .3) / .06),1);--r12k:clamp(0,calc((var(--q) - .56) / .06),1)} .sc-i2-jeton{transform:translateY(calc((clamp(0,calc((var(--q) - .1) / .08),1) * 72 + clamp(0,calc((var(--q) - .24) / .08),1) * 72 + clamp(0,calc((var(--q) - .62) / .1),1) * 140 + clamp(0,calc((var(--q) - .78) / .08),1) * 72) * 1px));fill:var(--menthe)} .sc-i2-bases .sc-i2-b1{--k:clamp(0,calc((var(--q) - 0) / 0.08),1)}.sc-i2-bases .sc-i2-b2{--k:clamp(0,calc((var(--q) - 0.06) / 0.06),1)}.sc-i2-bases .sc-i2-b3{--k:clamp(0,calc((var(--q) - 0.1) / 0.06),1)}.sc-i2-bases .sc-i2-b4{--k:clamp(0,calc((var(--q) - 0.15) / 0.1),1)}.sc-i2-bases .sc-i2-b5{--k:clamp(0,calc((var(--q) - 0.18) / 0.1),1)}.sc-i2-bases .sc-i2-b6{--k:clamp(0,calc((var(--q) - 0.21) / 0.1),1)}.sc-i2-bases .sc-i2-b7{--k:clamp(0,calc((var(--q) - 0.24) / 0.1),1)}.sc-i2-bases .sc-i2-b8{--k:clamp(0,calc((var(--q) - 0.26) / 0.06),1)}.sc-i2-bases .sc-i2-b9{--k:clamp(0,calc((var(--q) - 0.3) / 0.06),1)}.sc-i2-bases .sc-i2-b10{--k:clamp(0,calc((var(--q) - 0.34) / 0.06),1)}.sc-i2-bases .sc-i2-b11{--k:clamp(0,calc((var(--q) - 0.38) / 0.06),1)}.sc-i2-bases .sc-i2-b12{--k:clamp(0,calc((var(--q) - 0.44) / 0.08),1)}.sc-i2-bases .sc-i2-b13{--k:clamp(0,calc((var(--q) - 0.5) / 0.06),1)}.sc-i2-bases .sc-i2-b14{--k:clamp(0,calc((var(--q) - 0.54) / 0.08),1)}.sc-i2-bases .sc-i2-b15{--k:clamp(0,calc((var(--q) - 0.6) / 0.1),1)}.sc-i2-bases .sc-i2-b16{--k:clamp(0,calc((var(--q) - 0.65) / 0.1),1)}.sc-i2-bases .sc-i2-b17{--k:clamp(0,calc((var(--q) - 0.7) / 0.1),1)}.sc-i2-bases .sc-i2-b18{--k:clamp(0,calc((var(--q) - 0.75) / 0.1),1)}.sc-i2-bases .sc-i2-b19{--k:clamp(0,calc((var(--q) - 0.84) / 0.06),1)}.sc-i2-bases .sc-i2-b20{--k:clamp(0,calc((var(--q) - 0.9) / 0.06),1)} .sc-i2-bar{opacity:1;transform-box:fill-box;transform-origin:left center;transform:scaleX(var(--k,1))} .sc-i2-clip{clip-path:inset(-6px calc((1 - var(--k,1)) * 100%) -6px -2px)} .sc-i2-duo{margin-top:var(--s-6)}h3.sc-i2-h{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);line-height:1.1;font-variation-settings:"wdth" 112} /* @@END ia2b */ /* @@BEGIN autres */ /* Scènes des pages métiers (mission autres, 18/10/2026) : /app-personnalisee/, /filemaker/, /conseil-en-digitalisation/, /le-developpement-sur-mesure/. Réutilise le cadre .sc-ia (fond, scène collante, mise en page duo, phases) en lecture seule ; tout le mouvement vient de --p (1 = état final). */ .sc-au-svg .sc-au-lib { font-size: 18px; fill: var(--texte); paint-order: stroke; stroke: var(--nuit); stroke-width: 4px; stroke-linejoin: round; } .sc-au-svg .sc-au-sub { font-size: 15px; fill: var(--doux); font-weight: 500; } .sc-au-nd-base{fill:var(--abysse);stroke:var(--ligne-forte);stroke-width:2.5} .sc-au-nd-on{fill:var(--surface);stroke:var(--menthe);stroke-width:3;opacity:var(--on)} .sc-au-nd-halo{fill:var(--menthe);opacity:calc(var(--on) * .15);transform:scale(calc(1 + var(--on) * .5))} .sc-au-nd-halo,.sc-au-nd-base,.sc-au-nd-on{transform-box:fill-box;transform-origin:center} .sc-au-ndic{fill:none;stroke:var(--menthe);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:calc(.3 + var(--on) * .7)} .sc-au-app{--sc-h:320vh;--sc-h-m:300vh} .sc-au-app .sc-ia-phase--1{--on:clamp(0,calc((var(--p) - 0.02) * 12.5),1)} .sc-au-app .sc-ia-phase--2{--on:clamp(0,calc((var(--p) - 0.26) * 12.5),1)} .sc-au-app .sc-ia-phase--3{--on:clamp(0,calc((var(--p) - 0.5) * 12.5),1)} .sc-au-app .sc-ia-phase--4{--on:clamp(0,calc((var(--p) - 0.74) * 12.5),1)} .sc-au-svg-app{--mv:clamp(0,calc((var(--p) - 0.27) * 7.69),1);--mve:calc(var(--mv) * (2 - var(--mv)));--win:clamp(0,calc((var(--p) - 0.32) * 12.5),1);--wire:calc(clamp(0,calc((var(--p) - 0.34) * 12.5),1) * (1 - clamp(0,calc((var(--p) - 0.5) * 5),1)))} .sc-au-app-fond{fill:var(--nuit);opacity:var(--win)} .sc-au-app-cadre{fill:none;stroke:url(#sc-au-g-app);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.25) * 7.69),1));opacity:clamp(0,calc((var(--p) - .25) * 40),1)} .sc-au-app-barre{fill:none;stroke:var(--ligne-forte);stroke-width:1.5;opacity:var(--win)} .sc-au-app-pt{fill:var(--ligne-forte);opacity:var(--win)} .sc-au-app-nav{fill:var(--ligne-forte);opacity:clamp(0,calc((var(--p) - 0.48) * 16.67),1)} .sc-au-app-nav--1{fill:var(--menthe)} .sc-au-app-fil{fill:none;stroke:var(--doux);stroke-width:1.5;stroke-dasharray:5 5;opacity:var(--wire)} .sc-au-app-bloc--1{opacity:clamp(0,calc((var(--p) - 0.5) * 16.67),1)} .sc-au-app-bloc--2{opacity:clamp(0,calc((var(--p) - 0.54) * 16.67),1)} .sc-au-app-bloc--3{opacity:clamp(0,calc((var(--p) - 0.57) * 16.67),1)} .sc-au-app-bloc--4{opacity:clamp(0,calc((var(--p) - 0.6) * 16.67),1)} .sc-au-app-bloc--5{opacity:clamp(0,calc((var(--p) - 0.64) * 16.67),1)} .sc-au-app-bloc--6{opacity:clamp(0,calc((var(--p) - 0.68) * 16.67),1)} .sc-au-app-plein{fill:var(--abysse);stroke:var(--ligne-forte);stroke-width:1.5} .sc-au-app-l1{fill:var(--doux);opacity:.55} .sc-au-app-l2{fill:var(--texte)} .sc-au-app-l2--m{fill:var(--menthe)} .sc-au-app-axe,.sc-au-app-ligne{fill:none;stroke:var(--ligne-forte);stroke-width:1.5} .sc-au-app-aire{fill:var(--ciel);opacity:.12} .sc-au-app-courbe{fill:none;stroke:var(--menthe);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.58) * 8.33),1));opacity:clamp(0,calc((var(--p) - .58) * 40),1)} .sc-au-app-dot{fill:var(--menthe)} .sc-au-app-dot--c{fill:var(--ciel)} .sc-au-app-note{transform-box:fill-box;transform-origin:center} .sc-au-app-note rect{stroke:none} .sc-au-app-note path{fill:none;stroke:var(--nuit);stroke-width:3;stroke-linecap:round;opacity:.55} .sc-au-app-note-m rect{fill:var(--menthe)} .sc-au-app-note-c rect{fill:var(--ciel)} .sc-au-app-note-d rect{fill:var(--doux)} .sc-au-app-note--1{--in:clamp(0,calc((var(--p) - 0.03) * 20),1);opacity:calc(var(--in) * (1 - clamp(0,calc((var(--p) - 0.36) * 16.67),1)));transform:translate(calc(77 * var(--mve) * 1px),calc((-11 * var(--mve) + (1 - var(--in)) * -14) * 1px)) rotate(calc(-8 * (1 - var(--mve)) * 1deg)) scale(calc(1 - .5 * var(--mve)))} .sc-au-app-note--2{--in:clamp(0,calc((var(--p) - 0.05) * 20),1);opacity:calc(var(--in) * (1 - clamp(0,calc((var(--p) - 0.36) * 16.67),1)));transform:translate(calc(53 * var(--mve) * 1px),calc((15 * var(--mve) + (1 - var(--in)) * -14) * 1px)) rotate(calc(6 * (1 - var(--mve)) * 1deg)) scale(calc(1 - .5 * var(--mve)))} .sc-au-app-note--3{--in:clamp(0,calc((var(--p) - 0.06) * 20),1);opacity:calc(var(--in) * (1 - clamp(0,calc((var(--p) - 0.36) * 16.67),1)));transform:translate(calc(24 * var(--mve) * 1px),calc((-17 * var(--mve) + (1 - var(--in)) * -14) * 1px)) rotate(calc(-5 * (1 - var(--mve)) * 1deg)) scale(calc(1 - .5 * var(--mve)))} .sc-au-app-note--4{--in:clamp(0,calc((var(--p) - 0.08) * 20),1);opacity:calc(var(--in) * (1 - clamp(0,calc((var(--p) - 0.36) * 16.67),1)));transform:translate(calc(97 * var(--mve) * 1px),calc((-34 * var(--mve) + (1 - var(--in)) * -14) * 1px)) rotate(calc(5 * (1 - var(--mve)) * 1deg)) scale(calc(1 - .5 * var(--mve)))} .sc-au-app-note--5{--in:clamp(0,calc((var(--p) - 0.09) * 20),1);opacity:calc(var(--in) * (1 - clamp(0,calc((var(--p) - 0.36) * 16.67),1)));transform:translate(calc(116 * var(--mve) * 1px),calc((-8 * var(--mve) + (1 - var(--in)) * -14) * 1px)) rotate(calc(-7 * (1 - var(--mve)) * 1deg)) scale(calc(1 - .5 * var(--mve)))} .sc-au-app-note--6{--in:clamp(0,calc((var(--p) - 0.11) * 20),1);opacity:calc(var(--in) * (1 - clamp(0,calc((var(--p) - 0.36) * 16.67),1)));transform:translate(calc(-110 * var(--mve) * 1px),calc((39 * var(--mve) + (1 - var(--in)) * -14) * 1px)) rotate(calc(4 * (1 - var(--mve)) * 1deg)) scale(calc(1 - .5 * var(--mve)))} .sc-au-app-perso{opacity:clamp(0,calc((var(--p) - 0.02) * 16.67),1)} .sc-au-app-tete,.sc-au-app-corps{fill:none;stroke:var(--doux);stroke-width:2.4;stroke-linecap:round} .sc-au-app-anneau{fill:var(--abysse);stroke:var(--menthe);stroke-width:2.5;opacity:clamp(0,calc((var(--p) - 0.86) * 16.67),1)} .sc-au-app-lib{opacity:clamp(0,calc((var(--p) - 0.04) * 16.67),1)} .sc-au-app-dev{opacity:var(--on);transform:translateY(calc((1 - var(--on)) * 36px))} .sc-au-app-dev--t{--on:clamp(0,calc((var(--p) - 0.74) * 16.67),1)} .sc-au-app-dev--m{--on:clamp(0,calc((var(--p) - 0.78) * 16.67),1)} .sc-au-app-coque{fill:var(--surface);stroke:var(--ligne-forte);stroke-width:2} .sc-au-app-ecran{fill:var(--nuit)} .sc-au-app-mini{fill:var(--abysse);stroke:var(--ligne-forte);stroke-width:1.2} .sc-au-app-courbe2{fill:none;stroke:var(--menthe);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .sc-au-app-nuage path{fill:var(--abysse);stroke:var(--ciel);stroke-width:2.5;stroke-linejoin:round} .sc-au-app-nuage{opacity:clamp(0,calc((var(--p) - 0.8) * 20),1)} .sc-au-app-lien{fill:none;stroke:var(--ciel);stroke-width:2;stroke-linecap:round;stroke-dasharray:1} .sc-au-app-lien--1{stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.83) * 16.67),1));opacity:clamp(0,calc((var(--p) - 0.83) * 40),1)} .sc-au-app-lien--2{stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.85) * 16.67),1));opacity:clamp(0,calc((var(--p) - 0.85) * 40),1)} .sc-au-app-lien--3{stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.87) * 16.67),1));opacity:clamp(0,calc((var(--p) - 0.87) * 40),1)} .sc-au-fm{--sc-h:300vh;--sc-h-m:280vh} .sc-au-fm .sc-ia-phase--1{--on:clamp(0,calc((var(--p) - 0.02) * 12.5),1)} .sc-au-fm .sc-ia-phase--2{--on:clamp(0,calc((var(--p) - 0.26) * 12.5),1)} .sc-au-fm .sc-ia-phase--3{--on:clamp(0,calc((var(--p) - 0.5) * 12.5),1)} .sc-au-fm .sc-ia-phase--4{--on:clamp(0,calc((var(--p) - 0.72) * 12.5),1)} .sc-au-fm-orbite{fill:none;stroke:var(--ligne);stroke-width:1.5;stroke-dasharray:2 8;opacity:clamp(0,calc((var(--p) - 0.06) * 12.5),1)} .sc-au-fm-fond{fill:none;stroke:var(--ligne-forte);stroke-width:1.5;stroke-dasharray:2 7;opacity:clamp(0,calc((var(--p) - 0.08) * 12.5),1)} .sc-au-fm-lien{fill:none;stroke:url(#sc-au-g-fm);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--tr));opacity:clamp(0,calc(var(--tr) * 40),1)} .sc-au-fm-flux{fill:none;stroke:var(--texte);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.1 16;stroke-dashoffset:calc(var(--p) * -160);opacity:calc(var(--tr) * .75)} .sc-au-fm-lien--pro,.sc-au-fm-flux--pro{--tr:clamp(0,calc((var(--p) - 0.21) * 16.67),1)} .sc-au-nd--pro{--on:clamp(0,calc((var(--p) - 0.27) * 20),1)} .sc-au-fm-l--pro{opacity:clamp(0,calc((var(--p) - 0.25) * 16.67),1)} .sc-au-fm-lien--go,.sc-au-fm-flux--go{--tr:clamp(0,calc((var(--p) - 0.27) * 16.67),1)} .sc-au-nd--go{--on:clamp(0,calc((var(--p) - 0.33) * 20),1)} .sc-au-fm-l--go{opacity:clamp(0,calc((var(--p) - 0.31) * 16.67),1)} .sc-au-fm-lien--web,.sc-au-fm-flux--web{--tr:clamp(0,calc((var(--p) - 0.45) * 16.67),1)} .sc-au-nd--web{--on:clamp(0,calc((var(--p) - 0.51) * 20),1)} .sc-au-fm-l--web{opacity:clamp(0,calc((var(--p) - 0.49) * 16.67),1)} .sc-au-fm-lien--api,.sc-au-fm-flux--api{--tr:clamp(0,calc((var(--p) - 0.67) * 16.67),1)} .sc-au-nd--api{--on:clamp(0,calc((var(--p) - 0.73) * 20),1)} .sc-au-fm-l--api{opacity:clamp(0,calc((var(--p) - 0.71) * 16.67),1)} .sc-au-fm-lien--ia,.sc-au-fm-flux--ia{--tr:clamp(0,calc((var(--p) - 0.75) * 16.67),1)} .sc-au-nd--ia{--on:clamp(0,calc((var(--p) - 0.81) * 20),1)} .sc-au-fm-l--ia{opacity:clamp(0,calc((var(--p) - 0.79) * 16.67),1)} .sc-au-fm-c{--on:clamp(0,calc((var(--p) - 0.03) * 14.29),1);opacity:calc(.25 + var(--on) * .75)} .sc-au-fm-c-disque{fill:var(--surface);stroke:var(--menthe);stroke-width:3} .sc-au-fm-c-halo{fill:var(--menthe);opacity:calc(var(--on) * .14);transform:scale(calc(1 + var(--on) * .4));transform-box:fill-box;transform-origin:center} .sc-au-fm-ic{fill:none;stroke:var(--menthe);stroke-width:3;stroke-linejoin:round} .sc-au-fm-badge{fill:var(--abysse);stroke:var(--ciel);stroke-width:2} .sc-au-fm-ic2{fill:none;stroke:var(--ciel);stroke-width:2;stroke-linejoin:round} .sc-au-fm-cl{opacity:clamp(0,calc((var(--p) - 0.06) * 16.67),1)} .sc-au-cs{--sc-h:320vh;--sc-h-m:300vh} .sc-au-cs .sc-ia-phase--1{--on:clamp(0,calc((var(--p) - 0.02) * 12.5),1)} .sc-au-cs .sc-ia-phase--2{--on:clamp(0,calc((var(--p) - 0.26) * 12.5),1)} .sc-au-cs .sc-ia-phase--3{--on:clamp(0,calc((var(--p) - 0.5) * 12.5),1)} .sc-au-cs .sc-ia-phase--4{--on:clamp(0,calc((var(--p) - 0.76) * 12.5),1)} .sc-au-cs-cible{--on:clamp(0,calc((var(--p) - 0.04) * 16.67),1);--ok:clamp(0,calc((var(--p) - 0.78) * 16.67),1);opacity:calc(.2 + var(--on) * .8)} .sc-au-cs-anneau{fill:none;stroke:var(--ciel);stroke-width:2} .sc-au-cs-coeur{fill:var(--abysse);stroke:var(--menthe);stroke-width:3} .sc-au-cs-cible-halo{fill:var(--menthe);opacity:calc(var(--ok) * .18);transform:scale(calc(1 + var(--ok) * .35));transform-box:fill-box;transform-origin:center} .sc-au-cs-ok{fill:none;stroke:var(--menthe);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:var(--ok)} .sc-au-svg .sc-au-cs-cl{fill:var(--menthe);opacity:clamp(0,calc((var(--p) - 0.06) * 16.67),1)} .sc-au-cs-o--1{--in:clamp(0,calc((var(--p) - 0.03) * 20),1);--ok:clamp(0,calc((var(--p) - 0.54) * 25),1);opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 14px))} .sc-au-cs-o--2{--in:clamp(0,calc((var(--p) - 0.06) * 20),1);--ok:clamp(0,calc((var(--p) - 0.57) * 25),1);opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 14px))} .sc-au-cs-o--3{--in:clamp(0,calc((var(--p) - 0.09) * 20),1);--ok:clamp(0,calc((var(--p) - 0.6) * 25),1);opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 14px))} .sc-au-cs-o-c{fill:var(--abysse);stroke:var(--ligne-forte);stroke-width:2} .sc-au-cs-oic{fill:none;stroke:var(--doux);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sc-au-cs-coche{opacity:var(--ok)} .sc-au-cs-coche circle{fill:var(--menthe)} .sc-au-cs-coche path{fill:none;stroke:var(--nuit);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .sc-au-cs-ol{opacity:clamp(0,calc((var(--p) - 0.08) * 16.67),1)} .sc-au-cs-casse{fill:none;stroke:var(--doux);stroke-width:2;stroke-dasharray:9 7 2 7;opacity:calc(clamp(0,calc((var(--p) - 0.1) * 16.67),1) * .7 * (1 - clamp(0,calc((var(--p) - 0.52) * 12.5),1)))} .sc-au-cs-relie{fill:none;stroke:var(--menthe);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1} .sc-au-cs-relie--1{stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.54) * 16.67),1));opacity:clamp(0,calc((var(--p) - 0.54) * 40),1)} .sc-au-cs-relie--2{stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.57) * 16.67),1));opacity:clamp(0,calc((var(--p) - 0.57) * 40),1)} .sc-au-cs-relie--3{stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.59) * 16.67),1));opacity:clamp(0,calc((var(--p) - 0.59) * 40),1)} .sc-au-cs-relie--4{stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.61) * 16.67),1));opacity:clamp(0,calc((var(--p) - 0.61) * 40),1)} .sc-au-cs-plan{fill:none;stroke:var(--doux);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 9;opacity:clamp(0,calc((var(--p) - 0.27) * 16.67),1)} .sc-au-cs-route{fill:none;stroke:url(#sc-au-g-cs);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - 0.5) * 5),1));opacity:clamp(0,calc((var(--p) - .5) * 40),1)} .sc-au-cs-depart{fill:var(--menthe);opacity:clamp(0,calc((var(--p) - 0.26) * 25),1)} .sc-au-cs-dl{opacity:clamp(0,calc((var(--p) - 0.26) * 16.67),1)} .sc-au-cs-j-halo{fill:var(--menthe);opacity:calc(var(--on) * .16);transform:scale(calc(1 + var(--on) * .4));transform-box:fill-box;transform-origin:center} .sc-au-cs-j-c{fill:var(--nuit);stroke:var(--doux);stroke-width:2.5} .sc-au-cs-j-on{fill:var(--menthe);stroke:var(--nuit);stroke-width:3;opacity:var(--on)} .sc-au-cs-j--1{--on:clamp(0,calc((var(--p) - 0.55) * 25),1);opacity:clamp(0,calc((var(--p) - 0.3) * 25),1)} .sc-au-cs-jl--1{opacity:clamp(0,calc((var(--p) - 0.31) * 25),1)} .sc-au-cs-j--2{--on:clamp(0,calc((var(--p) - 0.6) * 25),1);opacity:clamp(0,calc((var(--p) - 0.33) * 25),1)} .sc-au-cs-jl--2{opacity:clamp(0,calc((var(--p) - 0.34) * 25),1)} .sc-au-cs-j--3{--on:clamp(0,calc((var(--p) - 0.65) * 25),1);opacity:clamp(0,calc((var(--p) - 0.36) * 25),1)} .sc-au-cs-jl--3{opacity:clamp(0,calc((var(--p) - 0.37) * 25),1)} .sc-au-cs-p--1{--on:clamp(0,calc((var(--p) - 0.6) * 20),1);opacity:var(--on);transform:translateY(calc((1 - var(--on)) * 16px))} .sc-au-cs-p--2{--on:clamp(0,calc((var(--p) - 0.63) * 20),1);opacity:var(--on);transform:translateY(calc((1 - var(--on)) * 16px))} .sc-au-cs-p--3{--on:clamp(0,calc((var(--p) - 0.66) * 20),1);opacity:var(--on);transform:translateY(calc((1 - var(--on)) * 16px))} .sc-au-cs-p-c{fill:var(--abysse);stroke:var(--menthe);stroke-width:2} .sc-au-cs-p-t{fill:none;stroke:var(--texte);stroke-width:2.2;stroke-linecap:round} .sc-au-cs-pl{opacity:clamp(0,calc((var(--p) - 0.64) * 16.67),1)} .sc-au-cs-suite{fill:none;stroke:var(--menthe);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 8;opacity:clamp(0,calc((var(--p) - 0.84) * 16.67),1)} .sc-au-cs-cible2{fill:none;stroke:var(--ciel);stroke-width:2;opacity:calc(clamp(0,calc((var(--p) - 0.88) * 16.67),1) * .8)} .sc-au-dm{--sc-h:320vh;--sc-h-m:300vh} .sc-au-dm .sc-ia-phase--1{--on:clamp(0,calc((var(--p) - 0.02) * 12.5),1)} .sc-au-dm .sc-ia-phase--2{--on:clamp(0,calc((var(--p) - 0.26) * 12.5),1)} .sc-au-dm .sc-ia-phase--3{--on:clamp(0,calc((var(--p) - 0.5) * 12.5),1)} .sc-au-dm .sc-ia-phase--4{--on:clamp(0,calc((var(--p) - 0.74) * 12.5),1)} .sc-au-dm-c--1{--on:clamp(0,calc((var(--p) - 0.03) * 16.67),1);opacity:var(--on);transform:translateY(calc((1 - var(--on)) * 18px))} .sc-au-dm-c--2{--on:clamp(0,calc((var(--p) - 0.08) * 16.67),1);opacity:var(--on);transform:translateY(calc((1 - var(--on)) * 18px))} .sc-au-dm-c--3{--on:clamp(0,calc((var(--p) - 0.13) * 16.67),1);opacity:var(--on);transform:translateY(calc((1 - var(--on)) * 18px))} .sc-au-dm-cr{fill:var(--abysse);stroke:var(--ligne-forte);stroke-width:1.5} .sc-au-dm-c--3 .sc-au-dm-cr{stroke:var(--menthe)} .sc-au-svg .sc-au-dm-cl{font-size:16px;fill:var(--doux)} .sc-au-dm-m--1{--in:clamp(0,calc((var(--p) - 0.27) * 14.29),1);--ie:calc(var(--in) * (2 - var(--in)));opacity:clamp(0,calc(var(--in) * 3),1);transform:translateY(calc((1 - var(--ie)) * -70px))} .sc-au-dm-m--2{--in:clamp(0,calc((var(--p) - 0.32) * 14.29),1);--ie:calc(var(--in) * (2 - var(--in)));opacity:clamp(0,calc(var(--in) * 3),1);transform:translateY(calc((1 - var(--ie)) * -70px))} .sc-au-dm-m--3{--in:clamp(0,calc((var(--p) - 0.37) * 14.29),1);--ie:calc(var(--in) * (2 - var(--in)));opacity:clamp(0,calc(var(--in) * 3),1);transform:translateY(calc((1 - var(--ie)) * -70px))} .sc-au-dm-mr{fill:var(--surface);stroke:var(--menthe);stroke-width:2} .sc-au-dm-ic{fill:none;stroke:var(--menthe);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .sc-au-svg .sc-au-dm-ml{font-size:17px} .sc-au-dm-ex{--on:clamp(0,calc((var(--p) - 0.5) * 16.67),1);opacity:var(--on);transform:translateX(calc((1 - var(--on)) * 24px))} .sc-au-dm-exr{fill:var(--abysse);stroke:var(--ciel);stroke-width:2;stroke-dasharray:6 5} .sc-au-dm-exl{fill:none;stroke:var(--doux);stroke-width:3;stroke-linecap:round;opacity:.5} .sc-au-svg .sc-au-dm-exl2{fill:var(--ciel);font-size:17px} .sc-au-dm-pont-fond{fill:none;stroke:var(--ligne-forte);stroke-width:1.5;stroke-dasharray:2 6;opacity:clamp(0,calc((var(--p) - 0.5) * 25),1)} .sc-au-dm-pont{fill:none;stroke:url(#sc-au-g-dm);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--tr));opacity:clamp(0,calc(var(--tr) * 40),1)} .sc-au-dm-flux{fill:none;stroke:var(--texte);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.1 14;stroke-dashoffset:calc(var(--p) * -140);opacity:calc(var(--tr) * .8)} .sc-au-dm-pont--1,.sc-au-dm-flux--1{--tr:clamp(0,calc((var(--p) - 0.56) * 16.67),1)} .sc-au-dm-pont--2,.sc-au-dm-flux--2{--tr:clamp(0,calc((var(--p) - 0.6) * 16.67),1)} .sc-au-dm-n{opacity:clamp(0,calc((var(--p) - 0.74) * 20),1)} .sc-au-dm-nfil{fill:none;stroke:var(--doux);stroke-width:1.8;stroke-dasharray:6 5} .sc-au-dm-nplein{fill:var(--surface);stroke:var(--menthe);stroke-width:2;opacity:clamp(0,calc((var(--p) - 0.88) * 20),1)} .sc-au-svg .sc-au-dm-nl{font-size:17px} .sc-au-svg .sc-au-dm-nl--a{fill:var(--doux);opacity:calc(1 - clamp(0,calc((var(--p) - 0.88) * 25),1))} .sc-au-svg .sc-au-dm-nl--b{fill:var(--menthe);opacity:clamp(0,calc((var(--p) - 0.9) * 25),1)} .sc-au-dm-prix{--on:clamp(0,calc((var(--p) - 0.8) * 20),1);opacity:var(--on);transform:translateX(calc((1 - var(--on)) * -12px))} .sc-au-dm-prixr{fill:var(--abysse);stroke:var(--ciel);stroke-width:2;stroke-linejoin:round} .sc-au-svg .sc-au-dm-prixl{fill:var(--ciel);font-size:17px;font-weight:700} .sc-au-dm-fl{fill:none;stroke:var(--menthe);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:clamp(0,calc((var(--p) - 0.92) * 20),1)} @media (max-width:899px){.sc-au-svg .sc-au-lib{font-size:22px} .sc-au-svg .sc-au-sub{font-size:19px} .sc-au-svg .sc-au-dm-cl{font-size:19px} .sc-au-svg :is(.sc-au-dm-ml,.sc-au-dm-exl2){font-size:20px} .sc-au-svg .sc-au-dm-nl{font-size:18px} .sc-ia.sc-au .sc-ia-fig .sc-ia-svg{max-height:40svh} .sc-ia.sc-au-cs .sc-ia-fig .sc-ia-svg{max-height:33svh}} @media (max-width:899px) and (max-height:700px){.sc-ia.sc-au .sc-ia-fig .sc-ia-svg{max-height:30svh} .sc-ia:is(.sc-au-cs,.sc-au-dm) .sc-ia-fig .sc-ia-svg{max-height:25svh}} /* @@END autres */ /* @@BEGIN ia1b */ /* * ActiveD - compléments des pages IA (mission ia1b, 18/10/2026) : /competences-ia/, /audit-ia/, /agents-ia-sur-mesure/. * Classes préfixées sc-i1-. Scènes simples (.sc) : theme.js pose --p ; --q remappe --p pour que l’animation * soit finie quand l’illustration est au milieu de l’écran. Sans JS ou en mouvement réduit, --p = 1 : état final. */ .sc-i1-scene { --q: clamp(0, calc((var(--p) - .1) * 2.5), 1); min-width: 0; width: 100%; } .sc-i1-svg { display: block; width: 100%; height: auto; overflow: visible; } .sc-i1-svg text { font-family: var(--f); font-variation-settings: "wdth" 100; } .pg-duo.sc-i1-duo { align-items: center; } .pg-texte.sc-i1-texte h3 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; font-variation-settings: "wdth" 112; } .pg-texte.sc-i1-texte .pg-liste li { font-size: var(--t-s); line-height: 1.55; } p.sc-i1-note { font-size: var(--t-xs); line-height: 1.45; color: var(--doux); } .pg-texte > p.sc-i1-note { font-size: var(--t-xs); } .pg-duo.sc-i1-duo[id] { scroll-margin-top: calc(var(--entete-h) + 1rem); } ul.wp-block-list.sc-i1-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-s); color: var(--doux); } .sc-i1-pastille { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: .5rem; vertical-align: -2px; } .sc-i1-pastille--v { background: var(--menthe); } .sc-i1-pastille--a { background: rgba(58,176,234,.22); box-shadow: inset 0 0 0 2px var(--ciel); } @media (min-width: 900px) { .sc-i1-hub, .sc-i1-devis { max-width: 600px; justify-self: center; } .sc-i1-livrable { max-width: 500px; justify-self: center; } } @media (max-width: 899px) { .sc-i1-scene { max-width: 520px; justify-self: center; } .sc-i1-svg .sc-i1-h-role { display: none; } .sc-i1-svg .sc-i1-h-nom { font-size: 25px; } .sc-i1-svg .sc-i1-p-lb { font-size: 19px; } } /* règles générées (avancement par élément) */ .sc-i1-h-arc0{--k:clamp(0,calc((var(--q) - .08)/.1),1)} .sc-i1-h-arc1{--k:clamp(0,calc((var(--q) - .18)/.1),1)} .sc-i1-h-arc2{--k:clamp(0,calc((var(--q) - .28)/.1),1)} .sc-i1-h-arc3{--k:clamp(0,calc((var(--q) - .38)/.1),1)} .sc-i1-h-arc4{--k:clamp(0,calc((var(--q) - .48)/.1),1)} .sc-i1-h-ray0{--k:clamp(0,calc((var(--q) - .06)/.09),1)} .sc-i1-h-out0{--k:clamp(0,calc((var(--q) - .6)/.14),1)} .sc-i1-h-in0{--k:clamp(0,calc((var(--q) - .66)/.14),1)} .sc-i1-h-ray1{--k:clamp(0,calc((var(--q) - .16)/.09),1)} .sc-i1-h-out1{--k:clamp(0,calc((var(--q) - .65)/.14),1)} .sc-i1-h-in1{--k:clamp(0,calc((var(--q) - .71)/.14),1)} .sc-i1-h-ray2{--k:clamp(0,calc((var(--q) - .26)/.09),1)} .sc-i1-h-out2{--k:clamp(0,calc((var(--q) - .7)/.14),1)} .sc-i1-h-in2{--k:clamp(0,calc((var(--q) - .76)/.14),1)} .sc-i1-h-ray3{--k:clamp(0,calc((var(--q) - .36)/.09),1)} .sc-i1-h-out3{--k:clamp(0,calc((var(--q) - .75)/.14),1)} .sc-i1-h-in3{--k:clamp(0,calc((var(--q) - .81)/.14),1)} .sc-i1-h-ray4{--k:clamp(0,calc((var(--q) - .46)/.09),1)} .sc-i1-h-out4{--k:clamp(0,calc((var(--q) - .8)/.14),1)} .sc-i1-h-in4{--k:clamp(0,calc((var(--q) - .86)/.14),1)} .sc-i1-h-coeur{--k:clamp(0,calc((var(--q) - 0)/.08),1)} .sc-i1-h-l0{--k:clamp(0,calc((var(--q) - .04)/.08),1)} .sc-i1-h-l1{--k:clamp(0,calc((var(--q) - .18)/.08),1)} .sc-i1-h-l2{--k:clamp(0,calc((var(--q) - .28)/.08),1)} .sc-i1-h-l3{--k:clamp(0,calc((var(--q) - .38)/.08),1)} .sc-i1-h-l4{--k:clamp(0,calc((var(--q) - .48)/.08),1)} .sc-i1-l-papier{--k:clamp(0,calc((var(--q) - 0)/.08),1)} .sc-i1-l-t1{--k:clamp(0,calc((var(--q) - .1)/.07),1)} .sc-i1-l-b0{--k:clamp(0,calc((var(--q) - .14)/.05),1)} .sc-i1-l-f0{--k:clamp(0,calc((var(--q) - .17)/.04),1)} .sc-i1-l-fp0{--k:clamp(0,calc((var(--q) - .2)/.02),1)} .sc-i1-l-b1{--k:clamp(0,calc((var(--q) - .18)/.05),1)} .sc-i1-l-f1{--k:clamp(0,calc((var(--q) - .21)/.04),1)} .sc-i1-l-fp1{--k:clamp(0,calc((var(--q) - .24)/.02),1)} .sc-i1-l-b2{--k:clamp(0,calc((var(--q) - .22)/.05),1)} .sc-i1-l-f2{--k:clamp(0,calc((var(--q) - .25)/.04),1)} .sc-i1-l-fp2{--k:clamp(0,calc((var(--q) - .28)/.02),1)} .sc-i1-l-b3{--k:clamp(0,calc((var(--q) - .26)/.05),1)} .sc-i1-l-sd0{--k:clamp(0,calc((var(--q) - .3)/.04),1)} .sc-i1-l-sd1{--k:clamp(0,calc((var(--q) - .33)/.04),1)} .sc-i1-l-sd2{--k:clamp(0,calc((var(--q) - .36)/.04),1)} .sc-i1-l-t2{--k:clamp(0,calc((var(--q) - .34)/.07),1)} .sc-i1-l-r0{--k:clamp(0,calc((var(--q) - .38)/.06),1)} .sc-i1-l-r1{--k:clamp(0,calc((var(--q) - .43)/.06),1)} .sc-i1-l-r2{--k:clamp(0,calc((var(--q) - .48)/.06),1)} .sc-i1-l-r3{--k:clamp(0,calc((var(--q) - .53)/.06),1)} .sc-i1-l-t3{--k:clamp(0,calc((var(--q) - .6)/.07),1)} .sc-i1-l-k0{--k:clamp(0,calc((var(--q) - .64)/.04),1)} .sc-i1-l-k1{--k:clamp(0,calc((var(--q) - .67)/.04),1)} .sc-i1-l-k2{--k:clamp(0,calc((var(--q) - .7)/.04),1)} .sc-i1-l-t4{--k:clamp(0,calc((var(--q) - .74)/.07),1)} .sc-i1-l-gt0{--k:clamp(0,calc((var(--q) - .82)/.04),1)} .sc-i1-l-g0{--k:clamp(0,calc((var(--q) - .78)/.06),1)} .sc-i1-l-gx0{--k:clamp(0,calc((var(--q) - .8)/.07),1)} .sc-i1-l-gt1{--k:clamp(0,calc((var(--q) - .87)/.04),1)} .sc-i1-l-g1{--k:clamp(0,calc((var(--q) - .83)/.06),1)} .sc-i1-l-gx1{--k:clamp(0,calc((var(--q) - .85)/.07),1)} .sc-i1-l-gt2{--k:clamp(0,calc((var(--q) - .92)/.04),1)} .sc-i1-l-g2{--k:clamp(0,calc((var(--q) - .88)/.06),1)} .sc-i1-l-gx2{--k:clamp(0,calc((var(--q) - .9)/.07),1)} .sc-i1-l-fo{--k:clamp(0,calc((var(--q) - .9)/.04),1)} .sc-i1-l-tampon{--k:clamp(0,calc((var(--q) - .92)/.06),1)} .sc-i1-d-fil0{--k:clamp(0,calc((var(--q) - .04)/.06),1)} .sc-i1-d-fil1{--k:clamp(0,calc((var(--q) - .14)/.08),1)} .sc-i1-d-fil2{--k:clamp(0,calc((var(--q) - .26)/.1),1)} .sc-i1-d-fil3{--k:clamp(0,calc((var(--q) - .4)/.2),1)} .sc-i1-d-fil4{--k:clamp(0,calc((var(--q) - .64)/.2),1)} .sc-i1-d-msg{--k:clamp(0,calc((var(--q) - 0)/.07),1)} .sc-i1-d-x0{--k:clamp(0,calc((var(--q) - .12)/.05),1)} .sc-i1-d-x1{--k:clamp(0,calc((var(--q) - .15)/.05),1)} .sc-i1-d-x2{--k:clamp(0,calc((var(--q) - .18)/.05),1)} .sc-i1-d-doc{--k:clamp(0,calc((var(--q) - .36)/.05),1)} .sc-i1-d-li0{--k:clamp(0,calc((var(--q) - .4)/.05),1)} .sc-i1-d-li1{--k:clamp(0,calc((var(--q) - .43)/.05),1)} .sc-i1-d-li2{--k:clamp(0,calc((var(--q) - .46)/.05),1)} .sc-i1-d-rem{--k:clamp(0,calc((var(--q) - .5)/.06),1)} .sc-i1-d-tot{--k:clamp(0,calc((var(--q) - .52)/.05),1)} .sc-i1-d-val{--k:clamp(0,calc((var(--q) - .6)/.06),1)} .sc-i1-d-ok{--k:clamp(0,calc((var(--q) - .74)/.05),1)} .sc-i1-d-env{--k:clamp(0,calc((var(--q) - .84)/.05),1)} .sc-i1-d-j0{--k:clamp(0,calc((var(--q) - .02)/.04),1)} .sc-i1-d-j1{--k:clamp(0,calc((var(--q) - .12)/.04),1)} .sc-i1-d-j2{--k:clamp(0,calc((var(--q) - .24)/.04),1)} .sc-i1-d-j3{--k:clamp(0,calc((var(--q) - .38)/.04),1)} .sc-i1-d-j4{--k:clamp(0,calc((var(--q) - .62)/.04),1)} .sc-i1-d-j5{--k:clamp(0,calc((var(--q) - .86)/.04),1)} .sc-i1-d-jt2{--k:clamp(0,calc((var(--q) - .9)/.05),1)} .sc-i1-p-v0{--k:clamp(0,calc((var(--q) - .1)/.12),1)} .sc-i1-p-a1{--k:clamp(0,calc((var(--q) - .32)/.12),1)} .sc-i1-p-v1{--k:clamp(0,calc((var(--q) - .22)/.12),1)} .sc-i1-p-a2{--k:clamp(0,calc((var(--q) - .44)/.12),1)} .sc-i1-p-v2{--k:clamp(0,calc((var(--q) - .34)/.12),1)} .sc-i1-p-a3{--k:clamp(0,calc((var(--q) - .56)/.12),1)} .sc-i1-p-v3{--k:clamp(0,calc((var(--q) - .46)/.12),1)} .sc-i1-p-seuil{--k:clamp(0,calc((var(--q) - .6)/.2),1)} .sc-i1-p-st{--k:clamp(0,calc((var(--q) - .8)/.08),1)} .sc-i1-h-arc0,.sc-i1-h-arc1,.sc-i1-h-arc2,.sc-i1-h-arc3,.sc-i1-h-arc4,.sc-i1-h-ray0,.sc-i1-h-ray1,.sc-i1-h-ray2,.sc-i1-h-ray3,.sc-i1-h-ray4,.sc-i1-l-f0,.sc-i1-l-f1,.sc-i1-l-f2,.sc-i1-d-fil0,.sc-i1-d-fil1,.sc-i1-d-fil2,.sc-i1-d-fil3,.sc-i1-d-fil4 { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-i1-h-out0 { transform: translate(calc(var(--k) * 0px), calc(var(--k) * -96px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-in0 { transform: translate(calc(var(--k) * 0px), calc(var(--k) * 96px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-out1 { transform: translate(calc(var(--k) * 43.05px), calc(var(--k) * -13.99px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-in1 { transform: translate(calc(var(--k) * -43.05px), calc(var(--k) * 13.99px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-out2 { transform: translate(calc(var(--k) * 50.04px), calc(var(--k) * 68.88px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-in2 { transform: translate(calc(var(--k) * -50.04px), calc(var(--k) * -68.88px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-out3 { transform: translate(calc(var(--k) * -50.04px), calc(var(--k) * 68.88px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-in3 { transform: translate(calc(var(--k) * 50.04px), calc(var(--k) * -68.88px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-out4 { transform: translate(calc(var(--k) * -43.05px), calc(var(--k) * -13.99px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-in4 { transform: translate(calc(var(--k) * 43.05px), calc(var(--k) * 13.99px)); opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-i1-h-coeur,.sc-i1-l-sd0,.sc-i1-l-sd1,.sc-i1-l-sd2,.sc-i1-d-ok,.sc-i1-d-j0,.sc-i1-d-j1,.sc-i1-d-j2,.sc-i1-d-j3,.sc-i1-d-j4,.sc-i1-d-j5 { opacity: var(--k); transform-box: fill-box; transform-origin: center; transform: scale(calc(.6 + var(--k) * .4)); } .sc-i1-h-l0,.sc-i1-h-l1,.sc-i1-h-l2,.sc-i1-h-l3,.sc-i1-h-l4 { opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * 8px)); } .sc-i1-l-papier { opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 24px)); } .sc-i1-l-t1,.sc-i1-l-t2,.sc-i1-l-t3,.sc-i1-l-t4 { clip-path: inset(-6px calc((1 - var(--k)) * 100%) -6px -2px); } .sc-i1-l-b0,.sc-i1-l-b1,.sc-i1-l-b2,.sc-i1-l-b3 { opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * 6px)); } .sc-i1-l-fp0,.sc-i1-l-fp1,.sc-i1-l-fp2,.sc-i1-l-gt0,.sc-i1-l-gt1,.sc-i1-l-gt2,.sc-i1-l-fo,.sc-i1-d-jt2,.sc-i1-p-st { opacity: var(--k); } .sc-i1-l-r0,.sc-i1-l-r1,.sc-i1-l-r2,.sc-i1-l-r3,.sc-i1-d-rem { opacity: var(--k); transform: translate(calc((1 - var(--k)) * -10px), calc((1 - var(--k)) * 0px)); } .sc-i1-l-k0,.sc-i1-l-k1,.sc-i1-l-k2 { opacity: var(--k); transform: translate(calc((1 - var(--k)) * -8px), calc((1 - var(--k)) * 0px)); } .sc-i1-l-g0,.sc-i1-l-gx0,.sc-i1-l-g1,.sc-i1-l-gx1,.sc-i1-l-g2,.sc-i1-l-gx2,.sc-i1-d-li0,.sc-i1-d-li1,.sc-i1-d-li2 { transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-i1-l-tampon { opacity: var(--k); transform-box: fill-box; transform-origin: center; scale: calc(1.5 - var(--k) * .5); } .sc-i1-d-msg { opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * -14px)); } .sc-i1-d-x0,.sc-i1-d-x1,.sc-i1-d-x2 { opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * -8px)); } .sc-i1-d-doc { opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * 12px)); } .sc-i1-d-tot { transform-box: fill-box; transform-origin: right center; transform: scaleX(var(--k)); } .sc-i1-d-val { opacity: var(--k); transform: translate(calc((1 - var(--k)) * 0px), calc((1 - var(--k)) * 10px)); } .sc-i1-d-env { opacity: var(--k); transform: translate(calc((1 - var(--k)) * -12px), calc((1 - var(--k)) * 0px)); } .sc-i1-p-v0,.sc-i1-p-v1,.sc-i1-p-v2,.sc-i1-p-v3 { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(var(--k)); } .sc-i1-p-a1,.sc-i1-p-a2,.sc-i1-p-a3 { transform-box: fill-box; transform-origin: center top; transform: scaleY(var(--k)); } .sc-i1-p-seuil { stroke-dashoffset: calc(1 - var(--k)); } .sc-i1-h-halo { opacity: clamp(0, calc((var(--q) - .55) / .4), 1); } .sc-i1-h-n0 { --on: clamp(0, calc((var(--q) - .04) / .06), 1); } .sc-i1-h-n1 { --on: clamp(0, calc((var(--q) - .18) / .06), 1); } .sc-i1-h-n2 { --on: clamp(0, calc((var(--q) - .28) / .06), 1); } .sc-i1-h-n3 { --on: clamp(0, calc((var(--q) - .38) / .06), 1); } .sc-i1-h-n4 { --on: clamp(0, calc((var(--q) - .48) / .06), 1); } .sc-i1-h-nhalo { opacity: calc(var(--on) * .14); transform-box: fill-box; transform-origin: center; transform: scale(calc(.75 + var(--on) * .25)); } .sc-i1-h-non { opacity: var(--on); } .sc-i1-h-ic { opacity: calc(.35 + var(--on) * .65); } [class^="sc-i1-h-l"] text { paint-order: stroke; stroke: #0A2533; stroke-width: 6px; stroke-linejoin: round; } .sc-i1-d-n0 { --on: clamp(0, calc((var(--q) - 0) / .05), 1); } .sc-i1-d-lb0 { opacity: calc(.35 + clamp(0, calc((var(--q) - 0) / .05), 1) * .65); } .sc-i1-d-n1 { --on: clamp(0, calc((var(--q) - .1) / .05), 1); } .sc-i1-d-lb1 { opacity: calc(.35 + clamp(0, calc((var(--q) - .1) / .05), 1) * .65); } .sc-i1-d-n2 { --on: clamp(0, calc((var(--q) - .22) / .05), 1); } .sc-i1-d-lb2 { opacity: calc(.35 + clamp(0, calc((var(--q) - .22) / .05), 1) * .65); } .sc-i1-d-n3 { --on: clamp(0, calc((var(--q) - .36) / .05), 1); } .sc-i1-d-lb3 { opacity: calc(.35 + clamp(0, calc((var(--q) - .36) / .05), 1) * .65); } .sc-i1-d-n4 { --on: clamp(0, calc((var(--q) - .6) / .05), 1); } .sc-i1-d-lb4 { opacity: calc(.35 + clamp(0, calc((var(--q) - .6) / .05), 1) * .65); } .sc-i1-d-n5 { --on: clamp(0, calc((var(--q) - .84) / .05), 1); } .sc-i1-d-lb5 { opacity: calc(.35 + clamp(0, calc((var(--q) - .84) / .05), 1) * .65); } .sc-i1-d-non { opacity: var(--on); } .sc-i1-d-ic { opacity: calc(.4 + var(--on) * .6); } .sc-i1-d-o0 { --on: clamp(0, calc((var(--q) - .24) / .04), 1); } .sc-i1-d-o1 { --on: clamp(0, calc((var(--q) - .27) / .04), 1); } .sc-i1-d-o2 { --on: clamp(0, calc((var(--q) - .3) / .04), 1); } .sc-i1-d-oon { opacity: var(--on); } /* @@END ia1b */ /* @@BEGIN utilitaires */ /* Utilitaires : /aide/, /carriere/, /mentions-legales/ (préfixe sc-ut-). Aucune animation. */ .bandeau-page .titre.sc-ut-h1{max-width:32ch} .wp-block-group.sc-ut-doc>*,.wp-block-group.sc-ut-texte>*{margin-block:0} /* Aide : cartes de téléchargement */ .pg-carte h2.sc-ut-titre{font-size:var(--t-xl);line-height:1.1;font-variation-settings:"wdth" 112} .pg-carte .sc-ut-dl{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:auto 0 0;padding-top:var(--s-3)} .sc-ut-btn .wp-block-button__link::before{content:"";flex:none;width:1.05em;height:1.05em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8M4.5 7 8 10.5 11.5 7M3 13.5h10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8M4.5 7 8 10.5 11.5 7M3 13.5h10'/%3E%3C/svg%3E") center/contain no-repeat} .sc-ut-btn .wp-block-button__link:focus-visible{outline:2px solid var(--menthe);outline-offset:3px} /* Mentions légales : sommaire + texte de lecture (fond clair, aucun effet) */ .sc-ut-doc{display:grid;gap:var(--s-6);align-items:start} .sc-ut-sommaire{font-size:var(--t-s);line-height:1.35} .sc-ut-sommaire-titre{margin:0 0 var(--s-3);font-size:var(--t-xs);font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--lien-clair)} .sc-ut-sommaire ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;border-left:1px solid rgba(10,38,51,.18)} .sc-ut-sommaire a{display:block;padding:.3rem 0 .3rem var(--s-3);margin-left:-1px;border-left:2px solid transparent;color:var(--encre);text-decoration:none} .sc-ut-sommaire a:hover{color:var(--lien-clair);border-left-color:var(--lien-clair);text-decoration:underline;text-underline-offset:.18em} .sc-ut-sommaire a:focus-visible{outline:2px solid var(--lien-clair);outline-offset:2px} .sc-ut-texte{min-width:0;max-width:72ch} .wp-block-group.sc-ut-texte>*+*{margin-block-start:var(--s-4)} .wp-block-group.sc-ut-texte>h2{margin-block-start:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(10,38,51,.14);font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);line-height:1.2;letter-spacing:-.01em;color:var(--encre);font-variation-settings:"wdth" 108} .wp-block-group.sc-ut-texte>h3{margin-block-start:var(--s-5);font-size:var(--t-l);line-height:1.2;color:var(--encre)} .wp-block-group.sc-ut-texte>:is(h2,h3)+*{margin-block-start:var(--s-3)} .sc-ut-texte :is(p,li){font-size:var(--t-m);line-height:1.7;color:var(--encre);overflow-wrap:anywhere} .sc-ut-texte ul{margin:0;padding-left:1.25rem;display:grid;gap:var(--s-2)} .sc-ut-texte a{color:var(--lien-clair);text-decoration:underline;text-underline-offset:.18em} .sc-ut-texte a:hover{text-decoration-thickness:2px} .sc-ut-texte a:focus-visible{outline:2px solid var(--lien-clair);outline-offset:2px;border-radius:2px} .sc-ut-texte strong{color:var(--encre);font-weight:650} @media (min-width:960px){ .sc-ut-doc{grid-template-columns:17rem minmax(0,1fr);gap:clamp(2.5rem,1rem + 4vw,5rem)} .sc-ut-sommaire{position:sticky;top:calc(var(--entete-h) + var(--wp-admin--admin-bar--height,0px) + 1.5rem);max-height:calc(100vh - var(--entete-h) - var(--wp-admin--admin-bar--height,0px) - 3rem);overflow:auto} } @media print{.sc-ut-sommaire{display:none}} /* @@END utilitaires */ /* @@BEGIN fmapps */ /* * ActiveD - pages « logiciels sur mesure » (mission fmapps, 18/10/2026) : /crm-gestion-commerciale/, /gestion-des-approvisionnements/, * /gestion-des-factures-devis/, /gestion-des-stocks/. Classes préfixées sc-fa-. * Scène simple (.sc) : theme.js pose --p ; --q remappe --p pour que l’animation soit finie quand l’illustration est au milieu de l’écran. * Chaque élément animé porte .sc-fa-k (calcule --k de 0 à 1 d’après --s début et --d durée) et un type (in, inl, fade, pop, gc, dr, mv, win, exit). * Sans JS ou en mouvement réduit, --p = 1 : état final lisible. */ .sc-fa-scene { --q: clamp(0, calc((var(--p) - .1) * 2.5), 1); min-width: 0; width: 100%; max-width: 520px; justify-self: center; } .sc-fa-svg { display: block; width: 100%; height: auto; overflow: visible; } .sc-fa-svg text { font-family: var(--f); font-variation-settings: "wdth" 100; } .sc-fa-k { --k: clamp(0, calc((var(--q) - var(--s, 0)) / var(--d, .08)), 1); } .sc-fa-in { opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 10px)); } .sc-fa-inl { opacity: var(--k); transform: translateX(calc((1 - var(--k)) * -26px)); } .sc-fa-fade { opacity: var(--k); } .sc-fa-pop { opacity: var(--k); transform-box: fill-box; transform-origin: center; transform: scale(calc(.6 + var(--k) * .4)); } .sc-fa-gc { opacity: min(1, calc(var(--k) * 6)); transform-box: fill-box; transform-origin: center; transform: scaleX(var(--k)); } .sc-fa-gl { opacity: min(1, calc(var(--k) * 6)); transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--k)); } .sc-fa-dr { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); } .sc-fa-mv { transform: translate(calc(var(--k) * var(--dx, 0px)), calc(var(--k) * var(--dy, 0px))); } .sc-fa-win { opacity: min(calc(var(--k) * 8), calc((1 - var(--k)) * 8)); } .sc-fa-exit { opacity: calc(1 - var(--k)); transform: translateX(calc(var(--k) * var(--dx, 100px))); } .sc-fa-niv { --a: clamp(0, calc((var(--q) - var(--s1)) / var(--d1)), 1); --b: clamp(0, calc((var(--q) - var(--s2)) / var(--d2)), 1); transform-box: fill-box; transform-origin: left center; transform: scaleX(calc(var(--v0) - var(--a) * var(--v1) + var(--b) * var(--v2))); } .pg-duo.sc-fa-duo { align-items: center; } p.sc-fa-note { font-size: var(--t-xs); line-height: 1.45; color: var(--doux); } .pg-texte > p.sc-fa-note { font-size: var(--t-xs); } .clair p.sc-fa-note, .clair .pg-texte > p.sc-fa-note { color: var(--gris); } /* Cinq fonctionnalités : 3 puis 2 cartes qui se partagent la largeur */ @media (min-width: 1000px) { .pg-grille.sc-fa-feat { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pg-grille.sc-fa-feat > * { grid-column: span 2; } .pg-grille.sc-fa-feat > :nth-child(n+4) { grid-column: span 3; } } .sc-fa-feat .pg-carte p + p { margin-top: calc(-1 * var(--s-2)); } /* Références (chiffres et noms repris de l’ancien site) */ .sc-fa-refs ul.wp-block-list.puces, .sc-fa-refs .puces { margin-top: var(--s-5); } .clair .sc-fa-refs .puces li { color: var(--encre); border-color: rgba(10,38,51,.28); } .sc-fa-refs .tete { margin-bottom: 0; } /* Bandeau « Plus de 270 clients actifs » */ .sc-fa-clients .wrap { display: grid; gap: var(--s-4); align-items: center; } .sc-fa-clients h2 { margin: 0; } .sc-fa-clients p.sc-fa-clients-d { margin: 0; font-size: var(--t-l); line-height: 1.4; color: var(--doux); } .clair .sc-fa-clients p.sc-fa-clients-d { color: var(--gris); } .sc-fa-clients p.sc-fa-clients-d strong { color: var(--texte); font-weight: 650; } .clair .sc-fa-clients p.sc-fa-clients-d strong { color: var(--encre); } @media (min-width: 900px) { .sc-fa-clients .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); } .sc-fa-clients p.sc-fa-clients-d { padding-left: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-left: 1px solid var(--ligne-forte); } .clair .sc-fa-clients p.sc-fa-clients-d { border-left-color: rgba(10,38,51,.2); } } /* Gartner : encart de citation à côté de la liste */ .sc-fa-gartner p { font-size: var(--t-m); line-height: 1.65; } /* Titre du bloc devis : plus long que « Nous contacter », donc plus petit */ .contact.sc-fa-devis .appel h2 { font-size: var(--t-xl); line-height: 1.1; } /* Page /filemaker/ : scène « une seule base partout » - ajout du cercle OData (même gabarit que Data API) et ré-échelonnement de la fin de la séquence (mission vague4-fix, 18/10/2026). Les règles de base de la scène sont dans le bloc autres. */ .sc-au-fm-lien--od,.sc-au-fm-flux--od{--tr:clamp(0,calc((var(--p) - 0.71) * 16.67),1)} .sc-au-nd--od{--on:clamp(0,calc((var(--p) - 0.77) * 20),1)} .sc-au-fm-l--od{opacity:clamp(0,calc((var(--p) - 0.75) * 16.67),1)} .sc-au-fm-lien--ia,.sc-au-fm-flux--ia,.sc-au-fm-lien--ia2,.sc-au-fm-flux--ia2{--tr:clamp(0,calc((var(--p) - 0.78) * 16.67),1)} .sc-au-nd--ia{--on:clamp(0,calc((var(--p) - 0.84) * 20),1)} .sc-au-fm-l--ia{opacity:clamp(0,calc((var(--p) - 0.82) * 16.67),1)} /* @@END fmapps */ /* @@BEGIN formation */ /* Pages formation : /filemaker-formation/ et /qualiopi/ (mission formation, 18/10/2026). Réutilise le cadre .sc-ia en lecture seule ; mouvement piloté par --p (1 = état final). */ .sc-fo-liens2 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .pg-liens.sc-fo-liens2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pg-section > .wrap > h3 { font-size: var(--t-xl); line-height: 1.15; font-variation-settings: "wdth" 115; } .pg-carte h4 { font-size: var(--t-s); line-height: 1.3; font-weight: 650; color: var(--texte); margin-top: var(--s-2); } .clair .pg-carte h4 { color: var(--encre); } .pg-carte h4.sc-fo-prix { font-size: var(--t-xl); line-height: 1.1; font-weight: 800; font-variation-settings: "wdth" 115; margin-top: 0; } .pg-carte > p.pg-etiquette { margin: 0; } .sc-fo-note p { margin: 0; color: var(--texte); font-size: var(--t-m); line-height: 1.55; max-width: 60ch; } .clair .sc-fo-note p { color: var(--encre); } .sc-fo .sc-ia-tete h3 { font-size: clamp(1.4rem, 1.05rem + 1.7vw, 2.5rem); line-height: 1.06; letter-spacing: -.015em; font-variation-settings: "wdth" 115; margin: 0; } .sc-fo-svg text { font-family: var(--f); font-variation-settings: "wdth" 105; } .sc-fo-sol { fill: none; stroke: var(--ligne-forte); stroke-width: 2; stroke-linecap: round; } .sc-fo-marche { transform-box: fill-box; transform-origin: 50% 100%; } .sc-fo-marche.sc-fo-m { fill: url(#sc-fo-gm); } .sc-fo-marche.sc-fo-s { fill: url(#sc-fo-gs); } .sc-fo-svg .sc-fo-num { font-size: 17px; font-weight: 700; fill: var(--nuit); } .sc-fo-acc path { fill: none; stroke-width: 3; stroke-linecap: round; opacity: clamp(0, calc((var(--k3) - .5) * 4), 1); } .sc-fo-acc--m path { stroke: var(--menthe); } .sc-fo-acc--s path { stroke: var(--ciel); opacity: clamp(0, calc((var(--k7) - .5) * 4), 1); } .sc-fo-svg .sc-fo-acc text { font-size: 16px; font-weight: 700; opacity: clamp(0, calc((var(--k3) - .5) * 4), 1); } .sc-fo-svg .sc-fo-acc--m text { fill: var(--menthe); } .sc-fo-svg .sc-fo-acc--s text { fill: var(--ciel); opacity: clamp(0, calc((var(--k7) - .5) * 4), 1); } .sc-fo-bille-halo { fill: var(--texte); opacity: .16; } .sc-fo-bille-c { fill: var(--texte); stroke: var(--nuit); stroke-width: 2.5; } .sc-fo .sc-ia-cadre--duo .sc-ia-phase { padding-left: 0; } .sc-fo .sc-ia-cadre--duo .sc-ia-phase::before { content: none; } .pg-section .tete h3 { font-size: var(--t-xl); line-height: 1.12; letter-spacing: -.015em; font-variation-settings: "wdth" 115; max-width: 22ch; } .sc-fo-pas--0 .sc-fo-marche{transform:scaleY(var(--k0))} .sc-fo-pas--0 .sc-fo-num{opacity:clamp(0,calc((var(--k0) - .6) * 2.5),1)} .sc-fo-pas--1 .sc-fo-marche{transform:scaleY(var(--k1))} .sc-fo-pas--1 .sc-fo-num{opacity:clamp(0,calc((var(--k1) - .6) * 2.5),1)} .sc-fo-pas--2 .sc-fo-marche{transform:scaleY(var(--k2))} .sc-fo-pas--2 .sc-fo-num{opacity:clamp(0,calc((var(--k2) - .6) * 2.5),1)} .sc-fo-pas--3 .sc-fo-marche{transform:scaleY(var(--k3))} .sc-fo-pas--3 .sc-fo-num{opacity:clamp(0,calc((var(--k3) - .6) * 2.5),1)} .sc-fo-pas--4 .sc-fo-marche{transform:scaleY(var(--k4))} .sc-fo-pas--4 .sc-fo-num{opacity:clamp(0,calc((var(--k4) - .6) * 2.5),1)} .sc-fo-pas--5 .sc-fo-marche{transform:scaleY(var(--k5))} .sc-fo-pas--5 .sc-fo-num{opacity:clamp(0,calc((var(--k5) - .6) * 2.5),1)} .sc-fo-pas--6 .sc-fo-marche{transform:scaleY(var(--k6))} .sc-fo-pas--6 .sc-fo-num{opacity:clamp(0,calc((var(--k6) - .6) * 2.5),1)} .sc-fo-pas--7 .sc-fo-marche{transform:scaleY(var(--k7))} .sc-fo-pas--7 .sc-fo-num{opacity:clamp(0,calc((var(--k7) - .6) * 2.5),1)} .sc-fo-bille{transform:translate(calc(var(--bx) * 1px),calc(var(--by) * 1px))} .sc-fo-parc { --sc-h: 360vh; --sc-h-m: 340vh; } .sc-fo-parc .sc-ia-phase--1 { --on: clamp(0, calc((var(--p) - 0.03) * 12.5), 1); } .sc-fo-parc .sc-ia-phase--2 { --on: clamp(0, calc((var(--p) - 0.145) * 12.5), 1); } .sc-fo-parc .sc-ia-phase--3 { --on: clamp(0, calc((var(--p) - 0.26) * 12.5), 1); } .sc-fo-parc .sc-ia-phase--4 { --on: clamp(0, calc((var(--p) - 0.375) * 12.5), 1); } .sc-fo-parc .sc-ia-phase--5 { --on: clamp(0, calc((var(--p) - 0.49) * 12.5), 1); } .sc-fo-parc .sc-ia-phase--6 { --on: clamp(0, calc((var(--p) - 0.605) * 12.5), 1); } .sc-fo-parc .sc-ia-phase--7 { --on: clamp(0, calc((var(--p) - 0.72) * 12.5), 1); } .sc-fo-parc .sc-ia-phase--8 { --on: clamp(0, calc((var(--p) - 0.835) * 12.5), 1); } .sc-fo-parc .sc-ia-phase h3 { color: var(--ciel); } .sc-fo-parc .sc-ia-phase:nth-child(-n+4) h3 { color: var(--menthe); } .sc-fo-svg-parc{--k0:clamp(0,calc((var(--p) - 0.03) / 0.09),1);--k1:clamp(0,calc((var(--p) - 0.145) / 0.09),1);--k2:clamp(0,calc((var(--p) - 0.26) / 0.09),1);--k3:clamp(0,calc((var(--p) - 0.375) / 0.09),1);--k4:clamp(0,calc((var(--p) - 0.49) / 0.09),1);--k5:clamp(0,calc((var(--p) - 0.605) / 0.09),1);--k6:clamp(0,calc((var(--p) - 0.72) / 0.09),1);--k7:clamp(0,calc((var(--p) - 0.835) / 0.09),1);--bx:calc(60 * var(--k1) + 60 * var(--k2) + 60 * var(--k3) + 60 * var(--k4) + 60 * var(--k5) + 60 * var(--k6) + 60 * var(--k7));--by:calc(-40 * var(--k1) + -40 * var(--k2) + -40 * var(--k3) + -40 * var(--k4) + -40 * var(--k5) + -40 * var(--k6) + -40 * var(--k7))} @media (min-width: 900px) { .sc-fo-parc .sc-ia-items { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: var(--s-5); row-gap: var(--s-4); } } @media (max-width: 899px) { .sc-fo-parc .sc-ia-items { gap: .5rem; } .sc-fo-parc .sc-ia-phase { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); column-gap: .6rem; align-items: baseline; } .sc-fo-parc .sc-ia-items h3 { font-size: .8125rem; white-space: nowrap; } .sc-fo-parc .sc-ia-legende { display: none; } .sc-fo-parc .sc-ia-items p { font-size: .75rem; line-height: 1.3; } .sc-ia.sc-fo-parc .sc-ia-fig .sc-ia-svg { max-height: 34svh; } } /* @@END formation */ /* @@BEGIN devpages */ .sc-dp-conclu { margin-top: var(--s-6, 2rem); max-width: 62ch; font-size: var(--t-l, 1.25rem); line-height: 1.5; color: var(--encre); font-weight: 500; } .sc-dp .sc-ia-items p strong { color: var(--texte); font-weight: 700; } .sc-dp .sc-ia-tete :is(h3) { font-size: clamp(1.4rem, 1.05rem + 1.7vw, 2.5rem); line-height: 1.06; letter-spacing: -.015em; font-variation-settings: "wdth" 115; } .sc-dp .sc-ia-items h4 { font-size: var(--t-m); line-height: 1.2; font-variation-settings: "wdth" 110; } .sc-dp .sc-ia-items :is(h3, h4) { margin-bottom: .25rem; } .sc-dp .sc-ia-items h3 { font-size: var(--t-l, 1.25rem); } .sc-dp-aaz .sc-ia-items p { font-size: var(--t-s); } .sc-dp.sc-dp-agi .sc-ia-fig .sc-ia-svg, .sc-dp.sc-dp-tma .sc-ia-fig .sc-ia-svg, .sc-dp.sc-dp-aaz .sc-ia-fig .sc-ia-svg { max-height: calc(100svh - var(--entete-h) - 5rem); } @media (max-width: 899px) { .sc-dp .sc-ia-fig .sc-ia-svg { max-height: 44svh; } .sc-dp-aaz .sc-ia-items p { font-size: .8125rem; } } @media (max-width: 899px) and (max-height: 700px) { .sc-dp .sc-ia-fig .sc-ia-svg { max-height: 32svh; } } .sc-dp .sc-ia-items { max-width: 62ch; } .sc-dp-nowrap { white-space: nowrap; } .pg-accroche-texte p.sc-dp-fin { margin-top: var(--s-3, .75rem); line-height: 1.55; max-width: 56ch; } .sc-dp-agi { --sc-h: 340vh; --sc-h-m: 300vh; } .sc-dp-agi .sc-ia-phase--1 { --on: clamp(0, calc((var(--p) - 0.02) * 12.5), 1); } .sc-dp-agi .sc-ia-phase--2 { --on: clamp(0, calc((var(--p) - 0.34) * 12.5), 1); } .sc-dp-agi .sc-ia-phase--3 { --on: clamp(0, calc((var(--p) - 0.64) * 12.5), 1); } .sc-dp-svg-agi { --tm: clamp(0, calc((var(--p) - 0.04) * 1.136), 1); } .sc-dp-a-tour { transform: rotate(calc(var(--tm) * 1080deg)); } .sc-dp-a-nd--n1 { --on: clamp(0, calc((var(--p) - 0.02) * 33.333), 1); } .sc-dp-a-nd--n2 { --on: clamp(0, calc((var(--p) - 0.123) * 40), 1); } .sc-dp-a-nd--n3 { --on: clamp(0, calc((var(--p) - 0.221) * 40), 1); } .sc-dp-a-lib--n1 { opacity: calc(.45 + .55 * clamp(0, calc((var(--p) - 0.02) * 33.333), 1)); } .sc-dp-a-lib--n2 { opacity: calc(.45 + .55 * clamp(0, calc((var(--p) - 0.123) * 40), 1)); } .sc-dp-a-lib--n3 { opacity: calc(.45 + .55 * clamp(0, calc((var(--p) - 0.221) * 40), 1)); } .sc-dp-a-ring { fill: none; stroke: var(--ligne-forte); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; } .sc-dp-a-chev { fill: none; stroke: var(--doux); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .75; } .sc-dp-svg .sc-dp-a-t { font-family: var(--f); fill: var(--texte); font-weight: 600; font-variation-settings: "wdth" 105; } .sc-dp-a-t--c { font-size: 17px; fill: var(--doux) !important; font-weight: 700; letter-spacing: .01em; } .sc-dp-a-lib { font-size: 17px; paint-order: stroke; stroke: var(--nuit); stroke-width: 4px; stroke-linejoin: round; } .sc-dp-a-nd-base { fill: var(--abysse); stroke: var(--ligne-forte); stroke-width: 2.5; } .sc-dp-a-nd-on { fill: var(--surface); stroke: var(--menthe); stroke-width: 3; opacity: var(--on); } .sc-dp-a-nd-halo { fill: var(--menthe); opacity: calc(var(--on) * .15); transform: scale(calc(1 + var(--on) * .4)); } .sc-dp-a-nd-halo, .sc-dp-a-nd-base, .sc-dp-a-nd-on { transform-box: fill-box; transform-origin: center; } .sc-dp-a-ic { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .sc-dp-a-ic--nd { color: var(--menthe); opacity: calc(.4 + var(--on) * .6); } .sc-dp-a-tete { fill: none; stroke: var(--doux); stroke-width: 2.2; } .sc-dp-a-corps { fill: none; stroke: var(--doux); stroke-width: 2.2; stroke-linecap: round; } .sc-dp-a-perso--1 :is(.sc-dp-a-tete, .sc-dp-a-corps) { stroke: var(--menthe); } .sc-dp-a-perso--2 :is(.sc-dp-a-tete, .sc-dp-a-corps) { stroke: var(--ciel); } .sc-dp-a-queue { fill: none; stroke: var(--menthe); stroke-width: 6; stroke-linecap: round; } .sc-dp-a-jeton { fill: var(--menthe); stroke: var(--nuit); stroke-width: 3; opacity: clamp(0, calc((var(--p) - 0) * 33.333), 1); } .sc-dp-a-pan { fill: rgba(7,31,42,.55); stroke: var(--ligne-forte); stroke-width: 2; } .sc-dp-a-fil { fill: none; stroke: var(--doux); stroke-width: 1.8; stroke-dasharray: 5 5; opacity: .85; } .sc-dp-a-plein { fill: var(--surface); stroke: var(--menthe); stroke-width: 2.4; } .sc-dp-a-gl { fill: none; stroke: var(--menthe); stroke-width: 3.5; stroke-linecap: round; } .sc-dp-a-l1 { fill: var(--doux); opacity: .6; } .sc-dp-a-ghost { stroke: var(--doux); opacity: .4; } .sc-dp-a-lib--pk { font-size: 16px; fill: var(--texte); stroke: none; paint-order: normal; font-weight: 700; } .sc-dp-a-mod { opacity: 0; } .sc-dp-a-mod--1 { opacity: clamp(0, calc((var(--p) - 0.133) * 28.571), 1); } .sc-dp-a-mod--2 { opacity: clamp(0, calc((var(--p) - 0.426) * 28.571), 1); } .sc-dp-a-mod--4 { opacity: clamp(0, calc((var(--p) - 0.719) * 28.571), 1); } .sc-dp-a-mod--3 { opacity: 0; } .sc-dp-a-mod--3 .sc-dp-a-plein { stroke: var(--ciel); } .sc-dp-a-mod--4 .sc-dp-a-plein, .sc-dp-a-mod--4 .sc-dp-a-gl { stroke: var(--ciel); } .sc-dp-svg-agi { --sw: clamp(0, calc((var(--p) - 0.489) * 12.5), 1); --swe: calc(var(--sw) * (2 - var(--sw))); } .sc-dp-a-sw--3 { transform: translateY(calc(var(--swe) * 66px)); } .sc-dp-a-sw--4 { transform: translateY(calc(var(--swe) * -66px)); } .sc-dp-a-echange { fill: none; stroke: var(--menthe); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: calc(clamp(0, calc((var(--p) - 0.479) * 33.333), 1) * (1 - clamp(0, calc((var(--p) - 0.589) * 25), 1))); } .sc-dp-a-lib--bud { fill: var(--doux); font-size: 17px; opacity: clamp(0, calc((var(--p) - 0.02) * 25), 1); } .sc-dp-a-lib--bud2 { font-size: 16px; } .sc-dp-a-seg { fill: none; stroke: var(--ligne-forte); stroke-width: 2; } .sc-dp-a-segp { fill: var(--menthe); stroke: none; transform-box: fill-box; transform-origin: left; } .sc-dp-a-segp--1 { transform: scaleX(clamp(0, calc((var(--p) - 0.133) * 22.222), 1)); } .sc-dp-a-segp--2 { transform: scaleX(clamp(0, calc((var(--p) - 0.426) * 22.222), 1)); } .sc-dp-a-segp--3 { transform: scaleX(clamp(0, calc((var(--p) - 0.719) * 22.222), 1)); fill: var(--ciel); } @media (max-width: 899px) { .sc-dp-svg-agi .sc-dp-a-lib { font-size: 23px; } .sc-dp-svg-agi .sc-dp-a-t--c { font-size: 20px; } .sc-dp-svg-agi .sc-dp-a-lib--pk { font-size: 20px; } .sc-dp-svg-agi .sc-dp-a-lib--bud2 { display: none; } } .sc-dp-aaz { --sc-h: 360vh; --sc-h-m: 320vh; } .sc-dp-aaz .sc-ia-phase--1 { --on: clamp(0, calc((var(--p) - 0.02) * 12.5), 1); } .sc-dp-aaz .sc-ia-phase--2 { --on: clamp(0, calc((var(--p) - 0.306) * 12.5), 1); } .sc-dp-aaz .sc-ia-phase--3 { --on: clamp(0, calc((var(--p) - 0.62) * 12.5), 1); } .sc-dp-aaz .sc-ia-phase--4 { --on: clamp(0, calc((var(--p) - 0.84) * 12.5), 1); } .sc-dp-svg-aaz { --rail: clamp(0, calc((var(--p) - 0.04) * 1.163), 1); } .sc-dp-z-rail-fond { fill: none; stroke: var(--ligne-forte); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; } .sc-dp-z-rail { fill: none; stroke: url(#sc-dp-z-g-aaz); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--rail)); opacity: clamp(0, calc(var(--p) * 40), 1); } .sc-dp-svg .sc-dp-z-t { font-family: var(--f); fill: var(--texte); font-weight: 600; font-variation-settings: "wdth" 105; } .sc-dp-z-lane { font-size: 17px; fill: var(--doux) !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; } .sc-dp-z-lane--1 { opacity: calc(.3 + .7 * clamp(0, calc((var(--p) - 0) * 25), 1)); } .sc-dp-z-lane--2 { opacity: calc(.3 + .7 * clamp(0, calc((var(--p) - 0.316) * 25), 1)); } .sc-dp-z-lane--3 { opacity: calc(.3 + .7 * clamp(0, calc((var(--p) - 0.63) * 25), 1)); } .sc-dp-z-nd--1 { --on: clamp(0, calc((var(--p) - 0.028) * 41.667), 1); } .sc-dp-z-nl--1 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.028) * 41.667), 1)); } .sc-dp-z-nd--2 { --on: clamp(0, calc((var(--p) - 0.101) * 41.667), 1); } .sc-dp-z-nl--2 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.101) * 41.667), 1)); } .sc-dp-z-nd--3 { --on: clamp(0, calc((var(--p) - 0.174) * 41.667), 1); } .sc-dp-z-nl--3 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.174) * 41.667), 1)); } .sc-dp-z-nd--4 { --on: clamp(0, calc((var(--p) - 0.247) * 41.667), 1); } .sc-dp-z-nl--4 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.247) * 41.667), 1)); } .sc-dp-z-nd--5 { --on: clamp(0, calc((var(--p) - 0.344) * 41.667), 1); } .sc-dp-z-nl--5 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.344) * 41.667), 1)); } .sc-dp-z-nd--6 { --on: clamp(0, calc((var(--p) - 0.454) * 41.667), 1); } .sc-dp-z-nl--6 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.454) * 41.667), 1)); } .sc-dp-z-nd--7 { --on: clamp(0, calc((var(--p) - 0.564) * 41.667), 1); } .sc-dp-z-nl--7 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.564) * 41.667), 1)); } .sc-dp-z-nd--8 { --on: clamp(0, calc((var(--p) - 0.658) * 41.667), 1); } .sc-dp-z-nl--8 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.658) * 41.667), 1)); } .sc-dp-z-nd--9 { --on: clamp(0, calc((var(--p) - 0.715) * 41.667), 1); } .sc-dp-z-nl--9 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.715) * 41.667), 1)); } .sc-dp-z-nd--10 { --on: clamp(0, calc((var(--p) - 0.773) * 41.667), 1); } .sc-dp-z-nl--10 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.773) * 41.667), 1)); } .sc-dp-z-nd--11 { --on: clamp(0, calc((var(--p) - 0.83) * 41.667), 1); } .sc-dp-z-nl--11 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.83) * 41.667), 1)); } .sc-dp-z-nd--12 { --on: clamp(0, calc((var(--p) - 0.888) * 41.667), 1); } .sc-dp-z-nl--12 { opacity: calc(.4 + .6 * clamp(0, calc((var(--p) - 0.888) * 41.667), 1)); } .sc-dp-z-nl { font-size: 15px; paint-order: stroke; stroke: var(--nuit); stroke-width: 4px; stroke-linejoin: round; } .sc-dp-z-nd--fin ~ .sc-dp-z-nl--12 { fill: var(--menthe); } .sc-dp-z-nl--12 { fill: var(--menthe) !important; font-weight: 700; } .sc-dp-z-nd-base { fill: var(--abysse); stroke: var(--ligne-forte); stroke-width: 2.5; } .sc-dp-z-nd-on { fill: var(--surface); stroke: var(--menthe); stroke-width: 3; opacity: var(--on); } .sc-dp-z-nd-halo { fill: var(--menthe); opacity: calc(var(--on) * .15); transform: scale(calc(1 + var(--on) * .4)); } .sc-dp-z-nd-halo, .sc-dp-z-nd-base, .sc-dp-z-nd-on { transform-box: fill-box; transform-origin: center; } .sc-dp-z-ic { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .sc-dp-z-ic--nd { color: var(--menthe); opacity: calc(.4 + var(--on) * .6); } .sc-dp-z-nd--fin .sc-dp-z-nd-on { stroke: var(--ciel); } .sc-dp-z-nd--fin .sc-dp-z-ic--nd { color: var(--ciel); } @media (max-width: 899px) { .sc-dp-svg-aaz .sc-dp-z-nl { display: none; } .sc-dp-svg-aaz .sc-dp-z-lane { font-size: 24px; } .sc-dp-svg-aaz .sc-dp-z-nl--12 { display: block; font-size: 22px; } } .sc-dp-tma { --sc-h: 340vh; --sc-h-m: 300vh; } .sc-dp-tma .sc-ia-phase--1 { --on: clamp(0, calc((var(--p) - 0.02) * 12.5), 1); } .sc-dp-tma .sc-ia-phase--2 { --on: clamp(0, calc((var(--p) - 0.32) * 12.5), 1); } .sc-dp-tma .sc-ia-phase--3 { --on: clamp(0, calc((var(--p) - 0.64) * 12.5), 1); } .sc-dp-svg .sc-dp-t-t { font-family: var(--f); fill: var(--texte); font-weight: 600; font-variation-settings: "wdth" 105; } .sc-dp-t-win { fill: var(--abysse); stroke: var(--ligne-forte); stroke-width: 2.5; } .sc-dp-t-winbar { fill: none; stroke: var(--ligne-forte); stroke-width: 1.8; } .sc-dp-t-pt { fill: var(--ligne-forte); } .sc-dp-t-code { fill: var(--ligne-forte); } .sc-dp-t-code--1 { fill: color-mix(in srgb, var(--ligne-forte), var(--menthe) calc(clamp(0, calc((var(--p) - 0.1) * 25), 1) * 100%)); } .sc-dp-t-code--2 { fill: color-mix(in srgb, var(--ligne-forte), var(--menthe) calc(clamp(0, calc((var(--p) - 0.135) * 25), 1) * 100%)); } .sc-dp-t-code--3 { fill: color-mix(in srgb, var(--ligne-forte), var(--menthe) calc(clamp(0, calc((var(--p) - 0.17) * 25), 1) * 100%)); } .sc-dp-t-code--4 { fill: color-mix(in srgb, var(--ligne-forte), var(--menthe) calc(clamp(0, calc((var(--p) - 0.205) * 25), 1) * 100%)); } .sc-dp-t-code--5 { fill: color-mix(in srgb, var(--ligne-forte), var(--menthe) calc(clamp(0, calc((var(--p) - 0.24) * 25), 1) * 100%)); } .sc-dp-t-code--6 { fill: color-mix(in srgb, var(--ligne-forte), var(--menthe) calc(clamp(0, calc((var(--p) - 0.275) * 25), 1) * 100%)); } .sc-dp-t-chip rect { fill: var(--abysse); stroke: var(--menthe); stroke-width: 2.2; } .sc-dp-t-chiptxt { font-size: 16px; } .sc-dp-t-chip--1 { opacity: clamp(0, calc((var(--p) - 0.04) * 20), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.04) * 20), 1)) * -10px)); } .sc-dp-t-chip--2 { opacity: clamp(0, calc((var(--p) - 0.09) * 20), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.09) * 20), 1)) * -10px)); } .sc-dp-t-chip--3 { opacity: clamp(0, calc((var(--p) - 0.14) * 20), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.14) * 20), 1)) * -10px)); } .sc-dp-t-lien { fill: none; stroke: url(#sc-dp-t-g-tma); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; } .sc-dp-t-lien--1 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.06) * 12.5), 1)); opacity: clamp(0, calc((var(--p) - 0.06) * 60), 1); } .sc-dp-t-lien--2 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.11) * 12.5), 1)); opacity: clamp(0, calc((var(--p) - 0.11) * 60), 1); } .sc-dp-t-lien--3 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.16) * 12.5), 1)); opacity: clamp(0, calc((var(--p) - 0.16) * 60), 1); } .sc-dp-t-lien--4 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.38) * 14.286), 1)); opacity: clamp(0, calc((var(--p) - .38) * 60), 1); } .sc-dp-t-lien--5 { stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.76) * 14.286), 1)); opacity: clamp(0, calc((var(--p) - .76) * 60), 1); } .sc-dp-t-ticket rect { fill: var(--abysse); stroke: var(--ciel); stroke-width: 2.2; } .sc-dp-t-tkt { font-size: 16px; } .sc-dp-t-ticket, .sc-dp-t-tkti { opacity: clamp(0, calc((var(--p) - 0.34) * 20), 1); } .sc-dp-t-tkti { color: var(--ciel); } .sc-dp-t-ic { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .sc-dp-t-mark { opacity: calc(clamp(0, calc((var(--p) - 0.42) * 25), 1) * (1 - clamp(0, calc((var(--p) - 0.6) * 25), 1))); } .sc-dp-t-mark--ok { opacity: clamp(0, calc((var(--p) - 0.6) * 25), 1); } .sc-dp-t-mk { fill: var(--surface); stroke: var(--ciel); stroke-width: 2.4; } .sc-dp-t-mk--ok { stroke: var(--menthe); } .sc-dp-t-ic--mk { color: var(--ciel); } .sc-dp-t-ic--ok { color: var(--menthe); } .sc-dp-t-horloge { opacity: clamp(0, calc((var(--p) - 0.4) * 25), 1); } .sc-dp-t-cad { fill: var(--abysse); stroke: var(--ciel); stroke-width: 2.4; } .sc-dp-t-cad2 { fill: none; stroke: var(--doux); stroke-width: 2; stroke-linecap: round; } .sc-dp-t-aig { fill: none; stroke: var(--ciel); stroke-width: 3.2; stroke-linecap: round; transform: rotate(calc(clamp(0, calc((var(--p) - 0.44) * 5.556), 1) * 720deg)); } .sc-dp-t-lib { font-size: 16px; paint-order: stroke; stroke: var(--nuit); stroke-width: 4px; stroke-linejoin: round; } .sc-dp-t-lib--tp { fill: var(--ciel) !important; opacity: clamp(0, calc((var(--p) - 0.42) * 20), 1); } .sc-dp-t-maq { opacity: clamp(0, calc((var(--p) - 0.66) * 20), 1); } .sc-dp-t-maqc { fill: var(--abysse); stroke: var(--menthe); stroke-width: 2.2; stroke-dasharray: 6 5; } .sc-dp-t-gl2 { fill: none; stroke: var(--doux); stroke-width: 4; stroke-linecap: round; opacity: .7; } .sc-dp-t-maqb { fill: none; stroke: var(--menthe); stroke-width: 2; } .sc-dp-t-cout { opacity: clamp(0, calc((var(--p) - 0.72) * 20), 1); } .sc-dp-t-cout rect { fill: var(--surface); stroke: var(--menthe); stroke-width: 2.2; } .sc-dp-t-fil { fill: none; stroke: var(--doux); stroke-width: 1.8; stroke-dasharray: 5 5; opacity: .85; } .sc-dp-t-nouv { opacity: clamp(0, calc((var(--p) - 0.82) * 14.286), 1); } .sc-dp-t-plein { fill: var(--surface); stroke: var(--menthe); stroke-width: 2.4; } .sc-dp-t-gl { fill: none; stroke: var(--menthe); stroke-width: 3.5; stroke-linecap: round; } .sc-dp-t-l1 { fill: var(--doux); opacity: .6; } .sc-dp-t-boucle-fond { fill: none; stroke: var(--ligne-forte); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; } .sc-dp-t-boucle { fill: none; stroke: url(#sc-dp-t-g-tma); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - 0.88) * 11.111), 1)); opacity: clamp(0, calc((var(--p) - .88) * 60), 1); } .sc-dp-t-chevb { fill: none; stroke: var(--menthe); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: clamp(0, calc((var(--p) - 0.95) * 33.333), 1); } .sc-dp-t-lib--jj { fill: var(--menthe) !important; opacity: clamp(0, calc((var(--p) - 0.9) * 20), 1); } @media (max-width: 899px) { .sc-dp-svg-tma .sc-dp-t-chiptxt, .sc-dp-svg-tma .sc-dp-t-tkt, .sc-dp-svg-tma .sc-dp-t-lib { font-size: 20px; } } /* @@END devpages */ /* @@BEGIN logosinsert */ /* Bandeau d'accueil : tuiles blanches (logo 88 px au plus, jamais agrandi) */ .logos .piste { --lg-gap: clamp(.75rem, .5rem + 1vw, 1.25rem); } .logos .piste li.lg-t { display: grid; place-items: center; flex: none; box-sizing: border-box; width: 104px; height: 104px; margin: 0; padding: 8px; overflow: hidden; background: #fff; border: 1px solid rgba(10, 38, 51, .14); border-radius: var(--r-m, 14px); color: var(--encre, #0A2633); white-space: normal; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .6); transition: box-shadow .2s; } .logos .piste li.lg-t:hover { color: var(--encre, #0A2633); box-shadow: 0 0 0 2px var(--menthe), 0 12px 24px -14px rgba(0, 0, 0, .7); } .logos .piste li.lg-t img { display: block; width: 88px; height: 88px; max-width: 100%; max-height: 100%; object-fit: contain; } .logos .piste li.lg-n { width: 140px; padding: 8px 12px; font-size: .95rem; font-weight: 800; line-height: 1.2; text-align: center; text-wrap: balance; overflow-wrap: anywhere; font-variation-settings: "wdth" 112; } .logos:not([data-defile]) .rang .piste { gap: var(--lg-gap); } @media (prefers-reduced-motion: no-preference) { .logos[data-defile] .rang .piste { gap: var(--lg-gap); } .logos[data-defile] .rang .piste > li.lg-t:last-child { margin-right: var(--lg-gap); } } /* Logos larges (PNG transparents) : tuile élargie, logo pleine largeur sans déformation */ .logos .piste li.lg-w img { width: 100%; height: auto; max-height: 88px; } .logos .piste li.lg-t.lg-rf { width: 192px; } .logos .piste li.lg-t.lg-chu { width: 128px; } .logos .piste li.lg-t.lg-vdp { width: 176px; } .logos .piste li.lg-t.lg-pdd { width: 160px; } /* Témoignage Curty's : pastille blanche sous la signature */ .diapo p.lg-curty { display: inline-flex; align-items: center; justify-self: start; box-sizing: border-box; max-width: 100%; margin: 0; padding: 6px 12px; background: #fff; border: 1px solid rgba(10, 38, 51, .14); border-radius: var(--r-m, 14px); line-height: 0; } .diapo p.lg-curty img { display: block; width: 268px; max-width: 100%; height: auto; } /* @@END logosinsert */ /* @@BEGIN aideimg */ /* Aide : photo d'en-tête (préfixe ai-). Aucune animation. */ .bandeau-page .wrap.ai-hero{grid-template-columns:minmax(0,1fr);gap:var(--s-6);align-items:center} .ai-texte{display:grid;gap:var(--s-5);min-width:0;align-content:center} .wp-block-group.ai-texte>*{margin-block:0} .wp-block-image.ai-photo{position:relative;isolation:isolate;margin:0;justify-self:center;width:min(100%,280px);aspect-ratio:1} .ai-photo::before{content:"";position:absolute;inset:-14%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(101,216,192,.28),rgba(58,176,234,.14) 60%,transparent 100%)} .ai-photo img{display:block;width:100%;height:auto;aspect-ratio:1;filter:drop-shadow(0 22px 38px rgba(0,0,0,.45))} @media (min-width:880px){ .bandeau-page .wrap.ai-hero{grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:var(--s-8)} .wp-block-image.ai-photo{justify-self:end;width:100%;max-width:340px} } /* @@END aideimg */ /* @@BEGIN homeillus */ /* Accueil : illustrations des cartes « App de gestion », « We speak Web » et « We love FileMaker ». */ .ph .wp-block-image.hi-mock { display: flex; align-items: center; justify-content: center; background: radial-gradient(70% 80% at 50% 45%, rgba(58,176,234,.18), transparent 70%), linear-gradient(135deg, #12394A, #0A4F6B); } .ph .wp-block-image.hi-mock img { object-fit: contain; padding: 5%; filter: drop-shadow(0 18px 26px rgba(0,0,0,.38)); } .ph .wp-block-image.hi-photo img { object-position: 50% 40%; } /* @@END homeillus */ /* @@BEGIN homescene */ /* Mission homescene - accueil (17) : le héros devient une scène collante (.sc--tall). Bandeau photo (défile avant que la scène se fixe), puis texte du héros (inchangé), puis schéma (vos outils en trait plein, ajouts en pointillés) et, à droite, les libellés des étapes qui arrivent par le bas et s'empilent depuis le haut du schéma : 1 extensions, 2 application sur-mesure, 3 agents IA, 4 automatisations. --q = avancement (--p recadré après le bandeau). */ .wp-block-group.alignfull.heros.sc-hs { --sc-h: 340vh; --q: clamp(0, calc((var(--p) - .08) / .92), 1); --l1: clamp(0, calc((var(--q) - .1) * 9), 1); --l2: clamp(0, calc((var(--q) - .3) * 9), 1); --l3: clamp(0, calc((var(--q) - .5) * 9), 1); --l4: clamp(0, calc((var(--q) - .7) * 9), 1); --fin: clamp(0, calc((var(--q) - .9) * 10), 1); padding-top: 0; overflow: clip; } @supports not (overflow: clip) { .wp-block-group.alignfull.heros.sc-hs { overflow: visible; } } /* Fond du héros (aurore, grille) maintenu à l'écran pendant la scène */ .heros.sc-hs > .aurore, .heros.sc-hs > .grain { position: sticky; top: 0; left: auto; right: auto; bottom: auto; height: 100vh; margin: 0 0 -100vh; } .heros.sc-hs > .wrap.sc-stick { box-sizing: border-box; padding-block: clamp(.6rem, 2vh, 1.25rem) clamp(.4rem, 1.2vh, .75rem); } /* Bandeau photo en tête (bande parallaxe du thème), sous l'en-tête transparent */ .heros.sc-hs > .wp-block-cover.pg-bande { position: relative; z-index: 0; } .heros.sc-hs > .wp-block-cover.pg-bande::after { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--entete-h) + 2.5rem); z-index: 1; pointer-events: none; background: linear-gradient(rgba(7,31,42,.82), rgba(7,31,42,0)); } .heros.sc-hs .onglets { justify-content: center; } html:not(.js) .heros.sc-hs.sc--tall { height: auto; } html:not(.js) .heros.sc-hs > .sc-stick { position: static; height: auto; min-height: 0; overflow: visible; } /* Schéma */ .sc-hs-scene { min-width: 0; width: 100%; } .sc-hs-pin { display: grid; gap: var(--s-3); align-content: center; } .sc-hs-schema { min-width: 0; min-height: 0; } .sc-hs-svg { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; } .sc-hs-svg text { font-family: var(--f); font-size: 17px; font-weight: 600; fill: var(--texte); font-variation-settings: "wdth" 104; } .sc-hs-svg .sc-hs-t--l { font-size: 19px; font-weight: 750; } .sc-hs-svg .sc-hs-t--s { font-size: 14.5px; } .sc-hs-svg .sc-hs-t--doux { fill: var(--doux); font-weight: 500; } .sc-hs-boite--ex { fill: var(--surface); stroke: rgba(169,193,201,.62); stroke-width: 1.5; } .sc-hs-plein { fill: none; stroke: rgba(169,193,201,.7); stroke-width: 2; } .sc-hs-boite--ext { fill: var(--nuit); stroke: var(--menthe); stroke-width: 1.6; stroke-dasharray: 4 3; } .sc-hs-plus { fill: none; stroke: var(--menthe); stroke-width: 2.4; stroke-linecap: round; } .sc-hs-boite--app { fill: rgba(18,57,74,.6); stroke: var(--menthe); stroke-width: 2; stroke-dasharray: 7 5; } .sc-hs-boite--ia { fill: rgba(12,45,59,.85); stroke: var(--ciel); stroke-width: 2; stroke-dasharray: 7 5; } .sc-hs-ia-lien { fill: none; stroke: var(--ciel); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; } .sc-hs-boite--pip { fill: var(--nuit); stroke: var(--menthe); stroke-width: 1.6; stroke-dasharray: 6 4; } .sc-hs-tube { fill: none; stroke: var(--menthe); stroke-width: 1.6; stroke-dasharray: 6 5; opacity: .75; } .sc-hs-flux { fill: none; stroke: var(--menthe); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .1 26; } @media (prefers-reduced-motion: no-preference) { html.js:not(.sc-statique) .sc-hs-flux { animation: sc-hs-flux 1.8s linear infinite; } html.js:not(.sc-statique) .sc-hs-flux--r { animation-direction: reverse; } } @keyframes sc-hs-flux { to { stroke-dashoffset: -26.1; } } /* Mise en lumière : étape en cours pleine, étapes passées un peu en retrait, étapes à venir atténuées ; tout s'allume à la fin. */ .sc-hs-ex { opacity: calc(1 - .35 * var(--l1) + .35 * var(--fin)); } .sc-hs-e1 { opacity: calc(.2 + .8 * var(--l1) - .3 * var(--l2) + .3 * var(--fin)); } .sc-hs-e2 { opacity: calc(.2 + .8 * var(--l2) - .3 * var(--l3) + .3 * var(--fin)); } .sc-hs-e3 { opacity: calc(.2 + .8 * var(--l3) - .3 * var(--l4) + .3 * var(--fin)); } .sc-hs-e4 { opacity: calc(.2 + .8 * var(--l4)); } /* Légende */ p.sc-hs-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.4rem; margin: 0; font-size: var(--t-xs); line-height: 1.4; color: var(--doux); } .sc-hs-legende span::before { content: ""; display: inline-block; width: 1.6rem; margin-right: .5em; vertical-align: middle; border-top: 2px solid rgba(169,193,201,.7); } .sc-hs-legende .sc-hs-l-point::before { border-top: 2px dashed var(--menthe); } /* Libellés des étapes (texte réel) : --a = arrivée (0 à 1), --c = tassement quand l'étape suivante arrive. Par défaut (sans JS, mouvement réduit) : tout est affiché, empilé. */ ol.sc-hs-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; counter-reset: sc-hs; min-width: 0; } .sc-hs-etapes > li { --a: 1; --c: 0; --cur: calc(var(--a) - var(--c)); flex: none; margin: calc(var(--a) * .5rem) 0 0; padding: 0; } .sc-hs-etapes > li:first-child { margin-top: 0; } .sc-hs-c { display: block; position: relative; padding: .7rem 1rem .75rem 3rem; border-radius: var(--r-m); border: 1px solid rgba(101,216,192, calc(.16 + .5 * var(--cur))); background: rgba(12,45,59, calc(.62 + .3 * var(--cur))); color: var(--doux); font-size: var(--t-s); line-height: 1.5; opacity: calc((.74 + .26 * var(--cur)) * var(--a)); transform: translateY(calc((1 - var(--a)) * 18rem)); } .sc-hs-c strong { display: block; color: var(--texte); font-weight: 700; font-size: var(--t-m); line-height: 1.3; } .sc-hs-d { display: block; margin-top: calc((1 - var(--c)) * .15rem); max-height: calc((1 - var(--c)) * 8em); opacity: calc(1 - var(--c)); overflow: hidden; } .sc-hs-etapes > li:not(.sc-hs-x0) { counter-increment: sc-hs; } .sc-hs-c::before { content: counter(sc-hs); position: absolute; left: .95rem; top: .72rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px dashed var(--menthe); color: var(--menthe); font-size: var(--t-xs); font-weight: 800; line-height: 1; } .sc-hs-x0 .sc-hs-c { border-color: rgba(169,193,201, calc(.14 + .3 * var(--cur))); } .sc-hs-x0 .sc-hs-c::before { content: ""; border: 0; border-radius: 0; height: 0; top: 1.35rem; border-top: 2px solid rgba(169,193,201,.75); } /* Défilement animé : chaque libellé arrive par le bas, remonte sous les précédents (qui se tassent) ; la pile part du haut du schéma. */ html.js:not(.sc-statique) .sc-hs-x0 { --c: var(--l1); } html.js:not(.sc-statique) .sc-hs-x1 { --a: var(--l1); --c: var(--l2); } html.js:not(.sc-statique) .sc-hs-x2 { --a: var(--l2); --c: var(--l3); } html.js:not(.sc-statique) .sc-hs-x3 { --a: var(--l3); --c: var(--l4); } html.js:not(.sc-statique) .sc-hs-x4 { --a: var(--l4); } /* Ordinateur : texte du héros en haut (sur deux colonnes, compact), schéma en bas à gauche, libellés à droite. */ @media (min-width: 980px) { .heros.sc-hs > .wrap.sc-stick { top: var(--entete-h); height: calc(100vh - var(--entete-h)); min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; align-content: stretch; row-gap: clamp(.5rem, 1.6vh, 1rem); } .heros.sc-hs .heros-gauche { gap: clamp(.6rem, 1.6vh, 1rem); } .heros.sc-hs .panneau:not([hidden]) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); row-gap: .6rem; align-items: end; } .heros.sc-hs .panneau > .accroche { grid-column: 1; grid-row: 1; } .heros.sc-hs .panneau > .titre { grid-column: 1; grid-row: 2 / 4; align-self: start; font-size: clamp(1.9rem, 1.1rem + 1.75vw, 2.8rem); } .heros.sc-hs .panneau > p.chapo { grid-column: 2; grid-row: 1 / 3; font-size: var(--t-m); max-width: none; } .heros.sc-hs .panneau > .actions { grid-column: 2; grid-row: 3; } .sc-hs-scene { height: 100%; min-height: 0; } .sc-hs-pin { height: 100%; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(1.5rem, 1rem + 2.5vw, 4rem); row-gap: .4rem; align-content: stretch; } .sc-hs-schema { grid-column: 1; grid-row: 1; } html.js:not(.sc-statique) .sc-hs-svg { height: 100%; } p.sc-hs-legende { grid-column: 1; grid-row: 2; } ol.sc-hs-etapes { grid-column: 2; grid-row: 1 / 3; } html.js:not(.sc-statique) ol.sc-hs-etapes { min-height: 0; overflow: hidden; } } /* Ordinateur peu haut : plus serré ; très peu haut : pas de scène collante, état final lisible. */ @media (min-width: 980px) and (max-height: 860px) { .heros.sc-hs > .wp-block-cover.pg-bande { min-height: 26vh !important; } .heros.sc-hs > .wrap.sc-stick { padding-block: .5rem .4rem; row-gap: .5rem; } .heros.sc-hs .heros-gauche { gap: .5rem; } .heros.sc-hs .panneau:not([hidden]) { row-gap: .4rem; } .heros.sc-hs .panneau > p.chapo { font-size: var(--t-s); } .heros.sc-hs .onglets [role="tab"] { min-height: 40px; padding-block: .55rem; } .sc-hs-c { padding-block: .55rem .6rem; } .sc-hs-c::before { top: .58rem; } } @media (min-width: 980px) and (max-height: 619px) { .wp-block-group.alignfull.heros.sc-hs { --q: 1; } .heros.sc-hs.sc--tall { height: auto; } .heros.sc-hs > .wrap.sc-stick { position: static; height: auto; min-height: 0; overflow: visible; padding-top: 1rem; } html.js .heros.sc-hs .sc-hs-svg { height: auto; } html.js .heros.sc-hs ol.sc-hs-etapes { overflow: visible; } html.js .heros.sc-hs .sc-hs-etapes > li { --a: 1; --c: 0; } } /* Mobile et tablette : le texte du héros défile normalement, puis le schéma et ses libellés restent à l'écran. */ @media (max-width: 979px) { .wp-block-group.alignfull.heros.sc-hs { --q: clamp(0, calc((var(--p) - .35) / .65), 1); } .heros.sc-hs.sc--tall { height: auto; } .heros.sc-hs > .wp-block-cover.pg-bande { min-height: 26vh !important; } .heros.sc-hs > .wrap.sc-stick { position: static; height: auto; min-height: 0; overflow: visible; padding-block: var(--s-5) var(--s-2); row-gap: var(--s-4); } .sc-hs-scene { max-width: 560px; justify-self: center; } .sc-hs-svg { max-height: 40svh; } html.js:not(.sc-statique) .sc-hs-scene { min-height: 280vh; } html.js:not(.sc-statique) .sc-hs-pin { position: sticky; top: var(--entete-h); height: calc(100vh - var(--entete-h)); height: calc(100svh - var(--entete-h)); grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; gap: var(--s-2); padding-block: var(--s-3); box-sizing: border-box; } html.js:not(.sc-statique) ol.sc-hs-etapes { min-height: 0; overflow: hidden; } .sc-hs-c { padding: .55rem .85rem .6rem 2.7rem; } .sc-hs-c::before { left: .75rem; top: .58rem; } .sc-hs-x0 .sc-hs-c::before { top: 1.2rem; } } /* @@END homescene */