@charset "UTF-8"; /* ========================================================================== Signature 'AFTEC — Brochure digitale Design system fidèle à la maquette InDesign (Signature_AFTEC_2026_05) Base : Bootstrap 5.3.8 + surcouche maison. MANIFESTE — ordre d'import (la cascade suit cet ordre) : 1. fonts @font-face (polices auto-hébergées) 2. variables :root + variables Sass 3. base reset, , cadre de page, .bd-page, .bd-mark 4. nav bandeau de navigation rouge 5. cover couverture + indice de scroll 6. sommaire table des matières 7. intercalaire page rouge d'ouverture de chapitre 8. content corps de chapitre (titres, texte 2 colonnes, illus, bannière) 9. preambule promesses, acteurs, note « main » 10. components briques data-viz (stats, donut, missions, parcours, neuro…) 11. animations apparitions au scroll + animations d'entrée 12. footer pied de brochure 13. mobile derniers ajustements < 992px (doit rester en dernier) Compilation : sass assets/scss/brochure.scss:assets/css/brochure.css --style=expanded ========================================================================== */ /* ========================================================================== Polices auto-hébergées (cf. DOCUMENT/MEP/Document fonts) ========================================================================== */ @font-face { font-family: 'Geist'; src: url("../fonts/Geist-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url("../fonts/OpenSans-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url("../fonts/OpenSans-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url("../fonts/OpenSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Sans'; src: url("../fonts/OpenSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Uni Sans'; src: url("../fonts/UniSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== Variables — couleurs de marque, polices, mesures (custom properties CSS lisibles côté navigateur + variables Sass) ========================================================================== */ /* Variables Sass (compilation) */ /* Custom properties (exposées au runtime) */ /* line 10, ../scss/_variables.scss */ :root { /* Marque */ --aftec-red: #ED1C24; --aftec-red-dark: #C41017; --aftec-coral: #F0555D; --aftec-pink: #F5A6AD; --aftec-navy: #1E2C56; --aftec-ink: #1A1A1A; --aftec-gray: #575756; --aftec-white: #ffffff; /* Couleurs de schémas (chap. 03/10) */ --sch-green: #24B46C; --sch-yellow: #F0CC30; --sch-blue: #306CB4; /* Typographie */ --font-title: 'Geist', 'Segoe UI', sans-serif; --font-body: 'Open Sans', 'Segoe UI', sans-serif; --font-heavy: 'Uni Sans', 'Arial Black', sans-serif; /* Mesures */ --nav-h: 3.5rem; /* Ponts Bootstrap */ --bs-body-font-family: var(--font-body); --bs-body-font-weight: 300; --bs-body-color: var(--aftec-ink); --bs-link-color-rgb: 237, 28, 36; --bs-link-hover-color-rgb: 196, 16, 23; } /* ========================================================================== Base — reset léger, corps de page, cadre, section « page », marque inline ========================================================================== */ /* line 5, ../scss/_base.scss */ html { scroll-behavior: smooth; } /* line 6, ../scss/_base.scss */ body { font-family: var(--font-body); font-weight: 300; color: var(--aftec-ink); background: #eeeeee; } /* line 12, ../scss/_base.scss */ b, strong { font-weight: 700; } /* Cadre blanc fixe (évoque le liseré des pages du PDF) — desktop seulement. Décale aussi la navbar sticky sous le liseré. */ @media (min-width: 992px) { /* line 17, ../scss/_base.scss */ .bd-frame::before { content: ''; position: fixed; inset: -2px; border: 1.5rem solid #FFF; pointer-events: none; z-index: 2050; } /* line 25, ../scss/_base.scss */ .bd-nav { top: 1.4rem !important; } /* line 27, ../scss/_base.scss */ .bd-nav > .container-fluid { padding-right: 3rem !important; padding-left: 3rem !important; } } /* ---------- Sections « page » --------------------------------------------- */ /* line 35, ../scss/_base.scss */ .bd-page { position: relative; padding: clamp(5rem, 10vw, 6.5rem) 0; } /* line 39, ../scss/_base.scss */ .bd-page--tall { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; /* centrage vertical du contenu (ex. sommaire) */ } /* line 44, ../scss/_base.scss */ .bd-page--tall > * { width: 100%; } /* Marque signature inline (puces du sommaire, wordmark…) */ /* line 47, ../scss/_base.scss */ .bd-mark { display: inline-block; height: 1em; width: .66em; vertical-align: -.12em; fill: var(--aftec-red); } /* ========================================================================== Navigation — bandeau rouge sticky (repris du chrome du PDF) ========================================================================== */ /* line 4, ../scss/_nav.scss */ .bd-nav { position: sticky; top: 0; z-index: 1030; background: var(--aftec-red); color: #fff; min-height: var(--nav-h); font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; } /* line 17, ../scss/_nav.scss */ .bd-nav a { color: #fff; text-decoration: none; padding: .35rem .5rem; transition: opacity .15s ease; } /* line 23, ../scss/_nav.scss */ .bd-nav a:hover { opacity: .75; } /* line 24, ../scss/_nav.scss */ .bd-nav .bd-nav__mark { height: 1.9rem; width: 1.25rem; display: block; fill: #fff; } /* line 30, ../scss/_nav.scss */ .bd-nav__current { font-weight: 700; letter-spacing: .16em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; text-align: center; } /* line 39, ../scss/_nav.scss */ .bd-nav__arrow { font-size: 1.5rem; line-height: 1; font-weight: 700; background: none; border: 0; color: #fff; padding: .25rem .6rem; vertical-align: -0.25rem; } /* Survol : les flèches grossissent (cf. _animations pour le détail), le lien « Sommaire » rétrécit légèrement. */ /* ========================================================================== Couverture — photo teintée rouge (duotone reconstruit en mix-blend) + grand titre Geist, carte logo inclinée, indice de scroll. ========================================================================== */ /* line 5, ../scss/_cover.scss */ .bd-cover { display: flex; flex-direction: column; min-height: 98svh; margin-top: -3rem; } /* line 11, ../scss/_cover.scss */ .bd-cover__photo { position: relative; flex: 1 1 auto; min-height: 62svh; background: url("../img/cover-photo.jpg") center/cover no-repeat; isolation: isolate; display: flex; align-items: center; justify-content: center; } /* line 21, ../scss/_cover.scss */ .bd-cover__photo::before { content: ''; position: absolute; inset: 0; background: var(--aftec-red); mix-blend-mode: multiply; z-index: 1; } /* line 29, ../scss/_cover.scss */ .bd-cover__photo::after { content: ''; position: absolute; inset: 0; background: rgba(237, 28, 36, 0.28); z-index: 1; } /* line 36, ../scss/_cover.scss */ .bd-cover__title { position: relative; z-index: 2; font-weight: 600; color: #fff; font-size: clamp(3.4rem, 10vw, 8.5rem); line-height: .96; letter-spacing: -.01em; } /* line 46, ../scss/_cover.scss */ .bd-cover__title .line2 > img { float: left; max-width: 25%; margin-top: -2rem; } /* line 48, ../scss/_cover.scss */ .bd-cover__outline { position: absolute; left: 50%; top: 50%; transform: translate(-78%, -34%); height: 1.55em; width: 1.02em; z-index: -1; fill: none; stroke: #fff; stroke-width: 6; } /* line 60, ../scss/_cover.scss */ .bd-cover__strip { position: relative; background: #fff; padding: 1.6rem 1rem 1.8rem; text-align: center; } /* line 66, ../scss/_cover.scss */ .bd-cover__tagline { font-size: clamp(1rem, 2.2vw, 1.55rem); font-weight: 300; margin: 0; } /* line 71, ../scss/_cover.scss */ .bd-cover__logocard { position: absolute; right: clamp(0.75rem, 4vw, 4.5rem); bottom: 8rem; background: #fff; padding: .9rem 1.1rem; transform: rotate(-7deg); box-shadow: 0 0.5rem 1.6rem rgba(0, 0, 0, 0.18); } /* line 80, ../scss/_cover.scss */ .bd-cover__logocard img { width: clamp(6.5rem, 11vw, 10.5rem); height: auto; display: block; } @media (max-width: 767.98px) { /* line 82, ../scss/_cover.scss */ .bd-cover__logocard { position: static; display: inline-block; margin-top: 1.25rem; transform: rotate(-4deg); box-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.15); } } /* Indice « scrollez » sur la couverture (animation dans _animations) */ /* line 86, ../scss/_cover.scss */ .bd-scroll-hint { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 3; color: #fff; font-size: 1.9rem; line-height: 1; pointer-events: none; text-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.25); } /* ========================================================================== Sommaire — table des matières (photo + liste numérotée cliquable) ========================================================================== */ /* line 4, ../scss/_sommaire.scss */ .bd-toc__photo { border-radius: .5rem; width: 100%; height: 100%; max-height: 34rem; object-fit: cover; } /* line 11, ../scss/_sommaire.scss */ .bd-toc__list { list-style: none; margin: 0; padding: 0; } /* line 12, ../scss/_sommaire.scss */ .bd-toc__list li { margin: .35rem 0; } /* line 13, ../scss/_sommaire.scss */ .bd-toc__list a { display: flex; align-items: baseline; gap: .55rem; color: var(--aftec-ink); text-decoration: none; font-size: clamp(1.05rem, 1.9vw, 1.5rem); font-weight: 300; padding: .18rem .3rem; border-radius: .3rem; transition: color .15s ease, background-color .15s ease; } /* line 25, ../scss/_sommaire.scss */ .bd-toc__list a:hover { color: var(--aftec-red); background: rgba(237, 28, 36, 0.05); } /* line 26, ../scss/_sommaire.scss */ .bd-toc__num { font-weight: 700; white-space: nowrap; } /* line 27, ../scss/_sommaire.scss */ .bd-toc__num::after { content: '|'; margin-left: .12rem; } /* line 28, ../scss/_sommaire.scss */ .bd-toc__list .bd-mark { height: .8em; margin-right: .1rem; } /* line 29, ../scss/_sommaire.scss */ .bd-toc__footnote { font-size: .8rem; font-style: italic; font-weight: 400; } /* ========================================================================== Intercalaire — page rouge pleine hauteur d'ouverture de chapitre ========================================================================== */ /* line 4, ../scss/_intercalaire.scss */ .bd-divider { background: var(--aftec-red); color: #fff; min-height: calc(88svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem clamp(1rem, 4vw, 3.5rem) 2rem; } @media (min-width: 992px) { /* line 4, ../scss/_intercalaire.scss */ .bd-divider { overflow: hidden; position: relative; } } /* line 18, ../scss/_intercalaire.scss */ .bd-divider__top { display: flex; align-items: center; gap: .8rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } /* line 27, ../scss/_intercalaire.scss */ .bd-divider__top a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .8rem; } /* line 28, ../scss/_intercalaire.scss */ .bd-divider__top a:hover { opacity: .8; } /* line 29, ../scss/_intercalaire.scss */ .bd-divider__top .bd-mark { height: 1.9rem; width: 1.25rem; fill: #fff; } /* line 30, ../scss/_intercalaire.scss */ .bd-divider__title { font-family: var(--font-title); font-weight: 300; font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: 1.12; text-align: center; margin: auto; max-width: 22ch; } /* line 39, ../scss/_intercalaire.scss */ .bd-divider__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; z-index: 50; position: relative; } /* line 52, ../scss/_intercalaire.scss */ .bd-divider + section { position: relative; z-index: 10; } /* line 54, ../scss/_intercalaire.scss */ .bd-divider__bottom a { color: #fff; text-decoration: none; } /* line 57, ../scss/_intercalaire.scss */ .bd-divider__bottom a:hover { opacity: .8; } /* line 58, ../scss/_intercalaire.scss */ .bd-divider__icon { width: clamp(3.5rem, 6vw, 5.5rem); height: auto; opacity: .95; } /* line 59, ../scss/_intercalaire.scss */ .bd-divider__icon * { stroke: #fff; fill: none; stroke-width: 3; } /* Illustration « main » de l'intercalaire */ /* line 62, ../scss/_intercalaire.scss */ .intercalaire_hand { max-width: 800px; width: 40%; position: absolute; left: 0; top: 50%; z-index: 5; } /* Personnalisation par chapitre */ /* line 65, ../scss/_intercalaire.scss */ #ch01 .intercalaire_hand { width: 30%; left: -10%; } /* line 66, ../scss/_intercalaire.scss */ #ch02 .intercalaire_hand { width: 30%; left: -10%; top: 0%; } /* line 67, ../scss/_intercalaire.scss */ #ch03 .intercalaire_hand { width: 42%; right: -16%; bottom: 20%; left: auto; } /* line 68, ../scss/_intercalaire.scss */ #ch04 .intercalaire_hand { width: 30%; left: -7%; bottom: 3%; } /* line 69, ../scss/_intercalaire.scss */ #ch05 .intercalaire_hand { width: 30%; left: -5%; top: -16%; } /* line 70, ../scss/_intercalaire.scss */ #ch06 .intercalaire_hand { width: 27%; left: 0; bottom: 1%; } /* line 71, ../scss/_intercalaire.scss */ #ch07 .intercalaire_hand { width: 45%; left: -5%; top: 45%; } /* line 72, ../scss/_intercalaire.scss */ #ch08 .intercalaire_hand { width: 50%; left: auto; bottom: 5%; margin-left: 25%; } /* line 73, ../scss/_intercalaire.scss */ #ch09 .intercalaire_hand { height: 28vh; width: auto; top: auto; bottom: auto; margin-left: 45%; } /* line 74, ../scss/_intercalaire.scss */ #ch10 .intercalaire_hand { left: 0; top: 40%; width: 35%; } @media (max-width: 992px) { /* line 78, ../scss/_intercalaire.scss */ #ch02 .intercalaire_hand { width: 70%; left: -28%; top: 7%; } /* line 79, ../scss/_intercalaire.scss */ #ch04 .intercalaire_hand { width: 48%; left: -21%; bottom: 8%; top: inherit; } /* line 80, ../scss/_intercalaire.scss */ #ch05 .intercalaire_hand { width: 53%; } /* line 81, ../scss/_intercalaire.scss */ #ch06 .intercalaire_hand { width: 51%; left: -16%; bottom: 1%; } /* line 82, ../scss/_intercalaire.scss */ #ch07 .intercalaire_hand { width: 58%; left: -12%; top: 55%; } /* line 83, ../scss/_intercalaire.scss */ #ch08 .intercalaire_hand { width: 100%; left: auto; bottom: -1%; margin-left: 0; top: inherit; } /* line 84, ../scss/_intercalaire.scss */ #ch09 .intercalaire_hand { height: 44vh; width: auto; top: -10%; bottom: auto; margin-left: 30%; } /* line 85, ../scss/_intercalaire.scss */ #ch10 .intercalaire_hand { left: 0; top: 50%; width: 48%; } } /* ========================================================================== Contenu de chapitre — numéro, titre latéral, en-tête, corps 2 colonnes, illustrations au trait, filet, bannière image. ========================================================================== */ /* Gros numéro de chapitre */ /* line 7, ../scss/_content.scss */ .bd-chapnum { font-family: var(--font-heavy); font-weight: 700; font-size: clamp(3rem, 7vw, 6rem); line-height: .9; color: var(--aftec-ink); } /* line 14, ../scss/_content.scss */ .bd-chapnum::after { content: '.'; } /* Titre vertical latéral (« Introduction. ») */ /* line 17, ../scss/_content.scss */ .bd-vtitle-wrap { display: flex; align-items: flex-start; gap: .8rem; } /* line 22, ../scss/_content.scss */ .bd-vtitle { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-title); font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1; color: var(--aftec-ink); border-left: 3px solid var(--aftec-ink); padding-left: .35rem; white-space: nowrap; } @media (max-width: 991.98px) { /* line 35, ../scss/_content.scss */ .bd-vtitle { writing-mode: horizontal-tb; transform: none; border-left: 0; border-bottom: 3px solid var(--aftec-ink); padding: 0 0 .35rem; } } /* En-tête de chapitre : numéro + titre empilé */ /* line 45, ../scss/_content.scss */ .bd-chaphead { display: flex; align-items: center; gap: 1.2rem; margin-bottom: clamp(1.5rem, 3vw, 3rem); } /* line 46, ../scss/_content.scss */ .bd-chaphead__title { font-family: var(--font-title); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.1; display: flex; flex-direction: column-reverse; /* le PDF affiche la 2e ligne au-dessus */ } /* Corps de texte 2 colonnes justifiées */ /* line 56, ../scss/_content.scss */ .bd-body { font-size: .96rem; line-height: 1.62; text-align: justify; hyphens: auto; } /* line 57, ../scss/_content.scss */ .bd-body h3, .bd-body .bd-h3 { font-size: 1.08rem; font-weight: 700; text-align: left; margin: 1.3rem 0 .6rem; } /* line 63, ../scss/_content.scss */ .bd-body h3:first-child, .bd-body .bd-h3:first-child { margin-top: 0; } /* line 64, ../scss/_content.scss */ .bd-body ul { padding-left: 1.15rem; } /* line 65, ../scss/_content.scss */ .bd-body li { margin-bottom: .35rem; } /* line 66, ../scss/_content.scss */ .bd-lead { font-weight: 700; text-align: left; } /* Illustration au trait en marge */ /* line 69, ../scss/_content.scss */ .bd-lineart { position: absolute; bottom: 0; max-width: clamp(9rem, 16vw, 17rem); height: auto; opacity: .9; pointer-events: none; } /* line 77, ../scss/_content.scss */ .bd-lineart--left { left: 0; } /* line 78, ../scss/_content.scss */ .bd-lineart--right { right: 0; } @media (max-width: 1399.98px) { /* line 79, ../scss/_content.scss */ .bd-lineart { display: none; } } /* Filet rouge de bas de page contenu */ /* line 82, ../scss/_content.scss */ .bd-endrule { border: 0; border-top: 2px solid var(--aftec-red); opacity: 1; width: min(40rem, 60%); margin: 2.5rem auto 0; } /* Bannière image en tête de chapitre */ /* line 85, ../scss/_content.scss */ .img-banner { margin-top: 0.75rem; padding: 0 0 clamp(1.5rem, 4vw, 3rem); } /* line 89, ../scss/_content.scss */ .img-banner img { width: 100%; } /* CHAPITRE 1 -------- */ /* line 98, ../scss/_content.scss */ .has_pictogram img { width: 50%; display: block; margin: 0 auto .9rem; } /* line 99, ../scss/_content.scss */ img.is_pictogram { width: 50%; display: block; margin: 0 auto .9rem; } /* CHAPITRE 2 -------- */ /* line 103, ../scss/_content.scss */ figure.duo_img { position: relative; text-align: end; margin-bottom: 5rem; padding-right: 1.5rem; } /* line 108, ../scss/_content.scss */ figure.duo_img > img { width: 70%; } /* line 109, ../scss/_content.scss */ figure.duo_img img:last-child { position: absolute; bottom: -2rem; left: -2rem; max-width: 50%; } /* CHAPITRE 3 -------- */ /* line 114, ../scss/_content.scss */ .primary_hand_to_right { width: 200px; margin-bottom: -50px; } /* ---- annexes ---- */ /* line 118, ../scss/_content.scss */ section#annexes { background-image: url("../img/SVG/annexe-fusee.svg"); background-repeat: no-repeat; background-position: 20% 110%; background-size: auto 60%; } /* ---------- CHAPITRE 4----- */ /* line 129, ../scss/_content.scss */ .bd-route__phase .element_deco { position: absolute; z-index: 5; } /* line 131, ../scss/_content.scss */ .bd-route__phase .element_deco > img { width: 80px; height: auto; } /* line 133, ../scss/_content.scss */ .bd-route__phase .element_deco.elmnt1 { bottom: 1rem; left: 20%; } /* line 134, ../scss/_content.scss */ .bd-route__phase .element_deco.elmnt2 { bottom: 2.5rem; left: 65%; } /* line 134, ../scss/_content.scss */ .bd-route__phase .element_deco.elmnt2 > img { width: 50px; } /* line 135, ../scss/_content.scss */ .bd-route__phase .element_deco.elmnt3 { bottom: 0.5rem; left: 84%; } /* line 136, ../scss/_content.scss */ .bd-route__phase .element_deco.elmnt4 { bottom: 2.5rem; left: 50%; z-index: 2; } /* line 136, ../scss/_content.scss */ .bd-route__phase .element_deco.elmnt4 > img { width: 200px; } /* line 137, ../scss/_content.scss */ .bd-route__phase .element_deco.elmnt5 { bottom: 2rem; left: 75%; z-index: 2; } /* line 137, ../scss/_content.scss */ .bd-route__phase .element_deco.elmnt5 > img { width: 250px; } /* line 138, ../scss/_content.scss */ .bd-route__phase .element_deco.elmnt6 { bottom: 0.5rem; right: -5%; } /* line 142, ../scss/_content.scss */ section#liste-annexes { background-size: 50vh auto; background-position: 0 100%; background-repeat: no-repeat; } /* ========================================================================== Préambule — wordmark, promesses, colonnes « acteurs », note « main » (les icônes sont désormais des SVG dans /assets/img/SVG) ========================================================================== */ /* Wordmark « Signature Aftec. » */ /* line 7, ../scss/_preambule.scss */ .bd-wordmark { font-weight: 700; font-size: clamp(2.8rem, 6vw, 5rem); line-height: .95; color: var(--aftec-ink); } /* line 13, ../scss/_preambule.scss */ .bd-wordmark .line2 { position: relative; z-index: -1; } /* line 16, ../scss/_preambule.scss */ .bd-wordmark .line2 > img { float: left; max-width: 25%; margin-top: -2rem; } /* line 18, ../scss/_preambule.scss */ .bd-wordmark .bd-mark { height: 1.35em; width: .9em; position: absolute; left: -.05em; top: -.42em; } /* Les 3 promesses */ /* line 21, ../scss/_preambule.scss */ .bd-promise { text-align: center; padding: 1rem 1.4rem; } /* line 22, ../scss/_preambule.scss */ .bd-promise img { height: 7rem; width: auto; display: block; margin: 0 auto 1.6rem; } /* line 23, ../scss/_preambule.scss */ .bd-promise h3 { font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; } /* line 24, ../scss/_preambule.scss */ .bd-promise h3 small { display: block; font-size: .92rem; font-weight: 300; text-transform: none; margin-top: .35rem; line-height: 1.5; } /* line 25, ../scss/_preambule.scss */ .bd-promise + .bd-promise { border-left: 2px solid var(--aftec-navy); } @media (max-width: 991.98px) { /* line 27, ../scss/_preambule.scss */ .bd-promise + .bd-promise { border-left: 0; border-top: 2px solid var(--aftec-navy); } } /* Note « main » (illustration + engagement) */ /* line 31, ../scss/_preambule.scss */ .bd-handnote { display: flex; align-items: flex-start; gap: 1rem; max-width: 46rem; margin: 2.5rem auto 0; } /* line 38, ../scss/_preambule.scss */ .bd-handnote p { margin: 0; } /* line 39, ../scss/_preambule.scss */ .bd-handnote .lead-line { font-weight: 700; font-style: italic; } /* Colonnes « acteurs » (une promesse pour chaque acteur) */ /* line 42, ../scss/_preambule.scss */ .bd-actor { font-size: .92rem; line-height: 1.6; } /* line 45, ../scss/_preambule.scss */ .bd-actor img { height: 4.6rem; width: auto; display: block; margin: 0 auto .9rem; } /* line 46, ../scss/_preambule.scss */ .bd-actor h4 { font-size: .98rem; font-weight: 700; text-align: left; min-height: 3.2em; display: flex; align-items: flex-end; } /* line 47, ../scss/_preambule.scss */ .bd-actors-bracket { border-top: 2px solid var(--aftec-ink); position: relative; margin: 1.6rem 8% 2rem; } /* line 48, ../scss/_preambule.scss */ .bd-actors-bracket::before { content: ''; position: absolute; left: 50%; top: -1.1rem; height: 1.1rem; border-left: 2px solid var(--aftec-ink); } /* line 49, ../scss/_preambule.scss */ .bd-actors-bracket span { position: absolute; top: 0; height: .8rem; border-left: 2px solid var(--aftec-ink); } @media (max-width: 991.98px) { /* line 50, ../scss/_preambule.scss */ .bd-actors-bracket { display: none; } } /* ========================================================================== Composants data-viz & briques de chapitres (statistiques, donut, missions, étapes, parcours, neuropédagogie, tableaux…) Anciennement _chapitres.scss. ========================================================================== */ /* line 8, ../scss/_components.scss */ .quote-black { height: 2em; margin-right: 0.5em; } @media (max-width: 992px) { /* line 10, ../scss/_components.scss */ .quote-black { height: 1.25em; margin-right: 0.2em; } } /* line 13, ../scss/_components.scss */ .bg-orange-30 { background-color: rgba(236, 101, 0, 0.3); } /* ---------- Statistiques (chap. 03) ------------------------------------------ */ /* line 19, ../scss/_components.scss */ .bd-stat-block h4 { font-size: .98rem; font-weight: 700; margin-bottom: 1rem; } /* line 24, ../scss/_components.scss */ .bd-stat-block h4::before { content: '• '; color: var(--aftec-red); } /* line 25, ../scss/_components.scss */ .bd-bar { margin-bottom: .8rem; } /* line 26, ../scss/_components.scss */ .bd-bar__label { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; margin-bottom: .25rem; } /* line 33, ../scss/_components.scss */ .bd-bar__value { font-weight: 800; color: var(--aftec-red); } /* line 34, ../scss/_components.scss */ .bd-bar__alt { font-weight: 600; color: #8b8b8b; font-size: .92em; } /* line 35, ../scss/_components.scss */ .bd-bar__track { background: #f1f1f1; border-radius: 2rem; height: 1.05rem; overflow: hidden; } /* line 36, ../scss/_components.scss */ .bd-bar__fill { height: 100%; border-radius: 2rem; background: var(--aftec-red); width: 0; transition: width 1.1s cubic-bezier(0.25, 0.7, 0.3, 1); } /* line 43, ../scss/_components.scss */ .bd-bar__fill--gray { background: #9a9a9a; } /* line 44, ../scss/_components.scss */ .bd-bar__fill--navy { background: var(--aftec-navy); } /* line 45, ../scss/_components.scss */ .in-view .bd-bar__fill { width: var(--bar); } /* line 46, ../scss/_components.scss */ .bd-stat-badge { display: inline-block; background: var(--aftec-ink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 2rem; margin-top: .6rem; } /* line 58, ../scss/_components.scss */ .bd-stat-badge--up::before { content: '▲ '; color: #6BE29A; } /* line 59, ../scss/_components.scss */ .bd-stat-badge--down::before { content: '▼ '; color: var(--aftec-pink); } /* line 60, ../scss/_components.scss */ .bd-kpi { font-family: var(--font-heavy); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; color: var(--aftec-red); line-height: 1; } /* line 67, ../scss/_components.scss */ .bd-kpi small { display: block; font-family: var(--font-body); font-size: .85rem; font-weight: 600; color: var(--aftec-ink); margin-top: .45rem; line-height: 1.4; } /* ---------- Kicker latéral (« PRINCIPES - 4/7 ») ---------------------------- */ /* line 70, ../scss/_components.scss */ .bd-kicker { display: inline-block; background: var(--aftec-white); color: var(--aftec-ink); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; } /* ---------- Donut (camemberts 2 valeurs & OPCO) --------------------------- */ /* line 82, ../scss/_components.scss */ .bd-donut { position: relative; width: 9.5rem; height: 9.5rem; margin-inline: auto; } /* line 83, ../scss/_components.scss */ .bd-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); } /* line 84, ../scss/_components.scss */ .bd-donut circle { fill: none; stroke-width: 3.8; } /* line 85, ../scss/_components.scss */ .bd-donut__track { stroke: #7C64DC; } /* line 86, ../scss/_components.scss */ .bd-donut__val { stroke: var(--sch-green); stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s cubic-bezier(0.25, 0.7, 0.3, 1); } /* line 91, ../scss/_components.scss */ .in-view .bd-donut__val { stroke-dasharray: var(--val) calc(100 - var(--val)); } /* line 92, ../scss/_components.scss */ .bd-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* line 97, ../scss/_components.scss */ .bd-donut__center .y { font-size: .68rem; font-weight: 800; background: var(--aftec-red); color: #fff; padding: .1rem .5rem; border-radius: .25rem; } /* line 98, ../scss/_components.scss */ .bd-donut__center .v { font-size: 1.25rem; font-weight: 800; color: var(--sch-green); } /* line 99, ../scss/_components.scss */ .bd-legend { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .78rem; font-weight: 600; } /* line 100, ../scss/_components.scss */ .bd-legend li { display: flex; align-items: center; gap: .45rem; margin-bottom: .15rem; } /* line 101, ../scss/_components.scss */ .bd-legend .dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; } /* ---------- Cartes des 14 missions (chap. 02) ------------------------------ */ /* line 104, ../scss/_components.scss */ .bd-mission { background: #FBF3DC; border-bottom: .45rem solid #F5C518; border-radius: .35rem; padding: 1rem .9rem 1.1rem; font-size: .84rem; line-height: 1.5; text-align: center; height: 100%; } /* line 114, ../scss/_components.scss */ .bd-mission__num { font-family: var(--font-heavy); font-weight: 700; font-size: 2.3rem; line-height: 1; color: #F5C518; } /* line 115, ../scss/_components.scss */ .bd-mission strong, .bd-mission em strong { font-style: italic; } /* line 116, ../scss/_components.scss */ .bd-mission--vert { background: #E2F0E4; border-bottom-color: #2E9E44; } /* line 117, ../scss/_components.scss */ .bd-mission--vert .bd-mission__num { color: #2E9E44; } /* line 118, ../scss/_components.scss */ .bd-mission--bleu { background: #DCE9F6; border-bottom-color: #2E82C4; } /* line 119, ../scss/_components.scss */ .bd-mission--bleu .bd-mission__num { color: #2E82C4; } /* line 120, ../scss/_components.scss */ .bd-mission-legend { display: flex; flex-wrap: wrap; gap: 1rem 2rem; font-size: .82rem; font-weight: 600; } /* line 121, ../scss/_components.scss */ .bd-mission-legend .swatch { display: inline-block; width: 2.2rem; height: .9rem; border-radius: .2rem; margin-right: .45rem; vertical-align: -.12em; } /* ---------- Étapes de travail (chap. 01) ------------------------------------ */ /* line 124, ../scss/_components.scss */ .bd-semester { display: inline-block; border: 2px solid var(--aftec-coral); color: var(--aftec-red); font-weight: 800; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; padding: .35rem .9rem; background: #fff; } /* line 135, ../scss/_components.scss */ .bd-workstep { text-align: center; font-size: .92rem; line-height: 1.55; padding: 0 1rem; } /* line 136, ../scss/_components.scss */ .bd-workstep__icon { height: 5.2rem; width: auto; margin-bottom: .9rem; } /* line 137, ../scss/_components.scss */ .bd-workstep__icon .st-dark { stroke: var(--aftec-gray); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* line 138, ../scss/_components.scss */ .bd-workstep__icon .st-red { stroke: var(--aftec-coral); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* line 139, ../scss/_components.scss */ .bd-worksteps-join { border-top: 2px solid var(--aftec-ink); position: relative; margin: 1.8rem 12% 0; } /* line 140, ../scss/_components.scss */ .bd-worksteps-join::after { content: ''; position: absolute; left: 50%; top: 0; height: 1.2rem; border-left: 2px solid var(--aftec-ink); } @media (max-width: 991.98px) { /* line 141, ../scss/_components.scss */ .bd-worksteps-join { display: none; } } /* ---------- Parcours « route » (20 étapes, chap. 04 & 08) -------------------- */ /* line 144, ../scss/_components.scss */ .bd-route { --route-c: #4a4a4a; } /* line 145, ../scss/_components.scss */ .bd-route__phase { position: relative; padding: 1rem 0 2.2rem; } /* line 146, ../scss/_components.scss */ .bd-route__badge { width: 7.2rem; height: 7.2rem; border-radius: 50%; background: #fff; border: 0.55rem solid var(--phase, var(--aftec-red)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; font-family: var(--font-title); font-size: 1.25rem; box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.14); flex: none; z-index: 2; position: relative; } /* line 159, ../scss/_components.scss */ .bd-route__badge b { font-weight: 700; color: var(--phase, var(--aftec-red)); font-family: var(--font-body); } /* line 160, ../scss/_components.scss */ .bd-route__badge small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--aftec-ink); } /* line 161, ../scss/_components.scss */ .bd-route__lane { position: relative; display: flex; align-items: flex-end; gap: 1.9rem; padding: 0 .5rem 2.6rem; justify-content: center; } /* line 170, ../scss/_components.scss */ .bd-route__lane::before { /* la « route » */ content: ''; position: absolute; left: 0; right: 0; bottom: 1rem; height: 1.15rem; border-radius: 1rem; background: repeating-linear-gradient(90deg, transparent 0 1.1rem, #fff 1.1rem 1.9rem, transparent 1.9rem 3rem) center/100% 2px no-repeat, var(--route-c); } /* line 181, ../scss/_components.scss */ .bd-route__step { flex: 1 1 0; max-width: 290px; position: relative; display: flex; flex-direction: column; } /* line 182, ../scss/_components.scss */ .bd-route__card { position: relative; z-index: 50; background: var(--phase, var(--aftec-red)); color: #fff; border-radius: .55rem; padding: .55rem .65rem; font-size: .74rem; line-height: 1.35; box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.18); flex: 1 1 auto; transition: all ease-in-out 0.3s; } /* line 194, ../scss/_components.scss */ .bd-route__card:hover { transform: translateY(1rem); } /* line 200, ../scss/_components.scss */ .bd-route__card b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; } /* line 201, ../scss/_components.scss */ .bd-route__step::after { /* tige + pastille vers la route */ content: ''; align-self: center; width: 2px; height: 1.55rem; background: var(--phase, var(--aftec-red)); box-shadow: 0 1.9rem 0 0.28rem var(--phase, var(--aftec-red)); margin-bottom: 1.4rem; z-index: 40; } @media (max-width: 991.98px) { /* line 212, ../scss/_components.scss */ .bd-route__lane { flex-direction: column; gap: .6rem; padding-bottom: .8rem; } /* line 213, ../scss/_components.scss */ .bd-route__lane::before { left: .32rem; right: auto; top: 0; bottom: 0; width: 1rem; height: auto; background: repeating-linear-gradient(180deg, transparent 0 1.1rem, #fff 1.1rem 1.9rem, transparent 1.9rem 3rem) center/2px 100% no-repeat, var(--route-c); } /* line 215, ../scss/_components.scss */ .bd-route__step { flex-direction: row; align-items: center; gap: .7rem; padding-left: 2.1rem; } /* line 216, ../scss/_components.scss */ .bd-route__step::after { display: none; } /* line 217, ../scss/_components.scss */ .bd-route__badge { margin-left: 2.1rem; margin-bottom: 1rem; } } /* ---------- Schéma Neuropédagogie (chap. 04) --------------------------------- */ /* line 221, ../scss/_components.scss */ .bd-neuro__board { border: 2px solid var(--aftec-ink); border-radius: .8rem; padding: 1.6rem 1rem 2.2rem; text-align: center; background: #fff; } /* line 222, ../scss/_components.scss */ .bd-neuro__board h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; margin-bottom: 1.6rem; } /* line 223, ../scss/_components.scss */ .bd-neuro__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .4rem; } /* line 224, ../scss/_components.scss */ .bd-neuro__tag { color: #fff; font-weight: 700; font-size: .92rem; padding: .8rem 1rem; border-radius: .45rem; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2); } /* line 229, ../scss/_components.scss */ .bd-neuro__tag:nth-child(odd) { transform: rotate(-6deg); } /* line 230, ../scss/_components.scss */ .bd-neuro__tag:nth-child(even) { transform: rotate(5deg) translateY(0.4rem); } /* line 231, ../scss/_components.scss */ .bd-neuro__arrow { width: 0; margin: -.4rem auto 1.4rem; border: 1rem solid transparent; border-top: 1.6rem solid var(--aftec-ink); } /* line 232, ../scss/_components.scss */ .bd-neuro__pill { display: inline-block; background: #6E5BB8; color: #fff; font-weight: 700; font-size: .82rem; padding: .45rem .9rem; border-radius: .4rem; letter-spacing: .04em; text-transform: uppercase; } /* line 239, ../scss/_components.scss */ .bd-neuro__pill--core { background: var(--aftec-red); border: 2px solid #7c0d11; font-size: .95rem; } /* line 240, ../scss/_components.scss */ .bd-neuro__list { font-size: .82rem; font-weight: 600; text-align: left; margin: .5rem 0 0; padding-left: 1.1rem; } /* line 241, ../scss/_components.scss */ .bd-neuro__cell { padding: .8rem; } /* ---------- Trio de piliers (pills, chap. 04 intro principes) ------------------ */ /* line 244, ../scss/_components.scss */ .bd-pill3 { border: 2px solid var(--aftec-ink); border-radius: .5rem; font-weight: 800; font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; text-align: center; padding: .9rem 1rem; height: 100%; display: flex; align-items: center; justify-content: center; } /* Citation d'introduction (principes pédagogiques) */ /* line 258, ../scss/_components.scss */ .bd-quote { font-size: 1.02rem; line-height: 1.7; font-style: italic; position: relative; padding-left: 1.6rem; } /* line 259, ../scss/_components.scss */ .bd-quote::before { content: '«'; position: absolute; left: 0; top: -.35rem; font-size: 2.2rem; color: var(--aftec-red); font-style: normal; font-weight: 700; } /* ---------- Tableaux de satisfaction (chap. 03) --------------------------------- */ /* line 262, ../scss/_components.scss */ .bd-satis { font-size: .85rem; } /* line 263, ../scss/_components.scss */ .bd-satis__row { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid #e8e8e8; } /* line 264, ../scss/_components.scss */ .bd-satis__row:last-child { border-bottom: 0; } /* line 265, ../scss/_components.scss */ .bd-satis__pair { display: flex; gap: .35rem; align-items: baseline; white-space: nowrap; } /* line 266, ../scss/_components.scss */ .bd-satis__pair .v25 { font-weight: 800; color: var(--sch-green); font-size: 1rem; } /* line 267, ../scss/_components.scss */ .bd-satis__pair .vN1 { font-weight: 600; color: #8b8b8b; font-size: .8rem; } /* line 268, ../scss/_components.scss */ .bd-delta { display: inline-block; font-weight: 800; font-size: .74rem; padding: .12rem .5rem; border-radius: 2rem; background: #E2F0E4; color: #1F7A38; white-space: nowrap; } /* line 269, ../scss/_components.scss */ .bd-delta--down { background: #FDE3E4; color: var(--aftec-red-dark); } /* ---------- Canaux de communication (chap. 09) ------------------------------- */ /* line 272, ../scss/_components.scss */ .bd-channel { height: 100%; background: #fff; border-radius: .6rem; border-top: 0.4rem solid var(--aftec-red); padding: 1.4rem 1.3rem; box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.07); } /* line 280, ../scss/_components.scss */ .bd-channel__icon { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(237, 28, 36, 0.1); color: var(--aftec-red); font-size: 1.35rem; margin-bottom: .9rem; } /* line 289, ../scss/_components.scss */ .bd-channel h4 { font-size: 1rem; font-weight: 800; margin-bottom: .6rem; } /* line 290, ../scss/_components.scss */ .bd-channel ul { padding-left: 1.1rem; margin: 0; font-size: .88rem; } /* line 291, ../scss/_components.scss */ .bd-channel li { margin-bottom: .3rem; } /* ---------- Cartographie des processus (chap. 10) ---------------------------- */ /* line 294, ../scss/_components.scss */ .bd-procmap__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin-bottom: 1.4rem; font-size: .82rem; font-weight: 700; } /* line 299, ../scss/_components.scss */ .bd-procmap__legend span { display: inline-flex; align-items: center; gap: .45rem; } /* line 300, ../scss/_components.scss */ .bd-procmap__legend .sw { width: 1.5rem; height: .95rem; border-radius: .2rem; } /* line 301, ../scss/_components.scss */ .bd-procmap__title { text-align: center; font-family: var(--font-heavy); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.3rem); margin-bottom: 1.6rem; } /* line 305, ../scss/_components.scss */ .bd-procmap__pi { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--aftec-ink); white-space: nowrap; } /* line 310, ../scss/_components.scss */ .bd-procmap__pi i { color: var(--aftec-red); } /* line 311, ../scss/_components.scss */ .bd-procmap__band + .bd-procmap__band { margin-top: .9rem; } /* line 312, ../scss/_components.scss */ .bd-procmap__flow { display: grid; gap: .6rem; align-items: stretch; grid-auto-flow: column; grid-auto-columns: 1fr; } /* line 316, ../scss/_components.scss */ .bd-procmap__flow--support { grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; } @media (max-width: 991.98px) { /* line 318, ../scss/_components.scss */ .bd-procmap__flow, .bd-procmap__flow--support { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } } @media (max-width: 575.98px) { /* line 321, ../scss/_components.scss */ .bd-procmap__flow, .bd-procmap__flow--support { grid-template-columns: 1fr; } } /* line 323, ../scss/_components.scss */ .bd-proc { border-radius: .5rem; padding: .75rem .8rem; text-align: center; font-size: .8rem; line-height: 1.3; color: var(--aftec-ink); display: flex; flex-direction: column; justify-content: center; } /* line 328, ../scss/_components.scss */ .bd-proc b { display: block; font-weight: 800; } /* line 329, ../scss/_components.scss */ .bd-proc small { display: block; font-size: .72rem; font-weight: 600; color: var(--aftec-gray); margin-top: .35rem; } /* line 330, ../scss/_components.scss */ .bd-proc--pilot { background: #DCE9F6; border: 2px solid #2E6CB4; } /* line 331, ../scss/_components.scss */ .bd-proc--pilot-strong { background: #2E6CB4; border: 2px solid #1F4E79; color: #fff; } /* line 332, ../scss/_components.scss */ .bd-proc--pilot-strong small { color: rgba(255, 255, 255, 0.85); } /* line 333, ../scss/_components.scss */ .bd-proc--real { background: #FBF3DC; border: 2px solid #F0B429; } /* line 334, ../scss/_components.scss */ .bd-proc--support { background: #E2F0E4; border: 2px solid #35A567; } /* flèches de flux entre les processus de réalisation (desktop) */ /* line 336, ../scss/_components.scss */ .bd-procmap__flow--real { position: relative; } /* line 337, ../scss/_components.scss */ .bd-procmap__flow--real .bd-proc:not(:last-child)::after { content: '\f061'; /* fa-arrow-right */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; transform: translate(50%, -50%); right: 0; color: #F0B429; font-size: .95rem; } @media (max-width: 991.98px) { /* line 343, ../scss/_components.scss */ .bd-procmap__flow--real .bd-proc::after { display: none; } } /* ---------- Annexes (sommaire final) ----------------------------------------- */ /* line 346, ../scss/_components.scss */ .bd-annex-list { list-style: none; margin: 0; padding: 0; } /* line 347, ../scss/_components.scss */ .bd-annex-list li { display: flex; align-items: baseline; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid #e4e4e4; font-size: 1.02rem; } /* line 352, ../scss/_components.scss */ .bd-annex-list li::before { content: '\f0f6'; /* fa-file-lines */ font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--aftec-red); font-size: .95rem; } /* line 357, ../scss/_components.scss */ .bd-annex-list strong { font-weight: 700; } /* ---------- Frise chrono des ateliers (chap. 08 : parcours d'intégration) ------ */ /* Chaque ligne : badge calendrier « JOUR X » + ateliers en chevrons. Couleur de la ligne : --c ; séquence d'apparition : --row / --i (délais calculés dans _animations.scss). */ /* line 363, ../scss/_components.scss */ .bd-frise__row { display: flex; align-items: stretch; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.7rem; --c: var(--aftec-red); } /* line 371, ../scss/_components.scss */ .bd-frise__row:last-child { margin-bottom: 0; } /* Badge calendrier */ /* line 374, ../scss/_components.scss */ .bd-frise__day { flex: none; display: flex; align-items: center; } /* line 375, ../scss/_components.scss */ .bd-frise__cal { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 5.4rem; min-height: 4.6rem; background: #fff; border: 3px solid var(--aftec-ink); border-radius: .55rem; overflow: hidden; transform: rotate(-6deg); box-shadow: 0.2rem 0.25rem 0 rgba(0, 0, 0, 0.18); } /* line 389, ../scss/_components.scss */ .bd-frise__cal::before { /* bandeau-reliure noir à trous */ content: ''; width: 100%; height: .8rem; background: radial-gradient(circle at 0.55rem 50%, #fff 0.12rem, transparent 0.16rem) 0 0/1.1rem 100% repeat-x, var(--aftec-ink); } /* line 398, ../scss/_components.scss */ .bd-frise__cal i { color: var(--c); font-size: 1.05rem; padding: .25rem 0; } /* line 399, ../scss/_components.scss */ .bd-frise__cal b { width: 100%; background: var(--c); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: .22rem 0; } /* Ateliers en chevrons */ /* line 412, ../scss/_components.scss */ .bd-frise__item { flex: 1 1 0; min-width: 7.5rem; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--c); color: #fff; font-weight: 700; font-size: .76rem; line-height: 1.25; padding: .8rem 1.1rem .8rem 1.35rem; clip-path: polygon(0 0, calc(100% - .9rem) 0, 100% 50%, calc(100% - .9rem) 100%, 0 100%, 0.9rem 50%); } /* line 427, ../scss/_components.scss */ .bd-frise__item:nth-child(odd) { filter: brightness(1.13); } @media (max-width: 767.98px) { /* line 430, ../scss/_components.scss */ .bd-frise__row { flex-direction: column; align-items: stretch; gap: .3rem; } /* line 431, ../scss/_components.scss */ .bd-frise__day { justify-content: center; margin-bottom: .4rem; } /* line 432, ../scss/_components.scss */ .bd-frise__item { min-width: 0; padding: .7rem 1rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - .55rem), 50% 100%, 0 calc(100% - .55rem)); } } /* ---------- Jours d'ateliers (chap. 08 : intégration & formation interne) ------ */ /* line 440, ../scss/_components.scss */ .bd-jour { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1.2rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid #e8e8e8; } /* line 448, ../scss/_components.scss */ .bd-jour:last-child { border-bottom: 0; } /* line 449, ../scss/_components.scss */ .bd-jour__label { font-family: var(--font-heavy); font-weight: 700; font-size: 1.05rem; color: var(--aftec-red); text-transform: uppercase; white-space: nowrap; padding-top: .25rem; min-width: 5.2rem; } /* line 459, ../scss/_components.scss */ .bd-jour__items { display: flex; flex-wrap: wrap; gap: .45rem; } /* line 460, ../scss/_components.scss */ .bd-chip { display: inline-block; background: #fff; border: 1.5px solid var(--aftec-coral); color: var(--aftec-ink); font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 2rem; } @media (max-width: 767.98px) { /* line 471, ../scss/_components.scss */ .bd-jour { grid-template-columns: 1fr; gap: .4rem; } } /* ---------- Chapitre en construction (stubs) -------------------------------------- */ /* line 475, ../scss/_components.scss */ .bd-wip { text-align: center; padding: 4rem 1rem; } /* line 476, ../scss/_components.scss */ .bd-wip .bd-mark { height: 2.6rem; width: 1.7rem; margin-bottom: 1.2rem; } /* line 477, ../scss/_components.scss */ .bd-wip p { font-size: 1.05rem; } /* -------------- */ /* line 483, ../scss/_components.scss */ ul.bd-annex-list a { text-decoration: none; color: var(--aftec-ink); transition: all ease-in-out 0.3s; padding-left: 0; } /* line 484, ../scss/_components.scss */ ul.bd-annex-list a:hover { padding-left: 0.5rem; color: var(--aftec-coral); } /* -------- */ @media (max-width: 767.98px) { /* line 489, ../scss/_components.scss */ #nav-bottom { display: none !important; } } /* line 493, ../scss/_components.scss */ #nav-bottom { margin-top: 2rem; margin-bottom: 4rem; color: var(--aftec-red); } /* line 496, ../scss/_components.scss */ #nav-bottom .bd-nav__arrow { color: var(--aftec-red); text-decoration: none; } /* line 498, ../scss/_components.scss */ #nav-bottom .bd-nav__arrow span { font-size: 0.7em; vertical-align: 0.2em; } /* line 500, ../scss/_components.scss */ #nav-bottom .separator { width: 3rem; } /* ========================================================================== Animations — apparitions au défilement, survols, entrées de couverture, masquage de la navbar, cascade des icônes du préambule. Les animations purement décoratives sont désactivées si l'utilisateur demande « moins d'animations » (prefers-reduced-motion). ========================================================================== */ /* ---------- Transition entre pages ------------------------------------------- */ /* Fondu de sortie : .bd-leaving est posée par brochure.js au clic sur un lien interne, puis la navigation part après ~320 ms. */ @media (prefers-reduced-motion: no-preference) { /* Le fondu ne touche que le contenu : la navbar reste en place. */ /* line 13, ../scss/_animations.scss */ body.bd-leaving { pointer-events: none; } /* line 14, ../scss/_animations.scss */ body > :not(.bd-nav) { transition: opacity .32s ease; } /* line 15, ../scss/_animations.scss */ body.bd-leaving > :not(.bd-nav) { opacity: 0; } /* Entrée de la page suivante : le titre d'intercalaire apparaît en fondu + translation bas → haut. */ @keyframes bd-divider-title-in { from { opacity: 0; transform: translateY(2.2rem); } to { opacity: 1; transform: none; } } /* line 23, ../scss/_animations.scss */ .bd-divider__title { animation: bd-divider-title-in .9s ease .15s both; } /* L'illustration « main » entre en fondu + grossissement (70 % → 100 %), 2 s après l'apparition du titre. */ @keyframes bd-hand-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } /* line 31, ../scss/_animations.scss */ .intercalaire_hand { transform-origin: center; animation: bd-hand-in .8s ease 1.2s both; } } /* ---------- Apparition au défilement (.bd-reveal) --------------------------- */ @media (prefers-reduced-motion: no-preference) { /* line 36, ../scss/_animations.scss */ .bd-reveal { opacity: 0; transform: translateY(1.2rem); transition: opacity .6s ease, transform .6s ease; } /* line 37, ../scss/_animations.scss */ .bd-reveal.in-view { opacity: 1; transform: none; } } /* ---------- Survols de la navigation --------------------------------------- */ /* Flèches précédent/suivant : léger grossissement */ /* line 42, ../scss/_animations.scss */ .bd-nav__arrow { transition: transform .18s ease, opacity .15s ease; } /* line 43, ../scss/_animations.scss */ .bd-nav__arrow:hover, .bd-nav__arrow:focus-visible { transform: scale(1.28); opacity: 1; } /* Lien « Sommaire » : léger rétrécissement */ /* line 47, ../scss/_animations.scss */ .bd-nav a[href$="sommaire"] { display: inline-block; transition: transform .18s ease, opacity .15s ease; } /* line 48, ../scss/_animations.scss */ .bd-nav a[href$="sommaire"]:hover { transform: scale(0.9); } /* ---------- Couverture : entrée du titre + rotation du liseré --------------- */ @media (prefers-reduced-motion: no-preference) { @keyframes bd-title-in { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: translateY(0); } } /* line 56, ../scss/_animations.scss */ .bd-cover__title { animation: bd-title-in 1s ease .15s both; } /* Apparition en grossissement, puis 15° à gauche, 30° à droite, retour à 0 */ @keyframes bd-quote-rotate { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 35% { opacity: 1; transform: scale(1) rotate(0deg); } 55% { transform: scale(1) rotate(-15deg); } 78% { transform: scale(1) rotate(30deg); } 100% { transform: scale(1) rotate(0deg); } } /* line 66, ../scss/_animations.scss */ .aftec-quote-rotate-borderwhite { transform-origin: center; animation: bd-quote-rotate 2.2s ease .9s both; } } /* ---------- Navbar masquée jusqu'à ~20% de scroll (page couverture) --------- */ /* .has-cover et .is-scrolled sont posées par brochure.js (progressive enhancement : sans JS, la navbar reste visible). */ /* line 75, ../scss/_animations.scss */ .has-cover .bd-nav { opacity: 0; pointer-events: none; transition: opacity .5s ease; } /* line 80, ../scss/_animations.scss */ .has-cover.is-scrolled .bd-nav { opacity: 1; pointer-events: auto; } /* Indice « scrollez » : rebond, puis disparition au scroll */ /* line 86, ../scss/_animations.scss */ .bd-scroll-hint { transition: opacity .4s ease; } /* line 87, ../scss/_animations.scss */ .is-scrolled .bd-scroll-hint { opacity: 0; } @media (prefers-reduced-motion: no-preference) { /* line 89, ../scss/_animations.scss */ .bd-scroll-hint { animation: bd-bounce 1.5s ease-in-out infinite; } @keyframes bd-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 0.7rem); } } } /* ---------- Bannières de chapitre : « produit » au repos, couleurs au scroll --- */ /* L'image du bandeau reste en mode Produit (multiply) + opacité 0.5 tant qu'on n'a pas dépassé la bannière de quelques rem ; .is-revealed (posée par brochure.js) rétablit la colorisation normale. */ /* line 100, ../scss/_animations.scss */ .img-banner img { mix-blend-mode: normal; opacity: 1; } /* line 104, ../scss/_animations.scss */ .img-banner.is-revealed img { mix-blend-mode: multiply; opacity: 0.2; } @media (prefers-reduced-motion: no-preference) { /* line 109, ../scss/_animations.scss */ .img-banner img { transition: opacity .7s ease; } } /* ---------- Canaux de communication (chap. 09) : cascade fondu + grossissement -- */ /* Les 3 cartes .col-lg-4.bd-reveal du bloc #canaux apparaissent l'une après l'autre (1 s d'écart). On neutralise la translation générique du reveal au profit d'un « pop » (scale) propre à ces cartes. */ @media (prefers-reduced-motion: no-preference) { @keyframes bd-pop-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } } /* line 121, ../scss/_animations.scss */ #canaux .row > .bd-reveal { transform: none; transition: none; } /* line 122, ../scss/_animations.scss */ #canaux .row > .bd-reveal.in-view { animation: bd-pop-in .6s ease both; } /* line 123, ../scss/_animations.scss */ #canaux .row > .bd-reveal:nth-child(2).in-view { animation-delay: 1s; } /* line 124, ../scss/_animations.scss */ #canaux .row > .bd-reveal:nth-child(3).in-view { animation-delay: 2s; } } /* ---------- Cartographie des processus (chap. 10) : grossissement en cascade -- */ /* Chaque bloc .bd-proc porte un --pi (ordre de lecture 1→13) ; ils apparaissent l'un après l'autre en « pop » (scale) quand la carto entre dans le viewport. */ @media (prefers-reduced-motion: no-preference) { /* line 131, ../scss/_animations.scss */ .bd-procmap .bd-proc { opacity: 0; } /* line 132, ../scss/_animations.scss */ .bd-reveal.in-view .bd-procmap .bd-proc { animation: bd-pop-in .45s ease both; animation-delay: calc(var(--pi, 0) * .12s); } } /* ---------- Frises chrono (chap. 08) : apparition en séquence ----------------- */ /* Jour 1 → ses ateliers un à un → Jour 2 → … La position dans la séquence est donnée par --row (ligne) et --i (0 = badge jour, 1..5 = ateliers). Le nombre de pas par ligne est fixé par --frise-steps (défaut 6). */ @media (prefers-reduced-motion: no-preference) { @keyframes bd-frise-in { from { opacity: 0; transform: translateX(-1rem); } to { opacity: 1; transform: none; } } /* line 147, ../scss/_animations.scss */ .bd-frise .bd-frise__day, .bd-frise .bd-frise__item { opacity: 0; } /* line 149, ../scss/_animations.scss */ .bd-frise.in-view .bd-frise__day, .bd-frise.in-view .bd-frise__item { animation: bd-frise-in .45s ease both; animation-delay: calc((var(--row, 0) * var(--frise-steps, 6) + var(--i, 0)) * .22s); } } /* ---------- Préambule : les icônes apparaissent l'une après l'autre --------- */ @media (prefers-reduced-motion: no-preference) { @keyframes bd-icon-in { from { opacity: 0; transform: translateY(0.9rem) scale(0.9); } to { opacity: 1; transform: none; } } /* line 162, ../scss/_animations.scss */ .bd-actor img, .bd-promise img { opacity: 0; } /* line 165, ../scss/_animations.scss */ .bd-reveal.in-view .bd-actor img, .bd-reveal.in-view .bd-promise img { animation: bd-icon-in .7s ease both; } /* Cascade : 1 s de décalage entre chaque icône */ /* line 169, ../scss/_animations.scss */ .bd-reveal.in-view .bd-actor:nth-child(1) img, .bd-reveal.in-view .bd-promise:nth-child(1) img { animation-delay: 0s; } /* line 171, ../scss/_animations.scss */ .bd-reveal.in-view .bd-actor:nth-child(2) img, .bd-reveal.in-view .bd-promise:nth-child(2) img { animation-delay: 1s; } /* line 173, ../scss/_animations.scss */ .bd-reveal.in-view .bd-actor:nth-child(3) img, .bd-reveal.in-view .bd-promise:nth-child(3) img { animation-delay: 2s; } /* line 175, ../scss/_animations.scss */ .bd-reveal.in-view .bd-actor:nth-child(4) img { animation-delay: 3s; } } /* line 178, ../scss/_animations.scss */ .has_pictogram > img, img.is_pictogram { transition: all ease-in-out 0.3s; } /* line 180, ../scss/_animations.scss */ .has_pictogram > img:hover, img.is_pictogram:hover { transform: scale(0.8); } /* ========================================================================== Pied de brochure — coordonnées des sites + logo + mention qualité ========================================================================== */ /* line 4, ../scss/_footer.scss */ .bd-footer { padding-top: 1rem; padding-bottom: 2rem; background: #fff; border-top: 2px solid var(--aftec-red); font-size: .88rem; } /* line 7, ../scss/_footer.scss */ .bd-footer h5 { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--aftec-red); } /* line 8, ../scss/_footer.scss */ .bd-footer a { color: var(--aftec-ink); text-decoration: none; font-weight: 600; } /* line 9, ../scss/_footer.scss */ .bd-footer a:hover { color: var(--aftec-red); } /* line 10, ../scss/_footer.scss */ .bd-footer .certif { font-size: .72rem; color: var(--aftec-gray); } /* line 12, ../scss/_footer.scss */ .bd-footer > .container-xl > .row * { margin-top: 0.5rem; } /* line 13, ../scss/_footer.scss */ .bd-footer > .container-xl > .row .col-12:last-of-type { margin-top: 0; } @media (max-width: 992px) { /* line 3, ../scss/_mobile.scss */ .bd-cover__photo { min-height: 92svh; } /* line 4, ../scss/_mobile.scss */ .bd-actor { font-size: .75rem; line-height: 1.4; } /* line 6, ../scss/_mobile.scss */ .bd-divider { min-height: calc(100svh - 2rem); } /* line 9, ../scss/_mobile.scss */ .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 3rem; } /* line 16, ../scss/_mobile.scss */ section#liste-annexes { padding-bottom: 20vh; background-size: 30vh auto; } /* line 21, ../scss/_mobile.scss */ section#annexes { background-size: auto 40%; } /* line 25, ../scss/_mobile.scss */ .bd-route__lane { align-items: flex-start; } /* line 26, ../scss/_mobile.scss */ .bd-route__badge { position: absolute; right: 0; } /* line 29, ../scss/_mobile.scss */ .bd-route__card:hover { transform: translateY(0); transform: translateX(1rem); } /* line 36, ../scss/_mobile.scss */ nav.bd-nav { position: fixed; bottom: 0; left: 0; top: inherit; height: 2.5rem; min-height: 0; /* annule le min-height: var(--nav-h) de .bd-nav */ width: 100%; z-index: 9999; /* neutralise le style inline */ } /* line 45, ../scss/_mobile.scss */ nav.bd-nav > .container-fluid { min-height: 2.5rem !important; } /* line 46, ../scss/_mobile.scss */ nav.bd-nav .link-annexes { padding: 0.75rem; font-size: 1.8em; } /* réserve la hauteur de la nav fixe en bas, sinon elle recouvre le contenu */ /* line 51, ../scss/_mobile.scss */ body { padding-bottom: 2.5rem; } /* line 53, ../scss/_mobile.scss */ .bd-footer .logo_footer { float: left; margin-right: 1.5rem; } /* line 56, ../scss/_mobile.scss */ .bd-route__phase .element_deco.elmnt5 { display: none; } }