/** * SYSTÈME DE DESIGN EPARKÉÔ — v3 (2026-09-09) * ====================================================================== * Portage du design V3.4 (docs/references/design-lab-v3/v3-4/) — direction visuelle validée, * plus aucune décision artistique prise ici. Remplace intégralement le système "v2" (Fraunces/ * Newsreader/Inter, damier hexagonal, cartes blanches arrondies systématiques, ombres SaaS, * boutons pilule, filtres sépia) par la charte à 6 couleurs et les composants du laboratoire. * * Polices auto-hébergées localement (DM Serif Display et Source Sans 3, licence SIL OFL — voir * ../fonts/licenses/), aucune police distante, aucun appel vers fonts.googleapis.com ni * fonts.gstatic.com. Choix d'Axel du 2026-10-12 (essai C) : titres en serif d'affichage, sous-titres dans son italique, texte neutre et lisible. */ /* ---- @font-face : polices du site (mêmes déclarations dans polices.css pour les écrans hors thème) ---- */ @font-face { font-family: 'DM Serif Display'; src: url('../fonts/dm-serif-display/DMSerifDisplay-Regular.woff2') format('woff2'); font-weight: 100 900; /* un seul poids réel (400) : la plage empêche le navigateur de fabriquer un faux gras */ font-style: normal; font-display: swap; } @font-face { font-family: 'DM Serif Display'; src: url('../fonts/dm-serif-display/DMSerifDisplay-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3/SourceSans3-VF.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; size-adjust: 106%; /* hauteur d'x un peu plus petite que l'ancienne police de texte : on compense pour garder les mêmes tailles lisibles */ } @font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3/SourceSans3-Italic-VF.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; size-adjust: 106%; } /* ---- Tokens — palette exclusive à 6 couleurs (aucune autre teinte hex active sans justification technique documentée ; voir chaque usage de rgba() ci-dessous, toujours dérivé d'un de ces 6 tokens, jamais une 7ᵉ teinte). ---- */ :root { --ep-brown: #544330; /* Audit V1 point 3 — texte "secondaire" (paragraphes de lecture, légendes, étiquettes de statut) sur fond clair. Remplace les anciennes réductions par opacity (.6 à .9) sur var(--ep-brown), fragiles car leur contraste dépend du fond derrière (échoue carrément sur certaines : .65 = 3.25:1, .7 = 3.64:1, bien sous le minimum WCAG AA 4.5:1). Couleur pleine, garantie ≥ 6,7:1 sur --ep-warm-gray et ≥ 8,4:1 sur blanc, quel que soit le fond où la classe est réutilisée par la suite. */ --ep-brown-attenue: #5C4A36; --ep-warm-gray: #EBE5D5; --ep-caramel: #A57142; --ep-salmon: #FABD93; --ep-white: #FFFFFF; --ep-black: #000000; /* Rôles des polices (les noms de variables sont ceux de l'ancien système, conservés pour ne pas toucher chaque règle) : --ep-f-cabinet = texte et interface ; --ep-f-titres et --ep-f-chillax = titres, chiffres, prix ; --ep-f-stardom = sous-titres (italique de la police des titres). */ --ep-f-cabinet: 'Source Sans 3', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --ep-f-titres: 'DM Serif Display', Georgia, 'Times New Roman', serif; --ep-f-chillax: 'DM Serif Display', Georgia, 'Times New Roman', serif; --ep-f-stardom: 'DM Serif Display', Georgia, 'Times New Roman', serif; /* toujours utilisée en italique */ /* Tailles fluides */ --ep-h1: clamp(2.4rem, 4.5vw, 4rem); --ep-h2: clamp(1.8rem, 2.6vw, 2.6rem); --ep-h3: clamp(1.4rem, 2vw, 1.9rem); --ep-body-lg: clamp(17px, 1.4vw, 19px); /* Espaces / largeurs de conteneur */ --ep-max-width: 1320px; --ep-max-width-hero: 1600px; --ep-pad-desktop: 64px; --ep-pad-tablet: 40px; --ep-pad-mobile: 20px; --ep-space-section: 88px; --ep-space-section-grande: 120px; --ep-space-section-serre: 56px; /* Bordures — un seul rayon "doux" (composants ponctuels), sinon carré */ --ep-radius: 4px; --ep-radius-panel: 8px; /* z-index */ --ep-z-header: 50; --ep-z-citation-mini: 55; --ep-z-dropdown: 60; --ep-z-mobile-nav: 100; --ep-z-consentement: 110; /* Durées / courbes — un seul système, réutilisé partout */ --ep-ease: cubic-bezier(0.22, 1, 0.36, 1); --ep-dur-reveal: 650ms; --ep-dur-filet: 700ms; --ep-dur-hero-photo: 900ms; --ep-dur-link: 300ms; --ep-dur-hover-photo: 500ms; /* Mission 4, Ajout A — halo du hero : courbe douce type "ease-in-out sine" (cf. animejs.com/ documentation/easings/built-in-eases, principe repris — aucun code Pro copié), et une seule valeur d'opacité pour les deux nappes, ajustable entre .12 et .20 après observation réelle. */ --ep-ease-halo: cubic-bezier(0.45, 0, 0.55, 1); --ep-halo-opacity: .16; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 104px; } /* Fiches avec sommaire d'ancres sticky (Mission 6 §9) : marge de défilement augmentée pour que le titre de la section visée reste visible sous le header + le sous-menu. */ html:has(.ep-sommaire-ancres) { scroll-padding-top: 152px; } /* Pied de page collé au bas de la fenêtre sur les pages courtes (Mission 3D, §6 "États courts, erreur et page vide") : structure flex sur toute la hauteur du viewport, jamais une position fixe (qui masquerait du contenu sur une page longue) —
absorbe l'espace restant, le header (sticky) et le footer gardent leur comportement normal dans le flux. */ html, body { min-height: 100%; } body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; font-family: var(--ep-f-cabinet); font-weight: 400; color: var(--ep-brown); background: var(--ep-white); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body > main { flex: 1 0 auto; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2.5px solid var(--ep-caramel); outline-offset: 3px; } @media (max-width: 640px) { body { font-size: 17px; } } /* ---- Curseur accompagnateur — Mission 5, §E. Décor en position:fixed, pointer-events:none : ne capte aucun clic, n'altère aucune zone cliquable. Le curseur système reste toujours affiché (jamais cursor:none). Créé et piloté par main.js uniquement si pointeur fin, hors tactile, hors mouvement réduit, hors pages inscription/paiement/reçu. ---- */ .ep-curseur { position: fixed; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ep-caramel); background: rgba(165, 113, 66, .06); pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .25s var(--ep-ease), width .22s var(--ep-ease), height .22s var(--ep-ease), background .22s var(--ep-ease); will-change: transform; } .ep-curseur.is-visible { opacity: 1; } .ep-curseur.is-large { width: 52px; height: 52px; background: rgba(165, 113, 66, .12); } .ep-curseur.is-clic { background: rgba(165, 113, 66, .2); } .ep-curseur.is-cache { opacity: 0; } @media (prefers-reduced-motion: reduce) { .ep-curseur { display: none !important; } } html.ep-motion-reduced .ep-curseur { display: none !important; } /* Mission 5 §K : parcours contractuel et pages juridiques — aucun curseur d'accompagnement (le JS ne le crée déjà pas sur .ep-page-nue ; garde-fou si le script échoue). */ body.ep-page-nue .ep-curseur { display: none !important; } .ep-wrap { max-width: var(--ep-max-width); margin: 0 auto; padding: 0 var(--ep-pad-desktop); } @media (max-width: 1024px) { .ep-wrap { padding: 0 var(--ep-pad-tablet); } } @media (max-width: 640px) { .ep-wrap { padding: 0 var(--ep-pad-mobile); } } /* ---- Échelle typographique ---- */ h1, .ep-h1 { letter-spacing: -0.01em; font-family: var(--ep-f-titres); font-weight: 400; font-size: var(--ep-h1); line-height: 1.08; margin: 0; color: var(--ep-brown); } h2, .ep-h2 { letter-spacing: -0.005em; font-family: var(--ep-f-titres); font-weight: 400; font-size: var(--ep-h2); line-height: 1.1; margin: 0; color: var(--ep-brown); } h3, .ep-h3 { font-family: var(--ep-f-titres); font-weight: 400; font-size: var(--ep-h3); line-height: 1.2; margin: 0; color: var(--ep-brown); } /* Mots mis en valeur dans un titre (retour Axel 2026-10-06) : = Bold Italic, = Extra Bold, = Extra Bold Italic. Texte inchangé, seule la graisse ou l'inclinaison du mot change. */ h1 em, h2 em, h3 em, .ep-h1 em, .ep-h2 em, .ep-h3 em { font-style: italic; font-weight: 400; } h1 strong, h2 strong, h3 strong, .ep-h1 strong, .ep-h2 strong, .ep-h3 strong { font-weight: 400; } h1 strong em, h2 strong em, h3 strong em, h1 em strong, h2 em strong, h3 em strong { font-style: italic; font-weight: 400; } /* Retour Axel, 2026-09-30 : mots/signes de ponctuation isolés en fin de ligne (« veuves »), remontés sur plusieurs blocs de texte. text-wrap:pretty rééquilibre les dernières lignes d'un paragraphe pour éviter qu'un seul mot s'y retrouve ; text-wrap:balance fait de même sur les titres courts. Pur repli progressif : sur un navigateur qui ne le connaît pas encore, le texte s'affiche exactement comme avant, sans aucune régression. Ne remplace pas les espaces insécables déjà nécessaires au cas par cas (ex. avant un « ? » isolé) — les deux se cumulent. */ p, li, blockquote, dd, figcaption { text-wrap: pretty; } h1, h2, h3, .ep-h1, .ep-h2, .ep-h3, .ep-hero-title, .ep-hero__title { text-wrap: balance; } .ep-eyebrow { font-family: var(--ep-f-stardom); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--ep-brown); } .ep-stardom { font-family: var(--ep-f-stardom); font-style: italic; font-weight: 400; } /* Un nom de personne ne se coupe jamais en fin de ligne (classe posée par inc/lisibilite.php). */ .ep-nom { white-space: nowrap; } /* Les retours à la ligne saisis dans les descriptions de formation sont respectés. */ .ep-formation-card__desc, .ep-hero-intro { white-space: pre-line; } /* Petits textes d'accent (légendes, citations courtes, avis) : italique du texte, plus lisible que l'écriture manuscrite à petite taille. */ .ep-hero__legende .ep-stardom { font-family: var(--ep-f-stardom); font-style: italic; font-weight: 400; font-size: 17px; } .ep-info-petite { font-size: 15px; } @media (max-width: 640px) { .ep-info-petite { font-size: 14px; } } /* ---- Boutons — rectangulaires (rayon 4px), jamais de pilule. Palette stricte : noir/blanc selon contraste, saumon réservé aux zones claires (jamais sur fond brun, §3/§5 du brief). ---- */ .ep-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 16px; padding: 18px 26px; border-radius: var(--ep-radius); border: 1px solid transparent; cursor: pointer; transition: background .15s var(--ep-ease), color .15s var(--ep-ease); } .ep-btn svg { width: 15px; height: 15px; flex-shrink: 0; } .ep-btn--primary { background: var(--ep-black); color: var(--ep-white); } .ep-btn--primary:hover { background: var(--ep-brown); } .ep-btn--outline { background: transparent; color: var(--ep-brown); border-color: var(--ep-brown); } .ep-btn--outline:hover { background: var(--ep-brown); color: var(--ep-white); } /* Bouton blanc sur fond brun (CTA entreprise) — jamais de saumon sur brun. */ .ep-btn--blanc { background: var(--ep-white); color: var(--ep-brown); } .ep-btn--blanc:hover, .ep-btn--blanc:focus-visible { background: var(--ep-warm-gray); } .ep-btn:disabled, .ep-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .ep-lien-filet { position: relative; font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 16px; padding-bottom: 3px; } .ep-lien-filet::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ep-caramel); transform: scaleX(0); transform-origin: left; transition: transform var(--ep-dur-link) var(--ep-ease); } .ep-lien-filet:hover::after, .ep-lien-filet:focus-visible::after { transform: scaleX(1); } /* ---- Header ---- */ .ep-site-header { background: var(--ep-white); border-bottom: 1px solid var(--ep-warm-gray); position: sticky; top: 0; z-index: var(--ep-z-header); } .ep-site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 88px; } .ep-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .ep-brand svg { width: 40px; height: 40px; flex-shrink: 0; color: var(--ep-brown); } .ep-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .ep-brand-text .ep-eyebrow { font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; } .ep-brand-text .ep-name { font-family: var(--ep-f-chillax); font-weight: 400; font-size: 22px; color: var(--ep-brown); } /* Logo personnalisé (correction ciblée du header, 2026-09-11) — the_custom_logo() rend son propre lien .custom-logo-link ; .ep-site-header__logo (le
, cf. header.php) ne l'enveloppe plus dans une seconde ancre, donc l'image est un vrai descendant et ces règles s'appliquent. Proportions conservées (max-width/max-height seuls, pas de largeur/hauteur fixe), centré verticalement par .ep-site-header__inner (align-items:center) et aligné à gauche par le padding de .ep-wrap — aucun décalage supplémentaire ici. Remplace le bloc provisoire du CSS additionnel WordPress (Personnaliser) ciblant .custom-logo-link / img.custom-logo : à retirer une fois ces règles déployées (voir handoff). */ .ep-site-header__logo .custom-logo-link { display: inline-flex; align-items: center; } .ep-site-header__logo img, .ep-site-header__logo .custom-logo { display: block; width: auto; height: auto; max-width: 170px; max-height: 66px; object-fit: contain; } @media (max-width: 640px) { .ep-site-header__logo img, .ep-site-header__logo .custom-logo { max-width: 130px; max-height: 54px; } } /* Nav — 6 entrées réparties dans l'espace restant après le logo, espacements équilibrés (correction ciblée du header, 2026-09-11). .ep-header-actions a été retiré (plus de bouton d'actions dans le header, cf. header.php). */ .ep-site-header__nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin-left: clamp(32px, 5vw, 72px); } .ep-site-header__nav ul { list-style: none; display: flex; flex: 1; flex-wrap: nowrap; justify-content: space-between; gap: 20px; margin: 0; padding: 0; align-items: center; } .ep-navlink { position: relative; display: inline-block; white-space: nowrap; font-family: var(--ep-f-cabinet); font-size: 16px; color: var(--ep-brown); padding-bottom: 4px; } .ep-navlink::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ep-caramel); transition: right var(--ep-dur-link) var(--ep-ease); } .ep-navlink:hover::after, .ep-navlink[aria-current="page"]::after { right: 0; } .ep-has-dropdown { position: relative; } .ep-dropdown-group { display: inline-flex; align-items: center; gap: 2px; } .ep-dropdown-btn { position: relative; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--ep-brown); height: 24px; padding: 0 6px; margin-bottom: 4px; } /* Hauteur ramenée à celle des autres entrées du menu (28 px avec la marge basse du lien) : l'ancien bouton de 32 px faisait remonter « Nos formations » de 2 px. La zone cliquable reste large. */ .ep-dropdown-btn::after { content: ''; position: absolute; inset: -8px -4px; } .ep-dropdown-btn svg { width: 11px; height: 11px; transition: transform .15s var(--ep-ease); } .ep-dropdown-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .ep-dropdown-panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--ep-white); border: 1px solid var(--ep-warm-gray); border-radius: var(--ep-radius-panel); padding: 10px; min-width: 300px; z-index: var(--ep-z-dropdown); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s var(--ep-ease), transform .16s var(--ep-ease), visibility 0s linear .16s; } .ep-dropdown-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity .16s var(--ep-ease), transform .16s var(--ep-ease); } /* Retour Axel, 2026-09-30 : les libellés de catégorie ("Agir pour les autres"...) avaient la même teinte brune atténuée que du texte secondaire ordinaire ailleurs sur le site, sans signal propre les distinguant des vrais liens cliquables juste en dessous. Couleur passée à --ep-caramel (l'accent déjà utilisé pour les liens/éléments actifs du site), qui les identifie comme des repères de navigation plutôt que du texte de lecture — cursor:default (déjà en place) confirme qu'ils ne sont pas cliquables. */ .ep-dropdown-cat { font-family: var(--ep-f-cabinet); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ep-caramel); padding: 14px 12px 4px; margin-top: 4px; border-top: 1px solid var(--ep-warm-gray); cursor: default; user-select: none; } .ep-dropdown-panel > .ep-dropdown-cat:first-child { border-top: 0; margin-top: 0; padding-top: 6px; } .ep-dropdown-panel a { display: block; padding: 8px 12px; border-radius: var(--ep-radius); color: var(--ep-brown); font-family: var(--ep-f-cabinet); font-size: 15px; } .ep-dropdown-panel a:hover { background: var(--ep-warm-gray); } .ep-dropdown-bientot { display: block; padding: 8px 12px; font-family: var(--ep-f-cabinet); font-size: 15px; color: var(--ep-brown-attenue); cursor: default; } .ep-dropdown-bientot em { font-style: italic; } .ep-li-icon { width: 20px; height: 20px; } .ep-burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .ep-burger svg { width: 26px; height: 26px; color: var(--ep-brown); } /* Clôture Mission 6 §3 : le menu horizontal compte désormais 6 entrées (ajout « Espace visio »). Bascule vers le menu bouton (burger) plus tôt — à 1120px — pour éviter tout repli/débordement des libellés sur les largeurs intermédiaires, sans réduire la taille de police (brief §3). */ @media (max-width: 1120px) { .ep-site-header__nav { display: none; } .ep-burger { display: inline-flex; } } /* ---- Menu mobile ---- */ .ep-mobile-nav { position: fixed; inset: 0; z-index: var(--ep-z-mobile-nav); background: var(--ep-white); padding: 24px var(--ep-pad-mobile); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s var(--ep-ease), visibility 0s linear .3s; } .ep-mobile-nav.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ep-ease); } .ep-mobile-nav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; } .ep-mobile-nav a { display: block; font-family: var(--ep-f-chillax); font-weight: 400; font-size: 22px; color: var(--ep-brown); padding: 14px 0; border-bottom: 1px solid var(--ep-warm-gray); } .ep-mobile-cat { font-family: var(--ep-f-cabinet); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ep-brown); margin-top: 16px; } .ep-mobile-nav a.ep-sub { font-family: var(--ep-f-cabinet); font-weight: 400; font-size: 17px; color: var(--ep-brown); padding: 9px 0 9px 12px; border-bottom: none; } /* ---- Mouvement — un seul système, un seul IntersectionObserver (voir main.js) ---- */ .ep-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--ep-dur-reveal) var(--ep-ease), transform var(--ep-dur-reveal) var(--ep-ease); } .ep-reveal.is-visible { opacity: 1; transform: translateY(0); } .ep-filet-anim { height: 1px; background: currentColor; opacity: .3; transform: scaleX(0); transform-origin: left; transition: transform var(--ep-dur-filet) var(--ep-ease); } .ep-filet-anim.is-visible { transform: scaleX(1); } .ep-seq-0 { transition-delay: 0ms; } .ep-seq-1 { transition-delay: 100ms; } .ep-seq-2 { transition-delay: 200ms; } .ep-photo { overflow: hidden; } .ep-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ep-dur-hover-photo) var(--ep-ease); } .ep-photo:hover img { transform: scale(1.02); } /* Cadre en arche — utilisé pour tous les portraits (formateurs, hero) */ .ep-arche { border-radius: 999px 999px 12px 12px; overflow: hidden; } /* Mouvement réduit — s'applique via la préférence système (@media, fonctionne sans JS) ET via la commande manuelle "Réduire les animations" (Mission 5 §L : classe .ep-motion-reduced posée sur par main.js, préférence conservée en localStorage sans identifiant de suivi). Les deux listes sont volontairement identiques. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ep-reveal { opacity: 1; transform: none; transition: none; } .ep-filet-anim { transform: scaleX(1); transition: none; } .ep-hero-photo-clip { clip-path: inset(0 0 0 0) !important; transition: none !important; } .ep-photo img, .ep-navlink::after, .ep-lien-filet::after, .ep-mobile-nav, .ep-dropdown-panel { transition: none !important; } .ep-hero__halo-blob, .ep-hero__constellation-points circle { animation: none !important; transform: none !important; } .ep-severine-triptyque > div { transition: none !important; opacity: 1 !important; transform: none !important; } .ep-formateur-card, .ep-media-carte, .ep-evenement-ligne, .ep-galerie-reseau__item { transition: none !important; } .ep-formateur-card:hover, .ep-formateur-card:focus-visible { transform: none !important; } .ep-evenement-ligne--avec-photo:hover .ep-evenement-ligne__polaroid { transform: rotate(var(--ep-tilt)) !important; } .ep-formateur-card::before { display: none !important; } .ep-formateur-card__nom::after, .ep-formateur-card__fleche { transition: none !important; } .ep-galerie-reseau__item:hover { transform: none !important; } .ep-logos-ruban__piste { animation: none !important; width: auto; } .ep-logos-ruban { -webkit-mask-image: none; mask-image: none; } .ep-logos-ruban__serie[aria-hidden="true"] { display: none; } } html.ep-motion-reduced { scroll-behavior: auto; } html.ep-motion-reduced .ep-reveal { opacity: 1; transform: none; transition: none; } html.ep-motion-reduced .ep-filet-anim { transform: scaleX(1); transition: none; } html.ep-motion-reduced .ep-hero-photo-clip { clip-path: inset(0 0 0 0) !important; transition: none !important; } html.ep-motion-reduced .ep-photo img, html.ep-motion-reduced .ep-navlink::after, html.ep-motion-reduced .ep-lien-filet::after, html.ep-motion-reduced .ep-mobile-nav, html.ep-motion-reduced .ep-dropdown-panel { transition: none !important; } html.ep-motion-reduced .ep-hero__halo-blob, html.ep-motion-reduced .ep-hero__constellation-points circle { animation: none !important; transform: none !important; } html.ep-motion-reduced .ep-severine-triptyque > div { transition: none !important; opacity: 1 !important; transform: none !important; } html.ep-motion-reduced .ep-formateur-card, html.ep-motion-reduced .ep-media-carte, html.ep-motion-reduced .ep-evenement-ligne, html.ep-motion-reduced .ep-galerie-reseau__item { transition: none !important; } html.ep-motion-reduced .ep-formateur-card:hover, html.ep-motion-reduced .ep-formateur-card:focus-visible { transform: none !important; } html.ep-motion-reduced .ep-evenement-ligne--avec-photo:hover .ep-evenement-ligne__polaroid { transform: rotate(var(--ep-tilt)) !important; } html.ep-motion-reduced .ep-formateur-card::before { display: none !important; } html.ep-motion-reduced .ep-formateur-card__nom::after, html.ep-motion-reduced .ep-formateur-card__fleche { transition: none !important; } html.ep-motion-reduced .ep-galerie-reseau__item:hover { transform: none !important; } html.ep-motion-reduced .ep-logos-ruban__piste { animation: none !important; width: auto; } html.ep-motion-reduced .ep-logos-ruban { -webkit-mask-image: none; mask-image: none; } html.ep-motion-reduced .ep-logos-ruban__serie[aria-hidden="true"] { display: none; } /* ========================================================================================= SECTIONS GÉNÉRIQUES ========================================================================================= */ .ep-section { padding-block: var(--ep-space-section); } .ep-section--grande { padding-block: var(--ep-space-section-grande); } /* Rythme resserré (retour Séverine, audit V1 point 13) : plusieurs .ep-section consécutives sur une même fiche (formation, formateur) — 88px puis 88px entre deux sections empile un vide de 176px, sans raison. --ep-space-section-serre (56px) réutilise une valeur déjà présente ailleurs dans main.css (pied de page, filet des axes), plutôt qu'une valeur inventée pour l'occasion. */ .ep-section--serre { padding-block: var(--ep-space-section-serre); } .ep-section--paper { background: var(--ep-warm-gray); } @media (max-width: 640px) { .ep-section { padding-block: 48px; } .ep-section--grande { padding-block: 64px; } .ep-section--serre { padding-block: 40px; } } .ep-section-title { text-align: center; margin: 0 0 14px; } .ep-section-lead { font-size: var(--ep-body-lg); color: var(--ep-brown-attenue); text-align: center; max-width: 640px; margin: 0 auto 40px; } /* ---- Hero simple (toutes les pages sauf l'accueil) — refonte compacte et épurée (2026-09-28). Gris chaud uni, eyebrow + titre + intro, filet fin en pied, petite arche caramel posée sur le filet (écho du portrait de l'accueil). Plus de voiles animés : décor statique, hauteur réduite. ---- */ .ep-hero { background: var(--ep-warm-gray); padding-block: 44px 40px; position: relative; overflow: hidden; border-bottom: 1px solid rgba(84, 67, 48, .16); } .ep-hero::after { content: ""; position: absolute; right: clamp(24px, 9vw, 160px); bottom: 0; width: 84px; height: 104px; border: 1px solid var(--ep-caramel); border-bottom: 0; border-radius: 999px 999px 0 0; opacity: .55; pointer-events: none; } .ep-hero .ep-wrap { max-width: var(--ep-max-width); position: relative; z-index: 1; } .ep-hero-eyebrow { margin-bottom: 12px; display: block; } .ep-hero .ep-hero-title { font-size: clamp(2.3rem, 4.2vw, 3.6rem); line-height: 1.05; } .ep-hero-title { margin: 0; } .ep-hero-intro { max-width: 60ch; margin: 14px 0 0; } .ep-fil-ariane { font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown-attenue); display: inline-block; margin-bottom: 20px; } .ep-fil-ariane:hover { color: var(--ep-brown); } /* Lien de retour du tunnel d'inscription (audit V1 point 13) : plus marqué qu'un fil d'Ariane ordinaire. */ .ep-retour-formation { margin: 0 0 8px; } .ep-retour-formation .ep-fil-ariane { font-size: 15px; font-weight: 700; color: var(--ep-brown); text-decoration: underline; text-underline-offset: 3px; margin-bottom: 12px; } @media (max-width: 640px) { .ep-hero { padding-block: 32px 28px; } .ep-hero::after { display: none; } } /* Hero compact : désormais le comportement par défaut de .ep-hero (audit V1 point 9 + refonte du 2026-09-28). */ .ep-hero + .ep-section { padding-top: 40px; } @media (max-width: 640px) { .ep-hero + .ep-section { padding-top: 28px; } } /* ---- Hero accueil — refonte « éditorial lumineux » (2026-09-28) ---- Fond gris chaud uni, portrait en arche posé sur un filet, texte en colonne, trois axes en pied. Remplace le fond « vivant » (halos flous + constellation) : décor générique, supprimé. Mouvement : entrée unique (opacité + 16px, arche révélée de bas en haut), aucune boucle. */ .ep-hero-accueil { background: var(--ep-warm-gray); overflow: hidden; --ep-ease-out: cubic-bezier(0.23, 1, 0.32, 1); } .ep-hero-accueil .ep-wrap { max-width: var(--ep-max-width-hero); padding: 0; } /* Vidéo d'ambiance (calque décoratif) : moitié droite, décalée vers la droite pour dégager Séverine, fondu à gauche (zone de lecture) et fondu en bas (masque les sous-titres incrustés dans la source), niveaux de gris fondus dans le gris chaud (multiply), opacité 20 %. Invisible tant qu'elle ne joue pas. */ .ep-hero-accueil { position: relative; } .ep-hero-accueil > .ep-wrap { position: relative; z-index: 1; } .ep-hero__video-fond { position: absolute; top: 0; right: -12%; bottom: 0; width: 68%; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1200ms var(--ep-ease-out); -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 55%), linear-gradient(to bottom, #000 0%, #000 62%, transparent 86%); -webkit-mask-composite: source-in; mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 55%), linear-gradient(to bottom, #000 0%, #000 62%, transparent 86%); mask-composite: intersect; } .ep-hero__video-fond.is-playing { opacity: .20; } .ep-hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(.9); mix-blend-mode: multiply; display: block; } @media (max-width: 767px), (prefers-reduced-motion: reduce) { .ep-hero__video-fond { display: none; } } html.ep-motion-reduced .ep-hero__video-fond { display: none; } .ep-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto; column-gap: clamp(32px, 5vw, 80px); min-height: clamp(560px, calc(100svh - 89px), 780px); padding: 0 clamp(48px, 7vw, 112px); } .ep-hero__texte { grid-column: 1; grid-row: 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start; padding-block: 48px; } .ep-hero__eyebrow { color: var(--ep-brown); margin-bottom: 20px; } .ep-hero__title { margin: 0; font-family: var(--ep-f-titres); font-weight: 400; font-size: clamp(4.8rem, 12vw, 12.5rem); line-height: .92; letter-spacing: -.025em; white-space: nowrap; color: var(--ep-brown); } .ep-hero__baseline { max-width: 26ch; margin: 28px 0 0; font-family: var(--ep-f-stardom); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 3rem); line-height: 1.15; color: var(--ep-brown); } .ep-hero__cta { margin-top: 40px; transition: background .15s var(--ep-ease), color .15s var(--ep-ease), transform 160ms var(--ep-ease-out); } .ep-hero__cta:active { transform: scale(0.97); } .ep-hero__cta svg { transition: transform 160ms var(--ep-ease-out); } @media (hover: hover) and (pointer: fine) { .ep-hero__cta:hover svg { transform: translateX(3px); } } /* Portrait : arche posée sur le filet des axes, contour caramel décalé derrière, légende dessous. */ .ep-hero__visual { grid-column: 2; grid-row: 1; align-self: stretch; justify-self: end; margin: 0; padding-top: 40px; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; min-height: 0; } /* Hauteur de l'arche calée sur la hauteur d'écran (hero visible d'un seul tenant), largeur déduite du ratio. */ .ep-hero__visual-inner { position: relative; flex: none; height: clamp(300px, calc(100svh - 350px), 480px); aspect-ratio: 4 / 5; max-width: 100%; } .ep-hero__visual-bg { position: absolute; inset: 0; transform: translate(20px, -20px); border: 1px solid var(--ep-caramel); border-radius: 999px 999px 0 0; z-index: 0; } .ep-hero__photo { position: relative; z-index: 1; width: 100%; height: 100%; } .ep-hero__photo .ep-arche { border-radius: 999px 999px 0 0; } .ep-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ep-hero__legende { margin: 16px 0 20px; font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown); text-align: right; } .ep-hero__legende strong { font-weight: 700; } .ep-hero__legende .ep-stardom { display: block; font-size: 14px; color: var(--ep-brown-attenue); margin-top: 2px; } /* Trois axes en pied de hero : filet fin + liens vers la section des axes. */ .ep-hero__axes { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 20px 0 24px; border-top: 1px solid rgba(84, 67, 48, .28); } .ep-hero__axes a { font-family: var(--ep-f-cabinet); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ep-brown); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .15s ease; } @media (hover: hover) and (pointer: fine) { .ep-hero__axes a:hover { border-bottom-color: var(--ep-caramel); } } /* Le clip-path vit sur l'enfant .ep-hero-photo-clip, jamais sur .ep-reveal-trigger (l'élément observé) — un clip-path sur la cible d'un IntersectionObserver participe à sa "clip chain" et empêcherait toute intersection positive (bug connu, voir historique du laboratoire V3.x). */ .ep-hero-photo-clip { width: 100%; height: 100%; clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--ep-ease-out) 120ms; } .ep-reveal-trigger.is-visible .ep-hero-photo-clip { clip-path: inset(0 0 0 0); } /* Cascade d'entrée (60 ms entre éléments), courbe ease-out forte, déplacement court. */ .ep-hero-accueil .ep-reveal { transform: translateY(16px); transition: opacity 560ms var(--ep-ease-out), transform 560ms var(--ep-ease-out); } .ep-hero-accueil .ep-reveal.is-visible { transform: none; } .ep-hero__title.ep-reveal { transition-delay: 60ms; } .ep-hero__baseline.ep-reveal { transition-delay: 120ms; } .ep-hero__cta.ep-reveal { transition-delay: 180ms; } .ep-hero__visual-bg.ep-reveal { transform: translate(20px, -20px) scale(.97); transition-delay: 300ms; } .ep-hero__visual-bg.ep-reveal.is-visible { transform: translate(20px, -20px); } .ep-hero__legende.ep-reveal { transition-delay: 420ms; } .ep-hero__axes.ep-reveal { transition-delay: 480ms; } @media (min-width: 768px) and (max-width: 1023px) { .ep-hero__grid { min-height: 560px; padding: 0 clamp(32px, 6vw, 64px); } .ep-hero__title { font-size: clamp(4.6rem, 10.5vw, 6.5rem); } .ep-hero__baseline { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .ep-hero__visual-bg { transform: translate(14px, -14px); } .ep-hero__visual-bg.ep-reveal, .ep-hero__visual-bg.ep-reveal.is-visible { transform: translate(14px, -14px); } } @media (max-width: 767px) { .ep-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: auto; padding: 0 var(--ep-pad-mobile); } .ep-hero__texte { grid-column: 1; grid-row: 1; align-self: start; padding-block: 40px 8px; } .ep-hero__title { font-size: clamp(4.2rem, 23vw, 6.5rem); } .ep-hero__baseline { margin-top: 20px; } .ep-hero__cta { margin-top: 28px; } .ep-hero__visual { grid-column: 1; grid-row: 2; justify-self: center; align-items: center; padding-top: 32px; width: 100%; } .ep-hero__visual-inner { flex: none; width: min(62%, 250px); height: auto; } .ep-hero__visual-bg, .ep-hero__visual-bg.ep-reveal, .ep-hero__visual-bg.ep-reveal.is-visible { transform: translate(12px, -12px); } .ep-hero__legende { text-align: center; } .ep-hero__axes { grid-row: 3; gap: 8px 24px; padding: 18px 0 22px; } .ep-hero__axes a { font-size: 12px; } } @media (max-width: 340px) { .ep-hero__title { white-space: normal; } } /* ---- Citation miniature sur le header (accueil uniquement) — retour Axel, 2026-09-30. Remplace le grand panneau .ep-citation-bande (retiré, point 2 de la mission précédente) : une bande fine se superpose PAR-DESSUS le header au chargement, la citation s'écrit en effet machine à écrire (JS, main.js), reste affichée un instant puis s'efface. position:fixed pour ne jamais décaler le contenu en dessous ; --ep-z-citation-mini au-dessus de --ep-z-header pour bien couvrir le header pendant l'animation. .is-terminee bascule l'opacité à 0 ; .is-masquee (posée après la transition) retire l'élément du flux d'accessibilité/pointeur une fois l'animation finie. */ /* Citation d'accueil (retour Axel 2026-09-30 puis 2026-10-05). Masquée tant que le JS ne l'a pas activée : si main.js manque ou échoue, aucune bande vide ne reste collée en haut. Jamais tronquée : la citation entière doit pouvoir se lire. - À partir de 1240 px : pastille d'une seule ligne centrée tout en haut, AU-DESSUS de la rangée du menu (le texte du menu commence à ~34 px, la pastille occupe 8 à ~34 px) : le menu et le logo restent visibles. - En dessous de 1240 px : une seule ligne ne tient plus, la pastille passe sous le header et se replie sur plusieurs lignes, sans rien masquer du menu. */ .ep-citation-mini { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: var(--ep-z-citation-mini); display: none; justify-content: center; align-items: center; width: max-content; max-width: min(92vw, 560px); padding: 8px 18px; border-radius: 16px; background: var(--ep-warm-gray); pointer-events: none; opacity: 1; transition: opacity 700ms var(--ep-ease); } .ep-citation-mini.is-active { display: flex; } .ep-citation-mini.is-terminee { opacity: 0; } .ep-citation-mini.is-masquee, .ep-citation-mini.is-active.is-masquee { display: none; } .ep-citation-mini__texte { margin: 0; max-width: 100%; font-family: var(--ep-f-stardom); font-style: italic; font-size: 14px; line-height: 1.4; color: var(--ep-brown); text-align: center; border-right: 1px solid var(--ep-caramel); padding-right: 4px; } .ep-citation-mini__texte.is-complete { border-right-color: transparent; } /* Barre d'administration WordPress (connecté) : la pastille se place dessous au lieu de passer derrière. */ body.admin-bar .ep-citation-mini { top: 128px; } @media (max-width: 782px) { body.admin-bar .ep-citation-mini { top: 142px; } } @media (max-width: 640px) { .ep-citation-mini__texte { font-size: 11.5px; } } @media (min-width: 1240px) { .ep-citation-mini { top: 8px; max-width: calc(100vw - 48px); padding: 5px 18px; border-radius: 999px; } .ep-citation-mini__texte { white-space: nowrap; font-size: 12px; } body.admin-bar .ep-citation-mini { top: 40px; } } /* ---- Trois axes ---- */ .ep-axes-layout { display: grid; grid-template-columns: minmax(0,34%) minmax(0,66%); gap: 56px; align-items: start; } .ep-axes-intro { position: sticky; top: 120px; } .ep-axes-intro h2 { text-align: left; margin-bottom: 20px; } .ep-axes-liste { display: flex; flex-direction: column; } .ep-axe { border-top: 1px solid var(--ep-caramel); padding-block: 56px; } .ep-axe--1, .ep-axe--2, .ep-axe--3 { padding: 40px; } /* Retour Séverine, point 3 (2026-09) : l'axe 1 n'avait aucun fond, en rupture avec les cartes pleines des axes 2 et 3 qui suivent. Fond ultra léger (color-mix, dérivé de --ep-caramel et --ep-white, aucune 7e teinte) pour amorcer une progression cohérente : à peine teinté (axe 1) -> gris chaud plein (axe 2) -> brun plein (axe 3), au lieu d'un saut brutal de "sans fond" à "fond plein". */ .ep-axe--1 { background: color-mix(in srgb, var(--ep-caramel) 8%, var(--ep-white) 92%); } .ep-axe--2 { background: var(--ep-warm-gray); } .ep-axe--3 { background: var(--ep-brown); color: var(--ep-white); } .ep-axe--3 h3 { color: var(--ep-white); } .ep-axe__num { display: block; margin-bottom: 14px; font-family: var(--ep-f-cabinet); font-weight: 100; font-size: 64px; line-height: 1; color: var(--ep-caramel); } .ep-axe--3 .ep-axe__num { color: rgba(255,255,255,.55); } .ep-axe__titre { margin-bottom: 14px; } .ep-axe__desc { max-width: 60ch; margin: 0 0 20px; } .ep-axe--3 .ep-axe__desc { color: rgba(255,255,255,.85); } .ep-axe-liste-formations { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ep-axe-liste-formations .ep-a-venir { font-style: italic; color: var(--ep-brown-attenue); } .ep-axe--3 .ep-axe-liste-formations a { color: var(--ep-white); } .ep-axe--3 .ep-axe-liste-formations .ep-a-venir { color: rgba(255,255,255,.7); } @media (max-width: 1024px) { .ep-axe__num { font-size: 54px; } } @media (max-width: 900px) { .ep-axes-layout { grid-template-columns: minmax(0,1fr); gap: 40px; } .ep-axes-intro { position: static; } .ep-axe, .ep-axe--2, .ep-axe--3 { padding: 32px 20px; } } @media (max-width: 640px) { .ep-axe__num { font-size: 44px; } } /* ---- Séverine (accueil) — sans photo dans cette section (le portrait reste dans le hero uniquement) : texte introductif sur blanc + panneau gris chaud (diplômes/triptyque). ---- */ .ep-severine-section { background: var(--ep-white); position: relative; overflow: hidden; } .ep-severine-layout { display: grid; grid-template-columns: minmax(0,28%) minmax(0,72%); gap: 40px; align-items: start; position: relative; } .ep-severine-col-left { border-left: 1px solid var(--ep-caramel); padding-left: 32px; } .ep-severine-col-left p { max-width: 46ch; margin: 20px 0 24px; } .ep-severine-panel { background: var(--ep-warm-gray); border-radius: var(--ep-radius-panel); padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden; } .ep-severine-deco-word { font-family: var(--ep-f-stardom); font-style: italic; font-weight: 400; font-size: clamp(70px, 8vw, 140px); color: var(--ep-brown); opacity: .1; line-height: 1; position: absolute; top: -6px; right: 12px; pointer-events: none; user-select: none; z-index: 0; } /* Triptyque Comprendre/Écouter/Transmettre — Mission 4, Ajout B : 3 panneaux de largeur égale, alignés en haut, jamais de hauteur fixe (le texte dicte la hauteur). Principe de composition repris de pro.reactbits.dev/docs/blocks/features/features-12 et features-10 (grille à panneaux, accent central) — implémentation originale ici, aucun code Pro utilisé. */ .ep-severine-triptyque { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: start; } .ep-severine-triptyque__panneau { padding: 32px; border-radius: var(--ep-radius); position: relative; overflow: hidden; } .ep-severine-triptyque__panneau--laterale { background: var(--ep-white); border: 1px solid var(--ep-warm-gray); } .ep-severine-triptyque__panneau--centrale { background: var(--ep-warm-gray); border: 1px solid rgba(165, 113, 66, .3); } /* Filet supérieur — vrai .ep-filet-anim (mécanisme existant, main.css/main.js), pas juste un border-top statique : se dessine de gauche à droite à l'apparition (voir override de durée ci-dessous, 650ms demandé pour ce composant précis). */ .ep-severine-triptyque__panneau .ep-filet-anim { position: absolute; top: 0; left: 32px; right: 32px; width: auto; background: var(--ep-caramel); opacity: .6; transition-duration: 650ms; } .ep-severine-triptyque h3 { font-size: 22px; margin: 12px 0 10px; } .ep-severine-triptyque__panneau:nth-child(2) { transition-delay: 80ms; } .ep-severine-triptyque__panneau:nth-child(3) { transition-delay: 160ms; } .ep-severine-triptyque__panneau:nth-child(2) .ep-filet-anim { transition-delay: 80ms; } .ep-severine-triptyque__panneau:nth-child(3) .ep-filet-anim { transition-delay: 160ms; } .ep-severine-qualifs { position: relative; z-index: 1; max-width: 60ch; margin: 0 0 32px; font-size: 15px; } /* Diplômes et accréditation : une rangée discrète sous le triptyque (filet fin, pas de cartes). */ .ep-severine-parcours { position: relative; z-index: 1; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(84, 67, 48, .2); } .ep-severine-parcours__liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; } .ep-severine-parcours__liste li { display: flex; flex-direction: column; gap: 4px; } .ep-severine-parcours__titre { font-family: var(--ep-f-titres); font-size: 17px; font-weight: 400; line-height: 1.3; color: var(--ep-brown); } .ep-severine-parcours__lieu { font-size: 14px; line-height: 1.4; opacity: .85; } @media (max-width: 1100px) { .ep-severine-parcours__liste { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 28px; } } @media (max-width: 900px) { .ep-severine-layout { grid-template-columns: minmax(0,1fr); gap: 32px; } .ep-severine-panel { padding: 28px 24px; } .ep-severine-deco-word { position: static; opacity: .1; font-size: 56px; margin-bottom: 12px; display: block; } } @media (max-width: 767px) { .ep-severine-triptyque { grid-template-columns: minmax(0,1fr); gap: 16px; } .ep-severine-parcours__liste { grid-template-columns: minmax(0,1fr); gap: 20px; } .ep-severine-triptyque__panneau { padding: 24px; } .ep-severine-triptyque__panneau .ep-filet-anim { left: 24px; right: 24px; } } /* ---- Communauté (Mission 6 §6) — mosaïque de 3 photos : visuel principal ~60 %, colonne secondaire ~40 % avec 2 photos empilées, écart 16px. Le conteneur porte l'aspect-ratio ; les images remplissent leur cadre en object-fit:cover (recadrage doux, jamais la moitié d'un groupe supprimée). ---- */ .ep-communaute-section { background: var(--ep-warm-gray); color: var(--ep-brown); } .ep-communaute-layout { display: grid; grid-template-columns: minmax(0,38%) minmax(0,62%); gap: 48px; align-items: center; } .ep-communaute-cta { margin-top: 26px; } .ep-communaute-mosaic-wrap { position: relative; } .ep-communaute-mosaic { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 16px; max-width: 560px; margin-left: auto; aspect-ratio: 7 / 5; } .ep-communaute-mosaic .ep-photo { border-radius: var(--ep-radius); height: 100%; overflow: hidden; } .ep-communaute-mosaic .ep-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ep-communaute-mosaic__a { grid-column: 1; grid-row: 1 / 3; } .ep-communaute-mosaic__b { grid-column: 2; grid-row: 1; } .ep-communaute-mosaic__c { grid-column: 2; grid-row: 2; } @media (max-width: 900px) { .ep-communaute-layout { grid-template-columns: minmax(0,1fr); gap: 32px; } /* Photo principale en pleine largeur, puis les deux secondaires côte à côte — aucune bande vide, aucune hauteur artificielle. */ .ep-communaute-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; max-width: 100%; margin: 0; aspect-ratio: auto; } .ep-communaute-mosaic__a { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 3 / 2; } .ep-communaute-mosaic__b { grid-column: 1; grid-row: 2; aspect-ratio: 1 / 1; } .ep-communaute-mosaic__c { grid-column: 2; grid-row: 2; aspect-ratio: 1 / 1; } } @media (max-width: 420px) { .ep-communaute-mosaic { grid-template-columns: 1fr; } .ep-communaute-mosaic__a { grid-column: 1; } .ep-communaute-mosaic__b, .ep-communaute-mosaic__c { grid-column: 1; aspect-ratio: 4 / 3; } .ep-communaute-mosaic__b { grid-row: 2; } .ep-communaute-mosaic__c { grid-row: 3; } } /* ---- Impact — aplat brun plein (plus de photo/overlay/filtre sépia), sans saumon. ---- */ .ep-impact-section { background: var(--ep-brown); color: var(--ep-white); min-height: 280px; display: flex; align-items: center; } .ep-impact-layout { display: grid; grid-template-columns: auto 1px minmax(0,1fr); gap: 40px; align-items: center; } .ep-impact-chiffre { font-family: var(--ep-f-titres); font-weight: 400; font-size: 72px; line-height: 1; color: var(--ep-white); white-space: nowrap; margin: 0; } .ep-impact-filet { width: 1px; height: 100%; min-height: 80px; background: var(--ep-white); opacity: .5; } .ep-impact-texte { max-width: 40ch; color: var(--ep-white); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; margin: 0; } @media (max-width: 1024px) { .ep-impact-chiffre { font-size: 60px; } } @media (max-width: 900px) { .ep-impact-section { min-height: auto; padding-block: 48px; } .ep-impact-layout { grid-template-columns: minmax(0,1fr); gap: 20px; text-align: left; } .ep-impact-filet { display: none; } } @media (max-width: 640px) { .ep-impact-chiffre { font-size: 44px; } } /* ---- Confiance / clients (Mission 5 §G) — 2 rubans qui défilent lentement en sens opposés. Piste = série réelle + copie aria-hidden ; translateX(-50%) = exactement une série, donc boucle sans couture. Pause au survol / focus / bouton. Titre inchangé ("Ils nous ont fait confiance"). La grille statique complète vit dans le
"Voir toutes les références". ---- */ .ep-logos { display: flex; flex-direction: column; gap: 18px; } .ep-logos-ruban { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .ep-logos-ruban::-webkit-scrollbar { display: none; } .ep-logos-ruban__piste { display: flex; width: max-content; animation: ep-logos-defile 64s linear infinite; } .ep-logos-ruban[data-sens="droite"] .ep-logos-ruban__piste { animation-direction: reverse; } .ep-logos-ruban:hover .ep-logos-ruban__piste, .ep-logos-ruban:focus-within .ep-logos-ruban__piste, .ep-logos.is-paused .ep-logos-ruban__piste { animation-play-state: paused; } @keyframes ep-logos-defile { to { transform: translateX(-50%); } } .ep-logos-ruban__serie { display: flex; gap: 16px; padding-right: 16px; flex: none; } .ep-logos-carte { flex: none; width: 206px; height: 118px; display: flex; align-items: center; justify-content: center; background: var(--ep-white); border: 1px solid var(--ep-warm-gray); border-radius: 12px; padding: 16px 22px; box-sizing: border-box; } .ep-logos-carte img { max-width: 150px; max-height: 58px; width: auto; height: auto; object-fit: contain; } .ep-logos-carte--texte span { font-family: var(--ep-f-cabinet); font-size: 14px; line-height: 1.3; text-align: center; color: var(--ep-brown); } .ep-logos-actions { margin-top: 16px; } .ep-logos-pause { background: none; border: 1px solid var(--ep-warm-gray); border-radius: var(--ep-radius); font-family: var(--ep-f-cabinet); font-size: 13px; color: var(--ep-brown); padding: 7px 16px; cursor: pointer; transition: background .15s var(--ep-ease); } .ep-logos-pause:hover, .ep-logos-pause:focus-visible { background: var(--ep-warm-gray); } .ep-logos-toutes { margin-top: 20px; } .ep-logos-toutes > summary { font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; } .ep-logos-toutes > summary:focus-visible { outline: 2px solid var(--ep-caramel); outline-offset: 3px; } .ep-logos-toutes[open] > summary { margin-bottom: 20px; } @media (max-width: 700px) { /* Défilement manuel avec accroche — pas d'animation, série unique. */ .ep-logos-ruban { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; } .ep-logos-ruban__piste { animation: none !important; width: auto; } .ep-logos-ruban__serie[aria-hidden="true"] { display: none; } .ep-logos-carte { scroll-snap-align: start; width: 168px; height: 104px; } .ep-logos-carte img { max-width: 122px; max-height: 48px; } /* Défilement manuel : le bouton pause n'a plus d'objet. */ .ep-logos-actions { display: none; } } /* ---- Grille statique complète (dans le
) — logos et texte traités identiquement. ---- */ .ep-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--ep-warm-gray); border-left: 1px solid var(--ep-warm-gray); } .ep-trust-chip { border-right: 1px solid var(--ep-warm-gray); border-bottom: 1px solid var(--ep-warm-gray); display: flex; align-items: center; justify-content: center; padding: 24px 32px; min-height: 168px; } .ep-trust-chip img { max-width: min(72%, 190px); max-height: 78px; width: auto; height: auto; object-fit: contain; } .ep-trust-chip--compact img { max-height: 88px; } .ep-trust-chip span { font-family: var(--ep-f-cabinet); font-size: 15px; text-align: center; color: var(--ep-brown); } @media (max-width: 900px) and (min-width: 361px) { .ep-trust-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .ep-trust-chip { min-height: 130px; padding: 16px 20px; } .ep-trust-chip img { max-width: 160px; max-height: 64px; } .ep-trust-chip--compact img { max-height: 64px; } } @media (max-width: 360px) { .ep-trust-grid { grid-template-columns: minmax(0,1fr); } } /* ---- CTA finaux (accueil + fin de catalogue) ---- */ .ep-cta-finaux { background: var(--ep-white); padding-top: 0; padding-bottom: 0; } .ep-cta-finaux:has(.ep-cta-bloc--entreprise) { padding-bottom: 16px; } .ep-cta-finaux__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; } .ep-cta-bloc { padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 56px); } .ep-cta-bloc--formations { background: var(--ep-warm-gray); color: var(--ep-brown); } .ep-cta-bloc--formations h2 { color: var(--ep-brown); } .ep-cta-bloc--entreprise { background: var(--ep-brown); color: var(--ep-white); } .ep-cta-bloc--entreprise h2 { color: var(--ep-white); } .ep-cta-bloc p { max-width: 42ch; margin: 20px 0 32px; } .ep-cta-bloc--entreprise p { color: rgba(255,255,255,.85); } .ep-cta-bloc__mail { display: block; margin-top: 20px; font-family: var(--ep-f-cabinet); font-size: 15px; } .ep-cta-bloc--entreprise .ep-cta-bloc__mail { color: rgba(255,255,255,.85); } .ep-cta-bloc--formations .ep-cta-bloc__mail { color: var(--ep-brown); } @media (max-width: 900px) { .ep-cta-finaux__grid { grid-template-columns: minmax(0,1fr); } } /* CTA final du catalogue uniquement (Mission 3E §2) — jamais appliqué à .ep-cta-bloc seul, qui reste utilisé tel quel sur l'accueil déjà validé (hors périmètre). */ .ep-cta-bloc--split { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: center; } .ep-cta-bloc--split p { margin: 20px 0 0; } .ep-cta-bloc--pleine { grid-template-columns: minmax(0,1fr); gap: 28px; background: transparent; max-width: 640px; margin: 0 auto; padding: 0; border-radius: 0; text-align: left; } .ep-cta-bloc--pleine p { max-width: 56ch; } .ep-cta-finaux:has(.ep-cta-bloc--pleine) { padding-block: clamp(56px, 7vw, 96px); } .ep-cta-bloc--split .ep-cta-bloc__action { display: flex; flex-direction: column; align-items: flex-start; } @media (max-width: 900px) { .ep-cta-bloc--split { grid-template-columns: minmax(0,1fr); gap: 24px; } } /* Boîte "entreprise/journaliste" générique (contact) — même famille visuelle que .ep-cta-bloc, fond gris chaud, jamais de saumon. */ .ep-boite-info { background: var(--ep-warm-gray); padding: clamp(40px, 6vw, 56px); border-radius: var(--ep-radius); } .ep-boite-info h2 { margin-bottom: 12px; } .ep-boite-info p { max-width: 60ch; margin: 0 0 24px; } .ep-boite-info .ep-entreprise-contact { margin-top: 20px; font-size: 15px; } .ep-boite-info .ep-entreprise-contact a { color: var(--ep-brown); font-weight: 700; text-decoration: underline; } /* Bloc journaliste — volontairement secondaire : plus étroit, moins de padding (Mission 6 §15). Clôture Mission 6 §2 : centré horizontalement dans .ep-wrap (margin auto), largeur maîtrisée, paragraphes alignés à gauche pour la lecture. N'est pas dans la grille 2 colonnes ci-dessous. */ .ep-boite-info--secondaire { max-width: 640px; margin-left: auto; margin-right: auto; padding: clamp(28px, 4vw, 40px); text-align: left; } /* Contact — canaux. Retour Séverine, point 21 (2026-09) : particulier et entreprise ne sont plus deux panneaux côte à côte (la FAQ et le bloc journaliste s'intercalent maintenant entre eux dans le nouvel ordre demandé) — .ep-contact-canaux (grille 2 colonnes) est donc retiré, chaque panneau devient autonome via .ep-contact-panneau-solo, centré comme .ep-boite-info--secondaire. Journaliste reste .ep-boite-info--secondaire, inchangé. */ .ep-contact-panneau { display: flex; flex-direction: column; background: var(--ep-warm-gray); border-radius: var(--ep-radius); padding: clamp(28px, 4vw, 44px); } .ep-contact-panneau-solo { max-width: 640px; margin-left: auto; margin-right: auto; } .ep-contact-panneau--entreprise { background: var(--ep-brown); color: var(--ep-white); } .ep-contact-panneau--entreprise h2, .ep-contact-panneau--entreprise p { color: var(--ep-white); } .ep-contact-panneau__filet { display: block; width: 48px; margin-bottom: 16px; color: var(--ep-caramel); } .ep-contact-panneau--entreprise .ep-contact-panneau__filet { color: var(--ep-salmon); } .ep-contact-panneau h2 { margin: 0 0 12px; } .ep-contact-panneau > p { max-width: 46ch; margin: 0 0 24px; } .ep-contact-panneau__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Trois panneaux côte à côte (contact, retour Axel 2026-10-05) : colonnes de même hauteur, boutons en bas de panneau ; une colonne sous 1024 px. Le haut de la section est collé à la FAQ (pas de double espacement 56 + 56). */ .ep-section--contact-trio { padding-top: 0; } .ep-contact-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .ep-contact-trio .ep-contact-panneau { padding: clamp(24px, 2.4vw, 32px); } .ep-contact-trio .ep-contact-panneau h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; } .ep-contact-trio .ep-contact-panneau > p { max-width: none; } .ep-contact-trio .ep-contact-panneau__actions { margin-top: auto; } .ep-contact-trio .ep-contact-panneau__note { margin-top: auto; } @media (max-width: 1023px) { .ep-contact-trio { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; } } .ep-contact-panneau--entreprise .ep-btn--primary { background: var(--ep-white); color: var(--ep-brown); } .ep-contact-panneau--entreprise .ep-btn--primary:hover, .ep-contact-panneau--entreprise .ep-btn--primary:focus-visible { background: var(--ep-warm-gray); } .ep-contact-panneau__note { font-family: var(--ep-f-cabinet); font-size: 14px; margin: 16px 0 0; opacity: .9; } .ep-contact-panneau__note a { color: inherit; font-weight: 700; text-decoration: underline; } /* ---- Conteneur de lecture (mentions légales, CGV, page générique) — Mission 3D §6 : démarre à la même grille que le titre du hero (même .ep-wrap, pas de max-width isolé qui décale le corps vers le centre), largeur de lecture maîtrisée, jamais étiré sur tout l'écran. ---- */ .ep-lecture { max-width: 70ch; margin: 0; text-align: left; font-size: 17px; line-height: 1.7; color: var(--ep-brown); } .ep-lecture h2 { font-family: var(--ep-f-titres); font-weight: 400; font-size: clamp(22px, 2vw, 30px); margin: 40px 0 14px; } .ep-lecture h2:first-child { margin-top: 0; } .ep-lecture h3 { font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 18px; margin: 28px 0 10px; } .ep-lecture p { margin: 0 0 18px; } .ep-lecture ul, .ep-lecture ol { margin: 0 0 18px; padding-left: 1.4em; } .ep-lecture li { margin-bottom: 8px; line-height: 1.6; } .ep-lecture a:not(.ep-btn) { color: var(--ep-caramel); text-decoration: underline; text-underline-offset: 2px; } .ep-lecture img { border-radius: var(--ep-radius); margin: 8px 0 20px; } @media (max-width: 640px) { .ep-lecture h2 { font-size: clamp(21px, 5vw, 25px); } } /* ---- Footer ---- */ .ep-site-footer { background: var(--ep-brown); color: var(--ep-white); padding-block: 56px; border-top: 2px solid var(--ep-white); } .ep-site-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; align-items: center; } .ep-site-footer .ep-name { font-family: var(--ep-f-chillax); font-weight: 400; font-size: 20px; color: var(--ep-white); } .ep-site-footer nav { display: flex; gap: 28px; } .ep-site-footer a { font-family: var(--ep-f-cabinet); font-size: 15px; color: var(--ep-white); } .ep-site-footer__copy { font-size: 14px; color: rgba(255,255,255,.7); margin: 0; } /* Regroupe le copyright et la commande d'animation (correction ciblée du header, 2026-09-11) — remplace l'unique

comme dernier enfant de __inner, même position (aligné à droite en desktop). */ .ep-site-footer__fin { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } @media (max-width: 640px) { .ep-site-footer__inner { flex-direction: column; text-align: center; gap: 16px; } .ep-site-footer__fin { align-items: center; } } /* ========================================================================================= CATALOGUE / FICHE FORMATION ========================================================================================= */ .ep-catalogue-intro { font-size: var(--ep-body-lg); color: var(--ep-brown-attenue); max-width: 60ch; } .ep-catalogue-categorie { margin: 0 0 16px; } /* Catalogue en cartes (retour Axel 2026-10-08) : plusieurs formations d'une même catégorie sont présentées sur 3 colonnes, au même niveau. Une catégorie qui n'en a qu'une ou deux garde la même largeur de carte, alignée à gauche. La carte n'est pas un global : le bouton porte un ::after étiré qui rend toute la carte cliquable sans ancre imbriquée. */ .ep-formation-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: stretch; } .ep-formation-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 26px; background: var(--ep-warm-gray); border-radius: var(--ep-radius); transition: box-shadow .18s var(--ep-ease), opacity var(--ep-dur-reveal) var(--ep-ease), transform var(--ep-dur-reveal) var(--ep-ease); } .ep-section--paper .ep-formation-card { background: var(--ep-white); } /* Une seule formation dans un axe (ex. Devenir formateur, classe posée par archive-formation.php) : la carte occupe toute la largeur, texte à gauche, tarif et bouton à droite. */ .ep-formation-grid--seule > .ep-formation-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titre meta" "desc cta"; column-gap: 56px; row-gap: 12px; align-items: start; padding: 32px 36px; } .ep-formation-grid--seule > .ep-formation-card .ep-formation-card__titre { grid-area: titre; } .ep-formation-grid--seule > .ep-formation-card .ep-formation-card__desc { grid-area: desc; max-width: 72ch; } .ep-formation-grid--seule > .ep-formation-card .ep-formation-card__meta { grid-area: meta; margin-top: 0; padding-top: 0; align-items: flex-end; text-align: right; } .ep-formation-grid--seule > .ep-formation-card .ep-formation-card__cta { grid-area: cta; justify-self: end; align-self: end; } @media (max-width: 767px) { .ep-formation-grid--seule > .ep-formation-card { display: flex; flex-direction: column; padding: 28px 28px 26px; gap: 14px; } .ep-formation-grid--seule > .ep-formation-card .ep-formation-card__meta { align-items: flex-start; text-align: left; margin-top: auto; padding-top: 6px; } } .ep-section--foncee .ep-formation-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); } @media (hover: hover) and (pointer: fine) { .ep-formation-card:hover { box-shadow: 0 6px 22px rgba(84,67,48,.14); } } .ep-formation-card:focus-within { box-shadow: 0 0 0 2px var(--ep-caramel); } .ep-formation-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 0; } .ep-formation-card__titre, .ep-formation-card__desc, .ep-formation-card__meta { position: relative; z-index: 1; } .ep-section--foncee .ep-formation-card__titre { color: var(--ep-white); } .ep-section--foncee .ep-formation-card__desc { color: rgba(255,255,255,.85); } .ep-section--foncee .ep-formation-card__duree { color: rgba(255,255,255,.75); } .ep-section--foncee .ep-catalogue-categorie { color: var(--ep-white); } .ep-formation-card__titre { font-family: var(--ep-f-titres); font-weight: 400; font-size: 25px; line-height: 1.15; margin: 0; color: var(--ep-brown); } .ep-formation-card__desc { font-family: var(--ep-f-cabinet); font-size: 16px; line-height: 1.6; color: var(--ep-brown-attenue); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .ep-formation-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: auto; padding-top: 6px; } .ep-formation-card__duree { font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown-attenue); } .ep-formation-card__prix { font-family: var(--ep-f-chillax); font-weight: 400; font-size: 18px; color: var(--ep-brown); } .ep-section--foncee .ep-formation-card__prix { color: var(--ep-white); } .ep-formation-card__cta { align-self: flex-start; padding: 13px 20px; font-size: 14.5px; white-space: nowrap; } .ep-section--foncee .ep-formation-card__cta { border-color: var(--ep-white); color: var(--ep-white); } .ep-section--foncee .ep-formation-card__cta:hover { background: var(--ep-white); color: var(--ep-brown); } /* Séquence d'apparition des cartes (même mécanisme .ep-reveal, décalage < 240ms). */ .ep-formation-card:nth-child(3n+1) { transition-delay: 0ms; } .ep-formation-card:nth-child(3n+2) { transition-delay: 70ms; } .ep-formation-card:nth-child(3n+3) { transition-delay: 140ms; } @media (max-width: 1023px) { .ep-formation-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .ep-formation-grid { grid-template-columns: minmax(0,1fr); } .ep-formation-card { padding: 24px 22px; } } /* Axe sans formation publiée (Mission 6 §5/§8) — description + liste à venir, jamais un lien. */ .ep-catalogue-axe-desc { font-family: var(--ep-f-cabinet); font-size: var(--ep-body-lg); line-height: 1.6; color: var(--ep-brown-attenue); max-width: 62ch; margin: 0 0 20px; } .ep-catalogue-a-venir { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ep-catalogue-a-venir li { font-family: var(--ep-f-cabinet); font-size: 16px; color: var(--ep-brown); display: flex; align-items: center; gap: 12px; } .ep-a-venir__tag { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; } .ep-section--foncee .ep-catalogue-axe-desc, .ep-section--foncee .ep-catalogue-a-venir li { color: rgba(255,255,255,.9); } /* CTA de fin d'axe sur l'accueil (Mission 6 §5) — sombre sur fond clair, clair sur fond brun. */ .ep-axe__cta { margin-top: 24px; background: var(--ep-black); color: var(--ep-white); } .ep-axe__cta:hover, .ep-axe__cta:focus-visible { background: var(--ep-brown); } .ep-axe--3 .ep-axe__cta { background: var(--ep-white); color: var(--ep-brown); } .ep-axe--3 .ep-axe__cta:hover, .ep-axe--3 .ep-axe__cta:focus-visible { background: var(--ep-warm-gray); } /* Sections cibles d'une ancre (Mission 6 §9) : apparition en fondu SEUL, jamais de translation verticale — sinon un accès direct par #fragment atterrit ~28px trop bas, puis la section « saute » quand l'IntersectionObserver la révèle. Vaut pour les fiches (Objectifs / Programme / Tarifs et sessions / Formateurs) comme pour les axes du catalogue. */ .ep-section[id].ep-reveal { transform: none; } .ep-section[id].ep-reveal.is-visible { transform: none; } .ep-fiche-voir-sessions { margin-top: 28px; padding: 13px 22px; font-size: 14.5px; } .ep-fiche-voir-sessions svg { width: 14px; height: 14px; } /* Sommaire d'ancres — Mission 3E §3, uniquement sur les fiches réellement longues (≥2 sections). Reste visible sous le header sticky (88px) au scroll ; sur mobile, les liens passent à la ligne plutôt que de forcer un défilement horizontal. */ .ep-sommaire-ancres { position: sticky; top: 88px; z-index: 40; background: var(--ep-white); border-bottom: 1px solid var(--ep-warm-gray); } .ep-sommaire-ancres ul { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 28px; } .ep-sommaire-ancres a { font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 14px; color: var(--ep-brown-attenue); } .ep-sommaire-ancres a:hover, .ep-sommaire-ancres a:focus-visible { color: var(--ep-brown); } @media (max-width: 640px) { .ep-sommaire-ancres ul { gap: 6px 18px; padding: 10px 0; } .ep-sommaire-ancres a { font-size: 13px; } } .ep-formation-infos { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ep-caramel); } .ep-formation-infos div { font-family: var(--ep-f-cabinet); font-size: 15px; color: var(--ep-brown); } .ep-formation-infos span { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-brown); margin-bottom: 4px; } /* ---- Sections descriptives de la fiche formation (Objectifs / Contenu / Formateurs) — Mission 3D §4 : titre dans une colonne dédiée (25–30%), corps dans le reste, utilise enfin la largeur disponible au lieu d'empiler titre puis contenu pleine largeur sur toute la page. ---- */ .ep-section-split { display: grid; grid-template-columns: minmax(0,28%) minmax(0,1fr); gap: 48px; align-items: start; } .ep-section-split__titre { margin: 0; text-align: left; } @media (max-width: 900px) { .ep-section-split { grid-template-columns: minmax(0,1fr); gap: 20px; } } .ep-liste-objectifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ep-liste-objectifs li { font-size: 16px; color: var(--ep-brown); padding-left: 24px; position: relative; } .ep-liste-objectifs li::before { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--ep-caramel); } /* Groupes sémantiques du "Contenu de la formation" (ex. Troubles/Crises) côte à côte quand la largeur le permet — auto-fit s'adapte au nombre réel de blocs ACF, jamais un nombre de colonnes forcé ; un seul bloc reste seul, pleine largeur de la colonne. */ .ep-contenu-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; } .ep-contenu-bloc h3 { font-size: 18px; margin: 0 0 10px; } .ep-contenu-bloc ul { margin: 0; padding-left: 20px; font-size: 15.5px; } .ep-contenu-bloc li { margin-bottom: 4px; } .ep-formation-prix { font-family: var(--ep-f-chillax); font-weight: 400; font-size: 22px; color: var(--ep-brown); margin: 0 0 20px; } .ep-formation-prix__label { display: block; font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; } .ep-tarif-sous-titre { font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; } .ep-tarif-bloc .ep-liste-sessions { margin-bottom: 0; } /* Tarif entreprise — Mission 3E §7 : toujours visuellement distinct du prix individuel/bouton S'inscrire, jamais dans le même bloc (le parcours entreprise n'est plus ouvert au public). */ .ep-formation-prix-entreprise p { margin: 0; } .ep-formation-prix-entreprise { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-family: var(--ep-f-cabinet); font-size: 14.5px; color: var(--ep-brown-attenue); margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(84,67,48,.2); } .ep-formation-prix-entreprise a:not(.ep-btn) { text-decoration: underline; font-weight: 700; color: var(--ep-brown); } .ep-liste-sessions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .ep-session-item { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 18px; background: var(--ep-white); border: 1px solid var(--ep-warm-gray); border-radius: var(--ep-radius); padding: 20px; } .ep-session-item__corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ep-session-item__date { font-family: var(--ep-f-titres); font-weight: 400; font-size: 19px; line-height: 1.3; color: var(--ep-brown); white-space: nowrap; } .ep-session-item__horaires, .ep-session-item__lieu, .ep-session-item__avec { font-family: var(--ep-f-cabinet); font-size: 15px; line-height: 1.45; color: var(--ep-brown-attenue); } .ep-session-item .ep-btn { justify-content: center; text-align: center; } /* Audit V1 point 3 : plus d'opacity sur toute la carte (faisait aussi passer le texte "Complet" sous le seuil de contraste WCAG AA — 3,25:1). La carte se distingue par un fond plus terne, le texte reste pleinement lisible (color: var(--ep-brown), inchangé). */ .ep-session-item--complet { background: var(--ep-warm-gray); border-color: rgba(84,67,48,.25); } .ep-session-item__formateur { color: var(--ep-brown); text-decoration: underline; text-underline-offset: 3px; } .ep-session-item__places { font-family: var(--ep-f-cabinet); font-size: 14px; font-weight: 700; color: var(--ep-brown); margin-top: 2px; } .ep-sessions-vide { font-size: 15px; } .ep-sessions-vide a { color: var(--ep-brown); text-decoration: underline; } .ep-note-complementaire { font-family: var(--ep-f-stardom); font-style: italic; font-size: 19px; line-height: 1.4; max-width: 60ch; } .ep-formateurs-associes { display: flex; flex-wrap: wrap; gap: 10px; } .ep-formateur-chip { font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown); background: var(--ep-warm-gray); border-radius: var(--ep-radius); padding: 8px 18px; transition: background .15s var(--ep-ease); } .ep-formateur-chip:hover { background: var(--ep-salmon); } @media (max-width: 720px) { .ep-liste-sessions { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================================= FORMATEURS ========================================================================================= */ .ep-formateur-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: clamp(34px, 4vw, 64px); row-gap: 72px; justify-content: start; } .ep-formateur-card { position: relative; display: block; width: 100%; max-width: 244px; transition: transform .32s var(--ep-ease), opacity var(--ep-dur-reveal) var(--ep-ease); } .ep-formateur-card__photo { position: relative; z-index: 1; width: 100%; max-width: 244px; aspect-ratio: 4/5; overflow: hidden; background: var(--ep-warm-gray); } .ep-formateur-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ep-formateur-card__photo--initiales { display: flex; align-items: center; justify-content: center; } .ep-formateur-card__photo--initiales span { font-family: var(--ep-f-chillax); font-weight: 400; font-size: clamp(44px, 5vw, 60px); letter-spacing: .06em; color: var(--ep-brown); opacity: .55; } /* §F : pas de zoom photo sur ces cartes — neutralise le survol générique .ep-photo:hover img. */ .ep-formateur-card .ep-formateur-card__photo:hover img { transform: none; } /* Aplat décalé derrière l'arche, révélé au survol/focus (Mission 5 §F) — jamais un zoom de la photo (plusieurs sources sont déjà serrées). Absent des cartes texte (pas de fausse arche). */ .ep-formateur-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; max-width: 244px; aspect-ratio: 4/5; border-radius: 999px 999px 12px 12px; background: var(--ep-warm-gray); opacity: 0; transform: translate(7px, 9px); z-index: 0; transition: opacity .32s var(--ep-ease), transform .32s var(--ep-ease); } .ep-formateur-card:nth-child(odd)::before { background: var(--ep-salmon); } .ep-formateur-card--texte::before { display: none; } .ep-formateur-card__nom { position: relative; display: inline-block; font-family: var(--ep-f-titres); font-weight: 400; font-size: 21px; margin: 16px 0 3px; text-align: left; color: var(--ep-brown); } .ep-formateur-card__nom::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: var(--ep-caramel); transition: width .28s var(--ep-ease); } .ep-formateur-card__fonction { font-family: var(--ep-f-cabinet); font-weight: 400; font-size: 14.5px; text-align: left; margin: 0 0 8px; color: var(--ep-brown-attenue); } .ep-formateur-card__fleche { display: block; margin-top: 8px; color: var(--ep-caramel); font-family: var(--ep-f-cabinet); font-size: 16px; line-height: 1; opacity: 0; transform: translateX(-4px); transition: opacity .26s var(--ep-ease), transform .26s var(--ep-ease); } /* Focus clavier : l'état enrichi doit être visible quel que soit le type de pointeur. */ .ep-formateur-card:focus-visible .ep-formateur-card__nom::after { width: 100%; } .ep-formateur-card:focus-visible .ep-formateur-card__fleche { opacity: 1; transform: translateX(0); } @media (hover: hover) and (pointer: fine) { .ep-formateur-card:hover, .ep-formateur-card:focus-visible { transform: translateY(-6px) rotate(-1.2deg); } .ep-formateur-card:hover::before, .ep-formateur-card:focus-visible::before { opacity: 1; transform: translate(12px, 15px); } .ep-formateur-card:hover .ep-formateur-card__nom::after { width: 100%; } .ep-formateur-card:hover .ep-formateur-card__fleche { opacity: 1; transform: translateX(0); } } /* Apparition ligne par ligne — décalage inter-carte plafonné à 180ms (§F), même mécanisme .ep-reveal / IntersectionObserver que le catalogue. Le :not(:hover):not(:focus-visible) garantit que le décalage ne vaut QUE pour l'entrée : au survol/focus le sélecteur ne matche plus, la carte réagit sans latence. Colonnes = 4 ici, redéfinies aux paliers plus bas. */ .ep-formateur-grille .ep-formateur-card:not(:hover):not(:focus-visible):nth-child(4n+2) { transition-delay: 60ms; } .ep-formateur-grille .ep-formateur-card:not(:hover):not(:focus-visible):nth-child(4n+3) { transition-delay: 120ms; } .ep-formateur-grille .ep-formateur-card:not(:hover):not(:focus-visible):nth-child(4n) { transition-delay: 180ms; } .ep-formateur-grille .ep-formateur-card:nth-child(4n+2) { margin-top: 22px; } .ep-formateur-grille .ep-formateur-card:nth-child(4n) { margin-top: 11px; } /* Carte textuelle sobre — GÉNÉRIQUE pour tout formateur sans photo (jamais un cas nommé en dur : voir archive-formateur.php, condition `!has_post_thumbnail()`). Aucune arche, aucun monogramme, aucun faux portrait, aucun aplat saumon. */ .ep-formateur-grille .ep-formateur-card.ep-formateur-card--texte { padding-top: 150px; align-self: end; margin-top: 0; } .ep-formateur-card__filet { display: block; width: 64px; height: 1px; background: var(--ep-caramel); } .ep-formateur-card__nom--chillax { font-family: var(--ep-f-chillax); font-weight: 400; } @media (max-width: 1279px) and (min-width: 900px) { .ep-formateur-grille { grid-template-columns: repeat(3, minmax(0,1fr)); } .ep-formateur-card, .ep-formateur-card__photo { max-width: 230px; } .ep-formateur-grille .ep-formateur-card:nth-child(4n+2), .ep-formateur-grille .ep-formateur-card:nth-child(4n) { margin-top: 0; } .ep-formateur-grille .ep-formateur-card:nth-child(3n+2) { margin-top: 22px; } .ep-formateur-grille .ep-formateur-card.ep-formateur-card--texte { padding-top: 100px; } } @media (max-width: 899px) and (min-width: 641px) { .ep-formateur-grille { grid-template-columns: repeat(2, minmax(0,1fr)); } .ep-formateur-card, .ep-formateur-card__photo { max-width: 230px; } .ep-formateur-grille .ep-formateur-card:nth-child(4n+2), .ep-formateur-grille .ep-formateur-card:nth-child(4n), .ep-formateur-grille .ep-formateur-card:nth-child(3n+2) { margin-top: 0; } .ep-formateur-grille .ep-formateur-card:nth-child(2n) { margin-top: 22px; } .ep-formateur-grille .ep-formateur-card.ep-formateur-card--texte { padding-top: 100px; } } @media (max-width: 640px) { .ep-formateur-grille { grid-template-columns: minmax(0,1fr); row-gap: 40px; justify-content: center; } .ep-formateur-grille .ep-formateur-card:nth-child(4n+2), .ep-formateur-grille .ep-formateur-card:nth-child(4n), .ep-formateur-grille .ep-formateur-card:nth-child(3n+2), .ep-formateur-grille .ep-formateur-card:nth-child(2n) { margin-top: 0; } .ep-formateur-card { max-width: min(68vw, 230px); margin: 0 auto; } .ep-formateur-card__photo { max-width: min(68vw, 230px); } .ep-formateur-card__nom, .ep-formateur-card__fonction { text-align: left; } .ep-formateur-grille .ep-formateur-card.ep-formateur-card--texte { padding-top: 36px; align-self: auto; } } /* ---- Fiche formateur ---- */ .ep-formateur-profil { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; margin-top: 24px; } .ep-formateur-profil__photo { width: 220px; height: 286px; flex-shrink: 0; background: var(--ep-warm-gray); } .ep-formateur-profil__photo img { width: 100%; height: 100%; object-fit: cover; } .ep-formateur-accreditations { font-size: 15px; margin: 10px 0; max-width: 60ch; } .ep-formateur-lien-site { font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown); text-decoration: underline; } /* Biographie formateur (Mission 6 §10) — colonne de lecture centrée sur fond blanc, largeur ~62–68 caractères, paragraphes distincts, corps confortable, marges généreuses sans remplissage décoratif. Vaut pour toutes les fiches, quelle que soit la longueur du texte. */ .ep-formateur-bio { font-size: 17.5px; line-height: 1.75; max-width: 65ch; margin: 0 auto; color: var(--ep-brown); } .ep-formateur-bio p { margin: 0 0 20px; } .ep-formateur-bio p:last-child { margin-bottom: 0; } .ep-formateur-bio h2, .ep-formateur-bio h3 { font-family: var(--ep-f-titres); font-weight: 400; margin: 28px 0 10px; } @media (max-width: 720px) { .ep-formateur-profil { grid-template-columns: 1fr; text-align: left; } .ep-formateur-profil__photo { margin: 0; width: 180px; height: 234px; } } .ep-liste-documents { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ep-liste-documents a { font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown); text-decoration: underline; } .ep-avis-liste { display: grid; gap: 20px; } .ep-avis-item { margin: 0; background: var(--ep-warm-gray); border-radius: var(--ep-radius); padding: 22px 26px; } .ep-avis-item p { font-family: var(--ep-f-stardom); font-style: italic; font-size: 19px; line-height: 1.45; margin: 0 0 10px; } .ep-avis-item cite { font-family: var(--ep-f-cabinet); font-size: 13px; color: var(--ep-brown-attenue); font-style: normal; } /* ========================================================================================= VIE DU RÉSEAU ========================================================================================= */ /* Galerie « La vie du réseau en images » : mosaïque. 4 colonnes, rangées de hauteur fixe ; les photos « grandes » occupent 2 colonnes x 2 rangées, les « hautes » (portraits) 1 x 2. L'ordre du HTML fait alterner les blocs. */ .ep-galerie-reseau { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: clamp(150px, 17vw, 230px); grid-auto-flow: dense; gap: 14px; } .ep-galerie-reseau__item { display: block; border-radius: var(--ep-radius); overflow: hidden; background: var(--ep-warm-gray); position: relative; cursor: zoom-in; min-height: 0; transition: transform .3s var(--ep-ease); } .ep-galerie-reseau__item--grande { grid-column: span 2; grid-row: span 2; } .ep-galerie-reseau__item--haute { grid-row: span 2; } .ep-galerie-reseau__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .ep-galerie-reseau__item::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .2s var(--ep-ease); } @media (hover: hover) and (pointer: fine) { .ep-galerie-reseau__item:hover { transform: translateY(-3px); } .ep-galerie-reseau__item:hover::after, .ep-galerie-reseau__item:focus-visible::after { background: rgba(0,0,0,.06); } } .ep-galerie-reseau__item:nth-child(3n+2) { transition-delay: 70ms; } .ep-galerie-reseau__item:nth-child(3n) { transition-delay: 140ms; } @media (max-width: 1000px) { .ep-galerie-reseau { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: clamp(120px, 26vw, 200px); gap: 12px; } } /* Événements documentés (Mission 6 §12) — liste texte, date à gauche, jamais une photo recollée à un événement daté sans association établie. */ .ep-evenement-liste { display: grid; gap: 4px; max-width: 820px; margin: 0 auto; } .ep-evenement-ligne { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 28px; padding: 26px 0; border-top: 1px solid var(--ep-warm-gray); } .ep-evenement-liste .ep-evenement-ligne:last-child { border-bottom: 1px solid var(--ep-warm-gray); } .ep-section--paper .ep-evenement-ligne { border-color: rgba(84,67,48,.18); } .ep-evenement-ligne__date { white-space: nowrap; font-family: var(--ep-f-cabinet); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ep-brown-attenue); margin: 4px 0 0; } .ep-evenement-ligne__titre { font-family: var(--ep-f-titres); font-weight: 400; font-size: 22px; line-height: 1.25; margin: 0 0 8px; color: var(--ep-brown); } .ep-evenement-ligne__desc { font-size: 15.5px; line-height: 1.6; color: var(--ep-brown-attenue); margin: 0; } .ep-evenement-ligne:nth-child(2n) { transition-delay: 90ms; } /* Habillage polaroïd (retour Séverine, audit V1 point 17) : cadre blanc épais, légère rotation alternée (a/b) pour un rendu naturel plutôt qu'aligné au cordeau, ombre discrète tirée du brun de marque (jamais un gris neutre). N'existe que si l'événement a une vraie photo — voir le commentaire sur $ep_evenements plus haut dans page-vie-du-reseau.php. */ .ep-evenement-ligne--avec-photo { grid-template-columns: 150px minmax(0,1fr) 128px; align-items: start; } .ep-evenement-ligne__polaroid { background: var(--ep-white); padding: 10px 10px 26px; border-radius: 2px; box-shadow: 0 10px 24px rgba(84, 67, 48, .22); align-self: center; transition: transform 220ms var(--ep-ease); } .ep-evenement-ligne__polaroid--a { --ep-tilt: -2.5deg; transform: rotate(var(--ep-tilt)); } .ep-evenement-ligne__polaroid--b { --ep-tilt: 2deg; transform: rotate(var(--ep-tilt)); } .ep-evenement-ligne__polaroid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .ep-evenement-ligne__zoom { display: block; cursor: zoom-in; } @media (hover: hover) and (pointer: fine) { .ep-evenement-ligne--avec-photo:hover .ep-evenement-ligne__polaroid { transform: rotate(0deg) scale(1.03); } } @media (max-width: 640px) { .ep-evenement-ligne--avec-photo { grid-template-columns: minmax(0,1fr); } .ep-evenement-ligne__polaroid { width: 160px; margin-top: 16px; align-self: flex-start; } } @media (max-width: 640px) { .ep-evenement-ligne { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 22px 0; } } /* « Dans les médias » (Mission 6 §13) — carte à logo : logo officiel du média dans une zone harmonisée, puis catégorie · date, titre, contexte en police de lecture. Stardom réservé à une citation courte. Les 6 URLs sont confirmées (2026-10-01) : chaque carte a son bouton. */ .ep-media-liste { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; } .ep-media-carte { display: flex; flex-direction: column; background: var(--ep-white); border: 1px solid var(--ep-warm-gray); border-radius: var(--ep-radius-panel); overflow: hidden; transition: opacity var(--ep-dur-reveal) var(--ep-ease), transform var(--ep-dur-reveal) var(--ep-ease); } .ep-media-carte__logo { height: 92px; display: flex; align-items: center; justify-content: center; padding: 18px 24px; background: var(--ep-warm-gray); border-bottom: 1px solid rgba(84,67,48,.12); } .ep-media-carte__logo img { max-width: 150px; max-height: 44px; width: auto; height: auto; object-fit: contain; } .ep-media-carte__corps { padding: 22px 24px 24px; } .ep-media-carte__meta { font-family: var(--ep-f-cabinet); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-brown-attenue); margin: 0 0 8px; } .ep-media-carte__titre { font-family: var(--ep-f-titres); font-weight: 400; font-size: 19px; line-height: 1.3; margin: 0 0 8px; color: var(--ep-brown); } .ep-media-carte__src { font-size: 14.5px; line-height: 1.55; color: var(--ep-brown-attenue); margin: 0; } .ep-media-carte__cite { font-family: var(--ep-f-stardom); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ep-brown); margin: 12px 0 0; } .ep-media-carte__lien { display: inline-block; margin-top: 14px; } .ep-media-carte:nth-child(2n) { transition-delay: 110ms; } @media (max-width: 720px) { .ep-media-liste { grid-template-columns: minmax(0,1fr); gap: 20px; } } /* « Témoignages des participants » (ajoutée 2026-10-01, consentement confirmé) — 71 avis réels, grille auto-adaptative (autofill) plutôt qu'un nombre de colonnes fixe : le nombre de cartes par rangée s'ajuste à la largeur disponible sans jamais casser la mise en page, qu'il y en ait 71 aujourd'hui ou davantage demain. Même famille visuelle que .ep-media-carte (carte blanche bordée), hauteur naturelle (pas de troncature de texte, chaque avis reste lisible en entier). */ /* « Lire l'ensemble des témoignages » (retour Axel 2026-10-05) : 8 cartes visibles, le reste dans un

natif (sans JS, accessible au clavier) pour ne pas imposer 71 cartes avant la galerie. */ .ep-fiche-programme-pdf { display: inline-block; margin: 16px 0 0 20px; font-size: 15px; } @media (max-width: 640px) { .ep-fiche-programme-pdf { display: block; margin: 14px 0 0; } } /* Ruban d'avis défilant (page communauté) : même mécanique que le ruban des partenaires, plus lent pour laisser lire. */ .ep-avis-ruban { margin-top: 8px; } .ep-avis-ruban .ep-logos-ruban__piste { animation-duration: 160s; } .ep-avis-ruban__carte { flex: none; width: 340px; box-sizing: border-box; } @media (max-width: 700px) { .ep-avis-ruban__carte { width: 280px; scroll-snap-align: start; } } /* Citation de fiche formation : avis en grand, qui s'écrit (assets/js/main.js, [data-ep-ecrit]). */ .ep-citation-fiche .ep-wrap { max-width: 860px; text-align: center; } .ep-citation-fiche__etiquette { margin: 0 0 18px; font-family: var(--ep-f-cabinet); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ep-brown-attenue); } .ep-citation-fiche__citation { margin: 0; padding: 0; border: 0; } .ep-citation-fiche__texte { display: block; font-family: var(--ep-f-stardom); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; color: var(--ep-brown); text-wrap: balance; } .ep-citation-fiche__texte.is-ecriture::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: var(--ep-caramel); } .ep-citation-fiche__texte.is-ecrite::after { display: none; } .ep-citation-fiche__auteur { margin-top: 18px; font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 15px; color: var(--ep-brown); } .ep-citation-fiche__lien { margin: 24px 0 0; } .ep-temoignages-suite { margin-top: 32px; text-align: center; } .ep-temoignages-suite > summary { display: inline-flex; list-style: none; cursor: pointer; } .ep-temoignages-suite > summary::-webkit-details-marker { display: none; } .ep-temoignages-suite__fermer { display: none; } .ep-temoignages-suite[open] .ep-temoignages-suite__ouvrir { display: none; } .ep-temoignages-suite[open] .ep-temoignages-suite__fermer { display: inline; } .ep-temoignages-suite > .ep-temoignages-liste { text-align: left; } .ep-temoignages-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; } .ep-temoignage-carte { display: flex; flex-direction: column; background: var(--ep-white); border: 1px solid var(--ep-warm-gray); border-radius: var(--ep-radius-panel); padding: 24px; } .ep-temoignage-carte__texte { font-size: 15px; line-height: 1.6; color: var(--ep-brown); margin: 0 0 16px; } .ep-temoignage-carte__nom { font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 14px; margin: auto 0 2px; color: var(--ep-brown); } .ep-temoignage-carte__formation { font-family: var(--ep-f-cabinet); font-size: 12.5px; color: var(--ep-brown-attenue); margin: 0; } /* « Nos partenaires » (réintroduite 2026-10-01) — même famille visuelle que .ep-media-carte (carte blanche bordée). Carte de gauche plus étroite (logo + nom) ; carte de droite plus large (titre, rangée de photos réelles, texte). $ep_partenaires reste extensible : une 3e entrée (ex. Asensile, une fois confirmé) ajoute simplement une carte supplémentaire dans la même grille. */ .ep-partenaires-liste { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 28px; margin-top: 32px; } .ep-partenaires-liste + .ep-partenaires-liste { margin-top: 28px; } .ep-partenaire-logo-carte, .ep-partenaire-detail-carte { background: var(--ep-white); border: 1px solid var(--ep-warm-gray); border-radius: var(--ep-radius-panel); padding: 28px; } .ep-partenaire-logo-carte { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; } .ep-partenaire-logo-carte__logo { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ep-warm-gray); } .ep-partenaire-logo-carte__logo img { width: 100%; height: 100%; object-fit: cover; } .ep-partenaire-logo-carte h3 { font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 17px; margin: 0; color: var(--ep-brown); } .ep-partenaire-detail-carte h3 { font-size: 20px; margin: 0 0 16px; } .ep-partenaire-detail-carte__photos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 18px; } .ep-partenaire-detail-carte__photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ep-radius); } .ep-partenaire-detail-carte p { font-size: 15.5px; line-height: 1.65; color: var(--ep-brown-attenue); margin: 0; max-width: 68ch; } @media (max-width: 760px) { .ep-partenaires-liste { grid-template-columns: minmax(0,1fr); } .ep-partenaire-detail-carte__photos { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* Résultats de recherche (Mission 6 §18) — conteneur cohérent (~1100px), un résultat par ligne, titre lisible (26–30px), extrait en police de lecture, séparation aérée. */ .ep-recherche-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 4px; } .ep-recherche-resultat { padding: 32px 0; border-top: 1px solid var(--ep-warm-gray); } .ep-recherche-liste .ep-recherche-resultat:last-child { border-bottom: 1px solid var(--ep-warm-gray); } .ep-recherche-resultat__type { font-family: var(--ep-f-cabinet); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-brown-attenue); margin: 0 0 8px; } .ep-recherche-resultat__titre { font-family: var(--ep-f-titres); font-weight: 400; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.25; margin: 0 0 10px; } .ep-recherche-resultat__titre a { color: var(--ep-brown); } .ep-recherche-resultat__titre a:hover, .ep-recherche-resultat__titre a:focus-visible { color: var(--ep-caramel); } .ep-recherche-resultat__extrait { font-family: var(--ep-f-cabinet); font-size: var(--ep-body-lg); line-height: 1.6; color: var(--ep-brown-attenue); margin: 0 0 12px; max-width: 68ch; } .ep-recherche-resultat__lien { display: inline-block; } .ep-recherche-pagination { max-width: 1100px; margin: 40px auto 0; } .ep-recherche-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; } .ep-recherche-pagination a, .ep-recherche-pagination .current { font-family: var(--ep-f-cabinet); font-size: 14px; padding: 8px 14px; border: 1px solid var(--ep-warm-gray); border-radius: var(--ep-radius); color: var(--ep-brown); } .ep-recherche-pagination .current { background: var(--ep-brown); color: var(--ep-white); border-color: var(--ep-brown); } /* « Suivre le réseau » (Mission 6 §14) — deux colonnes : texte + logo LinkedIn officiel à gauche, vraie photo du réseau à droite (jamais présentée comme une capture de publication). Lien sortant simple, aucun widget traçant. Hauteur proportionnée au contenu. */ /* .ep-suivre : plus qu'un bloc texte + bouton depuis le 2026-09-29 (retrait de la photo de substitut LinkedIn, audit V1 point 15) — .ep-suivre--sans-photo centre le contenu en une seule colonne, plus de grille à deux colonnes ni de visuel. */ .ep-suivre { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); gap: 48px; align-items: center; max-width: 960px; margin: 0 auto; } .ep-suivre--sans-photo { grid-template-columns: minmax(0,1fr); max-width: 560px; text-align: center; } .ep-suivre--sans-photo .ep-suivre__logo { margin-inline: auto; } .ep-suivre--sans-photo .ep-suivre__desc { margin-inline: auto; } .ep-suivre__logo { display: inline-flex; width: 40px; height: 40px; } .ep-suivre__logo img { width: 100%; height: 100%; border-radius: 8px; } .ep-suivre__titre { font-family: var(--ep-f-titres); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); color: var(--ep-brown); margin: 16px 0 12px; } .ep-suivre__desc { font-family: var(--ep-f-cabinet); font-size: 15.5px; line-height: 1.6; color: var(--ep-brown-attenue); margin: 0 0 22px; max-width: 44ch; } .ep-suivre__cta { display: inline-flex; } @media (max-width: 860px) { .ep-suivre { grid-template-columns: minmax(0,1fr); gap: 28px; } } /* Illustration décorative de l'introduction Visio (anneaux et points) retirée le 2026-09-28 : le hero de la page suit désormais le bandeau compact commun. */ /* ---- Visio ---- */ /* Retour Séverine, point 18 (2026-09) : les rendez-vous passent d'une liste empilée à une grille 2 colonnes côte à côte sur desktop (repli 1 colonne sous 768px, comme avant). Contenu, ACF et protection par mot de passe inchangés — seule la présentation change. Les cartes sont en colonne flex pour que le bouton/« Lien à venir » reste aligné en bas, même si une carte a un texte plus long qu'une autre. */ .ep-visio-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 920px; margin: 0 auto; align-items: stretch; } .ep-visio-item { display: flex; flex-direction: column; background: var(--ep-warm-gray); border-radius: var(--ep-radius); padding: 32px 36px; } .ep-visio-item__frequence { display: inline-block; font-family: var(--ep-f-cabinet); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-brown); margin: 0 0 12px; } .ep-visio-item__titre { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; } .ep-visio-item__public { font-family: var(--ep-f-cabinet); font-size: 12.5px; letter-spacing: .03em; color: var(--ep-brown-attenue); margin: -4px 0 12px; } .ep-visio-item__desc { font-size: 16px; line-height: 1.6; margin: 0 0 20px; } .ep-visio-item__agenda { margin: 0 0 20px; font-size: 14px; } .ep-visio-item__agenda-titre { margin: 0 0 6px; font-family: var(--ep-f-cabinet); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ep-brown-attenue); } .ep-agenda-dates { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; } .ep-agenda-dates li { white-space: nowrap; } .ep-agenda-autre { margin: 8px 0 0; font-size: 13.5px; } .ep-visio-item__a-venir { font-family: var(--ep-f-cabinet); font-size: 13.5px; font-style: italic; color: var(--ep-brown-attenue); } .ep-visio-item__a-venir-groupe { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: auto; } .ep-visio-item > .ep-btn { margin-top: auto; align-self: flex-start; } @media (max-width: 767px) { .ep-visio-liste { grid-template-columns: minmax(0, 1fr); max-width: 520px; } } /* Formulaire natif WordPress de mot de passe — .post-password-form est la classe standard générée par WordPress lui-même, jamais une invention ; seul le style change ici. Mission 3D §6 : conteneur centré 420–480px (déjà en place dans page-visio.php), mais texte/ label/champ/bouton alignés à GAUCHE dans ce conteneur, champ pleine largeur, bouton juste dessous avec un écart net (20px, dans la fourchette 16–24px demandée). */ .post-password-form p { font-size: var(--ep-body-lg); text-align: left; margin: 0 0 20px; } .post-password-form label { font-family: var(--ep-f-cabinet); font-size: 14.5px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: left; } .post-password-form input[type="password"] { font-family: var(--ep-f-cabinet); font-size: 15px; padding: 11px 16px; border: 1px solid var(--ep-caramel); border-radius: var(--ep-radius); background: var(--ep-white); width: 100%; max-width: none; } .post-password-form input[type="submit"] { font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 14.5px; color: var(--ep-white); background: var(--ep-black); border: none; border-radius: var(--ep-radius); padding: 14px 22px; margin-top: 20px; cursor: pointer; align-self: flex-start; } .post-password-form input[type="submit"]:hover { background: var(--ep-brown); } /* Espace protégé Visio (Mission 6 §17) — intro + formulaire rapprochés (48–64px), conteneur contenu, jamais un formulaire perdu dans une immense zone vide. Le formulaire personnalisé garde name="post_password" et l'action native ; seul le libellé change. */ .ep-visio-protege { max-width: 460px; margin: 0 auto; } .ep-visio-protege__intro { font-size: var(--ep-body-lg); line-height: 1.6; color: var(--ep-brown); margin: 0 0 clamp(32px, 5vw, 56px); } .ep-visio-form p { margin: 0 0 16px; } .ep-visio-form label { display: block; font-family: var(--ep-f-cabinet); font-size: 14.5px; color: var(--ep-brown); margin-bottom: 8px; } .ep-visio-form input[type="password"] { font-family: var(--ep-f-cabinet); font-size: 15px; padding: 12px 16px; border: 1px solid var(--ep-caramel); border-radius: var(--ep-radius); background: var(--ep-white); width: 100%; } .ep-visio-form button[type="submit"] { margin-top: 8px; } /* ---- FAQ (accordéon natif
) ---- */ /* Retour Séverine, point 22 (2026-09) : resserre aussi l'écart entre les items de FAQ. */ .ep-faq-liste { display: grid; gap: 8px; max-width: 760px; margin: 0 auto; } .ep-faq-item { background: var(--ep-warm-gray); border-radius: var(--ep-radius); padding: 4px 24px; } .ep-faq-item summary { font-family: var(--ep-f-titres); font-weight: 400; font-size: 19px; color: var(--ep-brown); padding: 18px 28px 18px 0; cursor: pointer; list-style: none; position: relative; } .ep-faq-item summary::-webkit-details-marker { display: none; } .ep-faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); line-height: 1; font-size: 22px; color: var(--ep-brown); transition: transform .2s var(--ep-ease); } .ep-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .ep-faq-item__reponse { padding-bottom: 20px; } .ep-faq-item__reponse p { font-size: 15.5px; line-height: 1.65; color: var(--ep-brown-attenue); margin: 0 0 12px; } .ep-faq-item__reponse p:last-child { margin-bottom: 0; } .ep-faq-item__reponse p, .ep-faq-item__reponse .ep-para-lisible { max-width: none; } .ep-faq-item p { font-size: 15.5px; line-height: 1.6; color: var(--ep-brown-attenue); margin: 0 0 20px; } /* Étapes d'inscription (Mission 6 §16) — vraie liste ordonnée, une étape par item. */ .ep-faq-etapes { margin: 4px 0 0; padding-left: 1.4em; display: grid; gap: 10px; } .ep-faq-etapes li { font-size: 15.5px; line-height: 1.6; color: var(--ep-brown-attenue); padding-left: 4px; } .ep-faq-item__lien { display: inline-block; margin-top: 14px; } /* .ep-partenaire-box — volontairement conservée (re-stylée V3.4) bien qu'inutilisée à ce jour : voir page-vie-du-reseau.php, section "Nos partenaires" retirée du rendu public tant que le contenu (Volley Club de Draveil, Défi santé mentale, Asensile) n'est pas confirmé par Séverine. Réutilisable telle quelle pour la future architecture à 3 catégories décrite dans docs/2026-09-07-engagements-partenaires.md, une fois validée — même famille visuelle que .ep-boite-info. */ .ep-partenaire-box { background: var(--ep-warm-gray); border-radius: var(--ep-radius); padding: clamp(32px, 5vw, 40px); } .ep-partenaire-box h3 { font-size: 20px; margin: 0 0 10px; } .ep-partenaire-box p { font-size: 16px; margin: 0; max-width: 68ch; } /* ---- Lightbox partagée (Mission 3E §4) — natif, un seul par page ---- */ .ep-lightbox { border: none; border-radius: var(--ep-radius-panel); padding: 0; background: var(--ep-white); max-width: min(92vw, 1100px); max-height: 88vh; } .ep-lightbox::backdrop { background: rgba(42,36,28,.78); } .ep-lightbox__img { display: block; max-width: min(92vw, 1100px); max-height: 72vh; width: auto; height: auto; margin: 0 auto; } .ep-lightbox__fermer { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--ep-white); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ep-lightbox__fermer svg { width: 18px; height: 18px; color: var(--ep-brown); } .ep-lightbox__bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--ep-warm-gray); } .ep-lightbox__compteur { font-family: var(--ep-f-cabinet); font-size: 13px; color: var(--ep-brown-attenue); } .ep-lightbox__prec, .ep-lightbox__suiv { background: none; border: 1px solid var(--ep-warm-gray); border-radius: var(--ep-radius); width: 36px; height: 36px; cursor: pointer; color: var(--ep-brown); font-size: 16px; } .ep-lightbox__original { margin-left: auto; font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown); text-decoration: underline; } @media (max-width: 640px) { .ep-lightbox__bas { flex-wrap: wrap; padding: 12px 16px; } } /* ---- Pages techniques (inscription/reçu) — messages d'erreur génériques ---- */ .ep-message-generique { text-align: center; max-width: 560px; margin: 0 auto; font-size: var(--ep-body-lg); } .ep-message-generique a { color: var(--ep-brown); text-decoration: underline; } /* ---- Bandeau de consentement cookies (RGPD/CNIL — audit V1 point 2) ---- Construit et affiché entièrement par assets/js/consentement.js : sans JavaScript, ni le bandeau ni aucun script tiers ne se chargent (le chargement des traceurs est lui-même déclenché par ce script, jamais par PHP) — conforme par construction. "Tout accepter" et "Tout refuser" partagent la même classe de base .ep-btn : même taille, même poids visuel, refuser n'est jamais présenté en plus petit ou moins visible qu'accepter. */ .ep-consentement { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ep-z-consentement); background: var(--ep-brown); color: var(--ep-white); padding: 24px var(--ep-pad-mobile) 28px; box-shadow: 0 -6px 28px rgba(0,0,0,.22); transform: translateY(100%); transition: transform .35s var(--ep-ease); max-height: 88vh; overflow-y: auto; } .ep-consentement.is-visible { transform: translateY(0); } .ep-consentement__inner { max-width: var(--ep-max-width); margin: 0 auto; } .ep-consentement__texte { font-size: 15px; line-height: 1.6; margin: 0 0 16px; max-width: 70ch; color: var(--ep-white); } .ep-consentement__texte a { color: var(--ep-salmon); text-decoration: underline; text-underline-offset: 2px; } .ep-consentement__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; } .ep-consentement__lien-perso { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--ep-f-cabinet); font-size: 15px; color: var(--ep-white); text-decoration: underline; text-underline-offset: 2px; } .ep-consentement .ep-btn--outline { border-color: var(--ep-white); color: var(--ep-white); } .ep-consentement .ep-btn--outline:hover, .ep-consentement .ep-btn--outline:focus-visible { background: rgba(255,255,255,.15); color: var(--ep-white); } .ep-consentement__panneau { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); } .ep-consentement__categorie { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); } .ep-consentement__categorie:last-of-type { border-bottom: none; } .ep-consentement__cat-titre { font-family: var(--ep-f-titres); font-weight: 400; font-size: 16px; margin: 0 0 4px; color: var(--ep-white); cursor: pointer; } .ep-consentement__cat-desc { font-size: 14px; line-height: 1.5; margin: 0; color: rgba(255,255,255,.75); max-width: 56ch; } .ep-consentement__case { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ep-salmon); cursor: pointer; } .ep-consentement__case:disabled { cursor: default; opacity: .6; } .ep-consentement__enregistrer { margin-top: 18px; } @media (max-width: 640px) { .ep-consentement { padding: 20px var(--ep-pad-mobile) 24px; } .ep-consentement__actions { flex-direction: column; align-items: stretch; } .ep-consentement__actions .ep-btn { justify-content: center; } .ep-consentement__categorie { gap: 14px; } } @media (prefers-reduced-motion: reduce) { .ep-consentement { transition: none !important; } } html.ep-motion-reduced .ep-consentement { transition: none !important; } /* Formulaire de demande de devis (audit V1 point 11) — page-demande-de-devis.php. Champs rectangulaires (rayon 4px), contour caramel comme le formulaire Visio, focus caramel global. */ .ep-devis-wrap { max-width: 760px; } .ep-devis-form { display: flex; flex-direction: column; gap: 24px; } .ep-champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; } .ep-champ label, .ep-champ legend { font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 14.5px; color: var(--ep-brown); padding: 0; } .ep-champ input[type="text"], .ep-champ input[type="email"], .ep-champ input[type="tel"], .ep-champ input[type="number"], .ep-champ textarea { font-family: var(--ep-f-cabinet); font-size: 15px; color: var(--ep-black); padding: 12px 16px; width: 100%; border: 1px solid var(--ep-caramel); border-radius: var(--ep-radius); background: var(--ep-white); } .ep-champ textarea { resize: vertical; line-height: 1.5; } .ep-champ input[aria-invalid="true"], .ep-champ textarea[aria-invalid="true"] { border-color: #A32A1F; border-width: 2px; } .ep-champ__erreur { margin: 0; font-family: var(--ep-f-cabinet); font-size: 14px; font-weight: 700; color: #A32A1F; } .ep-champ--court input { max-width: 180px; } .ep-champ--imbrique { margin-top: 12px; } .ep-champ--imbrique label { font-weight: 400; } .ep-champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ep-choix-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; } .ep-choix-colonne { display: flex; flex-direction: column; gap: 10px; } .ep-choix { display: flex; align-items: flex-start; gap: 10px; font-family: var(--ep-f-cabinet); font-size: 15px; font-weight: 400 !important; color: var(--ep-brown); cursor: pointer; } .ep-choix input { margin-top: 3px; accent-color: var(--ep-brown); width: 18px; height: 18px; flex: none; } .ep-requis { color: var(--ep-brown-attenue); } .ep-facultatif { font-weight: 400; color: var(--ep-brown-attenue); } .ep-devis-info { margin: 0; font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown-attenue); } .ep-devis-info a { text-decoration: underline; color: var(--ep-brown); } .ep-devis-form .ep-btn { align-self: flex-start; border: 0; cursor: pointer; } .ep-prevenir__boite { max-width: 640px; margin: 0 auto; text-align: left; } .ep-prevenir__boite .ep-section-title { text-align: left; margin-bottom: 12px; } .ep-prevenir__intro { margin: 0 0 20px; max-width: 56ch; } .ep-prevenir__message { margin: 0 0 20px; padding: 14px 18px; border-radius: var(--ep-radius); background: var(--ep-white); border-left: 4px solid var(--ep-caramel); } .ep-prevenir__message--erreur { border-left-color: #A32A1F; font-weight: 700; } .ep-champ--case { flex-direction: row; align-items: flex-start; gap: 12px; } .ep-champ--case input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ep-brown); } .ep-champ--case label { font-weight: 400; font-size: 14px; line-height: 1.5; } .ep-devis-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ep-devis-alerte { background: var(--ep-warm-gray); border-left: 4px solid #A32A1F; border-radius: var(--ep-radius); padding: 16px 20px; margin-bottom: 32px; font-family: var(--ep-f-cabinet); font-weight: 700; color: var(--ep-brown); } .ep-devis-alerte p { margin: 0; } .ep-devis-confirmation { background: var(--ep-warm-gray); border-radius: var(--ep-radius); padding: clamp(28px, 4vw, 44px); } .ep-devis-confirmation h2 { margin-top: 0; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 640px) { .ep-champs-duo, .ep-choix-grille { grid-template-columns: 1fr; } .ep-devis-form .ep-btn { align-self: stretch; text-align: center; justify-content: center; } } /* Calendrier des sessions (audit V1 point 14) — liste par mois, pas une grille de jours. Titres de mois dans le style des catégories du menu Formations ; lignes proches de .ep-session-item. */ .ep-calendrier-wrap h2 { margin-bottom: 8px; } .ep-calendrier__mois { font-family: var(--ep-f-cabinet); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ep-brown-attenue); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ep-warm-gray); } .ep-calendrier__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ep-calendrier__vide { margin: 0; font-family: var(--ep-f-cabinet); font-size: 15px; color: var(--ep-brown-attenue); } .ep-calendrier__item { display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 20px; background: var(--ep-white); border: 1px solid var(--ep-warm-gray); border-radius: var(--ep-radius); padding: 16px 20px; } .ep-calendrier__item--complet { background: var(--ep-warm-gray); border-color: rgba(84,67,48,.25); } .ep-calendrier__date { font-family: var(--ep-f-chillax); font-weight: 400; font-size: 22px; color: var(--ep-brown); white-space: nowrap; } .ep-calendrier__infos { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ep-calendrier__titre { font-family: var(--ep-f-cabinet); font-weight: 700; font-size: 17px; color: var(--ep-brown); } .ep-calendrier__titre:hover { text-decoration: underline; text-underline-offset: 3px; } .ep-calendrier__meta { font-family: var(--ep-f-cabinet); font-size: 14px; color: var(--ep-brown-attenue); } .ep-calendrier__meta a { color: var(--ep-brown); text-decoration: underline; text-underline-offset: 3px; } .ep-calendrier__suite { margin: 24px 0 0; } @media (max-width: 720px) { .ep-calendrier__item { grid-template-columns: 1fr; gap: 8px; } .ep-calendrier__item .ep-btn { justify-content: center; text-align: center; } } /* ---- Espace formateur (étape 9) ---- */ .ep-espace { max-width: 920px; margin: 0 auto; } .ep-espace__titre { margin: 0 0 20px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; } .ep-espace__titre:not(:first-child) { margin-top: 48px; } .ep-espace__sous-titre { margin: 36px 0 12px; font-size: 20px; } .ep-espace__retour { margin: 0 0 20px; } .ep-espace__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .ep-espace__carte { display: flex; flex-direction: column; background: var(--ep-warm-gray); border-radius: var(--ep-radius); padding: 28px 32px; } .ep-espace__carte h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; } .ep-espace__carte p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; } .ep-espace__carte .ep-espace__meta, .ep-espace__note, .ep-espace__vide { font-family: var(--ep-f-cabinet); font-size: 13.5px; color: var(--ep-brown-attenue); } .ep-espace__carte > .ep-btn { margin-top: auto; align-self: flex-start; } .ep-espace__infos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0 0 8px; } .ep-espace__infos dt { font-family: var(--ep-f-cabinet); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ep-brown-attenue); } .ep-espace__infos dd { margin: 0; font-size: 16px; } .ep-espace__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; } .ep-espace__participants { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ep-espace__participants li { background: var(--ep-warm-gray); border-radius: var(--ep-radius); padding: 18px 22px; } .ep-espace__etiquette { font-family: var(--ep-f-cabinet); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; background: var(--ep-white); border-radius: 999px; padding: 3px 10px; margin-left: 8px; } .ep-espace__reponses { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 10px 0 0; font-size: 15px; line-height: 1.5; } .ep-espace__reponses dt { font-family: var(--ep-f-cabinet); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ep-brown-attenue); padding-top: 2px; } .ep-espace__reponses dd { margin: 0; white-space: pre-line; } .ep-espace__pied { margin: 56px 0 0; font-size: 15px; } @media (max-width: 767px) { .ep-espace__liste { grid-template-columns: minmax(0, 1fr); } .ep-espace__infos, .ep-espace__reponses { grid-template-columns: minmax(0, 1fr); } } /* ---- Mon espace : trois colonnes (étape 9) ---- */ .ep-visio-liste--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; } .ep-visio-item__inscription { margin: 0 0 20px; } .ep-acces { margin-top: auto; padding-top: 8px; } .ep-acces .ep-visio-form p { margin: 0 0 14px; } .ep-acces input[type="email"], .ep-acces input[type="password"] { font-family: var(--ep-f-cabinet); font-size: 15px; padding: 12px 16px; border: 1px solid var(--ep-caramel); border-radius: var(--ep-radius); background: var(--ep-white); width: 100%; } .ep-acces__erreur { font-family: var(--ep-f-cabinet); font-size: 14px; color: #8a2b14; margin: 0 0 14px; } .ep-acces__oubli { margin: 14px 0 0; font-size: 14px; } @media (max-width: 1023px) { .ep-visio-liste--trois { grid-template-columns: minmax(0, 1fr); max-width: 560px; } } /* Mon espace : cartes plus compactes, texte long replié derrière « Lire la suite » (retour Axel 2026-10-08). */ .ep-visio-liste--trois { gap: 20px; align-items: start; } .ep-visio-liste--trois .ep-visio-item { padding: 24px 26px; } .ep-visio-liste--trois .ep-visio-item__frequence { margin-bottom: 8px; font-size: 11.5px; } .ep-visio-liste--trois .ep-visio-item__titre { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; margin-bottom: 8px; } .ep-visio-liste--trois .ep-visio-item__public { margin: 0 0 10px; } .ep-visio-liste--trois .ep-visio-item__desc { font-size: 15px; line-height: 1.6; margin: 0 0 10px; } .ep-lire-suite { margin: 0 0 14px; } .ep-lire-suite > summary { display: inline-block; cursor: pointer; list-style: none; font-family: var(--ep-f-cabinet); font-weight: 600; font-size: 14.5px; color: var(--ep-brown); text-decoration: underline; text-underline-offset: 3px; } .ep-lire-suite > summary::-webkit-details-marker { display: none; } .ep-lire-suite > summary:focus-visible { outline: 2px solid var(--ep-caramel); outline-offset: 3px; } .ep-lire-suite > summary .ep-lire-suite__moins { display: none; } .ep-lire-suite[open] > summary .ep-lire-suite__plus { display: none; } .ep-lire-suite[open] > summary .ep-lire-suite__moins { display: inline; } .ep-lire-suite__corps { margin-top: 12px; } .ep-lire-suite__corps p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; } .ep-visio-liste--trois .ep-acces { padding-top: 4px; } .ep-espace__apercu { background: var(--ep-warm-gray); border-left: 4px solid var(--ep-caramel); padding: 12px 16px; margin: 0 0 28px; font-family: var(--ep-f-cabinet); font-size: 15px; } /* Paragraphes coupés par inc/lisibilite.php : un espace net entre deux paragraphes d'un même bloc. */ .ep-para-lisible { max-width: 64ch; } .ep-para-lisible + .ep-para-lisible { margin-top: .9em; } /* Les champs de formulaire et les boutons reprennent la police du site (retour Axel 2026-10-08), y compris dans les espaces protégés : sans cette règle, le navigateur impose sa police par défaut. */ button, input, select, textarea, optgroup, option { font-family: inherit; } input::placeholder, textarea::placeholder { font-family: inherit; } input[type="file"]::file-selector-button { font-family: inherit; } /* Formulaire d'avis après la formation (plugin, templates/avis/formulaire.php). Étoiles et puces accessibles au clavier ; rien ne repose sur la couleur seule. */ .ep-avis__contexte { font-size: 1.1rem; margin: 0 0 8px; } .ep-avis__erreur { background: #fbeaea; border-left: 4px solid #a32a1f; padding: 12px 16px; font-weight: 700; margin: 0 0 20px; } .ep-avis__bloc { border: 0; border-top: 1px solid var(--ep-warm-gray, #EBE5D5); margin: 28px 0 0; padding: 20px 0 0; min-width: 0; } .ep-avis__bloc legend { font-family: var(--ep-f-titres); font-size: 1.25rem; color: var(--ep-brown); padding: 0 0 10px; } .ep-avis__oblig, .ep-avis__facultatif { font-family: var(--ep-f-cabinet); font-size: .85rem; color: var(--ep-brown-attenue, #6b5f4d); } .ep-avis__aide { font-size: .95rem; color: var(--ep-brown-attenue, #6b5f4d); margin: 0 0 12px; } .ep-avis textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--ep-caramel, #A57142); border-radius: 8px; font: inherit; line-height: 1.5; background: #fff; color: var(--ep-brown); } .ep-avis textarea:focus-visible, .ep-avis input:focus-visible + label { outline: 3px solid var(--ep-brown); outline-offset: 2px; } .ep-etoiles { display: inline-flex; flex-direction: row-reverse; gap: 4px; } .ep-etoiles input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ep-etoiles label { font-size: 2.6rem; line-height: 1; color: #d6cbb6; cursor: pointer; padding: 2px 4px; transition: color .15s; } .ep-etoiles label:hover, .ep-etoiles label:hover ~ label, .ep-etoiles input:checked ~ label { color: var(--ep-caramel, #A57142); } .ep-etoiles input:checked + label { text-shadow: 0 0 0 var(--ep-brown); } .ep-avis__curseur { display: block; margin: 0 0 14px; font-weight: 600; } .ep-avis__curseur input[type=range] { display: block; width: 100%; max-width: 420px; margin-top: 8px; accent-color: var(--ep-brown); } .ep-puces { display: flex; flex-wrap: wrap; gap: 8px; } .ep-puces input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ep-puces label { border: 1.5px solid var(--ep-brown); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; color: var(--ep-brown); background: #fff; } .ep-puces input:checked + label { background: var(--ep-brown); color: #fff; } .ep-puces input:checked + label::before { content: '✓ '; } .ep-avis__radio { display: block; margin: 0 0 8px; line-height: 1.5; } .ep-avis__consentement { margin-top: 14px; padding: 12px 14px; background: var(--ep-warm-gray, #EBE5D5); border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .ep-etoiles label { transition: none; } } .ep-avis__vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ep-note-moyenne { font-family: var(--ep-f-titres); font-size: 1.25rem; color: var(--ep-brown); margin: 10px 0 0; } .ep-note-moyenne > span:first-child { color: var(--ep-caramel, #A57142); } .ep-note-moyenne__nb { font-family: var(--ep-f-cabinet); font-size: .95rem; color: var(--ep-brown-attenue, #6b5f4d); }