/* ============================================================ DAL'ALU — Global Variables, typographie, éléments de base. ============================================================ */ /* ── Police : Poppins ── Aucun @font-face ici : Poppins est servie par le CDN Google Fonts, déclaré en PHP (voir dalalu_enqueue_google_fonts() dans functions.php). Le CDN émet les en-têtes CORS, la police se charge donc aussi sur les sous-domaines des franchises, là où des fichiers du domaine principal étaient bloqués. Les .ttf Futura restent dans ../fonts/ pour un retour arrière rapide. */ /* ── Défilement animé vers les ancres ── scroll-behavior sur : tout lien #ancre glisse jusqu'à sa cible au lieu de s'y téléporter, sans une ligne de JavaScript. La propriété n'est pas héritée, les carrousels horizontaux (cartes projet, réalisations, actus, qui pilotent scrollLeft à la souris) gardent donc leur défilement instantané. scroll-padding-top réserve la hauteur du header sticky, sinon la section visée se retrouve dessous. Trois paliers, comme le header : 130px en desktop (barre + bandeau), 98px sous 1440px, 70px sous 1024px où le bandeau rouge disparaît — plus ~20px de respiration. */ html { scroll-behavior: smooth; scroll-padding-top: 150px; } @media (max-width: 1440px) { html { scroll-padding-top: 118px; } } @media (max-width: 1024px) { html { scroll-padding-top: 90px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { letter-spacing: -0.5px; line-height: 1.6; } h1, h2, h3, h4, h5 { letter-spacing: -0.5px !important; line-height: 1.225 !important; } /* ── Conteneur centré 80 % ── */ .dal-container { width: 80%; margin-left: auto; margin-right: auto; } /* ── Section générique ── */ .dal-section { padding: 60px 0; } /* ── Masqué à l'œil, pas aux machines ── Pour un texte qui doit exister dans la structure du document sans s'afficher (le h1 de l'accueil, dans home.php). Volontairement pas display:none ni visibility:hidden, qui le retireraient de l'arbre d'accessibilité : ici il reste lu par les lecteurs d'écran et les robots. La boîte de 1px avec clip-path plutôt que height:0 ou text-indent négatif : c'est le motif qui résiste au mieux aux navigateurs. white-space:nowrap évite qu'un texte long ne réintroduise de la hauteur dans le flux, et les !important tiennent devant les règles h1..h5 ci-dessous et celles du thème parent, qui imposent taille et interlignage aux titres. NE PAS SUPPRIMER : sans cette règle, le h1 de l'accueil s'affiche en clair en haut de la page, à toutes les largeurs. */ .dal-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* ── Article seul (single) : contenu un peu plus large ── Le gabarit vient du thème parent, qui contraint le contenu à 645px (--wp--style--global--content-size). On redéfinit la variable sur le body de l'article : les conteneurs "is-layout-constrained" de WordPress la lisent, donc tout le contenu suit, sans lutte de spécificité. Les blocs en pleine largeur ou "large" ne sont pas concernés. */ body.single-post { --wp--style--global--content-size: 950px; } /* ── Article : bloc "citation en exergue" (pullquote) ── Deux tailles se multipliaient : le thème parent met le bloc à 2.15rem et WordPress met le paragraphe à 2em de cette valeur, soit ~69px, avec 4em de padding vertical — d'où l'effet de bouton géant sur une phrase longue (ces encadrés rouges servent d'appel à l'action dans les articles). Sélecteurs préfixés par body.single-post pour passer devant les règles du cœur sans !important. */ body.single-post .wp-block-pullquote { font-size: 1.15rem; padding: 1.75em 0; } body.single-post .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 1.35em; line-height: 1.35; } /* La citation était bornée à 60% de la largeur : sur une phrase d'appel à l'action, ça multipliait les retours à la ligne. */ body.single-post .wp-block-pullquote.is-style-solid-color blockquote { max-width: 86%; } /* ── Fil d'ariane : dernier item (page courante) ── S'applique à tous les fils (classes finissant par __fil) : le dernier (nom de la page) prend le style demandé. Les séparateurs ne sont pas last-child, donc non affectés. */ [class$="__fil"] span:last-child, .realisation-fil span:last-child { color: #525252; font-family: "Poppins", Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } /* ── Fil d'ariane des articles ── Même présentation que ceux des pages (.dal-XXX__fil), mais posé ici : il sort d'un shortcode appelé par templates/single.html, où aucune feuille de page n'est chargée. Le dernier item est stylé par la règle générique [class$="__fil"] ci-dessus. */ .dal-article__fil { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 24px; font-size: 13px; color: #888; } .dal-article__fil a { color: #888; text-decoration: none; } .dal-article__fil a:hover { color: var(--dal-red, #DC0D15); } .dal-article__fil span { margin: 0 6px; } /* Fiche réalisation : même largeur que le reste du site (.dal-container ci-dessus, 80 % comme l'accueil) — plus de plafond spécifique, qui décalait cette page par rapport aux autres. */ /* Description du projet : affichée ouverte (plus d'accordéon). */ .dal-realisation-single .realisation-description__titre { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: #000; } /* Texte descriptif un peu plus petit que le reste (pas le titre). */ .dal-realisation-single .realisation-description__texte { font-size: 14px; line-height: 1.7; color: #333; } .dal-realisation-single .realisation-description__texte p { margin: 0 0 10px; } .dal-realisation-single .realisation-description__texte p:last-child { margin-bottom: 0; } /* ── Variables de marque ── */ :root { /* Couleurs */ --dal-font: "Poppins", Helvetica, Arial, sans-serif; --dal-red: #DC0D15; --wp--preset--font-family--manrope: "Poppins", Helvetica, Arial, sans-serif; } /* ── Appliquer Poppins sur tout le site ── Sélecteur universel plutôt qu'une liste de balises : garantit que rien (code/pre/kbd, markup d'un plugin, contenu futur…) ne peut échapper à Poppins en retombant sur la police par défaut du navigateur. Source unique : --dal-font (déclarée ci-dessus). */ *, *::before, *::after { font-family: var(--dal-font); } /* Débordements horizontaux voulus (languettes, blobs, demi-cercles) rognés avec overflow-x: clip et NON overflow: hidden : "hidden" transforme ce bloc en conteneur de défilement, ce qui annule le position: sticky du header (et des filtres de la page Réalisations). "clip" rogne sans créer de conteneur de défilement. */ .wp-site-blocks { overflow-x: hidden; } @supports (overflow: clip) { .wp-site-blocks { overflow-x: clip; } } /* ── Fond global du site ── */ body { background: linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%), #FBFBFD; } /* ── Flèche de navigation ronde (slider, carrousels…) ── Géométrie commune ; la couleur se pilote via --dal-arrow-color et --dal-arrow-hover-bg posées sur un parent (contexte clair/sombre). */ .dal-arrow { width: 40px; height: 40px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: var(--dal-arrow-color, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .2s ease, color .2s ease, border-color .2s ease; } .dal-arrow:hover { background: var(--dal-arrow-hover-bg, rgba(255, 255, 255, .15)); } /* ── Boutons pilule ── Base de forme commune ; chaque emplacement garde son padding et sa taille de police. Trois variantes de couleur : --solid : fond rouge, texte blanc (hover rouge foncé) --outline : fond blanc, contour rouge (hover inversé) — fond clair --ghost : contour blanc, transparent (hover fond blanc) — fond sombre */ .dal-btn { display: inline-block; border-radius: 100px; text-decoration: none; cursor: pointer; font-size: 16px; font-weight: 400; transition: background .15s ease, color .15s ease, border-color .15s ease; } .dal-btn--solid { background: var(--dal-red, #DC0D15); color: #fff; } .dal-btn--solid:hover { background: #b40a11; } .dal-btn--outline { background: #fff; border: 2px solid var(--dal-red, #DC0D15); color: var(--dal-red, #DC0D15); } .dal-btn--outline:hover { background: var(--dal-red, #DC0D15); color: #fff; } .dal-btn--ghost { background: transparent; border: 2px solid #fff; color: #fff; } .dal-btn--ghost:hover { background: #fff; color: var(--dal-red, #DC0D15); } /* ========================================================================= Focus : suppression du contour noir au clic souris/tactile partout (logo, liens, boutons, images...). On conserve un contour visible pour la navigation clavier (:focus-visible) afin de préserver l'accessibilité. ========================================================================= */ a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:focus, a:focus img, .wp-block-site-logo a:focus, .wp-block-site-logo a:focus img { outline: none; box-shadow: none; } /* Contour rétabli uniquement au focus clavier */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--dal-red, #DC0D15); outline-offset: 2px; } /* ========================================================================= Vignette de titre (hero) : dépliage à l'arrivée sur la page. Le fond de la vignette se déplie horizontalement (scaleX), PUIS le titre apparaît. Keyframes partagées, appliquées dans gouttieres/habillage/ toiture.css sur .dal-*__hero-panel-bg et .dal-*__hero-titre. ========================================================================= */ @keyframes dal-vignette-deplie { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes dal-vignette-titre { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { [class$="__hero-panel-bg"], [class$="__hero-titre"] { animation: none !important; } } /* Mobile : marge latérale homogène de 16px sur le conteneur principal */ @media (max-width: 600px) { .dal-container { width: 100%; padding-left: max(16px, 4vw); padding-right: max(16px, 4vw); box-sizing: border-box; } } /* ── Apparition "fade in up" des blocs de section ── Les classes sont posées par anim.js, jamais par le markup : sans JS, tout reste visible. Le script ignore les blocs déjà animés et ceux qui contiennent un fond en mix-blend-mode, et retire ces classes une fois la transition terminée (plus de will-change, plus de contexte d'empilement). */ .dal-fade-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .dal-fade-up.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .dal-fade-up, .dal-fade-up.is-in { opacity: 1; transform: none; transition: none; } } /* ── Flip des logos à l'entrée dans le viewport (quart de tour) ── Le logo arrive de profil (rotateY 90°) puis se remet de face. La classe .dal-logo-flip est posée par logo-flip.js (rien ne bouge sans JS), .is-flipped déclenche la rotation. Pour animer un nouveau logo, il suffit de lui ajouter la classe .js-dal-logo-flip dans le markup. */ .dal-logo-flip { transform: perspective(800px) rotateY(90deg); opacity: 0; transform-origin: center; backface-visibility: hidden; will-change: transform; } .dal-logo-flip.is-flipped { transform: perspective(800px) rotateY(0deg); opacity: 1; transition: transform .7s cubic-bezier(.22, .68, .36, 1), opacity .35s ease; } @media (prefers-reduced-motion: reduce) { .dal-logo-flip, .dal-logo-flip.is-flipped { transform: none; opacity: 1; transition: none; } } .dal_devis_div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 32px; } .dal_devis_div .dal_devis_text, .dal-gout__actions .dal_devis_text, .dal-hab__actions .dal_devis_text, .dal-toit__actions .dal_devis_text { color: #7D7D7D; font-size: 14px; font-weight: 400; }