/* ========================================================================== ETL Expertise — feuille de styles du site Contraintes de portabilité Elementor (AGENTS.md, règle 7) : chaque section suit l'anatomie conteneur > conteneur interne > colonnes, et n'emploie que des effets qu'un widget sait reproduire. Mouvement : plaques photo épinglées, révélation au défilement, compteurs — réemployés de la page d'attente ; équivalents Elementor dans SPEC §10. ========================================================================== */ /* ── jetons : trois palettes, une seule active via ── */ :root, :root[data-palette="actuel"] { --bar-bg: #200A2E; --utility-bg: #1A0725; --bar-fg: #F4EFF7; --bar-fg-mid: rgba(244,239,247,.84); --bar-fg-dim: rgba(244,239,247,.52); --bar-fg-faint: rgba(244,239,247,.22); --panel-bg: #F5F1EA; --panel-fg: #200A2E; --panel-fg-dim: rgba(32,10,46,.68); --feature-bg: #200A2E; --feature-fg: #F4EFF7; --feature-fg-dim: rgba(244,239,247,.62); --notes-bg: #1A0725; --notes-fg: #F4EFF7; --notes-fg-dim: rgba(244,239,247,.62); --notes-fg-faint: rgba(244,239,247,.55); --gold: #C9A227; --gold-bright: #E4C25C; --accent-panel: #7A6010; --rule-gold: rgba(244,239,247,.09); --rule-ink: rgba(32,10,46,.14); --hairline: rgba(201,162,39,.16); --cta-line: rgba(201,162,39,.55); --flag-bg: rgba(201,162,39,.13); --glow: rgba(201,162,39,.16); --cta-fg: #200A2E; --tuile-bg: #FFFFFF; --voile-fort: rgba(26,7,37,.94); --voile-faible: rgba(26,7,37,.58); } :root[data-palette="sobre"] { --bar-bg: #1C1A21; --utility-bg: #141318; --bar-fg: #F2F1EF; --bar-fg-mid: rgba(242,241,239,.82); --bar-fg-dim: rgba(242,241,239,.50); --bar-fg-faint: rgba(242,241,239,.20); --panel-bg: #F7F6F3; --panel-fg: #1C1A21; --panel-fg-dim: rgba(28,26,33,.66); --feature-bg: #232028; --feature-fg: #F2F1EF; --feature-fg-dim: rgba(242,241,239,.58); --notes-bg: #141318; --notes-fg: #F2F1EF; --notes-fg-dim: rgba(242,241,239,.58); --notes-fg-faint: rgba(242,241,239,.55); --gold: #C0982F; --gold-bright: #D9B65B; --accent-panel: #7E6317; --rule-gold: rgba(242,241,239,.08); --rule-ink: rgba(28,26,33,.13); --hairline: rgba(242,241,239,.10); --cta-line: rgba(192,152,47,.5); --flag-bg: rgba(28,26,33,.05); --glow: rgba(242,241,239,.04); --cta-fg: #141318; --tuile-bg: #FFFFFF; --voile-fort: rgba(20,19,24,.94); --voile-faible: rgba(20,19,24,.58); } :root[data-palette="clair"] { --bar-bg: #FFFFFF; --utility-bg: #F4F3F1; --bar-fg: #1F1C24; --bar-fg-mid: rgba(31,28,36,.78); --bar-fg-dim: rgba(31,28,36,.66); --bar-fg-faint: rgba(31,28,36,.24); --panel-bg: #FFFFFF; --panel-fg: #1F1C24; --panel-fg-dim: rgba(31,28,36,.66); --feature-bg: #221E29; --feature-fg: #F4F3F1; --feature-fg-dim: rgba(244,243,241,.60); --notes-bg: #F7F6F4; --notes-fg: #1F1C24; --notes-fg-dim: rgba(31,28,36,.70); --notes-fg-faint: rgba(31,28,36,.62); --gold: #7C6216; --gold-bright: #5F4B11; --accent-panel: #7C6216; --rule-gold: rgba(31,28,36,.08); --rule-ink: rgba(31,28,36,.12); --hairline: rgba(31,28,36,.10); --cta-line: rgba(150,119,27,.45); --flag-bg: rgba(31,28,36,.04); --glow: rgba(31,28,36,.03); --cta-fg: #FFFFFF; --tuile-bg: #FFFFFF; --voile-fort: rgba(255,255,255,.94); --voile-faible: rgba(255,255,255,.62); } :root { --display: Rajdhani, "Arial Narrow", sans-serif; --body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif; --pad: clamp(20px, 5vw, 64px); --measure: 1280px; --ease: cubic-bezier(.22,.7,.2,1); } /* ── base ── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--panel-bg); color: var(--panel-fg); font-family: var(--body); font-size: 16px; line-height: 1.68; -webkit-font-smoothing: antialiased; } img, svg, iframe { display: block; max-width: 100%; } [hidden] { display: none !important; } a { color: var(--accent-panel); text-underline-offset: 3px; } ::selection { background: var(--gold); color: var(--cta-fg); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: 12px; z-index: 100; padding: 12px 20px; background: var(--gold); color: var(--cta-fg); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .skip-link:focus { top: 12px; } /* ── en-tête : bandeau utilitaire + barre ── */ /* L'en-tête suit le défilement : « position: sticky » sur le bloc entier, car une barre collante à l'intérieur d'un en-tête relatif s'arrêterait au bas de celui-ci. Passé cent pixels, le bandeau utilitaire se replie et la barre s'abaisse : le menu reste atteignable sans occuper cent quatorze pixels d'écran en permanence. Elementor : conteneur d'en-tête → Advanced → Position « Fixed » (gratuit) ou Motion Effects → Sticky « Top » (Pro). Le repli du bandeau est un agrément, pas une exigence : sans lui, l'en-tête reste simplement à sa hauteur pleine. */ .entete { position: relative; z-index: 30; } /* Sous 900 px, le menu s'empile sur cinq lignes : l'en-tête y fait plus de trois cents pixels et le figer mangerait le tiers de l'écran. Il n'est donc collant qu'à partir du moment où il tient sur une ligne. */ @media (min-width: 901px) { .entete { position: sticky; top: 0; } .entete .bandeau { overflow: hidden; max-height: var(--bandeau-h, 120px); transition: max-height 260ms var(--ease); } .entete.est-fige .bandeau { max-height: 0; } .entete.est-fige .barre__inner { min-height: 62px; } .entete.est-fige .marque img { --l: clamp(104px, 11vw, 138px); } .entete.est-fige .scene { box-shadow: 0 18px 34px -24px rgba(0,0,0,.55); } .barre__inner, .marque img { transition: min-height 260ms var(--ease), width 260ms var(--ease); } } .bandeau { background: var(--utility-bg); border-bottom: 1px solid var(--hairline); } .bandeau__inner { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad); min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; font-size: 11.5px; color: var(--bar-fg-dim); } .bandeau__droite { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; } .bandeau a { color: var(--bar-fg-dim); text-decoration: none; } .bandeau a:hover { color: var(--gold); } .bandeau sup { font-size: .7em; } .scene { position: relative; background: radial-gradient(120% 140% at 82% 0%, var(--glow) 0%, transparent 62%), var(--bar-bg); } .barre { position: relative; z-index: 3; } .barre__inner { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: stretch; justify-content: space-between; gap: 24px; min-height: 76px; } .marque { display: flex; align-items: center; flex: 0 0 auto; } .marque img { --l: clamp(124px, 14vw, 170px); width: var(--l); height: auto; margin-left: calc(var(--l) * -.122); } .menu { display: flex; } .menu__liste { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; } .menu__btn { height: 100%; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--bar-fg-mid); font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; } .menu__btn:hover { color: var(--gold); } .menu__btn[aria-expanded="true"], .menu__btn[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); } .chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms ease; } .menu__btn[aria-expanded="true"] .chevron { transform: translateY(1px) rotate(-135deg); } .barre__droite { display: flex; align-items: center; } .bouton-contact { display: inline-flex; align-items: center; padding: 11px 20px; background: var(--gold); color: var(--cta-fg); font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 150ms ease; } .bouton-contact:hover { background: var(--gold-bright); } /* panneaux du méga-menu */ .panneau { position: absolute; inset: auto 0 auto 0; z-index: 2; background: var(--panel-bg); color: var(--panel-fg); border-top: 1px solid var(--rule-gold); box-shadow: 0 26px 50px -22px rgba(0,0,0,.45); display: none; } .panneau.est-ouvert { display: block; animation: descend 200ms var(--ease); } @keyframes descend { from { opacity: 0; transform: translateY(-8px); } } .panneau__grille { max-width: var(--measure); margin: 0 auto; padding: 34px var(--pad) 38px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px 44px; } .colonne { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .colonne__titre { margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--rule-ink); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-panel); } .entree { display: block; padding: 8px 0; color: var(--panel-fg); text-decoration: none; } .entree:hover { color: var(--accent-panel); } .entree:hover .entree__nom { text-decoration: underline; text-underline-offset: 3px; } .entree__nom { display: block; font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.2; } .entree__note { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--panel-fg-dim); } .entree--phare { margin: -4px 0 4px; padding: 12px 14px; background: var(--flag-bg); border-left: 2px solid var(--gold); } .colonne--une { background: var(--feature-bg); color: var(--feature-fg); margin: -34px calc(var(--pad) * -1) -38px 0; padding: 34px var(--pad) 38px 30px; } .colonne--une .colonne__titre { color: var(--gold); border-bottom-color: var(--rule-gold); } .une__phrase { margin: 0 0 6px; font-family: var(--display); font-size: clamp(24px,2.6vw,31px); font-weight: 300; line-height: 1.16; text-wrap: balance; } .une__corps { margin: 0 0 20px; font-size: 13.5px; line-height: 1.62; color: var(--feature-fg-dim); } .une__lien { align-self: flex-start; display: inline-flex; align-items: center; padding: 11px 20px; border: 1px solid var(--cta-line); color: var(--gold); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: background 160ms ease, color 160ms ease; } .une__lien:hover { background: var(--gold); color: var(--feature-bg); border-color: var(--gold); } /* ── sections : conteneur > conteneur interne > colonnes ── */ .sec { padding: clamp(52px, 7vw, 104px) var(--pad); } .sec__inner { max-width: var(--measure); margin: 0 auto; } .sec--encre { background: var(--bar-bg); color: var(--bar-fg); } .sec--profond { background: var(--utility-bg); color: var(--notes-fg); } .sec--clair { background: var(--panel-bg); color: var(--panel-fg); } /* « sec--bord » ne trace plus de trait : deux sections de même fond se séparent par leur respiration. Le trait doré cassait le registre. */ .sec--bord { border-top: 0; } .cols { display: grid; gap: clamp(32px, 5vw, 64px); } .cols--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .cols--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .cols--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* Deux colonnes inégales : le corps du texte, et la colonne d'appui qui porte les faits de la mission. Elementor : conteneur à deux colonnes 66 / 33. */ .cols--appui { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } @media (max-width: 900px) { .cols--appui { grid-template-columns: 1fr; } } /* ── typographie ── */ .surtitre { margin: 0 0 18px; font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .sec--clair .surtitre { color: var(--accent-panel); } .t1 { margin: 0 0 22px; font-family: var(--display); font-weight: 600; font-size: clamp(34px,6vw,64px); line-height: 1.04; letter-spacing: .005em; text-wrap: balance; } .t2 { margin: 0 0 22px; font-family: var(--display); font-weight: 300; font-size: clamp(28px,3.8vw,46px); line-height: 1.12; text-wrap: balance; max-width: 22ch; } .t3 { margin: 0 0 12px; font-family: var(--display); font-weight: 500; font-size: clamp(21px,2.4vw,27px); line-height: 1.2; } .chapo { margin: 0 0 20px; font-size: clamp(17px,1.7vw,19px); line-height: 1.66; max-width: 62ch; color: inherit; } .texte { margin: 0 0 16px; max-width: 68ch; text-wrap: pretty; } .sec--encre .texte, .sec--profond .texte { color: var(--notes-fg-dim); } .sec--clair .texte { color: var(--panel-fg-dim); } /* ── composants ── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; background: var(--gold); color: var(--cta-fg); border: 1px solid var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; text-decoration: none; transition: background 150ms ease, border-color 150ms ease; } .btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); } .btn--ligne { background: transparent; color: var(--gold); border-color: var(--cta-line); } .btn--ligne:hover { background: var(--gold); color: var(--cta-fg); border-color: var(--gold); } .sec--clair .btn--ligne { color: var(--accent-panel); border-color: var(--rule-ink); } .sec--clair .btn--ligne:hover { background: var(--accent-panel); color: var(--panel-bg); border-color: var(--accent-panel); } .chiffre { display: flex; flex-direction: column; gap: 10px; } .chiffre__val { font-family: var(--display); font-weight: 500; font-size: clamp(40px,5vw,62px); line-height: .9; } .chiffre__lib { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--notes-fg-faint); } .sec--clair .chiffre__lib { color: var(--panel-fg-dim); } .liste-num { margin: 0; padding: 0; list-style: none; } .liste-num li { display: flex; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule-ink); } .sec--encre .liste-num li, .sec--profond .liste-num li { border-bottom-color: var(--rule-gold); } .liste-num li:last-child { border-bottom: 0; } .liste-num__num { min-width: 28px; font-size: 10px; letter-spacing: .16em; color: var(--gold); } .sec--clair .liste-num__num { color: var(--accent-panel); } .liste-num__nom { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; } /* Un titre de publication ne se lit pas en capitales : la liste des sources garde la casse d'origine. */ .sources .liste-num__nom { font-size: 16px; letter-spacing: 0; text-transform: none; line-height: 1.45; } .carte { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--rule-ink); } .carte__note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--panel-fg-dim); } .carte a { text-decoration: none; } .puces { margin: 0 0 16px; padding-left: 20px; max-width: 62ch; } .puces li { margin-bottom: 8px; } /* ── colonne d'appui : les faits de la mission, d'un coup d'œil ── Elle suit le défilement sur grand écran ; sous 901 px elle repasse dans le flux, sous le texte. Elementor : conteneur avec Position « Sticky » (Pro) ou simple colonne — rien du contenu ne dépend du collage. */ /* La colonne d'appui ne porte ni fond ni cadre : elle se tient par sa typographie et par un seul filet vertical, discret. Un aplat beige et une bordure dorée faisaient encart publicitaire. */ .appui { align-self: start; /* sinon la grille l'étire sur toute la hauteur */ padding: 2px 0 2px 26px; border-left: 1px solid var(--rule-ink); } .sec--encre .appui, .sec--profond .appui { border-left-color: var(--rule-gold); } @media (min-width: 901px) { .appui { position: sticky; top: 88px; } } .appui__titre { margin: 0 0 14px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-panel); } .sec--encre .appui__titre, .sec--profond .appui__titre { color: var(--gold); } .sec--encre .appui__liste dt, .sec--profond .appui__liste dt { color: var(--notes-fg-faint); } .appui__liste { margin: 0; } .appui__liste dt { margin-top: 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--panel-fg-dim); } .appui__liste dt:first-of-type { margin-top: 0; } .appui__liste dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; } .appui__liste dd a { color: var(--accent-panel); text-decoration: none; border-bottom: 1px solid var(--rule-ink); } .appui__liste dd a:hover { border-bottom-color: var(--accent-panel); } /* Les chiffres d'une mission ne s'inventent pas : tant que le cabinet ne les a pas fournis, la liste reste vide et le bloc ne s'affiche pas. */ .appui__chiffres { margin: 22px 0 0; display: grid; gap: 16px; } .appui__chiffre { display: flex; flex-direction: column; gap: 4px; } .appui__chiffre b { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: .95; } .appui__chiffre span { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--panel-fg-dim); } /* ── photographie de mission ── La légende n'est pas décorative : elle dit ce que l'image montre, et c'est ce qui permet de la publier. Une photographie ne tient jamais lieu d'une mission qu'elle n'illustre pas (règle 2 du briefing). Elementor : widget Image, « Caption : Custom caption ». */ .figure { margin: 0; max-width: 900px; } /* L'image garde ses proportions — on ne recadre pas une photographie de mission pour la faire entrer dans un format : le plafond de hauteur suffit à tenir les clichés verticaux. */ .figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(62vh, 560px); } .figure__legende { margin-top: 12px; max-width: 74ch; font-size: 12.5px; line-height: 1.6; color: var(--panel-fg-dim); } .sec--encre .figure__legende, .sec--profond .figure__legende { color: var(--notes-fg-dim); } /* ── plaques photo, parallaxe épinglé — idiome de la page d'attente ── Une plaque par section, photo et voile sur le même élément : c'est « Background + Background Overlay » d'un conteneur Elementor. La section porteuse découpe la plaque ; sans JavaScript, inset:0 la fait couvrir. */ .sec--plaque { position: relative; overflow: hidden; isolation: isolate; } .sec--plaque > .sec__inner { position: relative; z-index: 1; } /* La plaque déborde de 90 px en haut et en bas : c'est la réserve dans laquelle elle glisse au défilement, sans jamais découvrir un bord. */ .plaque { position: absolute; inset: -90px 0; min-height: calc(100% + 180px); z-index: 0; background-color: var(--bar-bg); background-image: linear-gradient(96deg, var(--voile-fort) 0%, var(--voile-fort) 46%, var(--voile-faible) 100%), var(--plaque-photo); background-size: cover; background-position: center; will-change: transform; pointer-events: none; } .plaque--reunion { --plaque-photo: url("assets/hero-fusion-c.jpg"); } .plaque--dossiers { --plaque-photo: url("assets/metiers.jpg"); } .plaque--tour { --plaque-photo: url("assets/alerte.jpg"); } /* photographies réelles des missions, récupérées de l'ancien site */ .plaque--arsat { --plaque-photo: url("assets/mission-arsat.jpg"); } .plaque--sonacim { --plaque-photo: url("assets/mission-sonacim.jpg"); } .plaque--bcc { --plaque-photo: url("assets/mission-bcc.jpg"); } /* ── révélation au défilement — Elementor : Entrance Animation, Fade In Up ── */ [data-reveal] { transition: opacity 900ms var(--ease), transform 900ms var(--ease); } [data-reveal].is-hidden { opacity: 0; transform: translateY(22px); } /* ── survol des cartes — Elementor : Border, onglet Hover ── */ .carte { transition: border-color 200ms var(--ease); } .carte:hover { border-color: var(--accent-panel); } /* ── bandeau de références : les logos défilent de droite à gauche ── Deux listes identiques se suivent ; l'animation translate l'ensemble de la moitié de sa largeur, puis reprend — la bascule tombe pile sur le début de la seconde liste, donc le défilement paraît sans fin. Elementor : widget Image Carousel (gratuit), lecture automatique, boucle infinie, vitesse lente, flèches et points désactivés. SPEC §10. */ .refs { overflow: hidden; position: relative; } .refs::before, .refs::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } .refs::before { left: 0; background: linear-gradient(90deg, var(--panel-bg), transparent); } .refs::after { right: 0; background: linear-gradient(270deg, var(--panel-bg), transparent); } .refs__piste { display: flex; width: max-content; animation: defile 42s linear infinite; } .refs:hover .refs__piste { animation-play-state: paused; } @keyframes defile { to { transform: translateX(-50%); } } .refs__lot { display: flex; align-items: center; gap: 18px; padding-right: 18px; } .refs__item { flex: 0 0 auto; display: grid; place-items: center; height: 96px; min-width: 176px; padding: 0 26px; background: var(--tuile-bg); border: 1px solid var(--rule-ink); } .refs__item img { height: 52px; width: auto; } @media (prefers-reduced-motion: reduce) { .refs { overflow-x: auto; } .refs__piste { animation: none; } } /* ── image à la une, en tête de carte ── */ /* « height: auto » n'est pas décoratif : les attributs width et height de la balise valent indication de présentation, et leur hauteur écraserait le rapport demandé — l'image reprendrait sa hauteur d'origine. */ .carte__image { display: block; width: calc(100% + 56px); max-width: none; height: auto; margin: -26px -28px 12px; aspect-ratio: 16 / 9; object-fit: cover; } /* ── article : fil d'Ariane, méta, sommaire, encart, partage ── Tout ce qu'un lecteur d'article attend d'un blog tenu. Chaque élément a son équivalent Elementor : fil d'Ariane = widget Breadcrumbs (Pro) ou un simple conteneur de liens ; sommaire = Table of Contents (Pro) ou une liste de liens d'ancre écrite à la main ; encart = conteneur bordé ; partage = widget Share Buttons (Pro) ou trois liens. Aucun n'est indispensable au sens de la page : sans eux, l'article se lit entièrement. */ .fil { margin: 0 0 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .fil a, .fil span { color: var(--notes-fg-faint); text-decoration: none; } .fil a:hover { color: var(--gold); } .fil a::after { content: " / "; color: var(--bar-fg-faint); } .fil span { color: var(--gold); } .meta-article { margin: 18px 0 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--notes-fg-faint); } /* Le corps d'article : une mesure de lecture, et des liens qui se voient. */ .corps .texte { max-width: 72ch; font-size: 17px; } .corps .texte a { color: var(--accent-panel); text-decoration: none; border-bottom: 1px solid var(--cta-line); } .corps .texte a:hover { border-bottom-color: var(--accent-panel); background: var(--flag-bg); } .corps .t3 { scroll-margin-top: 120px; } .sommaire { margin: 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.5; } .sommaire li { margin-bottom: 9px; } .sommaire a { color: var(--panel-fg-dim); text-decoration: none; } .sommaire a:hover { color: var(--accent-panel); text-decoration: underline; text-underline-offset: 3px; } /* L'encart n'a pas d'aplat : un filet à gauche, une graisse un peu plus haute, et il arrête l'œil sans faire bloc publicitaire. */ .encart { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent-panel); } .encart__label { margin: 0 0 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-panel); } .encart__texte { margin: 0; font-size: 16.5px; line-height: 1.6; max-width: 64ch; font-family: var(--display); font-weight: 400; } .encart__texte a { color: var(--accent-panel); border-bottom: 1px solid var(--cta-line); text-decoration: none; } .encart__lien { display: inline-block; margin-top: 12px; color: var(--accent-panel); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--cta-line); } .encart__lien:hover { border-bottom-color: var(--accent-panel); } /* Partage, en fin d'article : les marques dessinées, pas nommées. */ .partage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule-ink); } .partage__label { margin-right: 6px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--panel-fg-dim); } .partage__lien { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-ink); color: var(--panel-fg-dim); text-decoration: none; transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease); } .partage__lien:hover { color: var(--panel-bg); background: var(--accent-panel); border-color: var(--accent-panel); } /* L'image à la une reste dans la colonne de texte : pleine largeur, elle écrasait la page et repoussait le premier paragraphe sous la ligne de flottaison. */ .figure--une { max-width: 100%; margin: 0 0 30px; } .figure--une img { width: 100%; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; } /* ── le blog : article de tête, puis liste ── Aucune étiquette « à la une » : c'est la taille qui dit le rang. Elementor : widget Posts en disposition « Grid » limité à un article, puis un second en disposition « List » avec décalage de un. */ .tete { display: grid; gap: 0; margin-bottom: clamp(34px, 5vw, 56px); } .tete__image { display: block; overflow: hidden; } .tete__image img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; transition: transform 700ms var(--ease); } .tete:hover .tete__image img { transform: scale(1.02); } .tete__corps { padding: 22px 0 0; } .tete__meta { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-panel); } .tete__titre { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; max-width: 20ch; text-wrap: balance; } .tete__titre a { color: inherit; text-decoration: none; } .tete__titre a:hover { color: var(--accent-panel); } .tete__chapo { margin: 0 0 20px; font-size: 17px; line-height: 1.6; max-width: 60ch; color: var(--panel-fg-dim); } .playlist { margin: 0; padding: 0; list-style: none; } .piste { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--rule-ink); } .piste:last-child { border-bottom: 1px solid var(--rule-ink); } .piste__image { display: block; overflow: hidden; align-self: start; } .piste__image img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 600ms var(--ease); } .piste:hover .piste__image img { transform: scale(1.03); } .piste__meta { margin: 0 0 6px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--panel-fg-dim); } .piste__titre { margin: 0 0 6px; font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.22; } .piste__titre a { color: inherit; text-decoration: none; } .piste__titre a:hover { color: var(--accent-panel); } .piste__chapo { margin: 0; font-size: 14.5px; line-height: 1.58; max-width: 62ch; color: var(--panel-fg-dim); } @media (max-width: 620px) { .piste { grid-template-columns: 1fr; gap: 14px; } } /* Colonne latérale : listes nues et vignettes, sans aplat ni cadre. */ .liste-nue { margin: 0; padding: 0; list-style: none; font-size: 14.5px; } .liste-nue li { padding: 7px 0; border-bottom: 1px solid var(--rule-ink); } .liste-nue li:last-child { border-bottom: 0; } .liste-nue a { color: var(--panel-fg); text-decoration: none; } .liste-nue a:hover { color: var(--accent-panel); } .liste-nue .compte { float: right; font-size: 12px; color: var(--panel-fg-dim); } .vignettes { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .vignettes a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--panel-fg); text-decoration: none; } .vignettes img { width: 76px; height: 52px; object-fit: cover; } .vignettes span { font-size: 13.5px; line-height: 1.4; } .vignettes a:hover span { color: var(--accent-panel); } /* ── icône de métier ── Tracée en SVG dans le contenu, sans bibliothèque ni appel réseau. Elle prend la couleur du texte, donc elle suit la palette sans valeur en dur. Elementor : widget Icon Box, icône SVG téléversée. */ .icone { width: 30px; height: 30px; stroke: var(--accent-panel); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .sec--encre .icone, .sec--profond .icone { stroke: var(--gold); } .carte .icone { margin-bottom: 4px; } /* ── le processus, en étapes reliées ── Une bande de quatre jalons : le numéro, le nom, la ligne qui les relie. Elementor : quatre conteneurs en ligne, chacun un Icon Box ; la ligne est une bordure supérieure sur le conteneur parent. */ .etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin-top: 34px; border-top: 1px solid var(--rule-gold); } .etape { position: relative; padding: 26px 22px 0 0; } .etape::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--utility-bg); } .etape__num { display: block; font-size: 10px; letter-spacing: .2em; color: var(--gold); } .etape__nom { display: block; margin: 6px 0 8px; font-family: var(--display); font-size: 21px; font-weight: 500; line-height: 1.2; } .etape__detail { margin: 0; font-size: 14px; line-height: 1.6; color: var(--notes-fg-dim); } /* ── médias : lecteur, filtres, galerie ── Elementor : widget Vidéo (YouTube, liste de lecture native) pour le lecteur ; widget Gallery avec catégories (Pro) — ou un jeu d'onglets, widget Tabs gratuit, une galerie par onglet — pour les filtres. SPEC §10. */ .lecteur { aspect-ratio: 16 / 9; background: var(--bar-bg); overflow: hidden; } .lecteur iframe { width: 100%; height: 100%; border: 0; } /* ── studio vidéo : lecteur et liste de lecture ── La disposition d'une plateforme de lecture — grand lecteur à gauche, file d'attente à droite, vignettes servies par YouTube. Sous 900 px la file passe sous le lecteur. */ /* Sans file d'attente — aucune vidéo relevée — le lecteur prend toute la largeur plutôt que de laisser une colonne vide à côté de lui. */ .studio { display: grid; grid-template-columns: 1fr; gap: 26px; } @media (min-width: 901px) { .studio:has(.studio__liste) { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); } } .studio__legende { margin: 12px 0 0; font-size: 12.5px; color: var(--notes-fg-dim); } .studio__titre { margin: 0 0 12px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .studio__liste { max-height: 62vh; overflow-y: auto; padding-right: 6px; } .pistes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .pistes a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 7px; color: var(--bar-fg); text-decoration: none; transition: background 160ms var(--ease); } .pistes a:hover, .pistes a[aria-current="true"] { background: rgba(255,255,255,.06); } .pistes img { width: 104px; height: 59px; object-fit: cover; } .pistes__titre { font-size: 13.5px; line-height: 1.35; align-self: center; } .pistes__date { grid-column: 2; font-size: 11px; color: var(--notes-fg-faint); } /* La mention de provenance. Elle dit d'où vient une vidéo que le cabinet n'a pas produite — discrètement, mais sans qu'on ait à chercher. */ .studio__mention { margin: 10px 0 0; max-width: 68ch; font-size: 12px; line-height: 1.55; color: var(--notes-fg-faint); } .studio__mention a { color: var(--notes-fg-dim); text-underline-offset: 3px; } .studio__mention a:hover { color: var(--gold); } /* ── planche photographique ── Les images tiennent la page, le texte s'efface : la légende n'apparaît qu'au survol, en bas du cadre. Colonnes en maçonnerie, gouttière fine. */ .planche { columns: 3 320px; column-gap: 10px; padding: 30px var(--pad) 0; } @media (max-width: 700px) { .planche { columns: 1; padding-inline: var(--pad); } } .planche__item { break-inside: avoid; margin: 0 0 10px; position: relative; overflow: hidden; } .planche__item a { display: block; position: relative; } .planche__item img { width: 100%; height: auto; display: block; transition: transform 900ms var(--ease), filter 500ms var(--ease); filter: saturate(.92); } .planche__item:hover img { transform: scale(1.04); filter: saturate(1); } .planche__item figcaption { position: absolute; inset: auto 0 0 0; padding: 30px 18px 14px; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #FFFFFF; font-size: 12.5px; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); } .planche__item:hover figcaption, .planche__item a:focus-visible figcaption { opacity: 1; transform: none; } @media (hover: none) { .planche__item figcaption { opacity: 1; transform: none; } } .filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 26px; } .filtres--sombre .filtres__btn { border-color: var(--rule-gold); color: var(--notes-fg-dim); } .filtres--sombre .filtres__btn:hover { color: var(--gold); border-color: var(--gold); } .filtres--sombre .filtres__btn[aria-pressed="true"] { background: var(--gold); color: var(--cta-fg); border-color: var(--gold); } .filtres__btn { padding: 9px 16px; background: transparent; color: var(--panel-fg-dim); border: 1px solid var(--rule-ink); font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color 160ms var(--ease), border-color 160ms var(--ease); } .filtres__btn:hover { color: var(--accent-panel); border-color: var(--accent-panel); } a.filtres__btn { display: inline-block; text-decoration: none; } .filtres__btn[aria-pressed="true"] { color: var(--cta-fg); background: var(--accent-panel); border-color: var(--accent-panel); } /* La galerie ne recadre pas : chaque cliché garde ses proportions, et les colonnes se remplissent à hauteur variable. */ .galerie { columns: 3 260px; column-gap: 18px; } .galerie__item { break-inside: avoid; margin: 0 0 18px; background: var(--tuile-bg); border: 1px solid var(--rule-ink); } .galerie__item img { width: 100%; height: auto; } .galerie__item figcaption { padding: 10px 14px 12px; font-size: 12px; line-height: 1.5; color: var(--panel-fg-dim); } .galerie__item a { display: block; } /* ── pied ── */ .pied { background: var(--utility-bg); color: var(--notes-fg-dim); } .pied__haut { max-width: var(--measure); margin: 0 auto; padding: clamp(44px,5vw,68px) var(--pad); display: grid; gap: 34px 48px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .pied__titre { margin: 0 0 14px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .pied ul { margin: 0; padding: 0; list-style: none; } .pied li { margin-bottom: 8px; font-size: 14.5px; } .pied a { color: var(--notes-fg-dim); text-decoration: none; } .pied a:hover { color: var(--gold); } .pied__bas { max-width: var(--measure); margin: 0 auto; padding: 22px var(--pad); border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--notes-fg-faint); } .socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .socials a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); color: var(--notes-fg-dim); } .socials a[href]:hover { border-color: var(--gold); color: var(--gold); } .socials a:not([href]) { opacity: .3; pointer-events: none; } /* ── responsive ── */ @media (max-width: 900px) { .plaque { background-image: linear-gradient(var(--voile-fort), var(--voile-fort)), var(--plaque-photo); } .barre__inner { flex-direction: column; align-items: stretch; padding-block: 14px; gap: 12px; } .menu__liste { flex-wrap: wrap; gap: 2px 4px; } .menu__btn { padding: 9px 10px; border-bottom-width: 1px; } .panneau { position: static; box-shadow: none; } .colonne--une { margin: 0; padding: 26px 24px; } .barre__droite { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } [data-reveal] { transition: none; } [data-reveal].is-hidden { opacity: 1 !important; transform: none !important; } }