/* ========================================================================== Antarctik : feuille de styles principale Structure inspirée de la référence Engitech, charte Antarctik : encre #1C1B1A, gris #868281, un seul jaune signal #FEF200, Varela Round + Figtree. ========================================================================== */ /* Polices auto-hébergées ------------------------------------------------- */ @font-face { font-family: "Varela Round"; src: url("https://www.antarctik.net/wp-content/themes/antarctik/assets/fonts/varela-round-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Varela Round"; src: url("https://www.antarctik.net/wp-content/themes/antarctik/assets/fonts/varela-round-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; src: url("https://www.antarctik.net/wp-content/themes/antarctik/assets/fonts/figtree-latin-wght.woff2") format("woff2-variations"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; src: url("https://www.antarctik.net/wp-content/themes/antarctik/assets/fonts/figtree-latin-ext-wght.woff2") format("woff2-variations"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; src: url("https://www.antarctik.net/wp-content/themes/antarctik/assets/fonts/figtree-latin-wght-italic.woff2") format("woff2-variations"); font-weight: 300 900; font-style: italic; font-display: swap; } /* Jetons ------------------------------------------------------------------ */ :root { --signal: #fef200; --grey: #868281; --ink: #1c1b1a; --ink-soft: #2a2827; --ink-line: #3a3836; --muted: #57534f; --on-dark-muted: #b4b0ae; --surface: #f4f3f1; --line: #e3e1de; --white: #ffffff; --error: #b3261e; --font-display: "Varela Round", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif; --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fs-display: clamp(2.3rem, 1.3rem + 3.2vw, 4.1rem); --fs-h1: clamp(2rem, 1.4rem + 2.2vw, 3.3rem); --fs-h2: clamp(1.8rem, 1.3rem + 1.7vw, 2.75rem); --fs-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem); --fs-lead: clamp(1.1rem, 1.04rem + 0.3vw, 1.3rem); --fs-body: clamp(1.0313rem, 1rem + 0.15vw, 1.125rem); --fs-small: 0.9375rem; --fs-xs: 0.8125rem; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem; --section: clamp(4.5rem, 3rem + 5.5vw, 8.5rem); --radius-sm: 12px; --radius: 22px; --pill: 999px; --container: 1200px; --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem); --header-h: 92px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --shadow: 0 18px 40px -24px rgba(28, 27, 26, 0.35); } /* Réinitialisation -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } :where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; } :where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; } :where(img, svg, video, picture) { display: block; max-width: 100%; height: auto; } :where(input, button, textarea, select) { font: inherit; color: inherit; } :where(a) { color: inherit; } :where(button) { cursor: pointer; } body { background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } :where(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--signal); color: var(--ink); } :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 6px; } .section:not(.section--ink) :focus-visible, .site-header :focus-visible { outline-color: var(--ink); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 1rem; top: -100px; z-index: 1000; background: var(--signal); color: var(--ink); padding: 0.75rem 1.25rem; border-radius: var(--pill); font-weight: 650; text-decoration: none; } .skip-link:focus { top: 1rem; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } /* Boutons, liens ---------------------------------------------------------- */ .btn { --btn-bg: var(--signal); --btn-fg: var(--ink); --btn-bd: var(--signal); display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.85rem 1.6rem; border: 2px solid var(--btn-bd); border-radius: var(--pill); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease); } .btn:active { transform: translateY(1px); } .btn__icon { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--ease); } .btn:hover .btn__icon { transform: translateX(3px); } .btn--primary:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); } .section--ink .btn--primary:hover, .hero .btn--primary:hover, .band .btn--primary:hover, .ctab .btn--primary:hover, .pheader .btn--primary:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); } .btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); } .btn--dark:hover { --btn-bg: var(--signal); --btn-fg: var(--ink); --btn-bd: var(--signal); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); } .btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--white); } .btn--light { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, 0.5); } .btn--light:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); } .more { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; } .more .icon { width: 1.15rem; height: 1.15rem; color: var(--ink); background: var(--signal); border-radius: 50%; padding: 0.15rem; transition: transform 0.3s var(--ease); } .more:hover .icon { transform: translateX(4px); } .more:hover span { text-decoration: underline; text-underline-offset: 0.25em; } .more--small { font-size: 0.8rem; } /* Étiquettes et en-têtes de section --------------------------------------- */ .eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.9rem; background: linear-gradient(transparent 58%, var(--signal) 58%); padding: 0 0.15em; } .eyebrow span { margin-right: 0.15em; } .section--ink .eyebrow, .hero .eyebrow, .band .eyebrow, .ctab .eyebrow, .panel .eyebrow { color: var(--signal); background: none; padding: 0; } .shead { margin-bottom: clamp(2.5rem, 4vw, 3.75rem); } .shead__title { font-size: var(--fs-h2); max-width: 22ch; } .shead__text { margin-top: var(--space-3); color: var(--muted); max-width: 42rem; font-size: var(--fs-lead); line-height: 1.55; } .shead--center { text-align: center; } .shead--center .shead__title { margin-inline: auto; } .shead--center .shead__text { margin-inline: auto; } .shead--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) clamp(2rem, 6vw, 6rem); align-items: end; } .shead--row .shead__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .shead--row .shead__side .shead__text { margin-top: 0; font-size: var(--fs-body); } .shead--row .shead__side:has(.btn):not(:has(p)) { align-items: flex-end; } .section--ink .shead__title, .band .shead__title { color: var(--white); } .section--ink .shead__text, .band .shead__text { color: var(--on-dark-muted); } @media (max-width: 760px) { .shead--row { grid-template-columns: 1fr; } .shead--row .shead__side:has(.btn):not(:has(p)) { align-items: flex-start; } } /* Sections ---------------------------------------------------------------- */ .section { padding-block: var(--section); } .section--surface { background: var(--surface); } .section--ink { position: relative; background: var(--ink); color: var(--white); isolation: isolate; } .section--ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px; mask-image: linear-gradient(180deg, #000 0%, transparent 70%); } .section--ink p { color: var(--on-dark-muted); } /* Le trait (signature) ---------------------------------------------------- */ .trait { display: block; overflow: visible; } .trait path { fill: none; stroke: var(--signal); stroke-width: 10px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; } .js .trait path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) 0.2s; } .js .trait.is-drawn path { stroke-dashoffset: 0; } .trait--under { width: 160px; height: 20px; margin: var(--space-3) 0; } /* Barre supérieure -------------------------------------------------------- */ .topbar { background: var(--ink); color: var(--on-dark-muted); font-size: var(--fs-xs); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 42px; } .topbar__info { display: flex; gap: var(--space-4); } .topbar__info li, .topbar__info a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .topbar__info .icon { width: 15px; height: 15px; color: var(--signal); } .topbar a:hover { color: var(--white); } .topbar__right { display: flex; align-items: center; gap: var(--space-3); } .topbar__tagline a { color: var(--signal); font-weight: 650; text-decoration: none; } .topbar__tagline a:hover { color: var(--white); } .socials--top { display: flex; gap: 0.25rem; } .socials--top a { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; } .socials--top .icon { width: 16px; height: 16px; } @media (max-width: 900px) { .topbar__tagline { display: none; } } @media (max-width: 600px) { .topbar { display: none; } } /* En-tête ----------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--line); transition: box-shadow 0.3s var(--ease); } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .site-header { top: 0; } } .site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(28, 27, 26, 0.4); } .header__inner { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); } .brand { flex: none; } .brand__logo { width: 128px; height: auto; } .mainnav { margin-left: auto; } .mainnav .menu { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 2rem); list-style: none; padding: 0; margin: 0; } .mainnav .menu > li { position: relative; display: flex; align-items: center; height: var(--header-h); } .mainnav .menu a { display: block; padding: 0.4rem 0; font-size: 0.98rem; font-weight: 650; text-decoration: none; color: var(--ink); white-space: nowrap; } .mainnav .menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .mainnav .menu > li:hover > a::after, .mainnav .menu > .current-menu-item > a::after, .mainnav .menu > .current-menu-ancestor > a::after, .mainnav .menu > .current_page_item > a::after { transform: scaleX(1); } .submenu-toggle { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-left: 0.1rem; background: none; border: 0; padding: 0; color: var(--grey); border-radius: 50%; } .submenu-toggle .icon { width: 15px; height: 15px; transition: transform 0.3s var(--ease); } .mainnav .sub-menu { position: absolute; top: 100%; left: -1.25rem; min-width: 270px; list-style: none; margin: 0; padding: 0.6rem; background: var(--white); border-top: 3px solid var(--signal); border-radius: 0 0 16px 16px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s; } .mainnav .sub-menu a { padding: 0.7rem 0.9rem; border-radius: 10px; font-size: 0.95rem; font-weight: 600; } .mainnav .sub-menu a:hover, .mainnav .sub-menu .current-menu-item > a { background: var(--surface); } .mainnav li:hover > .sub-menu, .mainnav li:focus-within > .sub-menu, .mainnav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .mainnav li.is-open > .submenu-toggle .icon { transform: rotate(180deg); } .mainnav__extra { display: none; } .header__tools { display: flex; align-items: center; gap: var(--space-2); } .tool-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: none; color: var(--ink); } .tool-btn:hover { background: var(--surface); } .tool-btn .icon { width: 22px; height: 22px; } .header__call { display: flex; align-items: center; gap: 0.75rem; padding-left: var(--space-3); border-left: 1px solid var(--line); text-decoration: none; white-space: nowrap; } .header__call-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--signal); } .header__call-icon .icon { width: 20px; height: 20px; } .header__call small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; line-height: 1.2; } .header__call strong { display: block; font-size: 0.98rem; line-height: 1.3; } .header__cta { min-height: 3rem; } .burger { display: none; place-items: center; width: 3rem; height: 3rem; border: 1.5px solid var(--line); border-radius: 50%; background: none; color: var(--ink); } .burger .icon { width: 22px; height: 22px; } .burger__close { display: none; } @media (max-width: 1440px) { .header__call { display: none; } } @media (max-width: 1120px) { .header__tools { margin-left: auto; } .burger { display: inline-grid; } .header__cta { display: none; } .mainnav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--gutter) var(--space-4); background: var(--white); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; } .admin-bar .mainnav { top: calc(var(--header-h) + 46px); } .nav-open .mainnav { opacity: 1; visibility: visible; transition-delay: 0s; } .nav-open { overflow: hidden; } .nav-open .burger__open { display: none; } .nav-open .burger__close { display: block; } .mainnav .menu { flex-direction: column; align-items: stretch; gap: 0; } .mainnav .menu > li { flex-wrap: wrap; height: auto; border-bottom: 1px solid var(--line); } .mainnav .menu > li > a { flex: 1; padding: 1rem 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; } .mainnav .menu > li > a::after { display: none; } .submenu-toggle { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); } .mainnav .sub-menu { position: static; flex-basis: 100%; display: none; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 1rem; min-width: 0; } .mainnav li.is-open > .sub-menu { display: block; } .mainnav__extra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .mainnav__tel { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 600; } .mainnav__tel .icon { width: 18px; height: 18px; } } @media (max-width: 480px) { .brand__logo { width: 108px; } :root { --header-h: 76px; } } /* Recherche --------------------------------------------------------------- */ .search-panel { position: fixed; inset: 0 0 auto 0; z-index: 200; background: var(--ink); padding-block: var(--space-5); box-shadow: var(--shadow); } .search-panel[hidden] { display: none; } .search-panel__inner { display: flex; align-items: center; gap: var(--space-2); } .search-panel .searchform { flex: 1; max-width: none; } .search-panel__close { color: var(--white); } .search-panel__close:hover { background: var(--ink-soft); } /* Accueil : diaporama principal ------------------------------------------- Photo pleine largeur traitée en gris, panneau jaune étroit à bord diagonal et carte de l'Afrique en lignes pointillées (référence Engitech). Le texte reste en encre : le blanc n'est pas lisible sur le jaune. */ .hero { --hero-h: clamp(600px, calc(100svh - var(--header-h) - 42px), 760px); --bar-h: 96px; --panel-top: 28%; --panel-bottom: 46%; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: var(--hero-h); background: var(--grey); color: var(--ink); overflow: hidden; isolation: isolate; } .hero__slides { display: grid; grid-row: 1 / -1; grid-column: 1; } /* La diapositive sortante reste opaque sous l'entrante pendant le fondu : le panneau ne clignote pas. */ .hslide { position: relative; grid-area: 1 / 1; display: grid; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0s linear 0.8s; } .hslide.is-active { opacity: 1; pointer-events: auto; z-index: 1; transition: opacity 0.8s var(--ease); } .hslide__media { position: absolute; inset: 0; margin: 0; z-index: 0; } .hslide__media img, .hslide__media .ph { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 0; transform: scale(1.08); transition: transform 7.5s linear; } .hslide.is-active .hslide__media img { transform: scale(1); } .hslide__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hslide__panel { position: absolute; inset: 0; background: linear-gradient(105deg, var(--signal) 0%, #f6ea0a 16%, #c8c06c 32%, var(--grey) 46%); clip-path: polygon(0 0, var(--panel-top) 0, var(--panel-bottom) 100%, 0 100%); } .hslide__map { position: absolute; inset: 0; } .hslide__map--panel { color: rgba(28, 27, 26, 0.24); clip-path: polygon(0 0, var(--panel-top) 0, var(--panel-bottom) 100%, 0 100%); } .hslide__map--photo { color: rgba(255, 255, 255, 0.85); clip-path: polygon(var(--panel-top) 0, 100% 0, 100% 100%, var(--panel-bottom) 100%); } /* Carte : lignes verticales pointillées découpées dans la silhouette du continent. */ .africa { position: absolute; left: 1%; top: 20%; height: 62%; aspect-ratio: 70 / 74; } .africa::before, .africa::after { content: ""; position: absolute; inset: 0; -webkit-mask: url("https://www.antarctik.net/wp-content/themes/antarctik/assets/img/afrique.svg") center / contain no-repeat; mask: url("https://www.antarctik.net/wp-content/themes/antarctik/assets/img/afrique.svg") center / contain no-repeat; } .africa::before { background: currentColor; opacity: 0.14; } .africa::after { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 9px); -webkit-mask: url("https://www.antarctik.net/wp-content/themes/antarctik/assets/img/afrique.svg") center / contain no-repeat, repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 16px); -webkit-mask-composite: source-in; mask: url("https://www.antarctik.net/wp-content/themes/antarctik/assets/img/afrique.svg") center / contain no-repeat, repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 16px); mask-composite: intersect; } .hslide__inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(3rem, 6vw, 5rem) calc(var(--bar-h) + clamp(1.5rem, 3vw, 2.5rem)); } .hslide__content { max-width: 32rem; } .hero .eyebrow { color: var(--ink); font-size: var(--fs-small); letter-spacing: 0.04em; margin-bottom: 1.1rem; } .hslide__title { font-size: clamp(2.1rem, 1.3rem + 1.9vw, 3.1rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; } .hslide__text { margin-top: 1.25rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); max-width: 32rem; } .hslide__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; } .hero .btn--primary { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); } .hero .btn--primary:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); } .hero .btn--light { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); } .hero .btn--light:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); } .hero :focus-visible { outline-color: var(--ink); } .js .hslide .hslide__content > * { opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; } .js .hslide.is-active .hslide__content > * { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 0.35s, transform 0.6s var(--ease) 0.35s; } .js .hslide.is-active .hslide__content > :nth-child(2) { transition-delay: 0.43s; } .js .hslide.is-active .hslide__content > :nth-child(3) { transition-delay: 0.51s; } .js .hslide.is-active .hslide__content > :nth-child(4) { transition-delay: 0.59s; } .js .hero:not(.is-ready) .hslide.is-active .hslide__content > * { transition-delay: 0s; } /* Flèches en bas, sur la photo. */ .hero__arrows { grid-row: 2; grid-column: 1; position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 0.75rem; height: var(--bar-h); } .hero__arrow { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 16px; cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .hero__arrow svg { width: 22px; height: 22px; transition: transform 0.25s var(--ease); } .hero__arrow--prev { background: var(--ink); color: var(--white); border: 1.5px solid var(--ink); } .hero__arrow--next { background: var(--signal); color: var(--ink); border: 1.5px solid var(--ink); } .hero__arrow:hover { transform: translateY(-2px); } .hero__arrow--prev:hover, .hero__arrow--next:hover { background: var(--white); color: var(--ink); border-color: var(--white); } .hero__arrow--prev:hover svg { transform: translateX(-3px); } .hero__arrow--next:hover svg { transform: translateX(3px); } .hero__arrow:active { transform: translateY(0); } @media (max-width: 1100px) { .hero { --panel-top: 32%; --panel-bottom: 54%; } .africa { left: -2%; } } /* Mobile : photo en haut, texte sur fond jaune, carte en filigrane. */ @media (max-width: 900px) { .hero { --hero-h: auto; --bar-h: auto; min-height: 0; background: linear-gradient(170deg, var(--signal) 0%, #f1e40a 45%, #c8c06c 80%, var(--grey) 100%); } .hero__slides { grid-row: 1; } .hslide { align-items: start; } .hslide__media { position: relative; inset: auto; width: 100%; height: clamp(240px, 52vw, 400px); clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); } .hslide__panel, .hslide__map--photo { display: none; } .hslide__map--panel { clip-path: none; top: clamp(240px, 52vw, 400px); color: rgba(28, 27, 26, 0.16); } .africa { left: -6%; top: 14%; height: 70%; } .hslide__inner { padding-block: 1.75rem 1.5rem; } .hero__arrows { height: auto; padding-bottom: 2.25rem; } .hero__arrow--prev:hover, .hero__arrow--next:hover { background: var(--ink); color: var(--signal); border-color: var(--ink); } } @media (prefers-reduced-motion: reduce) { .hslide__media img { transform: none !important; } .js .hslide .hslide__content > * { opacity: 1; transform: none; } } /* Partenaires ------------------------------------------------------------- */ .partners { background: var(--surface); padding-block: clamp(2rem, 4vw, 3rem); } .partners__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); justify-items: center; align-items: center; gap: var(--space-4) clamp(1rem, 2.5vw, 2.5rem); } .partners__list img { height: 34px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: 0.65; transition: filter 0.3s, opacity 0.3s; } .partners__list img:hover { filter: none; opacity: 1; } @media (max-width: 760px) { .partners__list { justify-content: center; } } /* Bloc à propos (image décorée + texte) ---------------------------------- */ .about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } .about__copy > p { color: var(--muted); margin-bottom: var(--space-2); max-width: 36rem; } .about__copy > p.lead { color: var(--ink); } .about__copy .shead { margin-bottom: var(--space-4); } .about--reverse .about__media { order: -1; } .features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1px solid var(--line); } .features li { display: grid; gap: 0.5rem; align-content: start; } .features__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--signal); margin-bottom: 0.4rem; } .features__icon .icon { width: 24px; height: 24px; } .features h3 { font-size: 1.2rem; } .features p { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; } .section--ink .features { border-color: var(--ink-line); } .section--ink .features h3 { color: var(--white); } .about__media { position: relative; padding: 0 0 15% 0; } .about__a img, .about__a .ph { width: 86%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); position: relative; z-index: 1; } .about__b { position: absolute; right: 0; bottom: 0; width: 48%; z-index: 2; } .about__b img, .about__b .ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 8px solid var(--white); box-shadow: var(--shadow); } .about__block { position: absolute; left: -6%; top: 12%; width: 40%; height: 70%; background: var(--signal); border-radius: var(--radius); } .dots { position: absolute; right: 4%; top: -6%; width: 34%; height: 40%; background: radial-gradient(var(--grey) 1.6px, transparent 2px) 0 0 / 16px 16px; opacity: 0.55; } .about__media--single { padding-bottom: 0; } .about__media--single .about__a img, .about__media--single .about__a .ph { width: 100%; } .section--ink .about__b img { border-color: var(--ink); } @media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } .about--reverse .about__media { order: 0; } .about__media { max-width: 560px; margin-left: 5%; } } @media (max-width: 520px) { .features { grid-template-columns: 1fr; } } /* Cartes numérotées (section sombre) ------------------------------------- */ .ncards__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .ncards__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ncards__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ncard { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); padding-top: 4.75rem; background: var(--ink-soft); border-radius: var(--radius); border: 1px solid var(--ink-line); overflow: hidden; transition: border-color 0.3s; } .ncard:hover { border-color: var(--signal); } .ncard__num { position: absolute; top: 0.6rem; left: 1.4rem; font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(254, 242, 0, 0.55); } .ncard__title { font-size: var(--fs-h3); color: var(--white); position: relative; } .ncard__text { font-size: var(--fs-small); line-height: 1.6; color: var(--on-dark-muted); } .ncard__foot { margin-top: auto; padding-top: var(--space-2); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .ncard__foot .more { color: var(--white); } .ncard__icon { margin-left: auto; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--ink-line); color: var(--signal); } .ncard__icon .icon { width: 22px; height: 22px; } @media (max-width: 1080px) { .ncards__list, .ncards__list--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .ncards__list, .ncards__list--5, .ncards__list--3 { grid-template-columns: 1fr; } } /* Panneaux image + texte -------------------------------------------------- */ .panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 420px; } .panel__media { position: relative; overflow: hidden; } .panel__media img, .panel__media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: grayscale(0.35); transition: transform 1s var(--ease), filter 0.5s; } .panel:hover .panel__media img { transform: scale(1.04); filter: none; } .panel__body { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-2); padding: clamp(2rem, 4vw, 3.5rem); background: var(--surface); overflow: hidden; } .panel:nth-child(2) .panel__body { background: var(--signal); } .panel__word { position: absolute; right: 0.3em; bottom: -0.18em; font-family: var(--font-display); font-size: clamp(3rem, 4.6vw, 4.75rem); line-height: 1; color: rgba(28, 27, 26, 0.06); pointer-events: none; } .panel__title { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); position: relative; } .panel__text { color: var(--muted); position: relative; } .panel:nth-child(2) .panel__text { color: var(--ink); } .panel .more { position: relative; } .panel:nth-child(2) .more .icon { background: var(--ink); color: var(--signal); } @media (max-width: 1080px) { .panels { grid-template-columns: 1fr; } } @media (max-width: 600px) { .panel { grid-template-columns: 1fr; } .panel__media { min-height: 240px; } } /* Grille de services à icônes -------------------------------------------- */ .igrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3.25rem) clamp(1.5rem, 3vw, 3rem); } .igrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .igrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .igrid__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; } .igrid__icon { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 18px; border: 1.5px solid var(--line); background: var(--white); transition: background-color 0.3s, border-color 0.3s; } .igrid__item:hover .igrid__icon { background: var(--signal); border-color: var(--signal); } .igrid__icon .icon { width: 28px; height: 28px; } .igrid__title { font-size: 1.25rem; margin-bottom: 0.5rem; } .igrid__title a { text-decoration: none; } .igrid__title a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 0.2em; } .igrid__text { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; } .igrid__body .more { margin-top: 0.9rem; } .section--ink .igrid__icon { background: var(--ink-soft); border-color: var(--ink-line); color: var(--signal); } .section--ink .igrid__title { color: var(--white); } @media (max-width: 960px) { .igrid, .igrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .igrid, .igrid--2, .igrid--4 { grid-template-columns: 1fr; } } /* Bandeau d'appel à l'action --------------------------------------------- */ .ctab { padding-block: var(--section); } .ctab__box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: clamp(2.5rem, 5vw, 4.5rem); padding-right: clamp(2.5rem, 18vw, 16rem); border-radius: calc(var(--radius) * 1.3); overflow: hidden; isolation: isolate; color: var(--white); background: var(--ink) var(--bg-image, none) center / cover no-repeat; } .ctab__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28, 27, 26, 0.95) 0%, rgba(28, 27, 26, 0.84) 55%, rgba(28, 27, 26, 0.6) 100%); } .ctab__title { font-size: var(--fs-h2); max-width: 22ch; } .ctab__text { margin-top: var(--space-2); color: var(--on-dark-muted); max-width: 40rem; } .ctab__mascot { position: absolute; right: clamp(0.5rem, 3vw, 3rem); bottom: -14%; width: clamp(110px, 13vw, 180px); opacity: 0.9; } @media (max-width: 860px) { .ctab__box { grid-template-columns: 1fr; padding-right: clamp(2rem, 5vw, 4rem); } .ctab__mascot { display: none; } } /* Carrousels -------------------------------------------------------------- */ .carousel { position: relative; } .carousel__track { display: flex; gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 1.5rem; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track > li { flex: 0 0 auto; scroll-snap-align: start; } .carousel--bleed .carousel__track { padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); } .carousel--bleed .carousel__track > li { width: min(390px, 82vw); } .carousel__nav { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--space-3); } .carousel__nav .more { margin-left: auto; } .carousel__btn { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); transition: background-color 0.2s, color 0.2s; } .carousel__btn:hover { background: var(--ink); color: var(--signal); } .carousel__btn .icon { width: 20px; height: 20px; } .carousel__btn[disabled] { opacity: 0.3; pointer-events: none; } /* Cartes projet ----------------------------------------------------------- */ .pjcard { position: relative; } .pjcard[hidden] { display: none; } .pjcard__link { position: relative; display: block; text-decoration: none; padding-bottom: 3.25rem; } .pjcard__media { aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: var(--radius); background: var(--surface); } .pjcard__media img, .pjcard__media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } .pjcard__link:hover .pjcard__media img { transform: scale(1.05); } .pjcard__box { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0; padding: 1.3rem 4.5rem 1.3rem 1.5rem; background: var(--ink); color: var(--white); border-radius: 18px; transition: background-color 0.3s; } .pjcard__link:hover .pjcard__box { background: var(--ink-soft); } .pjcard__title { font-size: 1.15rem; line-height: 1.25; } .pjcard__cat { margin-top: 0.35rem; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal); } .pjcard__go { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--signal); color: var(--ink); transition: transform 0.3s var(--ease); } .pjcard__link:hover .pjcard__go { transform: translateY(-50%) rotate(-45deg); } .pjcard__go .icon { width: 18px; height: 18px; } .pjcard__badge { position: absolute; top: 1rem; left: 1rem; } .pjgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 2rem); } @media (max-width: 960px) { .pjgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .pjgrid { grid-template-columns: 1fr; } } /* Bandeau sur image (index technologique) -------------------------------- */ .band { position: relative; padding-block: var(--section); color: var(--white); isolation: isolate; background: var(--ink) var(--bg-image, none) center / cover no-repeat; background-attachment: fixed; } .band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28, 27, 26, 0.86); } .band__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .band__logo { margin-bottom: var(--space-4); } .band__logo img { width: 160px; height: auto; } .band .shead { margin-bottom: var(--space-5); } .tabs-icons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-5); } .tabs-icons li { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.6rem 0.75rem; border-right: 1px solid rgba(255, 255, 255, 0.16); transition: background-color 0.3s; } .tabs-icons li:last-child { border-right: 0; } .tabs-icons li:hover { background: rgba(254, 242, 0, 0.08); } .tabs-icons span { color: var(--signal); } .tabs-icons .icon { width: 34px; height: 34px; } .tabs-icons strong { font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.35; } .tabs-icons--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 960px) { .tabs-icons, .tabs-icons--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tabs-icons li { border-bottom: 1px solid rgba(255, 255, 255, 0.16); } } @media (max-width: 520px) { .tabs-icons, .tabs-icons--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (hover: none) { .band { background-attachment: scroll; } } /* Témoignages ------------------------------------------------------------- */ .testi__track > li { width: calc((100% - clamp(1rem, 2vw, 1.75rem)) / 2); } .tcard { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); } .tcard__head { display: flex; align-items: center; gap: 1rem; } .tcard__avatar { flex: none; width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; background: var(--signal); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.5rem; } .tcard__avatar img { width: 100%; height: 100%; object-fit: cover; } .tcard__name { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; } .tcard__role { color: var(--muted); font-size: var(--fs-xs); font-weight: 650; margin-top: 0.2rem; } .tcard__quote { margin-left: auto; } .tcard__quote .icon { width: 44px; height: 44px; color: var(--grey); } .tcard__text { color: var(--muted); font-style: italic; line-height: 1.7; } @media (max-width: 860px) { .testi__track > li { width: min(520px, 88vw); } } /* Cartes d'articles ------------------------------------------------------- */ .bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } .bcard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.3s var(--ease); } .bcard:hover { box-shadow: var(--shadow); } .bcard__top { position: relative; } .bcard__media { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--surface); } .bcard__media img, .bcard__media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } .bcard:hover .bcard__media img { transform: scale(1.05); } .bcard__cats { position: absolute; left: 1.5rem; bottom: -0.9rem; display: flex; gap: 0.4rem; } .bcard__cats a { display: block; padding: 0.35rem 0.8rem; border-radius: var(--pill); background: var(--signal); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .bcard__cats a:hover { background: var(--ink); color: var(--white); } .bcard__body { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; padding: 2rem 1.5rem 1.6rem; } .bcard__meta { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); } .bcard__title { font-size: 1.25rem; line-height: 1.3; } .bcard__title a { text-decoration: none; } .bcard__title a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; } .bcard .more { margin-top: auto; padding-top: 0.5rem; } @media (max-width: 960px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .bgrid { grid-template-columns: 1fr; } } /* Bannière des pages intérieures ----------------------------------------- */ .pheader { position: relative; padding-block: clamp(4rem, 8vw, 7rem); color: var(--white); overflow: hidden; isolation: isolate; background: var(--ink) var(--bg-image, none) center / cover no-repeat; } .pheader::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28, 27, 26, 0.96) 0%, rgba(28, 27, 26, 0.84) 55%, rgba(28, 27, 26, 0.7) 100%); } .pheader::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.5px) 0 0 / 20px 20px; mask-image: linear-gradient(0deg, #000 0%, transparent 65%); } .pheader__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); flex-wrap: wrap; } .pheader__title { font-size: var(--fs-h1); max-width: 20ch; } .pheader__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 80px; z-index: -1; fill: none; stroke: var(--signal); stroke-width: 3; opacity: 0.5; } .crumbs { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-muted); } .crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .crumbs li:not(:last-child)::after { content: ""; display: inline-block; margin-left: 0.5rem; width: 0; height: 0; border-left: 6px solid var(--signal); border-top: 4px solid transparent; border-bottom: 4px solid transparent; vertical-align: 1px; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--white); } .crumbs [aria-current] { color: var(--white); } /* Textes intérieurs ------------------------------------------------------- */ .lead { font-size: var(--fs-lead); line-height: 1.55; } .copy > p { color: var(--muted); margin-bottom: var(--space-2); max-width: 38rem; } .copy > p.lead { color: var(--ink); } .copy > .btn, .copy > .more { margin-top: var(--space-2); } .copy .shead { margin-bottom: var(--space-3); } .section--ink .copy > p.lead { color: var(--white); } .section--ink .copy > p { color: var(--on-dark-muted); } /* Étiquettes, badges, listes ---------------------------------------------- */ .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: var(--space-3) 0 0; } .tags li { font-size: var(--fs-xs); font-weight: 650; padding: 0.35rem 0.85rem; border-radius: var(--pill); border: 1.5px solid var(--line); color: var(--muted); background: var(--white); } .section--ink .tags li { background: transparent; border-color: var(--ink-line); color: var(--on-dark-muted); } .badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 0.3rem 0.75rem; border-radius: var(--pill); background: var(--signal); color: var(--ink); } .checklist { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem var(--space-4); } .checklist li { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.45; } .checklist .icon { flex: none; width: 1.6rem; height: 1.6rem; padding: 0.25rem; border-radius: 50%; background: var(--signal); color: var(--ink); stroke-width: 2.6; } .checklist--one { grid-template-columns: 1fr; } .section--ink .checklist li { color: var(--white); } @media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } } /* Cartes de fonctionnalités (coin jaune) --------------------------------- */ .fcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .fcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fcard { position: relative; display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .fcard::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 34px solid var(--signal); border-left: 34px solid transparent; } .fcard__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 16px; background: var(--ink); color: var(--signal); } .fcard__icon .icon { width: 26px; height: 26px; } .fcard h3 { font-size: 1.25rem; } .fcard p { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; } .fcard .badge, .fcard > .more { margin-top: auto; align-self: flex-start; } .fcard .tags { margin-top: 0.25rem; } .fcard--media { padding: 0; } .fcard--media .fcard__img { aspect-ratio: 16 / 10; overflow: hidden; } .fcard--media .fcard__img img, .fcard--media .fcard__img .ph { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .fcard--media .fcard__body { display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.5rem, 2.5vw, 2rem); flex: 1; } .fcard--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; background: var(--ink); color: var(--white); } .fcard--wide .fcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); } .fcard--wide p { color: var(--on-dark-muted); } .fcard--wide .fcard__icon { background: var(--signal); color: var(--ink); } .fcard--wide .tags li { background: transparent; color: var(--white); border-color: var(--ink-line); } .fcard--wide .btn { margin-top: auto; } .fcard__media { position: relative; min-height: 260px; } .fcard__media img, .fcard__media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } @media (max-width: 1080px) { .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fcards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .fcards, .fcards--3, .fcards--2 { grid-template-columns: 1fr; } .fcard--wide { grid-column: auto; grid-template-columns: 1fr; } } /* Avantages autour d'une image -------------------------------------------- */ .benefits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; } .benefits__col { display: grid; gap: clamp(2rem, 4vw, 3.5rem); } .benefits__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; text-align: right; } .benefits__col--right .benefits__item { grid-template-columns: auto minmax(0, 1fr); text-align: left; } .benefits__col--right .benefits__item .igrid__icon { order: -1; } .benefits__item h3 { font-size: 1.2rem; margin-bottom: 0.4rem; } .benefits__item p { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; } .benefits__media { position: relative; isolation: isolate; } .benefits__media img, .benefits__media .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px var(--radius) var(--radius); } .benefits__media::before { content: ""; position: absolute; inset: auto -8% -6% auto; width: 70%; height: 55%; background: var(--signal); border-radius: var(--radius); z-index: -1; } @media (max-width: 960px) { .benefits { grid-template-columns: 1fr; } .benefits__item, .benefits__col--right .benefits__item { grid-template-columns: auto minmax(0, 1fr); text-align: left; } .benefits__item .igrid__icon { order: -1; } .benefits__media { max-width: 420px; } } /* Compteurs --------------------------------------------------------------- */ .counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); padding: clamp(2rem, 4vw, 3.5rem); border-radius: var(--radius); background: var(--signal); } .counters strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; } .counters span { display: block; margin-top: 0.5rem; font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; } .counters__note { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--muted); text-align: center; } @media (max-width: 760px) { .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Équipe ------------------------------------------------------------------ */ .team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } .mcard { position: relative; text-align: center; } .mcard__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--surface); } .mcard__media img, .mcard__media .ph { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.5s var(--ease), transform 0.8s var(--ease); } .mcard:hover .mcard__media img { filter: none; transform: scale(1.04); } .mcard__body { position: relative; margin: -2.5rem 1rem 0; padding: 1.1rem 1rem; background: var(--white); border-radius: 16px; box-shadow: var(--shadow); } .mcard__name { font-size: 1.15rem; } .mcard__name a { text-decoration: none; } .mcard__name a::after { content: ""; position: absolute; inset: 0; } .mcard__role { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 0.25rem; } @media (max-width: 960px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .profile { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line); border-radius: var(--radius); } .profile__photo { margin-bottom: -6rem; } .profile__photo img, .profile__photo .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); } .profile__name { font-size: var(--fs-h2); } .profile__role { margin-top: 0.4rem; font-size: var(--fs-small); font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .profile__facts { display: grid; gap: 0.75rem; margin: var(--space-4) 0; } .profile__facts div { display: flex; flex-wrap: wrap; gap: 0.4rem; } .profile__facts dt { font-weight: 700; } .profile__facts dt::after { content: " :"; } .profile__facts dd { color: var(--muted); } .profile__facts a { text-decoration: none; } .profile__facts a:hover { text-decoration: underline; } .profile__quote { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; padding-left: var(--space-3); border-left: 6px solid var(--signal); } .profile .socials a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ink); color: var(--white); } .profile .socials a:hover { background: var(--signal); color: var(--ink); } .profile-body { padding-top: clamp(6rem, 10vw, 8rem); } .profile-body h2 { font-size: var(--fs-h3); margin: var(--space-5) 0 var(--space-2); } .profile-body h2:first-child { margin-top: 0; } @media (max-width: 860px) { .profile { grid-template-columns: 1fr; } .profile__photo { margin-bottom: 0; max-width: 380px; } .profile-body { padding-top: var(--space-5); } } /* Filtres ----------------------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: var(--space-5); } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.15rem; border-radius: var(--pill); border: 1.5px solid var(--line); background: var(--white); font-weight: 650; font-size: 0.92rem; text-decoration: none; transition: border-color 0.2s, background-color 0.2s, color 0.2s; } .chip:hover { border-color: var(--ink); } .chip[aria-pressed="true"], .chip.is-current { background: var(--ink); color: var(--white); border-color: var(--ink); } .chip__count { font-size: var(--fs-xs); opacity: 0.7; } .empty { text-align: center; padding: var(--space-6) var(--space-3); border: 2px dashed var(--line); border-radius: var(--radius); } .empty img { width: 110px; margin: 0 auto var(--space-3); } .empty h2, .empty h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); } .empty p { color: var(--muted); max-width: 40ch; margin: 0 auto var(--space-3); } /* Fiche projet ------------------------------------------------------------ */ .facts { display: grid; margin: 0; border-top: 1px solid var(--line); } .facts > div { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-3); padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .facts dt { font-weight: 700; } .facts dd { margin: 0; color: var(--muted); } @media (max-width: 600px) { .facts > div { grid-template-columns: 1fr; gap: 0.25rem; } } /* Confiance --------------------------------------------------------------- */ .trust { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); border-left: 8px solid var(--signal); } .trust__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--ink); color: var(--signal); } .trust__icon .icon { width: 34px; height: 34px; } .trust h2 { font-size: var(--fs-h3); margin-bottom: var(--space-2); } .trust p { color: var(--muted); max-width: 64ch; } .trust p + p { margin-top: var(--space-2); } @media (max-width: 600px) { .trust { grid-template-columns: 1fr; } } /* Contact ----------------------------------------------------------------- */ .contact__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .contact__info > p { color: var(--muted); margin-bottom: var(--space-4); } .cinfo { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); } .cinfo li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: center; } .cinfo .icon { width: 3.5rem; height: 3.5rem; padding: 0.95rem; border-radius: 50%; background: var(--signal); color: var(--ink); } .cinfo small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .cinfo a { text-decoration: none; font-weight: 600; word-break: break-word; } .cinfo a:hover { text-decoration: underline; } .formbox { padding: clamp(1.5rem, 4vw, 3rem); background: var(--surface); border-radius: var(--radius); } .formbox .shead { margin-bottom: var(--space-4); } @media (max-width: 960px) { .contact__grid { grid-template-columns: 1fr; } } /* Formulaire --------------------------------------------------------------- */ .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .field { display: flex; flex-direction: column; gap: 0.5rem; } .field--full { grid-column: 1 / -1; } .field label { font-weight: 650; font-size: var(--fs-small); } .req { color: var(--ink); background: var(--signal); border-radius: 4px; padding: 0 0.25rem; font-size: 0.8em; } .opt { color: var(--muted); font-weight: 500; } .field input, .field select, .field textarea { width: 100%; min-height: 3.4rem; padding: 0.85rem 1.3rem; border: 1.5px solid #cfccc8; border-radius: 28px; background: var(--white); color: var(--ink); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; } .field textarea { border-radius: 22px; resize: vertical; min-height: 10rem; line-height: 1.55; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1b1a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 1.1rem; padding-right: 3rem; } .field ::placeholder { color: #8a8682; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--grey); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--signal); } .field [aria-invalid="true"] { border-color: var(--error); } .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); } .form__note { color: var(--muted); font-size: var(--fs-xs); max-width: 36ch; } .notice { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.3rem; border-radius: 18px; margin-bottom: var(--space-4); font-weight: 600; } .notice .icon { flex: none; width: 1.6rem; height: 1.6rem; } .notice--ok { background: var(--signal); color: var(--ink); } .notice--error { background: #fbeceb; color: var(--error); border: 1.5px solid var(--error); } @media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } } /* Article et barre latérale ---------------------------------------------- */ .article__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .article__cover { margin-bottom: var(--space-4); } .article__cover img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius); } .article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: var(--space-3); font-size: var(--fs-small); font-weight: 650; color: var(--muted); } .article__title { font-size: var(--fs-h2); margin-bottom: var(--space-3); } .sidebar { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: var(--space-3); } .widget { background: var(--surface); border-radius: var(--radius); padding: var(--space-4) var(--space-3); } .widget__title { position: relative; font-size: 1.25rem; margin-bottom: var(--space-3); padding-bottom: 0.75rem; } .widget__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 4px; border-radius: 4px; background: var(--signal); } .widget ul { list-style: none; padding: 0; margin: 0; } .widget li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); } .widget li:last-child { border-bottom: 0; } .widget a { text-decoration: none; font-weight: 600; } .widget a:hover { text-decoration: underline; } .wpost { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.9rem; align-items: center; } .wpost img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 12px; } .wpost__ph { width: 4.5rem; height: 4.5rem; border-radius: 12px; background: var(--white); } .wpost small { display: block; color: var(--muted); font-weight: 600; font-size: var(--fs-xs); } .share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); } .share > span { font-weight: 700; margin-right: 0.5rem; } .share a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--line); transition: border-color 0.2s, background-color 0.2s; } .share a:hover { border-color: var(--signal); background: var(--signal); } .share .icon { width: 20px; height: 20px; } @media (max-width: 960px) { .article__layout { grid-template-columns: 1fr; } .sidebar { position: static; } } /* Contenu éditorial ------------------------------------------------------- */ .prose { max-width: 46rem; } .prose > * + * { margin-top: 1.2em; } .prose h2 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); margin-top: 1.8em; } .prose h3 { font-size: var(--fs-h3); margin-top: 1.6em; } .prose a { text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--signal); } .prose a:hover { background: var(--signal); } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: 0.4em; } .prose ul li::marker { color: var(--grey); } .prose blockquote { border-left: 6px solid var(--signal); padding: 0.25em 0 0.25em 1.25em; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.45; } .prose img { border-radius: var(--radius-sm); } .prose figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.6rem; } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } .prose th, .prose td { padding: 0.75rem; border-bottom: 1px solid var(--line); text-align: left; } .prose .wp-block-button__link { background: var(--signal); color: var(--ink); border-radius: var(--pill); font-weight: 700; text-decoration: none; padding: 0.85rem 1.6rem; } .prose .aligncenter { margin-inline: auto; } .prose .alignleft { float: left; margin: 0.4em 1.5em 1em 0; } .prose .alignright { float: right; margin: 0.4em 0 1em 1.5em; } .prose::after { content: ""; display: table; clear: both; } .legacy-content { padding-block: var(--space-6); } /* Pagination, recherche, 404 --------------------------------------------- */ .pager { margin-top: var(--space-6); } .pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .pager a, .pager span { display: grid; place-items: center; min-width: 3rem; height: 3rem; padding: 0 0.9rem; border-radius: var(--pill); border: 1.5px solid var(--line); text-decoration: none; font-weight: 700; } .pager a:hover { border-color: var(--ink); } .pager .current { background: var(--ink); color: var(--white); border-color: var(--ink); } .pager .icon { width: 18px; } .searchform { display: flex; gap: 0.5rem; max-width: 34rem; } .searchform input { flex: 1; min-width: 0; min-height: 3.25rem; padding: 0.8rem 1.3rem; border-radius: var(--pill); border: 1.5px solid #cfccc8; background: var(--white); color: var(--ink); } .searchform input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--signal); } .searchform .btn { padding-inline: 1.1rem; } .searchform .btn .icon { width: 20px; height: 20px; } .notfound { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; } .notfound__code { font-family: var(--font-display); font-size: clamp(5rem, 3rem + 10vw, 10rem); line-height: 0.9; letter-spacing: -0.04em; } .notfound img { width: clamp(160px, 22vw, 280px); } .notfound p { color: var(--muted); max-width: 40ch; margin: var(--space-3) 0 var(--space-4); } @media (max-width: 700px) { .notfound { grid-template-columns: 1fr; } .notfound img { width: 150px; } } /* Visuel de remplacement --------------------------------------------------- */ .ph { position: relative; display: grid; place-content: center; justify-items: center; gap: 0.75rem; width: 100%; height: 100%; min-height: 200px; background: radial-gradient(circle at 78% 22%, rgba(254, 242, 0, 0.55) 0 9%, transparent 9.5%), repeating-linear-gradient(135deg, rgba(134, 130, 129, 0.16) 0 2px, transparent 2px 18px), var(--surface); color: var(--grey); border-radius: inherit; text-align: center; padding: 1rem; } .ph__mark { width: 84px; height: 56px; } .ph__label { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--white); padding: 0.3rem 0.75rem; border-radius: var(--pill); } /* Pied de page ------------------------------------------------------------- */ .site-footer { position: relative; background: var(--ink); color: var(--white); padding-block: clamp(4rem, 7vw, 6rem) var(--space-5); text-align: center; overflow: hidden; isolation: isolate; } .footer__brand { display: inline-block; } .footer__brand img { width: 150px; margin: 0 auto; } .footer__claim { margin-top: var(--space-2); font-family: var(--font-display); font-size: 1.3rem; } .footer__claim span { color: var(--signal); } .footer__contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: clamp(2.5rem, 5vw, 4rem) 0; padding-block: clamp(2rem, 4vw, 3rem); border-block: 1px solid var(--ink-line); } .footer__contacts li { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .footer__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--ink-soft); color: var(--signal); } .footer__icon .icon { width: 24px; height: 24px; } .footer__value { font-size: 1.05rem; font-weight: 600; line-height: 1.5; } .footer__value a { text-decoration: none; } .footer__value a:hover { color: var(--signal); } .footer__label { color: var(--on-dark-muted); font-size: var(--fs-small); } .footer__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem clamp(1rem, 3vw, 2.5rem); list-style: none; padding: 0; margin: 0 0 var(--space-3); } .footer__menu a { text-decoration: none; font-weight: 650; } .footer__menu a:hover { color: var(--signal); } .footer__copy { color: var(--on-dark-muted); font-size: var(--fs-small); } .footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: var(--fs-small); } .footer__legal a { text-decoration: none; color: var(--on-dark-muted); } .socials { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .socials--footer { justify-content: center; margin-top: var(--space-4); } .socials--footer a, .contact__info .socials a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--ink-line); transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .contact__info .socials a { border-color: var(--line); } .socials--footer a:hover, .contact__info .socials a:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); } .socials .icon { width: 18px; height: 18px; } .footer__mascot { position: absolute; right: -2rem; bottom: -4rem; width: 240px; opacity: 0.05; z-index: -1; pointer-events: none; } @media (max-width: 760px) { .footer__contacts { grid-template-columns: 1fr; } } .to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--signal); color: var(--ink); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s, visibility 0s linear 0.3s; } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .to-top .icon { width: 22px; height: 22px; transform: rotate(180deg); } /* Apparition au défilement ------------------------------------------------ */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js .trait path { stroke-dashoffset: 0; } .js [data-reveal] { opacity: 1; transform: none; } .band { background-attachment: scroll; } } @media print { .topbar, .site-header, .site-footer, .ctab, .burger, .to-top, .hero__arrows { display: none !important; } .hero, .pheader, .section--ink, .band { background: none !important; color: #000 !important; } } /* Rangées de cinq cartes : titres plus compacts. */ .ncards__list--5 .ncard { padding-inline: 1.25rem; } .ncards__list--5 .ncard__title { font-size: 1.12rem; overflow-wrap: anywhere; hyphens: auto; } .ncards__list--5 .ncard__num { font-size: 3.75rem; left: 1.1rem; } .ncard__title, .fcard h3, .igrid__title { hyphens: auto; } /* ========================================================================== Version 1.1 : finitions et nouveautés ========================================================================== */ /* Apparitions décalées. */ .js [data-reveal] { transition-delay: var(--reveal-delay, 0ms); } /* Option « apparitions au défilement » désactivée. */ .no-scroll-reveal [data-reveal] { opacity: 1; transform: none; transition: none; } .no-scroll-reveal .trait path { stroke-dashoffset: 0; transition: none; } /* En-tête compact au défilement. */ .header__inner { transition: height 0.35s var(--ease); } .brand__logo { transition: width 0.35s var(--ease); } body:not(.no-header-shrink) .site-header.is-scrolled .header__inner { height: 74px; } body:not(.no-header-shrink) .site-header.is-scrolled .brand__logo { width: 108px; } body:not(.no-header-shrink) .site-header.is-scrolled .mainnav .menu > li { height: 74px; } @media (max-width: 1120px) { .site-header.is-scrolled .header__inner { height: var(--header-h); } .site-header.is-scrolled .brand__logo { width: 128px; } } /* Survols plus fins sur les cartes. */ .fcard, .bcard, .tcard, .ncard, .mcard__body { transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s; } @media (hover: hover) { .fcard:hover, .tcard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(28, 27, 26, 0.45); } .bcard:hover { transform: translateY(-3px); } .ncard:hover { transform: translateY(-3px); } .fcard:hover .fcard__icon { background: var(--signal); color: var(--ink); } .fcard--wide:hover .fcard__icon { background: var(--white); } } .fcard__icon { transition: background-color 0.3s, color 0.3s; } /* Liens soulignés animés dans les textes. */ .copy a:not(.btn):not(.more), .about__copy > p a { text-decoration: none; background: linear-gradient(var(--signal), var(--signal)) 0 100% / 100% 2px no-repeat; transition: background-size 0.3s var(--ease); } .copy a:not(.btn):not(.more):hover, .about__copy > p a:hover { background-size: 100% 100%; } /* Raccourcis collants (page Services). */ .subnav { position: sticky; top: var(--header-h); z-index: 50; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .admin-bar .subnav { top: calc(var(--header-h) + 32px); } body:not(.no-header-shrink) .site-header.is-scrolled ~ main .subnav, body:not(.no-header-shrink):has(.site-header.is-scrolled) .subnav { top: 74px; } .admin-bar:not(.no-header-shrink):has(.site-header.is-scrolled) .subnav { top: calc(74px + 32px); } .subnav__list { display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.65rem; } .subnav__list::-webkit-scrollbar { display: none; } .subnav__list a { display: block; padding: 0.55rem 1rem; border-radius: var(--pill); font-size: 0.9rem; font-weight: 650; white-space: nowrap; text-decoration: none; color: var(--muted); transition: background-color 0.2s, color 0.2s; } .subnav__list a:hover { color: var(--ink); background: var(--surface); } .subnav__list a.is-active { color: var(--ink); background: var(--signal); } .subnav__cta { margin-left: auto; padding-left: 1rem; } .subnav__cta a { background: var(--ink); color: var(--white); } .subnav__cta a:hover { background: var(--signal); color: var(--ink); } [id] { scroll-margin-top: calc(var(--header-h) + 80px); } @media (max-width: 1120px) { body:has(.site-header.is-scrolled) .subnav { top: var(--header-h); } } @media (max-width: 782px) { .admin-bar .subnav { top: calc(var(--header-h) + 46px); } } /* Progression de lecture et méta des articles. */ .read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 210; height: 4px; pointer-events: none; } .read-progress span { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; } .admin-bar .read-progress { top: 32px; } .article__read { display: inline-flex; align-items: center; gap: 0.4rem; } .article__read .icon { width: 16px; height: 16px; } /* Formulaire : erreurs, compteur, envoi. */ .field__error { margin-top: 0.1rem; padding-left: 1.3rem; color: var(--error); font-size: var(--fs-xs); font-weight: 650; } .field__error[hidden] { display: none; } .field__count { margin-top: 0.1rem; padding-right: 1rem; text-align: right; color: var(--muted); font-size: var(--fs-xs); } .btn.is-loading { opacity: 0.75; cursor: progress; } .btn.is-loading .btn__icon { animation: btn-spin 0.9s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* Bouton WhatsApp flottant. */ .wa-float { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 90; display: inline-flex; align-items: center; gap: 0.6rem; height: 3.25rem; padding: 0 0.85rem; border-radius: var(--pill); background: var(--ink); color: var(--white); text-decoration: none; font-weight: 650; font-size: 0.92rem; box-shadow: var(--shadow); border: 1.5px solid var(--ink-line); transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease); } .wa-float .icon { width: 24px; height: 24px; color: var(--signal); transition: color 0.25s; } .wa-float__label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.4s var(--ease), margin 0.4s var(--ease); } .wa-float:hover, .wa-float:focus-visible { background: var(--signal); color: var(--ink); transform: translateY(-2px); } .wa-float:hover .icon, .wa-float:focus-visible .icon { color: var(--ink); } .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { max-width: 220px; margin-right: 0.35rem; } @media print { .wa-float, .read-progress, .subnav { display: none !important; } } /* Détails typographiques. */ .shead__title, .hslide__title, .pheader__title { font-kerning: normal; } .shead__text, .lead { hanging-punctuation: first; } /* ========================================================================== Parlons de votre projet (brief de projet) ========================================================================== */ .pintro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .pintro .shead { margin-bottom: 0; } .psteps { display: grid; gap: var(--space-2); } .psteps__item { position: relative; padding: var(--space-3) var(--space-3) var(--space-3) 5.25rem; border-radius: var(--radius); background: var(--white); } .psteps__num { position: absolute; left: var(--space-3); top: var(--space-3); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--signal); font-family: var(--font-display); font-size: 1.2rem; } .psteps__title { margin-bottom: 0.35rem; font-size: var(--fs-h3); } .psteps__item p { color: var(--muted); font-size: var(--fs-small); } @media (max-width: 900px) { .pintro { grid-template-columns: minmax(0, 1fr); } } .pform__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .pform__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: var(--space-4); } .pform__help { padding: var(--space-4) var(--space-3); border-radius: var(--radius); background: var(--ink); color: var(--white); } .pform__help-title { margin-bottom: 0.6rem; font-size: 1.3rem; color: var(--white); } .pform__help p { margin-bottom: 1rem; color: var(--on-dark-muted); font-size: var(--fs-small); } .pform__help .more { color: var(--white); } @media (max-width: 1000px) { .pform__layout { grid-template-columns: minmax(0, 1fr); } .pform__aside { position: static; } } .pform__step { min-width: 0; margin: 0; padding: 0; border: 0; } .pform__step + .pform__step { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid #dcd9d5; } .pform__legend { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--space-3); padding: 0; font-family: var(--font-display); font-size: var(--fs-h3); } .pform__num { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ink); color: var(--signal); font-size: 1rem; } /* Choix multiples et uniques en pastilles. */ .choices-group { min-width: 0; margin: 0; padding: 0; border: 0; } .choices-group legend { margin-bottom: 0.75rem; padding: 0; font-size: var(--fs-small); font-weight: 650; } .choices { display: flex; flex-wrap: wrap; gap: 0.5rem; } .choices--stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .choice { position: relative; display: flex; cursor: pointer; } .choice input { position: absolute; width: 1px; height: 1px; opacity: 0; } .choice span { display: flex; align-items: center; width: 100%; min-height: 3rem; padding: 0.7rem 1.15rem; border: 1.5px solid #cfccc8; border-radius: var(--pill); background: var(--white); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; transition: border-color 0.2s, background-color 0.2s; } .choices--stack .choice span { border-radius: 16px; } .choice span::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; margin-right: 0.65rem; border: 1.5px solid currentColor; border-radius: 4px; background: var(--white) center / 12px no-repeat; } .choice input[type="radio"] + span::before { border-radius: 50%; } .choice:hover span { border-color: var(--ink); } .choice input:checked + span { border-color: var(--ink); background: var(--signal); } .choice input[type="checkbox"]:checked + span::before { border-color: var(--ink); background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fef200' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } .choice input[type="radio"]:checked + span::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px var(--white); } .choice input:focus-visible + span { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 2px; } .choices-group[aria-invalid="true"] .choice span { border-color: var(--error); } .choices-group .field__error { margin-top: 0.6rem; padding-left: 0; } @media (max-width: 640px) { .choices--stack { grid-template-columns: minmax(0, 1fr); } } /* Case d'accord. */ .field .check { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--fs-small); font-weight: 500; cursor: pointer; } .field .check input { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0.15rem 0 0; padding: 0; accent-color: var(--ink); } .field .check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; } .field .check + .field__error { padding-left: 2rem; } /* ========================================================================== Boutique (WooCommerce) La feuille « woocommerce-general » reste chargée pour ses composants (galerie, onglets, avis, formulaires) ; la mise en page flottante est remplacée ici. ========================================================================== */ /* En-tête : panier et compte. */ .hcart { position: relative; text-decoration: none; } .hcart__count { position: absolute; top: 1px; right: -1px; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: var(--pill); background: var(--signal); color: var(--ink); font-size: 0.7rem; font-weight: 800; line-height: 1.2rem; text-align: center; box-shadow: 0 0 0 2px var(--white); } .hcart__count.is-empty { display: none; } .haccount { text-decoration: none; } /* Deux icônes de plus dans l'en-tête : espacements resserrés pour tenir à 1366 px. */ .header__tools { gap: 0.25rem; } .header__cta { margin-left: 0.5rem; padding-inline: 1.3rem; } @media (min-width: 1121px) { .mainnav .menu { gap: clamp(0.9rem, 1.45vw, 2rem); } } @media (max-width: 1280px) { .header__cta { display: none; } } @media (max-width: 420px) { .haccount { display: none; } } .crumbs li:last-child { color: var(--white); } /* Rayons. */ .depts { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .depts__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); } .dept { display: flex; flex-direction: column; gap: 0.3rem; height: 100%; padding: var(--space-3); border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); text-decoration: none; transition: border-color 0.25s var(--ease); } .dept:hover { border-color: var(--ink); } .dept__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 0.85rem; border-radius: 16px; background: var(--signal); color: var(--ink); transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } .dept__icon .icon { width: 26px; height: 26px; } .dept:hover .dept__icon { background: var(--ink); color: var(--signal); } .dept__name { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; } .dept__count { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); } @media (max-width: 1100px) { .depts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .depts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dept { padding: var(--space-2); } } /* Mise en page du catalogue. */ .shop__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .shop__main { grid-column: 2; grid-row: 1; min-width: 0; } .shop__aside { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; } .shop__aside .widget__title { font-size: 1.2rem; margin-bottom: 1rem; } @media (max-width: 960px) { .shop__layout { grid-template-columns: minmax(0, 1fr); } .shop__main { grid-column: 1; } .shop__aside { grid-column: 1; grid-row: 2; position: static; } } .shop-cats .cat-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.5rem; color: var(--muted); } .shop-cats .cat-item > a { color: var(--ink); } .shop-cats .current-cat > a { background: linear-gradient(transparent 58%, var(--signal) 58%); } .shop-cats .children { flex-basis: 100%; margin-top: 0.4rem; padding-left: 0.9rem; border-left: 2px solid var(--line); } .shop-cats .children li { border-bottom: 0; padding: 0.35rem 0; } .widget--help { background: var(--ink); color: var(--white); } .widget--help .widget__title { color: var(--white); } .widget--help p { color: var(--on-dark-muted); font-size: var(--fs-small); } .widget--help__tel { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1rem; color: var(--signal); font-weight: 700; text-decoration: none; } .widget--help__tel .icon { width: 18px; height: 18px; } .widget--help a.widget--help__tel:hover { text-decoration: underline; } /* Recherche de produits. */ .woocommerce-product-search { display: flex; gap: 0.5rem; } .woocommerce-product-search .search-field { flex: 1; width: 100%; min-width: 0; } /* Bouton réduit à une loupe : le libellé reste lu par les lecteurs d'écran. */ .woocommerce-product-search button { flex: none; width: 3.1rem; height: 3.1rem; padding: 0; border: 0; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") center / 20px no-repeat; color: transparent; font-size: 0; cursor: pointer; } .woocommerce-product-search button:hover { background-color: var(--signal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1b1a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); } /* Barre d'outils. */ .woocommerce .shop__main .woocommerce-result-count { float: left; margin: 0 0 var(--space-4); line-height: 3rem; font-size: var(--fs-small); color: var(--muted); } .woocommerce .shop__main .woocommerce-ordering { float: right; margin: 0 0 var(--space-4); } .woocommerce .woocommerce-ordering select { min-height: 3rem; padding: 0 2.75rem 0 1.2rem; border: 1.5px solid var(--line); border-radius: var(--pill); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1b1a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 16px no-repeat; color: var(--ink); font: inherit; font-size: var(--fs-small); font-weight: 650; appearance: none; cursor: pointer; } .woocommerce .woocommerce-ordering select:hover { border-color: var(--ink); } /* Grille de produits. */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); clear: both; margin: 0 0 var(--space-5); padding: 0; } .woocommerce .shop__main ul.products[class*="columns-"] { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column; width: auto; float: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .woocommerce ul.products li.product:hover { border-color: transparent; box-shadow: var(--shadow); } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; padding: 0 1.25rem; color: inherit; text-decoration: none; } .pcard__media { position: relative; margin: 0 -1.25rem 1.1rem; aspect-ratio: 1; background: var(--surface); overflow: hidden; } .woocommerce ul.products li.product a img { width: 100%; height: 100%; margin: 0; padding: 8%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.6s var(--ease); } .woocommerce ul.products li.product:hover a img { transform: scale(1.04); } .pcard__badge { position: absolute; top: 1rem; right: 1rem; z-index: 1; padding: 0.35rem 0.8rem; border-radius: var(--pill); background: var(--ink); color: var(--white); font-size: var(--fs-xs); font-weight: 700; } .pcard__cat { display: block; margin-bottom: 0.35rem; font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0 0 0.6rem; padding: 0; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.3; color: var(--ink); } .woocommerce ul.products li.product .star-rating { margin: 0 0 0.6rem; font-size: 0.8em; } .woocommerce ul.products li.product .price { display: block; margin: auto 0 0; padding-bottom: 1rem; color: var(--ink); font-size: 1.15rem; font-weight: 800; } .woocommerce ul.products li.product .button { margin: 0 1.25rem 1.25rem; } .woocommerce ul.products li.product .added_to_cart { margin: -0.5rem 1.25rem 1.25rem; font-size: var(--fs-small); font-weight: 700; color: var(--ink); } .woocommerce .price del, .woocommerce div.product p.price del { color: var(--grey); font-size: 0.82em; font-weight: 500; opacity: 1; } .woocommerce .price ins, .woocommerce div.product p.price ins { text-decoration: none; } .woocommerce span.onsale, .woocommerce ul.products li.product .onsale { top: 1rem; left: 1rem; right: auto; z-index: 2; min-width: 0; min-height: 0; margin: 0; padding: 0.35rem 0.8rem; border-radius: var(--pill); background: var(--signal); color: var(--ink); font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; } @media (max-width: 900px) { .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .woocommerce .shop__main ul.products[class*="columns-"], .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { padding: 0 0.85rem; } .pcard__media { margin-inline: -0.85rem; } .woocommerce ul.products li.product .button { margin: 0 0.85rem 0.85rem; padding-inline: 0.75rem; font-size: 0.85rem; } } /* Boutons WooCommerce. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.8rem 1.5rem; border: 2px solid var(--ink); border-radius: var(--pill); background: var(--ink); color: var(--white); font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; line-height: 1.1; text-decoration: none; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { border-color: var(--signal); background: var(--signal); color: var(--ink); } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { border-color: var(--signal); background: var(--signal); color: var(--ink); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { border-color: var(--ink); background: var(--ink); color: var(--white); } .woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce button.button.alt.disabled { opacity: 0.45; } .woocommerce :is(a, button).button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* Fiche produit. */ .woocommerce div.product { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 4.5rem); align-items: start; } .woocommerce div.product > * { grid-column: 1 / -1; } .woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; } .woocommerce div.product > .summary { grid-column: 2; } .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100%; float: none; margin: 0; } .woocommerce div.product div.images .woocommerce-product-gallery__wrapper, .woocommerce div.product div.images .flex-viewport { border-radius: var(--radius); background: var(--surface); overflow: hidden; } .woocommerce div.product div.images img { mix-blend-mode: multiply; } .woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.75rem; } .woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; } .woocommerce div.product div.images .flex-control-thumbs li img { border-radius: 12px; background: var(--surface); opacity: 0.55; } .woocommerce div.product div.images .flex-control-thumbs li img.flex-active, .woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 1; } .woocommerce div.product .woocommerce-product-gallery__trigger { top: 1rem; right: 1rem; background: var(--white); box-shadow: var(--shadow); } .woocommerce div.product .product_title { margin-bottom: 1rem; font-size: var(--fs-h2); } .woocommerce div.product p.price, .woocommerce div.product span.price { margin-bottom: 1.25rem; color: var(--ink); font-family: var(--font-display); font-size: 1.9rem; } .woocommerce div.product .woocommerce-product-rating { margin-bottom: 1rem; } .woocommerce-product-details__short-description { margin-bottom: 1.5rem; color: var(--muted); } .woocommerce div.product .stock { font-weight: 700; } .woocommerce div.product .stock.in-stock { color: #1d7a3a; } .woocommerce div.product .stock.out-of-stock { color: var(--error); } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 1.75rem; } .woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { display: none; } .woocommerce div.product form.cart div.quantity { float: none; margin: 0; } .woocommerce div.product form.cart .button { float: none; flex: 1 1 14rem; min-height: 3.25rem; } .woocommerce div.product form.cart .variations { margin-bottom: 0.5rem; } .woocommerce div.product form.cart .variations select { min-width: 12rem; } .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 0.75rem; width: 100%; } .pinfo { display: grid; gap: 0.75rem; margin: 0 0 1.75rem; padding: 1.5rem 0; border-block: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600; } .pinfo li { display: flex; align-items: center; gap: 0.85rem; } .pinfo__icon { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--surface); } .pinfo__icon .icon { width: 18px; height: 18px; } .woocommerce div.product .product_meta { display: grid; gap: 0.35rem; font-size: var(--fs-small); color: var(--muted); } .woocommerce div.product .product_meta a { color: var(--ink); font-weight: 600; } @media (max-width: 900px) { .woocommerce div.product { grid-template-columns: minmax(0, 1fr); } .woocommerce div.product > .summary { grid-column: 1; margin-top: var(--space-4); } } /* Onglets, caractéristiques, avis. */ .woocommerce div.product .woocommerce-tabs { margin-top: clamp(3rem, 6vw, 5rem); } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; border: 0; overflow: visible; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; border-radius: var(--pill); background: var(--surface); } .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 0.75rem 1.3rem; color: var(--ink); font-weight: 700; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--ink); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--white); } /* Les onglets portent la classe .panel, déjà utilisée par un composant de l'accueil : on la neutralise ici. */ .woocommerce div.product .woocommerce-tabs .panel { display: block; position: static; min-height: 0; max-width: 48rem; margin: 0; padding: 0; overflow: visible; border-radius: 0; background: none; color: inherit; box-shadow: none; } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child { font-size: var(--fs-h3); margin-bottom: 1rem; } .woocommerce table.shop_attributes { border: 0; } .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); background: none; font-style: normal; text-align: left; } .woocommerce table.shop_attributes th { width: 35%; font-weight: 700; } .woocommerce table.shop_attributes tr:nth-child(even) th, .woocommerce table.shop_attributes tr:nth-child(even) td { background: var(--surface); } .woocommerce .star-rating span::before, .woocommerce .star-rating::before, .woocommerce p.stars a { color: var(--ink); } .woocommerce div.product .related > h2, .woocommerce div.product .upsells > h2, .woocommerce .cross-sells > h2 { margin: clamp(3rem, 6vw, 5rem) 0 2rem; font-size: var(--fs-h2); } /* Messages. */ .woocommerce-message, .woocommerce-info { border-top-color: var(--signal); background: var(--surface); color: var(--ink); border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .woocommerce-message::before, .woocommerce-info::before { color: var(--ink); } .woocommerce-error { border-top-color: var(--error); border-radius: 0 0 var(--radius-sm) var(--radius-sm); } /* Formulaires. */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-product-search .search-field, .woocommerce div.product form.cart .variations select, .woocommerce .quantity .qty { min-height: 3.1rem; padding: 0.7rem 1rem; border: 1.5px solid #cfccc8; border-radius: 14px; background: var(--white); color: var(--ink); font: inherit; } .woocommerce .quantity .qty { width: 5.5rem; min-height: 3.25rem; border-radius: var(--pill); font-weight: 700; text-align: center; } .woocommerce-product-search .search-field { border-radius: var(--pill); padding-inline: 1.2rem; } .woocommerce form .form-row textarea { min-height: 8rem; } .woocommerce form .form-row :is(input.input-text, textarea, select):focus, .woocommerce-product-search .search-field:focus, .woocommerce .quantity .qty:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--signal); } .woocommerce form .form-row label { font-weight: 650; } .woocommerce form .password-input { position: relative; display: block; } .woocommerce form .password-input input.input-text { padding-right: 3.25rem; } .woocommerce form .show-password-input { position: absolute; top: 50%; right: 0.85rem; transform: translateY(-50%); } @media (max-width: 560px) { .woocommerce .shop__main .woocommerce-result-count, .woocommerce .shop__main .woocommerce-ordering { float: none; margin-bottom: var(--space-2); } .woocommerce .woocommerce-ordering select { width: 100%; } } /* Pagination. */ .woocommerce nav.woocommerce-pagination ul { display: flex; justify-content: center; gap: 0.5rem; border: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid; place-items: center; min-width: 3rem; height: 3rem; padding: 0 0.5rem; border: 1.5px solid var(--line); border-radius: var(--pill); color: var(--ink); font-weight: 700; } .woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--ink); background: var(--white); } .woocommerce nav.woocommerce-pagination ul li span.current { border-color: var(--ink); background: var(--ink); color: var(--white); } /* Catalogue vide. */ .shop-empty { padding: clamp(2rem, 5vw, 3.5rem); border: 1.5px dashed #cfccc8; border-radius: var(--radius); background: var(--surface); } .shop-empty h2 { font-size: var(--fs-h3); margin-bottom: 0.75rem; } .shop-empty p { max-width: 40rem; margin-bottom: 1.5rem; color: var(--muted); } /* Panier et commande (blocs WooCommerce). */ .wc-page .wc-block-components-button:not(.is-link) { min-height: 3.25rem; border-radius: var(--pill); background: var(--ink); color: var(--white); font-weight: 700; } .wc-page .wc-block-components-button:not(.is-link):hover { background: var(--signal); color: var(--ink); } .wc-page .wc-block-cart__submit-button, .wc-page .wc-block-components-checkout-place-order-button { background: var(--signal) !important; color: var(--ink) !important; } .wc-page .wc-block-cart__submit-button:hover, .wc-page .wc-block-components-checkout-place-order-button:hover { background: var(--ink) !important; color: var(--white) !important; } .wc-page .wc-block-components-text-input input[type], .wc-page .wc-block-components-textarea, .wc-page .wc-blocks-components-select .wc-blocks-components-select__select { border-radius: 12px; } .wc-page .wc-block-components-sidebar { padding: var(--space-3); border-radius: var(--radius); background: var(--surface); } .wc-page .wc-block-components-product-name { color: var(--ink); font-weight: 700; text-decoration: none; } .wc-page .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { font-size: var(--fs-h3); } /* Mon compte. */ .woocommerce-account .wc-page > .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0.6rem; border-radius: var(--radius); background: var(--surface); } .woocommerce-MyAccount-navigation a { display: block; padding: 0.75rem 1rem; border-radius: 12px; color: var(--ink); font-weight: 650; text-decoration: none; } .woocommerce-MyAccount-navigation a:hover { background: var(--white); } .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: var(--white); } .woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } .woocommerce-account .u-columns.col2-set .col-1, .woocommerce-account .u-columns.col2-set .col-2 { width: auto; float: none; } .woocommerce form.login, .woocommerce form.register { margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1.5px solid var(--line); border-radius: var(--radius); } .woocommerce table.shop_table { border-color: var(--line); border-radius: var(--radius-sm); } @media (max-width: 800px) { .woocommerce-account .wc-page > .woocommerce:has(> .woocommerce-MyAccount-navigation), .woocommerce-account .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); } }