/* * Arkyda Corporation — feuille de style unique. * * Une seule couche : pas de bloc « redesign » ni de bloc « v3 » qui réécrit * le précédent. Toute couleur, toute taille et tout espacement vient des * presets de theme.json, jamais d'une valeur en dur. * * Sommaire * 1. Socle * 2. En-tête et navigation * 3. Hero — lever du jour * 4. Bandeau de chiffres * 5. Sections et intertitres * 6. Figures — la photo comme pièce à conviction * 7. Cartes métier * 8. Étapes, valeurs, coordonnées * 9. Pied de page * 10. Articles et archives * 11. Formulaires * 12. Compatibilité Elementor et modèles builder */ /* ─────────────────────────── 1. Socle ─────────────────────────── */ :root { --aky-bar-height: 96px; } html { scroll-behavior: smooth; } /* * Typographie * * Une seule super-famille, IBM Plex, dans ses trois coupes : * * — Plex Sans Condensed pour le titrage : la condensation vient du dessin * de la fonte, pas d'un axe de largeur, donc aucun `font-stretch` ici ; * — Plex Sans pour le texte courant ; * — Plex Mono pour les libellés, les cotes et les chiffres. * * Plex a été commandée par IBM pour exprimer le rapport entre l'homme et la * machine. Cet héritage d'ingénierie n'est pas un argument décoratif : il se * voit dans les terminaisons droites, la barre du « l » et le dessin des * chiffres, qui conviennent à des cotes et à des références de chantier. */ :where(h1, h2, h3, h4, h5, h6), .aky-strip__value, .aky-step__index, .aky-slide__titre { text-wrap: balance; } /* * Texte justifié. * * La césure automatique n'est pas une option ici, c'est ce qui rend la * justification tenable. Sans elle, le navigateur ne peut qu'étirer les * espaces, et le français — avec ses mots longs et ses articles élidés — * produit alors des « rivières » de blanc en travers du paragraphe. Avec * `hyphens: auto`, il coupe aux syllabes et les espaces restent réguliers. * * La césure exige que la langue soit déclarée sur la page (``), * ce que WordPress fait dès que la langue du site est réglée sur le français. * * `text-wrap: pretty` évite en plus les lignes orphelines d'un seul mot. */ p, li, dd, .aky-hero__lead, .wp-block-post-excerpt__excerpt { hyphens: auto; -webkit-hyphens: auto; text-align: justify; text-wrap: pretty; } /* * Ce qui n'est pas justifié, et pourquoi. * * Les libellés, les repères chiffrés et les intitulés tiennent sur une ligne : * la justification n'y produirait rien, mais la césure pourrait couper un mot * au milieu d'un intitulé en capitales. Les boutons et le menu sont centrés ou * calés par leur mise en page. */ .aky-eyebrow, .aky-strip__value, .aky-strip__label, .aky-card__index, .aky-card__more, .aky-step__index, .aky-post-meta, .aky-figure figcaption, .aky-membre__fonction, .aky-fiche dt, .aky-fiche dd, .aky-filters p, .aky-form label, .aky-form__note, .aky-footer__bottom p, .aky-localisation__infos p, .wp-block-button__link, .wp-block-navigation p { hyphens: manual; -webkit-hyphens: manual; text-align: left; } /* * Les titres ne se justifient jamais : sur deux lignes courtes, la première * s'étirait d'un bord à l'autre (« Chambre froide »). Le cas s'est * présenté sur les cartes de réalisation, parce que la boucle de requête rend * chaque fiche dans un `li`, qui recevait la justification des listes et la * transmettait au titre. Ce `li` est un conteneur de mise en page, pas un * élément de liste à lire : il n'a pas à être justifié. Les paragraphes et * extraits qu'il contient gardent leur propre règle. */ h1, h2, h3, h4, h5, h6, .wp-block-post-template > li { hyphens: manual; -webkit-hyphens: manual; text-align: start; } /* Les libellés en capitales ont besoin d'air entre les lettres. */ .aky-eyebrow, .aky-strip__label, .aky-card__index, .aky-card__more, .aky-post-meta, .aky-figure figcaption { font-feature-settings: "tnum" 1; } /* * Filet de sécurité contre tout débordement horizontal. * * `clip` et non `hidden` : `overflow-x: hidden` transforme body en conteneur * de défilement, ce qui neutralise le `position: sticky` de l'en-tête — c'était * l'un des défauts de la version précédente. `clip` rogne sans créer ce * conteneur, donc l'en-tête reste collant. */ body { overflow-x: clip; } img, video, iframe, table { max-width: 100%; } img { height: auto; } :where(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--wp--preset--color--ochre); outline-offset: 3px; } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .skip-link:focus { background: var(--wp--preset--color--chalk); clip-path: none; color: var(--wp--preset--color--ink); height: auto; left: 12px; padding: 12px 20px; top: 12px; width: auto; z-index: 100; } /* Le sur-titre : présent partout, toujours le même traitement. */ .aky-eyebrow { color: var(--wp--preset--color--ochre); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.19em; margin: 0 0 var(--wp--preset--spacing--40); text-transform: uppercase; } /* Chiffres alignés en colonne partout où il y en a. */ .aky-strip__value, .aky-card__index, .aky-step__index, .wp-block-table td { font-variant-numeric: tabular-nums; } /* * Les sections pleine largeur doivent se toucher. * * WordPress espace les blocs frères d'un `blockGap` — y compris entre le hero * et le bandeau de chiffres, et entre l'en-tête et le contenu. Sur des bandes * pleine largeur aux fonds contrastés, cette gouttière laisse apparaître le * fond de page : un liseré sable entre deux aplats sombres. L'espacement de * ces sections vient de leur propre padding, pas d'une marge entre elles. */ :where(.wp-site-blocks) > *, .aky-hero, .aky-page-hero, .aky-strip, .aky-section, .aky-content, .aky-footer { margin-block: 0; } /* * WordPress insère un margin-block-start entre blocs frères dans une mise en * page « flux ». Dans les conteneurs ci-dessous, l'espacement est déjà assuré * par gap : laisser la marge décalerait le deuxième enfant et les suivants, * et les cartes d'une même rangée n'auraient plus la même hauteur d'image. */ .aky-cards > *, .aky-strip__inner > *, .aky-steps > *, .aky-values > *, .aky-footer__grid > *, .aky-contact-panel > * { margin-block: 0; } /* ──────────────────── 2. En-tête et navigation ──────────────────── */ /* La barre reste claire : c'est le seul fond sur lequel le logo officiel, dont le logotype est noir, fonctionne sans retouche. */ .aky-header { background: var(--wp--preset--color--chalk); border-bottom: 1px solid var(--wp--preset--color--line); position: sticky; top: 0; z-index: 30; } .admin-bar .aky-header { top: var(--wp-admin--admin-bar--height, 32px); } .aky-header__bar { gap: var(--wp--preset--spacing--50); min-height: var(--aky-bar-height); } .aky-header .wp-block-site-logo img { height: auto; max-height: 76px; width: auto; } .aky-header .wp-block-navigation { gap: var(--wp--preset--spacing--50); } /* Les liens de navigation ne prennent pas la couleur d'accent : réservée aux liens de contenu et à l'appel à l'action, elle perdrait sa valeur de signal si elle servait aussi au menu. */ .aky-header .wp-block-navigation a { color: var(--wp--preset--color--ink); text-decoration: none; } .aky-header .wp-block-navigation a:hover { color: var(--wp--preset--color--ochre); } /* * État actif. * * Le soulignement orange est posé sous le lien plutôt qu'en fond : dans une * barre claire, un aplat de couleur sur l'élément courant pèserait autant que * le bouton d'appel à l'action juste à côté, et les deux se disputeraient * l'attention. La classe est calculée côté serveur, voir inc/navigation.php. */ .aky-header .wp-block-navigation .current-menu-item > a, .aky-header .wp-block-navigation .current-menu-ancestor > a, .aky-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, .aky-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content { box-shadow: inset 0 -2px 0 var(--wp--preset--color--orange); color: var(--wp--preset--color--ink); font-weight: 700; } /* Dans le panneau plein écran, le soulignement se lit mal : on marque l'élément courant par la couleur d'accent. */ .aky-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a, .aky-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > a { box-shadow: none; color: var(--wp--preset--color--orange); } /* Le corps du menu était trop fin pour une barre de cette hauteur. */ .aky-header .wp-block-navigation, .aky-header .wp-block-navigation .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--base); } /* * Sous-menu des pôles métier. * * Le panneau reprend la craie des surfaces en relief plutôt que le blanc par * défaut du bloc, et s'appuie sur un filet plein largeur plutôt que sur une * ombre portée : le reste du thème sépare par des filets, pas par des ombres. */ .aky-header .wp-block-navigation__submenu-container { background: var(--wp--preset--color--chalk); border: 1px solid var(--wp--preset--color--line); border-top: 2px solid var(--wp--preset--color--orange); box-shadow: 0 20px 44px rgba(11, 33, 54, 0.12); min-width: 17rem; padding: var(--wp--preset--spacing--20) 0; } .aky-header .wp-block-navigation__submenu-container li > a { display: block; padding: 0.6rem var(--wp--preset--spacing--40); width: 100%; } .aky-header .wp-block-navigation__submenu-container li > a:hover { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ochre); } /* * Contact est un bouton sur grand écran : l'élément de menu ferait doublon. * * La liste n'est pas un enfant direct du bloc Navigation : WordPress l'enveloppe * dans le conteneur du menu mobile, quatre niveaux plus bas. On vise donc ce * conteneur tant qu'il n'est pas ouvert — le panneau mobile garde le lien. */ .aky-header .wp-block-navigation__responsive-container:not(.is-menu-open) .aky-nav-contact { display: none; } /* ────────── Panneau déroulant mobile ────────── */ /* * Tout est réaligné à gauche. * * Le menu de bureau est calé à droite ; sans reprise, cette justification * passe telle quelle dans le panneau plein écran et l'on obtient une colonne * d'items alignés à droite, avec les sous-éléments restés à gauche. Illisible, * et l'œil n'a plus de bord de référence pour parcourir la liste. */ .aky-header .wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--80); } .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; padding-top: var(--wp--preset--spacing--70); width: 100%; } .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch; gap: 0; justify-content: flex-start; width: 100%; } /* Chaque entrée occupe toute la largeur : la cible tactile fait la ligne entière, pas seulement les quelques caractères du libellé. */ .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: stretch; border-bottom: 1px solid rgba(239, 234, 225, 0.16); width: 100%; } /* * `box-sizing` explicite, et ce n'est pas une précaution de style. * * WordPress laisse les liens de navigation en `content-box`. Avec * `width: 100 %` et une marge intérieure, la largeur devient 100 % *plus* les * marges : le lien Contact, seul à avoir un remplissage horizontal, débordait * ainsi de 32 px hors du panneau. */ .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { box-sizing: border-box; display: block; font-size: var(--wp--preset--font-size--large); max-width: 100%; padding: var(--wp--preset--spacing--40) 0; width: 100%; } /* Le chevron du sous-menu se cale à l'extrémité de la ligne. */ .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu { flex-wrap: wrap; } .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { margin-left: auto; } /* Les pôles s'indentent sous « Services », rattachés par un filet vertical : la hiérarchie se lit sans avoir à replier quoi que ce soit. */ .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent; border: 0; border-left: 2px solid var(--wp--preset--color--orange); box-shadow: none; margin: 0 0 var(--wp--preset--spacing--40); padding: 0 0 0 var(--wp--preset--spacing--40); width: 100%; } .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; } .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: rgba(239, 234, 225, 0.78); font-size: var(--wp--preset--font-size--base); padding: var(--wp--preset--spacing--30) 0; } .aky-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li > a:hover { background: transparent; color: var(--wp--preset--color--orange); } /* Contact ferme la liste, en accent : c'est l'action attendue. */ .aky-header .wp-block-navigation__responsive-container.is-menu-open .aky-nav-contact { border-bottom: 0; margin-top: var(--wp--preset--spacing--50); } .aky-header .wp-block-navigation__responsive-container.is-menu-open .aky-nav-contact .wp-block-navigation-item__content { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 0.1em; padding: var(--wp--preset--spacing--40); text-align: center; text-transform: uppercase; } /* Le bouton de fermeture gagne en présence et en surface tactile. */ .aky-header .wp-block-navigation__responsive-container-close { padding: var(--wp--preset--spacing--30); top: var(--wp--preset--spacing--50); right: var(--wp--preset--spacing--50); } .aky-header .wp-block-navigation__responsive-container-close svg { height: 1.75rem; width: 1.75rem; } .aky-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--night); color: var(--wp--preset--color--chalk); } /* ─────────────────── 3. Hero — lever du jour ─────────────────── */ /* * Le soleil est hors champ : la lumière monte du bas, le haut reste sombre. * C'est ce qui donne son assise au titre — et ce qui évite le disque orange, * cliché de tous les sites de panneaux solaires. * * Le dégradé se termine exactement sur l'orange du logo (#F39322) : la * chaleur du ciel et la couleur de marque sont la même valeur. */ .aky-hero { background-color: var(--wp--preset--color--night); background-image: radial-gradient(120% 62% at 78% 108%, rgba(243, 147, 34, 0.5), transparent 62%), var(--wp--preset--gradient--dawn); color: var(--wp--preset--color--chalk); overflow: hidden; position: relative; } /* Ligne d'horizon : referme le ciel et sépare le hero du bandeau. */ .aky-hero::after { background: rgba(41, 28, 22, 0.92); bottom: 0; content: ""; height: 10px; left: 0; position: absolute; right: 0; } /* * Variante photographique. * * La photo est portée par un pseudo-élément et non par le fond de la section : * on peut ainsi l'animer en `transform`, que le navigateur compose sur le GPU, * au lieu d'animer `background-size`, qui force un recalcul de mise en page à * chaque image. * * Le dégradé du lever du jour reste par-dessus, à opacité réduite : il donne * son assise au titre et raccorde le cliché à la palette de la marque, dont il * reprend l'orange exact en pied. */ .aky-hero--photo::before { animation: aky-kenburns 26s cubic-bezier(0.33, 0, 0.2, 1) forwards; background: var(--aky-hero-photo, none) center / cover no-repeat; content: ""; inset: 0; position: absolute; transform: scale(1.09); transform-origin: 62% 70%; z-index: 0; } .aky-hero--photo { background-image: linear-gradient(178deg, rgba(11, 33, 54, 0.88) 0%, rgba(11, 33, 54, 0.6) 38%, rgba(120, 62, 26, 0.42) 70%, rgba(243, 147, 34, 0.42) 100%); background-position: center; background-size: cover; isolation: isolate; } /* Le dégradé doit repasser au-dessus de la photo. */ .aky-hero--photo::after { background: linear-gradient(178deg, rgba(11, 33, 54, 0.86) 0%, rgba(11, 33, 54, 0.52) 40%, rgba(120, 62, 26, 0.34) 72%, rgba(243, 147, 34, 0.38) 96%), rgba(41, 28, 22, 0); content: ""; height: auto; inset: 0; position: absolute; z-index: 1; } /* Le trait d'horizon, sous le dégradé mais au-dessus de la photo. */ .aky-hero--photo .aky-hero__inner::after { background: rgba(41, 28, 22, 0.92); bottom: calc(var(--wp--preset--spacing--90) * -1); content: ""; height: 10px; left: -100vw; position: absolute; right: -100vw; } @keyframes aky-kenburns { to { transform: scale(1); } } .aky-hero__inner { padding-bottom: var(--wp--preset--spacing--90); padding-top: var(--wp--preset--spacing--90); position: relative; z-index: 2; } /* La colonne de texte occupe un peu plus de la moitié du hero : assez large pour que le titre ne se hache pas, assez étroite pour laisser respirer la partie chaude du ciel. */ .aky-hero__content { max-width: 62ch; } .aky-hero h1 { margin: 0; max-width: 16ch; } .aky-hero .aky-eyebrow { color: var(--wp--preset--color--orange); } .aky-hero__lead { color: rgba(251, 249, 245, 0.88); font-size: var(--wp--preset--font-size--medium); margin: var(--wp--preset--spacing--50) 0 0; max-width: 46ch; } .aky-hero .wp-block-buttons { margin-top: var(--wp--preset--spacing--60); } .aky-hero .wp-block-button__link { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--ink); } .aky-hero .is-style-outline > .wp-block-button__link { background: transparent; border: 1px solid rgba(251, 249, 245, 0.55); color: var(--wp--preset--color--chalk); } .aky-hero .is-style-outline > .wp-block-button__link:hover { background: rgba(251, 249, 245, 0.12); border-color: var(--wp--preset--color--chalk); } /* ─────────── Diaporama d'accueil ─────────── */ /* * Les vues sont superposées et se croisent en fondu. Le conteneur porte donc * une hauteur propre : sans elle, il s'effondrerait, ses enfants étant tous * en position absolue. */ .aky-hero--slider { background-image: none; min-height: clamp(34rem, 76vh, 48rem); padding: 0; } .aky-hero--slider::before, .aky-hero--slider::after { content: none; } .aky-slides { display: grid; min-height: inherit; } /* * Fondu enchaîné, et non fondu croisé. * * Faire varier les deux opacités en même temps superpose deux photographies à * demi transparentes : on voit les deux à la fois, en double exposition. La * vue sortante reste donc pleinement opaque, en dessous, pendant que la vue * entrante apparaît par-dessus. Rien ne transparaît, et l'enchaînement est net. */ .aky-slide { grid-area: 1 / 1; min-height: inherit; opacity: 0; pointer-events: none; position: relative; transition: opacity 900ms ease; z-index: 0; } .aky-slide.is-leaving { opacity: 1; transition: none; z-index: 1; } .aky-slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; } /* La photographie et son voile, sur un élément dédié : le mouvement de caméra se fait en `transform`, composé par le GPU. */ .aky-slide__media { inset: 0; overflow: hidden; position: absolute; z-index: 0; } .aky-slide__media::before { background-position: center; background-repeat: no-repeat; background-size: cover; content: ""; inset: 0; position: absolute; transform: scale(1.12); transition: transform 9s cubic-bezier(0.33, 0, 0.2, 1); } .aky-slide.is-active .aky-slide__media::before { transform: scale(1); } /* * Une vue inactive reprend son cadrage de départ sans transition, donc hors de * vue. La vue sortante, elle, reste figée sur le cadrage relevé par le script * (`--aky-kb`) : sans cela, elle reculait pendant le fondu. */ .aky-slide:not(.is-active) .aky-slide__media::before { transition: none; } .aky-slide.is-leaving .aky-slide__media::before { transform: var(--aky-kb, scale(1)); } .aky-slide--solaire .aky-slide__media::before { background-image: var(--aky-slide-solaire); } .aky-slide--btp .aky-slide__media::before { background-image: var(--aky-slide-btp); } .aky-slide--eau .aky-slide__media::before { background-image: var(--aky-slide-eau); } .aky-slide--froid .aky-slide__media::before { background-image: var(--aky-slide-froid); } /* * Le voile a deux couches. * * 1. Un assombrissement de gauche à droite, sous la colonne de texte : le * titre blanc reste lisible quelle que soit la photo, sans éteindre la * moitié droite de l'image. * 2. Le lever du jour de la marque, adouci. L'ancien voile finissait sur un * orange à 42 % en pied, précisément là où sont écrits en blanc les noms * des onglets : sur une photo claire, ils devenaient illisibles. */ .aky-slide__media::after { background: linear-gradient(90deg, rgba(11, 33, 54, 0.78) 0%, rgba(11, 33, 54, 0.5) 45%, rgba(11, 33, 54, 0.18) 100%), linear-gradient(178deg, rgba(11, 33, 54, 0.55) 0%, rgba(11, 33, 54, 0.2) 45%, rgba(120, 62, 26, 0.22) 78%, rgba(243, 147, 34, 0.2) 100%); content: ""; inset: 0; position: absolute; } /* * Le diaporama est du balisage propre au thème : il ne bénéficie pas de la * mise en page « contenu centré » que WordPress applique aux blocs. La colonne * est donc bornée et centrée ici, sur la même largeur que le reste du site, * faute de quoi le texte irait se coller au bord de l'écran. */ .aky-slide .aky-hero__inner { align-items: center; box-sizing: content-box; display: flex; margin-inline: auto; max-width: var(--wp--style--global--content-size, 1180px); min-height: inherit; padding-bottom: var(--wp--preset--spacing--90); padding-left: var(--wp--preset--spacing--50); padding-right: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--90); } /* La barre de commandes s'aligne sur la même colonne. */ .aky-slider__barre { box-sizing: content-box; margin-inline: auto; max-width: var(--wp--style--global--content-size, 1180px); } .aky-slide__titre { font-size: var(--wp--preset--font-size--display); margin: 0; max-width: 17ch; } .aky-slide__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--60); } .aky-slide__actions .is-style-outline { background: transparent; border: 1px solid rgba(251, 249, 245, 0.55); color: var(--wp--preset--color--chalk); } .aky-slide__actions .is-style-outline:hover { background: rgba(251, 249, 245, 0.12); border-color: var(--wp--preset--color--chalk); } /* Le contenu entre en cascade à chaque changement de vue. */ .aky-slide.is-active .aky-hero__content > * { animation: aky-slide-entree 700ms cubic-bezier(0.22, 1, 0.36, 1) both; } .aky-slide.is-active .aky-hero__content > *:nth-child(1) { animation-delay: 100ms; } .aky-slide.is-active .aky-hero__content > *:nth-child(2) { animation-delay: 200ms; } .aky-slide.is-active .aky-hero__content > *:nth-child(3) { animation-delay: 320ms; } .aky-slide.is-active .aky-hero__content > *:nth-child(4) { animation-delay: 440ms; } /* * Tant que l'écran de chargement couvre la page, la cascade attend : elle se * jouait entièrement dessous. Même chose pour la barre de progression de la * première vue. Sans JavaScript, `aky-js` est absente et tout joue normalement. */ .aky-js:not(.aky-loaded) .aky-slide.is-active .aky-hero__content > *, .aky-js:not(.aky-loaded) .aky-puce.is-active .aky-puce__trait::after { animation-play-state: paused; } @keyframes aky-slide-entree { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* ── Commandes ── */ .aky-slider__barre { align-items: center; bottom: 0; display: flex; gap: var(--wp--preset--spacing--50); left: 0; padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); position: absolute; right: 0; z-index: 3; } /* Bandeau sombre sous les onglets, sur toute la largeur du hero (qui masque son débordement) : les noms blancs se lisent sur n'importe quelle photo. */ .aky-slider__barre::before { background: linear-gradient(0deg, rgba(11, 33, 54, 0.88) 0%, rgba(11, 33, 54, 0.55) 55%, rgba(11, 33, 54, 0) 100%); bottom: 0; content: ""; height: calc(100% + 4.5rem); left: -100vw; pointer-events: none; position: absolute; right: -100vw; z-index: -1; } .aky-slider__puces { display: flex; flex: 1; gap: var(--wp--preset--spacing--40); max-width: 60rem; } /* * Les onglets portent le nom du pôle plutôt qu'un point : ils indiquent où * l'on va, pas seulement combien il reste de vues. Le trait se remplit pour * signaler la vue courante. */ .aky-puce { background: none; border: 0; color: rgba(251, 249, 245, 0.82); cursor: pointer; display: grid; text-shadow: 0 1px 6px rgba(11, 33, 54, 0.65); flex: 1; gap: 0.6rem; padding: 0; text-align: left; transition: color 220ms ease; } .aky-puce:hover, .aky-puce.is-active { color: var(--wp--preset--color--chalk); } .aky-puce__trait { background: rgba(251, 249, 245, 0.28); display: block; height: 2px; overflow: hidden; position: relative; } .aky-puce__trait::after { background: var(--wp--preset--color--orange); content: ""; inset: 0; position: absolute; transform: scaleX(0); transform-origin: left; } .aky-puce.is-active .aky-puce__trait::after { animation: aky-puce-progression var(--aky-slide-duree, 7s) linear forwards; } .aky-slider.is-paused .aky-puce.is-active .aky-puce__trait::after { animation-play-state: paused; } @keyframes aky-puce-progression { to { transform: scaleX(1); } } .aky-puce__nom { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.04em; } .aky-slider__pause { background: rgba(251, 249, 245, 0.12); border: 1px solid rgba(251, 249, 245, 0.3); border-radius: 50%; cursor: pointer; flex: none; height: 2.5rem; position: relative; transition: background-color 200ms ease; width: 2.5rem; } .aky-slider__pause:hover { background: rgba(251, 249, 245, 0.24); } /* Deux barres pour la pause, un triangle pour la lecture. */ .aky-slider__pause-icone, .aky-slider__pause-icone::after { background: var(--wp--preset--color--chalk); content: ""; height: 0.75rem; position: absolute; top: 50%; transform: translateY(-50%); width: 3px; } .aky-slider__pause-icone { left: calc(50% - 4px); } .aky-slider__pause-icone::after { left: 5px; } .aky-slider__pause[aria-pressed="true"] .aky-slider__pause-icone { background: transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--wp--preset--color--chalk); border-top: 6px solid transparent; height: 0; left: calc(50% - 4px); width: 0; } .aky-slider__pause[aria-pressed="true"] .aky-slider__pause-icone::after { content: none; } @media (max-width: 781px) { .aky-slider__barre { padding-bottom: var(--wp--preset--spacing--50); } .aky-puce__nom { display: none; } .aky-slider__puces { gap: var(--wp--preset--spacing--30); } } /* En-tête des pages internes : même famille, sans le lever du jour complet. */ .aky-page-hero { background-color: var(--wp--preset--color--night); background-image: var(--wp--preset--gradient--night-fade); border-bottom: 4px solid var(--wp--preset--color--orange); color: var(--wp--preset--color--chalk); } .aky-page-hero__inner { padding-bottom: var(--wp--preset--spacing--80); padding-top: var(--wp--preset--spacing--80); } .aky-page-hero h1 { margin: 0; max-width: 18ch; } .aky-page-hero p:not(.aky-eyebrow) { color: rgba(251, 249, 245, 0.84); margin: var(--wp--preset--spacing--50) 0 0; max-width: 58ch; } .aky-page-hero .aky-eyebrow { color: var(--wp--preset--color--orange); } /* Photo de l'équipe, au-dessus des coordonnées de la page Contact. */ .aky-contact-photo { margin: 0 0 var(--wp--preset--spacing--50); } .aky-contact-photo img { aspect-ratio: 5 / 3; display: block; height: auto; object-fit: cover; object-position: center 30%; width: 100%; } /* * Couverture d'une fiche de réalisation. Les photos de chantier du client * font 560 à 1280 px de large : en pleine largeur, elles seraient agrandies, * donc floues. On plafonne la largeur, au format 3:2 des cartes. */ .aky-projet-couverture { margin-inline: auto; max-inline-size: 56rem; } /* Galerie de chantier dans le corps d'une fiche : photos entières, non recadrées. */ .single-arkyda_projet .wp-block-gallery img { object-fit: contain; } /* * Ouvrages types d'un pôle, au-dessus des réalisations récentes. Ils sont * souvent moins de trois : sans fond de grille, la case vide ne se voit pas, * et les cartes gardent la largeur de celles des réalisations. */ .aky-cards.aky-livrables { background: transparent; gap: var(--wp--preset--spacing--40); } .aky-livrables + .aky-livrables__suite { margin-top: var(--wp--preset--spacing--80); } /* ─────────────────── 4. Bandeau de chiffres ─────────────────── */ .aky-strip { background: var(--wp--preset--color--night); color: var(--wp--preset--color--sand); } .aky-strip__inner { display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); } .aky-strip__item { border-right: 1px solid rgba(239, 234, 225, 0.17); padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); } .aky-strip__item:last-child { border-right: 0; } .aky-strip__value { color: var(--wp--preset--color--orange); display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: 1; margin: 0; } .aky-strip__label { color: rgba(239, 234, 225, 0.66); display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.13em; margin-top: var(--wp--preset--spacing--30); text-transform: uppercase; } /* ──────────────── 5. Sections et intertitres ──────────────── */ .aky-section { padding-bottom: var(--wp--preset--spacing--90); padding-top: var(--wp--preset--spacing--90); } .aky-section--chalk { background: var(--wp--preset--color--chalk); } .aky-section--night { background: var(--wp--preset--color--night); color: var(--wp--preset--color--sand); } .aky-section--night h2, .aky-section--night h3 { color: var(--wp--preset--color--chalk); } .aky-section--night .aky-eyebrow { color: var(--wp--preset--color--orange); } /* Le gris « muted » tombe à 2,5:1 sur le bleu nuit : l'accroche passe au sable atténué, comme le texte des étapes (≈ 9:1). */ .aky-section--night .aky-section__intro p:not(.aky-eyebrow) { color: rgba(239, 234, 225, 0.72); } /* * Pas de max-width sur le bloc lui-même : dans une mise en page « contenu * centré », WordPress applique déjà margin-inline:auto à chaque enfant direct. * Un max-width ici recentrerait l'intertitre au milieu de la page, décalé par * rapport à la grille qui le suit. On borne donc les lignes, pas le bloc. */ .aky-section__intro { margin-bottom: var(--wp--preset--spacing--70); } .aky-section__intro h2 { margin: 0; max-width: 20ch; } .aky-section__intro p:not(.aky-eyebrow) { color: var(--wp--preset--color--muted); margin: var(--wp--preset--spacing--40) 0 0; max-width: 62ch; } /* ───────── 6. Figures — la photo comme pièce à conviction ───────── */ /* * Le renversement du rapport texte/image : la photo n'est plus un fond * d'écran, elle est cadrée, datée et légendée. C'est ce qui neutralise la * faiblesse d'un visuel au lieu de l'exposer en plein cadre. */ .aky-figure { margin: 0; } .aky-figure img { border: 1px solid var(--wp--preset--color--line); display: block; width: 100%; } .aky-figure figcaption { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.09em; margin-top: var(--wp--preset--spacing--30); text-align: left; text-transform: uppercase; } /* ─────────────────── 7. Cartes métier ─────────────────── */ /* La grille utilise un fond de filet et des gouttières d'un pixel : les séparations sont des filets, pas des ombres portées. */ .aky-cards { background: var(--wp--preset--color--line); display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .aky-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aky-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aky-card { background: var(--wp--preset--color--chalk); display: flex; flex-direction: column; } /* La figure ne se comprime pas : dans une grille, les cartes sont étirées à la hauteur de la plus haute, et sans ce flex:none les visuels prendraient des hauteurs différentes d'une carte à l'autre. */ .aky-card > .wp-block-image, .aky-card > figure { flex: none; margin: 0; } .aky-card img { aspect-ratio: 10 / 7; display: block; height: auto; object-fit: cover; width: 100%; } .aky-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--wp--preset--spacing--50); } /* * Ce sélecteur porte volontairement deux classes. * * Le repère chiffré est un paragraphe, et la règle générique `.aky-card p` * plus bas est un sélecteur descendant d'élément : sa spécificité (0-1-1) * l'emporterait sur une classe seule (0-1-0), et le chiffre repasserait en * gris. Même précaution sur .aky-step__index. */ .aky-card .aky-card__index { color: var(--wp--preset--color--orange); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.13em; margin: 0; } .aky-card h3 { font-size: var(--wp--preset--font-size--large); margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30); } .aky-card p { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin: 0; /* Sur 250 px de large, la justification creuse des rivières même avec la césure : le drapeau à droite se lit mieux. */ text-align: left; } /* Le titre de carte est cliquable, sans prendre la couleur des liens de contenu : dans une grille, tout est lien, la couleur perdrait son sens. */ .aky-card h3 a { color: inherit; text-decoration: none; } .aky-card:hover h3 a, .aky-card h3 a:hover { color: var(--wp--preset--color--ochre); } /* L'invite se cale en pied de carte : `margin-top: auto` la pousse en bas de la colonne flexible, donc elle s'aligne d'une carte à l'autre quels que soient les longueurs de texte. */ .aky-card__more { color: var(--wp--preset--color--ochre); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.1em; margin-top: auto; padding-top: var(--wp--preset--spacing--50); text-decoration: none; text-transform: uppercase; } /* Deux classes : `.aky-card p { margin: 0 }` (0-1-1) annulait le `margin-top: auto` ci-dessus, et les invites ne s'alignaient plus. */ .aky-card .aky-card__more { margin-top: auto; } .aky-card__more a { color: inherit; text-decoration: none; } .aky-card__more a::after { content: " \2192"; } .aky-card:hover .aky-card__more a, .aky-card__more a:hover { text-decoration: underline; } /* Cartes sur fond sombre. */ .aky-section--night .aky-cards { background: rgba(239, 234, 225, 0.17); } .aky-section--night .aky-card { background: var(--wp--preset--color--night); } .aky-section--night .aky-card p { color: rgba(239, 234, 225, 0.7); } /* ───────── 8. Étapes, valeurs, coordonnées ───────── */ /* Les étapes sont numérotées parce qu'elles sont réellement une séquence : on ne maintient pas avant d'avoir réalisé. */ .aky-steps { counter-reset: aky-step; display: grid; gap: 0; } .aky-step { border-top: 1px solid var(--wp--preset--color--line); display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: 5rem minmax(0, 1fr); padding: var(--wp--preset--spacing--60) 0; } .aky-step:last-child { border-bottom: 1px solid var(--wp--preset--color--line); } /* La mise en page « flux » de WordPress pose un margin-block-start sur le second enfant : le titre tombait 24 px sous son numéro. */ .aky-step > * { margin-block: 0; } /* Deux classes, pour la même raison que .aky-card__index ci-dessus. */ .aky-step .aky-step__index { color: var(--wp--preset--color--orange); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: 1; margin: 0; } .aky-step h3 { font-size: var(--wp--preset--font-size--large); margin: 0 0 var(--wp--preset--spacing--30); } .aky-step p { color: var(--wp--preset--color--muted); margin: 0; max-width: 64ch; } .aky-section--night .aky-step { border-color: rgba(239, 234, 225, 0.17); } .aky-section--night .aky-step p { color: rgba(239, 234, 225, 0.72); } /* Valeurs : une liste, pas des cartes — il n'y a rien à hiérarchiser. */ .aky-values { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--wp--preset--color--line); list-style: none; margin: 0; padding: 0; } .aky-values li { background: var(--wp--preset--color--sand); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--medium); font-weight: 700; padding: var(--wp--preset--spacing--50); } .aky-section--chalk .aky-values li { background: var(--wp--preset--color--chalk); } /* Coordonnées. */ .aky-contact-grid { display: grid; gap: var(--wp--preset--spacing--70); grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } /* * Le panneau de coordonnées suit la lecture du formulaire. * * Il est plus court que le formulaire : figé en haut de colonne, il laissait un * grand vide sous lui. Collant, il reste sous les yeux pendant qu'on remplit, * ce qui est précisément le moment où l'on hésite entre écrire et téléphoner. */ .aky-contact-panel { background: var(--wp--preset--color--chalk); border: 1px solid var(--wp--preset--color--line); display: grid; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--60); position: sticky; top: calc(var(--aky-bar-height) + var(--wp--preset--spacing--50)); } @media (max-width: 781px) { .aky-contact-panel { position: static; } } .aky-contact-panel p { margin: 0; } .aky-contact-panel a, .aky-contact-panel span { color: var(--wp--preset--color--ink); display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--medium); overflow-wrap: anywhere; text-decoration: none; } .aky-contact-panel a:hover { color: var(--wp--preset--color--ochre); text-decoration: underline; } .aky-contact-panel small { color: var(--wp--preset--color--muted); display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.12em; margin-bottom: 2px; text-transform: uppercase; } /* ────────── 8 bis. Localisation ────────── */ .aky-localisation { display: grid; gap: var(--wp--preset--spacing--70); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .aky-localisation__infos { display: grid; align-content: start; gap: var(--wp--preset--spacing--50); } .aky-localisation__infos p { border-bottom: 1px solid var(--wp--preset--color--line); margin: 0; padding-bottom: var(--wp--preset--spacing--40); } .aky-localisation__infos small { color: var(--wp--preset--color--muted); display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.12em; margin-bottom: 4px; text-transform: uppercase; } .aky-localisation__infos span, .aky-localisation__infos a { color: var(--wp--preset--color--ink); display: block; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--medium); text-decoration: none; } .aky-localisation__infos a:hover { color: var(--wp--preset--color--ochre); text-decoration: underline; } /* L'adresse du siège ouvre la carte : on le signale par un soulignement. */ .aky-localisation__infos a[target="_blank"] { text-decoration: underline; text-decoration-color: var(--wp--preset--color--orange); text-underline-offset: 0.2em; } /* Liens sous la carte : la carte se consulte sur place, l'itinéraire se calcule dans Google Maps, que le visiteur a déjà sur son téléphone. */ .aky-carte__liens { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); align-items: center; margin: var(--wp--preset--spacing--50) 0 0; } .aky-carte__liens a { color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.12em; text-transform: uppercase; } .aky-carte__liens .aky-carte__itineraire { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--ink); padding: 0.9em 1.4em; text-decoration: none; } .aky-carte__liens .aky-carte__itineraire:hover { background: var(--wp--preset--color--ochre); color: var(--wp--preset--color--chalk); } /* Le cadre garde la même hauteur avant et après chargement : rien ne saute sous le curseur au moment du clic. */ .aky-carte { aspect-ratio: 4 / 3; border: 1px solid var(--wp--preset--color--line); overflow: hidden; position: relative; } .aky-carte iframe { border: 0; display: block; height: 100%; width: 100%; } .aky-carte__declencheur { align-items: center; /* Un