/* ========================================================================= Ville de Baulne - feuille de styles du theme ------------------------------------------------------------------------- Ne contient que ce que theme.json ne sait pas exprimer : etats (hover, focus), pseudo-elements, motifs signature, et le comportement responsive du header. Couleurs, tailles, espacements et rayons viennent des presets. ========================================================================= */ :root { --baulne-hairline: var(--wp--custom--hairline, #E3E3E3); /* Pas de valeur de repli : theme.json fait foi (6px, valeur des pages composees du design). La page Foundations annonce 8px - contradiction du livrable, tranchee en faveur des pages. Un repli 8px ici ne serait jamais applique et laisserait croire le contraire. */ --baulne-radius-card: var(--wp--custom--radius--card); --baulne-radius-button: var(--wp--custom--radius--button, 40px); --baulne-shadow-card: var(--wp--preset--shadow--card); /* Geometrie du bouton. Une seule recette pour tout le site, deux tailles. Les valeurs vivent dans theme.json (settings.custom.button), d'ou elements.button les lit aussi : les blocs et les controles qui n'en sont pas partent du meme jeu de nombres. */ --baulne-button-padding-y: var(--wp--custom--button--padding-y, 11px); --baulne-button-padding-x: var(--wp--custom--button--padding-x, 22px); --baulne-button-compact-padding-y: var(--wp--custom--button--compact-padding-y, 9px); --baulne-button-compact-padding-x: var(--wp--custom--button--compact-padding-x, 20px); --baulne-button-font-size: var(--wp--custom--button--font-size, 13px); --baulne-button-letter-spacing: var(--wp--custom--button--letter-spacing, 0.06em); --baulne-button-gap: var(--wp--custom--button--gap, 9px); --baulne-shadow-card-hover: var(--wp--preset--shadow--card-hover); /* Hauteur du header colle en haut de la fenetre. Valeur de repli : assets/js/main.js la remesure au chargement et a chaque changement de gabarit, car elle depend du repli de la navigation. Tout element colle doit s'arreter sous le header, pas sous le bord de fenetre. */ --baulne-header-h: 86px; /* Filets et fonds discrets du systeme de design : ni couleurs de palette (l'editeur n'a pas a les proposer), ni valeurs en dur. */ --baulne-rule: var(--wp--custom--rule, #ECECEC); --baulne-menu-separator: var(--wp--custom--menu-separator, #EEF1F1); --baulne-menu-hover: var(--wp--custom--menu-hover, #F4F7F7); --baulne-frame: var(--wp--custom--frame, #E2E6E6); --baulne-text-secondary: var(--wp--custom--text-secondary, #6D7A79); --baulne-text-body: var(--wp--custom--body-text, #4B5958); --baulne-subtitle: var(--wp--custom--subtitle, #5B6B6A); --baulne-text-tertiary: var(--wp--custom--text-tertiary, #8A9695); --baulne-surlignage: var(--wp--custom--search-highlight, #FCF4A6); /* Icones Material Symbols embarquees en masque : elles prennent la couleur du texte qui les porte, et le theme ne charge aucune feuille externe. */ --baulne-icone-lieu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Z'/%3E%3C/svg%3E"); --baulne-icone-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-440v120q0 17 11.5 28.5T480-280q17 0 28.5-11.5T520-320v-120h120q17 0 28.5-11.5T680-480q0-17-11.5-28.5T640-520H520v-120q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v120H320q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440h120Zm40 296q-125 0-212.5-87.5T180-444q0-125 87.5-212.5T480-744q125 0 212.5 87.5T780-444q0 50-15.5 94.5T721-266l188 188q11 11 11 27.5T909-23q-11 11-28 11t-28-11L665-211q-38 29-82.5 44T480-144Zm0-80q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Z'/%3E%3C/svg%3E"); --baulne-icone-retour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M400-240 160-480l240-240 56 56-144 144h488v80H312l144 144-56 56Z'/%3E%3C/svg%3E"); --baulne-icone-telecharger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z'/%3E%3C/svg%3E"); --baulne-icone-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E"); --baulne-icone-heure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/%3E%3C/svg%3E"); --baulne-icone-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z'/%3E%3C/svg%3E"); --baulne-icone-actualite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M720-440v-80h160v80H720Zm48 280-128-96 48-64 128 96-48 64Zm-80-480-48-64 128-96 48 64-128 96ZM200-200v-160h-40q-33 0-56.5-23.5T80-440v-80q0-33 23.5-56.5T160-600h160l200-120v480L320-360h-40v160h-80Zm240-182v-196l-98 58H160v80h182l98 58Zm120 36v-268q27 24 43.5 58.5T620-480q0 41-16.5 75.5T560-346ZM300-480Z'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------------- 1. Base et accessibilite ---------------------------------------------------------------------- */ /* Focus visible sur tout element interactif : absent du site actuel. Le filet epouse le rayon de l'element - pas de border-radius impose ici, qui carrerait les boutons pilule au moment ou ils prennent le focus. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } img { max-width: 100%; height: auto; } /* ------------------------------------------------------------------------- 2. Header ------------------------------------------------------------------------- Reprise de la maquette `_design/Accueil.dc.html` : barre blanche, filet `#ececec` en pied, marque a gauche (blason + « Ville de / Baulne »), navigation en capitales alignee a droite. Aucune recherche dans la barre : le champ vit desormais dans le hero de l'accueil. ---------------------------------------------------------------------- */ /* Le rendu FSE enveloppe le header dans .wp-block-template-part. Ce wrapper n'ayant que le header pour enfant, il a exactement sa hauteur : sticky serait inoperant sans ce display:contents. */ .wp-site-blocks > .wp-block-template-part { display: contents; } /* La racine du document est un conteneur `flow` : WordPress pose un `margin-block-start` de blockGap (24px) sur chacun de ses enfants. Le `
` cumulait donc ces 24px avec son propre padding haut, alors que les parties de gabarit, en display:contents, n'en heritaient pas - un ecart vertical different selon le voisin. Le rythme haut et bas du contenu appartient au gabarit, qui pose deja ses paddings : on neutralise la marge de racine pour qu'un seul reglage fasse foi. */ .wp-site-blocks > main { margin-block-start: 0; } .header { position: sticky; top: 0; z-index: 100; background: var(--wp--preset--color--white); border-bottom: 1px solid var(--baulne-rule); transition: box-shadow 0.2s ease; } /* Pas de backdrop-filter ici. Il avait ete pose sur un pseudo-element pour eviter de faire du header un containing block. Mais il fait aussi du header une racine de composition : les sous-menus, qui debordent sous l'en-tete, s'y melangeaient au contenu de la page et paraissaient translucides. Le fond du header etant deja opaque, le flou n'apportait rien de visible. */ /* La maquette pose un header statique. Le sticky est conserve (confort de navigation sur les pages longues) ; au defilement il se detache par l'ombre douce du systeme, pas par un aplat different. */ .header.is-stuck { box-shadow: 0 8px 24px rgba(18, 59, 56, 0.1); } /* Le header s'aligne sur la grille du contenu. Le contenu de page vit dans un conteneur `constrained` : largeur maximale `--wp--style--global--content-size`, posee a l'interieur du padding lateral global. Pour que la marque et la navigation tombent sur les memes bords, la boite du header doit donc mesurer cette largeur *plus* ses deux paddings - d'ou le calc(). Ecrit en variables, il suit tout changement de theme.json sans retouche ici. */ .header-inner { max-width: calc( var(--wp--style--global--content-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right) ); margin: 0 auto; padding: 16px var(--wp--style--root--padding-left); /* La maquette ne laisse jamais la navigation passer sous la marque : les deux blocs se partagent la ligne, et c'est la navigation qui se resserre (gap de colonne fixe, retour a la ligne interne autorise). */ flex-wrap: nowrap; gap: 48px; } /* Marque : blason + « Ville de / Baulne ». Dans l'ancien theme, le blason et les deux lignes de texte etaient un seul lien. Les blocs natifs ne savent pas envelopper plusieurs blocs dans un lien : on etire donc le lien du logo sur tout le bloc de marque. Une seule zone cliquable, un seul element focusable. */ .header-brand { position: relative; flex: none; gap: 12px; text-decoration: none; transform-origin: left center; transition: transform 0.2s ease; } /* Le lien du logo couvre tout le lockup : survoler le blason ou le texte agrandit donc l'ensemble d'un seul geste, et « Baulne » prend la couleur de « Ville de » - le meme jeu que dans le pied de page. */ .header-brand:hover, .header-brand:has(a:focus-visible) { transform: scale(0.97); } .header-brand:hover .header-brand-name, .header-brand:has(a:focus-visible) .header-brand-name { color: var(--wp--preset--color--primary); } .header-brand .wp-block-site-logo a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .header-brand .wp-block-site-logo img { width: 48px; height: auto; } /* Le contour de focus entoure le lockup entier, pas seulement le blason. */ .header-brand:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; border-radius: 2px; } .header-brand .wp-block-site-logo a:focus-visible { outline: none; } .header-brand-text { line-height: 1.02; } .header-brand-prefix { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.02; letter-spacing: 0.14em; text-transform: uppercase; } .header-brand-name { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; color: var(--wp--preset--color--secondary); transition: color 0.15s ease; } /* ------------------------------------------------------------------------- Navigation - premier niveau ---------------------------------------------------------------------- */ .header-nav { /* 38px entre les entrees, 16px si la barre est assez etroite pour que la navigation passe sur deux lignes. */ gap: 16px 38px; flex: 1 1 auto; min-width: 0; } /* core force color:inherit sur les liens de navigation via un selecteur qui repete la classe (.wp-block-navigation-item__content.wp-block-navigation-item__content, soit 3 classes). Toute regle de couleur doit passer au-dessus, sinon les entrees heritent simplement du noir du corps de texte. */ .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--secondary); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: color 0.15s ease; } .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content, .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); } /* Aucun chevron sur les entrees a sous-menu : la maquette n'en montre pas, les panneaux s'ouvrent au survol en desktop et sont deja deroules dans l'overlay mobile. */ .header-nav .wp-block-navigation__submenu-icon { display: none; } /* Entree courante : couleur primaire, comme le survol. core/navigation n'injecte pas ces classes, elles viennent du filtre render_block de inc/nav-current.php. Selecteurs assez specifiques pour passer devant le color:inherit de core. */ .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content, .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); } /* Bouton Contact --------------------------------------------------------- Derniere entree du menu principal : elle ne se lit pas comme un lien mais comme le bouton plein du systeme. C'est un core/navigation-link a qui l'editeur pose la classe `header-nav__cta` (attribut className de l'item dans le menu principal), et non un core/buttons glisse dans la navigation : l'item reste un
  • de la liste, donc il garde le comportement de l'overlay mobile, le repli sur deux lignes et le current-menu-item de inc/nav-current.php. Aucun nombre en dur : la geometrie est celle de la taille compacte de la section 9, lue dans les memes alias `--baulne-button-*`. Selecteur en (0,6,0) pour passer devant le `color:inherit` de core - meme contrainte que les entrees normales ci-dessus. */ .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.header-nav__cta > .wp-block-navigation-item__content { padding: var(--baulne-button-compact-padding-y) var(--baulne-button-compact-padding-x); border: 1px solid transparent; border-radius: var(--baulne-radius-button); background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); font-size: var(--baulne-button-font-size); transition: background-color 0.15s ease, color 0.15s ease; } /* Survol et page courante partagent le meme etat : le bouton fonce, il ne passe pas au vert du texte comme les autres entrees. La regle courante de la section precedente est en (0,6,0) elle aussi et vient avant - celle-ci la reprend donc, sans surenchere de specificite. */ .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.header-nav__cta:hover > .wp-block-navigation-item__content, .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.header-nav__cta > .wp-block-navigation-item__content:hover, .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.header-nav__cta.current-menu-item > .wp-block-navigation-item__content { background-color: var(--wp--custom--primary-active); color: var(--wp--preset--color--white); } /* Le filet de focus general est vert : invisible sur le bouton vert. Meme traitement que les autres boutons du site - il prend le vert fonce. */ .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.header-nav__cta > .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; } /* ------------------------------------------------------------------------- Menus deroulants ------------------------------------------------------------------------- Panneau blanc de 296px minimum, liseré teal de 3px en tete, ombre portee. Les rubriques de niveau 2 sont des titres de groupe ; leurs enfants sont deroules dans le meme panneau, indentes - pas de second volet flottant. Chaque ligne se surligne au survol : fond `#F4F7F7` et barre teal a gauche. Uniquement au-dessus du point de bascule du menu : sous 1200px c'est l'overlay qui prend le relais, et ces regles de panneau flottant le deformeraient. ---------------------------------------------------------------------- */ @media (min-width: 1201px) { /* Zone tampon invisible sous l'entree : le panneau est decolle de 14px, sans elle le survol se romprait pendant la descente de la souris. */ .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; } .header .header-nav .wp-block-navigation__submenu-container { margin-top: 14px; padding: 8px 0; background-color: var(--wp--preset--color--white); border: none; border-top: 3px solid var(--wp--preset--color--primary); border-radius: 0; box-shadow: 0 18px 40px rgba(18, 59, 56, 0.15); /* Le panneau prend la largeur de son contenu, sans casser les libelles longs sur deux lignes ("Protection Maternelle et Infantile (PMI)"). */ width: max-content; min-width: 296px; transition: opacity 0.15s ease, transform 0.15s ease; } /* La navigation est justifiee a droite : core aligne alors les sous-menus sur le bord droit de leur parent (regle a 4 classes), et le panneau se deployait vers la gauche. Il doit partir du bord gauche de l'entree, deborde de 20px pour que le texte du panneau s'aligne visuellement sur le libelle. */ .header .header-nav .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container { left: -20px; right: auto; } /* Les deux dernieres entrees s'ouvrent alignees a droite : leur panneau sortirait de l'ecran. Compte a rebours plutot qu'index fixe, pour suivre un menu qui gagnerait ou perdrait une entree. */ .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(-n + 2).has-child .wp-block-navigation__submenu-container { left: auto; right: -20px; } /* Legere montee a l'ouverture, comme la maquette. core bascule visibility/opacity ; on ajoute la translation. */ .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container { transform: translateY(-6px); } .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container, .header .header-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container { transform: none; } /* "Vie pratique" deroule 7 groupes et leurs enfants : sur un ecran de portable, le panneau depasserait le bas de la fenetre et ses dernieres entrees seraient inatteignables. Il defile alors dans sa propre boite. */ .header .header-nav .wp-block-navigation__container > li.has-child > .wp-block-navigation__submenu-container { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; } /* Groupes : un filet clair entre deux rubriques de niveau 2. */ .header .header-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item { display: flex; flex-direction: column; align-items: stretch; padding: 6px 0; } .header .header-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item + .wp-block-navigation-item { border-top: 1px solid var(--baulne-menu-separator); } /* Niveau 2 - titre de rubrique. Selecteurs a 6 classes : core impose padding .5em 1em avec 5 classes de specificite. Il faut passer devant pour poser les valeurs de la maquette. */ .header .header-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { display: block; padding: 9px 24px; border-left: 3px solid transparent; color: var(--wp--preset--color--secondary); font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .header .header-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); background: var(--baulne-menu-hover); border-left-color: var(--wp--preset--color--primary); } /* Troisieme niveau : deroule en place dans le meme panneau, plus petit et indente. Core en fait par defaut un second volet flottant qui demande un survol de plus ; la maquette deroule tout d'un coup. */ .header .header-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { position: static; opacity: 1; visibility: visible; transform: none; /* core ferme les sous-menus avec height:0 + overflow:hidden et ne les rouvre qu'au survol de leur propre parent. Sans ces deux lignes, les entrees de troisieme niveau existent mais sont rognees a zero. */ height: auto; overflow: visible; width: auto; min-width: 0; flex-basis: 100%; margin-top: 0; padding: 0; background-color: transparent; border: none; box-shadow: none; } .header .header-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item { display: block; padding: 0; border-top: none; } .header .header-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 7px 24px 7px 38px; color: var(--baulne-text-secondary); font-size: 14px; font-weight: 400; } .header .header-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); background: var(--baulne-menu-hover); border-left-color: var(--wp--preset--color--primary); } /* Entree courante dans un panneau deroulant. Les regles de couleur des liens de sous-menu ci-dessus font 6 et 7 classes : la variante "courante" doit passer au-dessus, sinon elle est ecrasee et l'entree reste en gris. */ .header .header-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .header .header-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content, .header .header-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content, .header .header-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .header .header-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); border-left-color: var(--wp--preset--color--primary); } } @media (prefers-reduced-motion: reduce) { .header .header-nav .wp-block-navigation__submenu-container { transition: none; } .header-brand, .header-brand-name { transition: none; } .header-brand:hover, .header-brand:has(a:focus-visible) { transform: none; } } /* ------------------------------------------------------------------------- 3. Menu mobile - overlay plein ecran ------------------------------------------------------------------------- La maquette ne montre pas d'ecran mobile : l'overlay reprend donc, tel quel, le vocabulaire des panneaux deroulants - fond blanc, liseré teal de 3px, rubriques de niveau 2 en 15px/700, sous-entrees en 14px indentees, surlignage `#F4F7F7` + barre teal a gauche. Seules les entrees de premier niveau changent de forme : capitales pleine largeur separees par un filet, assez hautes pour le doigt. On garde l'overlay natif de core/navigation (bouton burger, piege a focus et attributs aria geres par le core) et on ne fait que l'habiller. ---------------------------------------------------------------------- */ @media (max-width: 1200px) { /* core/navigation bascule son overlay a 600px : au-dessus, il masque le bouton burger. Le brief demande la bascule a 1200px. Sans cette surcharge, entre 600 et 1200px le menu inline est masque ET le burger aussi : plus aucune navigation. */ .header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; } /* Le burger reprend la couleur des entrees, et passe au teal au survol. */ .header-nav .wp-block-navigation__responsive-container-open { padding: 0; color: var(--wp--preset--color--secondary); transition: color 0.15s ease; } .header-nav .wp-block-navigation__responsive-container-open:hover { color: var(--wp--preset--color--primary); } .header-nav .wp-block-navigation__responsive-container-open svg, .header-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; fill: currentColor; } /* Fond gris bleute plutot que blanc plein : l'overlay recouvre toute la page, et l'aplat blanc ne se distinguait pas du contenu qu'il masque. Le survol repasse alors au blanc - le meme jeu que les tuiles de demarches de l'accueil, posees sur ce fond et blanches au survol. core impose #fff avec 5 classes de specificite (.wp-block-navigation:not(.has-background) ...) : il faut passer devant pour poser le fond, le liseré et le defilement. */ .header .header-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--secondary); padding: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 3px solid var(--wp--preset--color--primary); } /* Le retrait haut est porte par le dialogue et non par le conteneur : la croix de fermeture se positionne par rapport au dialogue, et un padding sur le conteneur l'aurait poussee vers le bas. Le positionnement absolu se calant sur la boite de padding, elle reste a hauteur du burger qu'elle remplace. */ .header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { background-color: transparent; padding: 76px 0 40px; } .header-nav .wp-block-navigation__responsive-container-close { display: flex; top: 22px; right: var(--wp--style--root--padding-left); padding: 0; color: var(--wp--preset--color--secondary); transition: color 0.15s ease; } .header-nav .wp-block-navigation__responsive-container-close:hover { color: var(--wp--preset--color--primary); } /* Les entrees se lisent depuis le bord gauche, sur toute la largeur. core aligne via align-items: var(--navigation-layout-justification-setting, inherit) ; la variable n'etant jamais definie, la valeur heritee du header s'appliquait et decalait tout. On la pose explicitement. */ .header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; justify-content: flex-start; } /* Les conteneurs de l'overlay heritent d'un gap (blockGap) qui s'additionnait aux paddings des liens : le rythme vertical vient uniquement des lignes elles-memes. */ .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content, .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__container, .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container { gap: 0; row-gap: 0; width: 100%; } /* core pose en plus un padding-top de calc(2rem + 24px) sur le contenu de l'overlay, qui s'ajoutait au retrait du dialogue : la premiere entree tombait 56px trop bas. Le retrait haut appartient au dialogue, qui cale la liste juste sous la place laissee par la barre. */ .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; } /* Premier niveau : bandeau pleine largeur, filet clair en separation. Le filet de liste (#ececec) s'effacerait sur le gris du fond : c'est celui des cadres, un ton plus soutenu, qui separe les sections. */ .header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; border-top: 1px solid var(--baulne-frame); } .header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child { border-top: none; } .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { display: block; width: 100%; padding: 16px var(--wp--style--root--padding-left) 10px; font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--secondary); text-decoration: none; } /* Sous-menus : pas de panneau flottant, pas d'ombre - la liste se deroule en place. core impose padding-left/right: 2rem et un padding-top de blockGap avec 5 classes dans son overlay : il faut passer devant. */ .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { position: static; opacity: 1; visibility: visible; height: auto; overflow: visible; min-width: 0; padding: 0 0 10px; margin: 0; background: transparent; border: none; box-shadow: none; } .header-nav .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item { width: 100%; border: none; } /* Pas de filet entre les groupes de niveau 2, contrairement aux panneaux deroulants : sur une colonne etroite il tombe a la meme largeur que le filet de section et la hierarchie se perd. Ici les groupes se separent par le blanc - une rubrique qui a des enfants respire un cran de plus. */ .header-nav .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item.has-child { padding: 4px 0 8px; } /* Niveau 2 - meme forme que le titre de rubrique des panneaux desktop, indente d'un cran par rapport a l'entree de premier niveau. */ .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { display: block; width: 100%; padding: 9px 20px 9px calc(var(--wp--style--root--padding-left) + 14px); border-left: 3px solid transparent; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--secondary); text-decoration: none; } /* Niveau 3 - 14px gris, indente d'un cran de plus. */ .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 7px 20px 7px calc(var(--wp--style--root--padding-left) + 30px); font-size: 14px; font-weight: 400; color: var(--baulne-text-secondary); } /* Surlignage : meme geste que les panneaux deroulants (texte teal, barre teal a gauche), mais la plaque passe au blanc - le gris tres clair du desktop se confondrait avec le fond de l'overlay. Sur ecran tactile le survol ne se declenche qu'au maintien du doigt : ce reglage sert surtout a marquer l'entree courante. */ .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover, .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content, .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); background: var(--wp--preset--color--white); border-left-color: var(--wp--preset--color--primary); } .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content, .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); } /* Bouton Contact dans l'overlay. Les entrees y sont des lignes de liste pleine largeur, filet au-dessus ; le bouton ne peut pas garder cette forme sans se confondre avec elles. Il est donc detache de la liste - pas de filet, une marge propre - et centre sur la largeur de l'overlay, comme un bouton pose en fin de menu. Les regles de l'overlay ci-dessus sont en (0,7,0) : celles-ci reprennent les memes selecteurs plus `.header-nav__cta`, soit (0,8,0), le minimum pour passer devant sans `!important`. */ .header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.header-nav__cta { border-top: none; margin-top: 24px; padding: 0 var(--wp--style--root--padding-left); } .header .header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.header-nav__cta > .wp-block-navigation-item__content { display: block; width: 100%; padding: var(--baulne-button-padding-y) var(--baulne-button-padding-x); border-radius: var(--baulne-radius-button); background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); font-size: var(--baulne-button-font-size); text-align: center; } } /* ------------------------------------------------------------------------- Header - adaptations aux petites largeurs ---------------------------------------------------------------------- */ /* Entre la bascule du menu et 782px, seule la marque bouge : la barre n'a plus que le burger a caser a droite, elle peut donc rester genereuse. */ @media (max-width: 1200px) { .header-inner { gap: var(--wp--preset--spacing--m); } } /* Sous 782px, le duo marque / burger doit tenir sur une seule ligne : c'est le bloc de marque qui cede de la place. */ @media (max-width: 782px) { .header-inner { gap: var(--wp--preset--spacing--s); } .header-brand { min-width: 0; flex: 1 1 auto; } .header-brand .wp-block-site-logo img { width: 42px; } .header-brand-prefix { font-size: 11px; letter-spacing: 0.12em; } .header-brand-name { font-size: clamp(22px, 6vw, 28px); } } @media (max-width: 380px) { .header-brand { gap: 9px; } .header-brand .wp-block-site-logo img { width: 36px; } } /* ------------------------------------------------------------------------- 4. Motifs signature ---------------------------------------------------------------------- */ /* Barre verte sous la moitie droite du titre. Marqueur des sections de la home. Le nom du style est herite : les 66 pages l'utilisent. */ .is-style-add-arrow-heading { position: relative; display: inline-block; padding-bottom: var(--wp--preset--spacing--s); margin-bottom: 0; } .is-style-add-arrow-heading::after { content: ""; position: absolute; right: 0; bottom: 0; width: 50%; height: 4px; background-color: var(--wp--preset--color--primary); } /* Texte en surimpression d'une image, encadre par deux equerres. ------------------------------------------------------------------------- Les deux styles herites partagent le meme encadrement et ne different que par le decalage du bloc texte : - add-style-without-moving-block-text : le texte reste dans sa colonne, il est simplement ecarte de 20px du visuel ; - add-style-and-move-block-text : le texte chevauche le visuel de 5%. Les equerres sont posees en DIAGONALE, du cote oppose au visuel. C'est ce qui fait qu'elles ne tombent pas au meme endroit d'une page a l'autre : - visuel a gauche (defaut) -> equerres en haut a DROITE et en bas a GAUCHE ; - visuel a droite (.has-media-on-the-right) -> haut a GAUCHE et bas a DROITE. Couleur : vert primaire partout. La seule variante de couleur de l'ancien theme est .add-style-shadow (classe additionnelle, pas un style de bloc), qui passe l'equerre basse en blanc avec une ombre portee - reprise plus bas. */ .wp-block-media-text.is-style-add-style-and-move-block-text, .wp-block-media-text.is-style-add-style-without-moving-block-text { padding: 10px; } .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content { position: relative; z-index: 1; background-color: var(--wp--preset--color--white); box-shadow: var(--baulne-shadow-card); border-radius: var(--baulne-radius-card); padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m); } .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content::before, .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content::after, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content::before, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content::after { content: ""; position: absolute; width: 50px; height: 50px; border: 4px solid var(--wp--preset--color--primary); pointer-events: none; } .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content::before, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content::before { top: -15px; } .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content::after, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content::after { bottom: -15px; } /* Visuel a gauche : equerre haute a droite, equerre basse a gauche. */ .wp-block-media-text.is-style-add-style-and-move-block-text:not(.has-media-on-the-right) .wp-block-media-text__content::before, .wp-block-media-text.is-style-add-style-without-moving-block-text:not(.has-media-on-the-right) .wp-block-media-text__content::before { right: -15px; border-bottom: none; border-left: none; } .wp-block-media-text.is-style-add-style-and-move-block-text:not(.has-media-on-the-right) .wp-block-media-text__content::after, .wp-block-media-text.is-style-add-style-without-moving-block-text:not(.has-media-on-the-right) .wp-block-media-text__content::after { left: -15px; border-top: none; border-right: none; } /* Visuel a droite : la diagonale s'inverse. */ .wp-block-media-text.is-style-add-style-and-move-block-text.has-media-on-the-right .wp-block-media-text__content::before, .wp-block-media-text.is-style-add-style-without-moving-block-text.has-media-on-the-right .wp-block-media-text__content::before { left: -15px; border-bottom: none; border-right: none; } .wp-block-media-text.is-style-add-style-and-move-block-text.has-media-on-the-right .wp-block-media-text__content::after, .wp-block-media-text.is-style-add-style-without-moving-block-text.has-media-on-the-right .wp-block-media-text__content::after { right: -15px; border-top: none; border-left: none; } /* Ecart au visuel : simple respiration pour le style "sans deplacement", chevauchement de 5% pour le style "avec deplacement". */ .wp-block-media-text.is-style-add-style-without-moving-block-text:not(.has-media-on-the-right) .wp-block-media-text__content { margin-left: 20px; } .wp-block-media-text.is-style-add-style-without-moving-block-text.has-media-on-the-right .wp-block-media-text__content { margin-right: 20px; } .wp-block-media-text.is-style-add-style-and-move-block-text:not(.has-media-on-the-right) .wp-block-media-text__content { right: 5%; } .wp-block-media-text.is-style-add-style-and-move-block-text.has-media-on-the-right .wp-block-media-text__content { left: 5%; } /* Variante blanche de l'equerre basse, heritee : classe additionnelle .add-style-shadow posee sur le bloc texte. Elle detache l'angle du fond sombre d'une photo au lieu de le souligner en vert. */ .wp-block-media-text .add-style-shadow.wp-block-media-text__content::after, .wp-block-media-text .wp-block-media-text__content.add-style-shadow::after { border-color: var(--wp--preset--color--white); } .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content.add-style-shadow::after { box-shadow: -10px 10px 5px rgba(0, 0, 0, 0.2); } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content.add-style-shadow::after { box-shadow: 10px 10px 11px rgba(0, 0, 0, 0.2); } /* Barre verte sous le premier titre du bloc, comme sur l'ancien site. */ .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content > h2:first-child, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content > h2:first-child { position: relative; margin-bottom: var(--wp--preset--spacing--m); padding-bottom: 14px; } .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content > h2:first-child::after, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content > h2:first-child::after { content: ""; position: absolute; bottom: 0; left: 0; width: 27%; min-width: 90px; height: 4px; background-color: var(--wp--preset--color--primary); } .wp-block-media-text.is-style-add-style-and-move-block-text.has-media-on-the-right .wp-block-media-text__content > h2:first-child::after, .wp-block-media-text.is-style-add-style-without-moving-block-text.has-media-on-the-right .wp-block-media-text__content > h2:first-child::after { left: auto; right: 0; } /* Badge (label "association", pastille...) epingle dans l'angle du bloc texte. */ .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content figure.wp-block-image, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content figure.wp-block-image { position: absolute; top: 2%; right: 2%; margin: 0; } /* Boutons plus compacts a l'interieur du bloc texte. */ .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-button__link, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-button__link { padding: 10px 20px; font-size: var(--wp--preset--font-size--text); } /* Sous 1024px le bloc texte repasse sous le visuel : plus de chevauchement, les equerres restent mais le decalage lateral disparait. */ @media (max-width: 1024px) { .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content { right: 0; left: 0; margin-left: 0; margin-right: 0; margin-top: var(--wp--preset--spacing--l); } } @media (max-width: 781px) { .wp-block-media-text.is-style-add-style-and-move-block-text .wp-block-media-text__content > h2:first-child br, .wp-block-media-text.is-style-add-style-without-moving-block-text .wp-block-media-text__content > h2:first-child br { display: none; } /* L'ombre blanche n'a plus de fond sombre sous elle : retour au vert. */ .wp-block-media-text .wp-block-media-text__content.add-style-shadow::after { border-color: var(--wp--preset--color--primary); box-shadow: none; } } /* Accueil : le visuel est centre dans sa colonne. */ .wp-block-media-text.is-style-home .wp-block-media-text__media { display: flex; justify-content: center; } .wp-block-media-text.is-style-remove-padding-left .wp-block-media-text__content { padding-left: 0; } /* Variante d'exploration : equerres carrees de 56px aux deux coins opposes, carte a coins droits. Proposee en option, non activee par defaut. */ .wp-block-media-text.is-style-equerres-carrees .wp-block-media-text__content { position: relative; z-index: 1; background-color: var(--wp--preset--color--white); box-shadow: var(--baulne-shadow-card); border-radius: 0; padding: var(--wp--preset--spacing--l); } .wp-block-media-text.is-style-equerres-carrees .wp-block-media-text__content::before, .wp-block-media-text.is-style-equerres-carrees .wp-block-media-text__content::after { content: ""; position: absolute; width: 56px; height: 56px; border: 4px solid var(--wp--preset--color--primary); pointer-events: none; } .wp-block-media-text.is-style-equerres-carrees .wp-block-media-text__content::before { top: -16px; left: -16px; border-right: none; border-bottom: none; } .wp-block-media-text.is-style-equerres-carrees .wp-block-media-text__content::after { bottom: -16px; right: -16px; border-left: none; border-top: none; } /* ------------------------------------------------------------------------- 5. Cartes de flux (agenda, actualites) ------------------------------------------------------------------------- Changement structurant par rapport au site historique : ces cartes n'ont plus ni fond, ni ombre, ni bordure. L'affiche et le texte sont poses directement sur le fond de la section. L'ombre reste reservee aux cartes de contenu (fiche assistante maternelle, encart contact du footer). Meme anatomie pour les deux flux et pour les deux formats : le markup est produit une seule fois par inc/flux-markup.php. ---------------------------------------------------------------------- */ /* Grille de l'accueil. Le layout est natif (core/post-template, type "grid", 3 colonnes reglables depuis la barre laterale) : WordPress ecrit repeat(3, minmax(0, 1fr)) et non repeat(3, 1fr). La nuance compte : les pastilles de date sont en white-space:nowrap, et avec 1fr elles feraient diverger la largeur des colonnes - les affiches ne s'alignant plus. */ .flux-grille { list-style: none; padding: 0; margin: 0; } /* min-width: 0 partout dans la chaine : un element de grille vaut min-width: auto par defaut, c'est-a-dire "jamais plus etroit que mon contenu". Une adresse longue en white-space: nowrap elargissait donc la colonne entiere et debordait sur la carte voisine, au lieu d'etre coupee. */ .flux-grille > li { display: flex; min-width: 0; } .flux-grille > li > .wp-block-group { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; } .is-style-carte-agenda, .is-style-carte-actualite { background: none; box-shadow: none; border: none; } /* Cadre d'affiche. ------------------------------------------------------------------------- Les visuels IntraMuros sont des affiches A4 produites pour l'affichage papier : toute l'information utile est dans l'image. On ne les recadre jamais, et on ne pose aucune plaque grise derriere - le ratio et le contain viennent des attributs natifs du bloc, reglables depuis l'editeur. Ici on ne fixe que la largeur du cadre, que la barre laterale ne sait pas exprimer en pourcentage de colonne. */ .carte-affiche { margin: 0 0 14px; overflow: hidden; border-radius: 4px; } .carte-affiche img { width: 100%; height: 100%; display: block; } /* Accueil : cadre a 62% de la colonne, cale a gauche. */ .flux-grille .carte-affiche { width: 62%; } /* Carte sans affiche : cadre A4 teinte, icone du flux au centre (voir baulne_flux_affiche_vide()). */ .carte-affiche--vide { background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--white)); } .carte-affiche--vide a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--wp--preset--color--primary); } .carte-affiche--vide a::before { content: ""; width: 30%; aspect-ratio: 1; background-color: currentColor; opacity: 0.55; transition: transform 0.3s ease; -webkit-mask: var(--baulne-icone-date) center / contain no-repeat; mask: var(--baulne-icone-date) center / contain no-repeat; } .carte-affiche--actualite a::before { -webkit-mask-image: var(--baulne-icone-actualite); mask-image: var(--baulne-icone-actualite); } .flux-grille > li:hover .carte-affiche--vide a::before { transform: scale(0.97); } /* Survol d'une carte : le titre passe au vert et l'affiche grandit de 3%. Pas de translation, pas d'ombre - la carte n'a ni fond ni bordure, il n'y a rien a soulever. L'effet part de la carte entiere et non du seul lien : affiche et titre sont deux liens distincts vers la meme page. */ .flux-grille .carte-affiche img { transition: transform 0.3s ease; } .flux-grille > li:hover .carte-affiche img { transform: scale(0.97); } .flux-grille > li:hover .wp-block-post-title a { color: var(--wp--preset--color--primary); } /* Ligne de meta : pastille de date, puis le lieu. */ .carte-meta { gap: 10px; margin-bottom: 14px; min-width: 0; } /* Titre : seul element qui reagit au survol. Pas de translation, pas d'ombre - l'effet de soulevement du site actuel a ete retire. */ .wp-block-post-title { margin: 0 0 var(--wp--preset--spacing--xs); } .flux-grille .wp-block-post-title { margin-bottom: 8px; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--wp--preset--color--secondary); text-wrap: pretty; } .flux-grille .wp-block-post-title a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .flux-grille .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); } .carte-extrait { font-size: 14px; line-height: 1.55; color: var(--baulne-text-secondary); margin: 0; /* Deux lignes exactement, pour que toutes les cartes d'une rangee gardent la meme hauteur. La troncature porte sur la boite, jamais sur les caracteres : un emoji d'un titre IntraMuros ne peut pas etre coupe en deux. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Bloc et non flex : text-overflow ne s'applique qu'a du contenu en ligne. En flex, le texte forme un element anonyme que rien ne peut ellipser - l'adresse debordait alors au lieu d'etre coupee. L'icone redevient donc un inline-block, aligne a la main sur la ligne de base. */ .carte-lieu { font-size: 12px; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .carte-lieu::before { content: ""; display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 5px; background-color: currentColor; -webkit-mask: var(--baulne-icone-lieu) center / contain no-repeat; mask: var(--baulne-icone-lieu) center / contain no-repeat; } /* Le lieu suit la pastille dans la ligne de meta. Il prend la place restante et la cede en premier : c'est le lieu qu'on tronque, jamais la date. */ .flux-grille .carte-lieu { color: var(--baulne-text-secondary); flex: 1 1 auto; } .flux-grille .is-style-date-pastille { flex: none; } /* Actualites : une simple date en capitales vertes au-dessus du titre. */ .carte-date { font-size: 12px; font-weight: 800; color: var(--wp--preset--color--primary); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px; } /* Un binding vide ne doit pas laisser un blanc, ni une icone orpheline, dans la carte. */ .carte-lieu:empty, .carte-date:empty, .carte-extrait:empty { display: none; } /* Pastille de date : blanc sur vert, seul element colore de la ligne de meta. La date est l'information qu'on lit en premier. */ .is-style-date-pastille { display: inline-block; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); font-weight: 700; border-radius: var(--baulne-radius-button); text-transform: uppercase; white-space: nowrap; margin: 0; } .flux-grille .is-style-date-pastille { padding: 6px 13px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; } .is-style-date-pastille:empty { display: none; } /* Contour de focus reserve au clavier. :focus-within se declenche aussi au clic souris : la carte se retrouvait cernee d'un cadre vert des qu'on cliquait dessus. :has(:focus-visible) ne repond qu'a la navigation clavier, ou le repere est indispensable. La ou :has() n'est pas supporte la regle est ignoree, et le lien garde son propre contour de focus. */ .is-style-carte-agenda:has(:focus-visible), .is-style-carte-actualite:has(:focus-visible) { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 6px; border-radius: var(--baulne-radius-card); } /* Pagination des pages d'archive. */ .flux-pagination { margin-top: var(--wp--preset--spacing--xl); } /* Etat vide : le defaut le plus visible du site actuel etait une zone Agenda totalement muette. Un flux vide dit desormais pourquoi. */ .is-style-etat-vide { border: 1px dashed #cfcfcf; border-radius: var(--baulne-radius-card); padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m); text-align: center; } .is-style-etat-vide p { margin: 0; color: var(--wp--preset--color--grey); font-size: 14px; } /* ------------------------------------------------------------------------- 6. Fiche detail d'un evenement ou d'une actualite ------------------------------------------------------------------------- Un seul gabarit pour les deux flux (voir inc/flux-markup.php) : bandeau de titre vert en tete, puis l'affiche collante a gauche et le texte a droite. L'affiche est posee directement sur le fond, sans carte ni ombre, et reste visible pendant la lecture : c'est elle qui porte l'essentiel de l'information. ---------------------------------------------------------------------- */ /* --- Bandeau de titre --------------------------------------------------- */ /* Le retour a la liste ouvre le bandeau, au-dessus du titre. Les regles de .bandeau-titre (filet jaune, chapo) sont mutualisees avec les pages de contenu : il n'y a ici que le bouton, qui n'existe pas ailleurs. */ .fiche-bandeau .fiche-retour { margin: 0 0 26px; } /* Retour a la liste : contour blanc translucide, plus discret que le contour blanc franc des CTA poses sur les aplats verts (regle plus bas dans cette feuille). Ce n'est pas un appel a l'action, c'est une sortie. Le selecteur repete .has-dark-background-color, deja porte par le meme element : sans cela il ferait jeu egal avec la regle generique des boutons sur fond vert, qui vient plus loin dans le fichier et l'emporterait. */ .fiche-bandeau.has-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link { border-color: rgba(255, 255, 255, 0.4); background: transparent; color: var(--wp--preset--color--white); transition: background-color 0.15s ease, border-color 0.15s ease; } .fiche-bandeau.has-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover, .fiche-bandeau.has-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { border-color: var(--wp--preset--color--white); background: rgba(255, 255, 255, 0.12); color: var(--wp--preset--color--white); } /* La fleche est un ornement, pas du texte : elle n'a pas a se retrouver dans le contenu, ni a etre lue par un lecteur d'ecran. */ .fiche-bandeau.has-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link::before { content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--baulne-icone-retour) center / contain no-repeat; mask: var(--baulne-icone-retour) center / contain no-repeat; } @media (prefers-reduced-motion: reduce) { .fiche-bandeau.has-dark-background-color .wp-block-button.is-style-outline .wp-block-button__link { transition: none; } } /* --- Deux colonnes ------------------------------------------------------ */ .fiche-flux { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; } /* Colonne collante : l'affiche accompagne la lecture au lieu de defiler. Le point d'arret se prend sous le header, lui aussi colle : cale sur le bord de la fenetre, le haut de l'affiche passait dessous et s'en trouvait tronque. */ .fiche-visuel { position: sticky; top: calc(var(--baulne-header-h) + var(--wp--preset--spacing--m)); margin-top: 0; } .fiche-affiche { margin: 0; } /* Ratio libre et aucune plaque de fond : une affiche A4 ne se recadre pas, et rien ne doit s'interposer entre elle et le fond de la page. */ .fiche-affiche img { width: 100%; height: auto; display: block; border-radius: var(--baulne-radius-card); } /* L'affiche est sa propre cible : un clic ouvre le fichier d'origine dans un nouvel onglet. Le curseur l'annonce, et une loupe apparait au survol pour que l'affordance ne repose pas sur le seul curseur. */ .fiche-affiche a { display: block; position: relative; cursor: zoom-in; } .fiche-affiche a::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.92); background-image: var(--baulne-icone-zoom); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.15s ease; } .fiche-affiche a:hover::after, .fiche-affiche a:focus-visible::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .fiche-affiche a::after { transition: none; } } /* --- Bandeau d'informations pratiques (agenda) -------------------------- */ /* Le bloc qu'on vient chercher sur une fiche d'evenement : quand, a quelle heure, ou. Un cadre a filet, un pave de date vert a gauche, les circonstances empilees a droite. */ .fiche-infos { display: flex; align-items: stretch; border: 1px solid var(--baulne-frame); border-radius: var(--baulne-radius-card); overflow: hidden; margin: 0 0 34px; max-width: 680px; } /* Le groupe imbrique herite d'un margin-block-start egal au blockGap : sans cette remise a zero, le pave decroche du cadre. */ .fiche-infos > * { margin-top: 0; } /* Pave de date. */ .fiche-pave { flex: none; min-width: 112px; padding: 18px 22px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); display: flex; flex-direction: column; justify-content: center; } .fiche-pave > * { margin: 0; } .fiche-pave__jour { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } .fiche-pave__quantieme { font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; } .fiche-pave__mois { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); } /* Colonne de droite : une ligne par circonstance. */ .fiche-lignes { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } /* Icone a gauche, libelle au-dessus de la valeur a droite. L'icone occupe les deux rangees de la premiere colonne. */ .fiche-info { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 16px 20px; margin-top: 0; } .fiche-info::before { content: ""; grid-row: 1 / span 2; width: 22px; height: 22px; background-color: var(--wp--preset--color--primary); } .fiche-info--dates::before { -webkit-mask: var(--baulne-icone-date) center / contain no-repeat; mask: var(--baulne-icone-date) center / contain no-repeat; } .fiche-info--horaire::before { -webkit-mask: var(--baulne-icone-heure) center / contain no-repeat; mask: var(--baulne-icone-heure) center / contain no-repeat; } .fiche-info--lieu::before { -webkit-mask: var(--baulne-icone-lieu) center / contain no-repeat; mask: var(--baulne-icone-lieu) center / contain no-repeat; } .fiche-info__libelle { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--baulne-text-tertiary); } .fiche-info__valeur { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--wp--preset--color--secondary); } /* Une ligne sans valeur disparait entierement : un intitule orphelin ("Horaire" suivi de rien) serait pire qu'une ligne en moins. La plage de dates ne sort ainsi que sur un evenement de plusieurs jours. */ .fiche-info:not(:has(.fiche-info__valeur:not(:empty))) { display: none; } /* Filet entre deux lignes. La derniere ligne visible n'en porte pas : le selecteur ne pose le filet que s'il reste une ligne renseignee apres. La regle :last-child sert de repli la ou :has() n'est pas supporte. */ .fiche-lignes > .fiche-info { border-bottom: 1px solid var(--baulne-frame); } .fiche-lignes > .fiche-info:last-child { border-bottom: 0; } .fiche-lignes > .fiche-info:not(:has(~ .fiche-info:has(.fiche-info__valeur:not(:empty)))) { border-bottom: 0; } /* Le bandeau entier disparait si aucune circonstance n'est renseignee : il ne resterait qu'un cadre vide a cote de la date. */ .fiche-infos:not(:has(.fiche-info__valeur:not(:empty))) { display: none; } /* --- Colonne de texte --------------------------------------------------- */ .fiche-corps > * { margin-top: 0; } /* Actualites : une simple ligne de parution au-dessus du texte. */ .fiche-date { font-size: 13px; color: var(--baulne-text-tertiary); margin: 0 0 22px; } /* Corps de texte : mesure bornee a 680px, la ligne reste lisible meme sur un grand ecran. */ .fiche-corps .entry-content { font-size: 17px; line-height: 1.75; color: var(--wp--preset--color--secondary); max-width: 680px; } .fiche-corps .entry-content > p { margin: 0 0 18px; } .fiche-corps .entry-content > p:last-child { margin-bottom: 0; } /* Chapo : le premier paragraphe annonce l'evenement ou l'information, il porte la meme emphase que le chapo d'une page de contenu. */ .fiche .entry-content > p:first-child { font-size: var(--wp--preset--font-size--lead); font-weight: 500; } /* Tarif et organisateur : masques tant qu'ils ne sont pas renseignes. */ .fiche-complements { margin-top: var(--wp--preset--spacing--l); max-width: 680px; } .fiche-complement { font-size: 14px; color: var(--wp--preset--color--grey); margin: 0 0 var(--wp--preset--spacing--xs); } .fiche-complement:empty, .fiche-date:empty { display: none; } .fiche-complements:not(:has(.fiche-complement:not(:empty))) { display: none; } /* Sous 860px l'affiche repasse au-dessus du texte et cesse d'etre collante. */ @media (max-width: 860px) { .fiche-flux { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--l); } .fiche-visuel { position: static; max-width: 320px; } } /* Sous 520px le pave de date passe au-dessus des circonstances : cote a cote il ne resterait pas 150px pour une adresse. */ @media (max-width: 520px) { .fiche-infos { flex-direction: column; } .fiche-pave { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; padding: 12px 20px; } .fiche-pave__quantieme { font-size: 26px; } } /* ------------------------------------------------------------------------- 7. Styles de blocs herites ------------------------------------------------------------------------- Memes noms, meme intention et meme rendu que l'ancien theme. Les valeurs arbitraires (139px, 142px, 47px...) sont remplacees par l'echelle du design system quand l'ecart est invisible ; elles sont conservees telles quelles quand la mise en page en depend (chevauchements, colonnes fixes). Chaque style est porte par le meme type de bloc que dans l'ancien theme : un selecteur trop large repeindrait des blocs qui n'etaient pas concernes. ---------------------------------------------------------------------- */ /* --- Groupe ------------------------------------------------------------ */ /* Rangee icone + texte : le style aligne verticalement les elements d'un groupe en flex et resserre l'ecart. Ce n'est PAS un centrage de texte : c'est le style le plus utilise du site (rangees de contact, horaires, coordonnees) et un text-align le casserait. */ .wp-block-group.is-style-align-center { align-items: center; gap: var(--wp--preset--spacing--xs); } .wp-block-group.is-style-align-center :is(p, h2, h3, h4) { margin: 0; } /* Meme raison pour l'icone du bloc `kblocks/icon` : le plugin lui pose une marge basse de 1.5rem, qui gonflerait la hauteur de la rangee. Specificite bumpee (`:root`) pour repasser devant le `:root .kb-icon` du plugin. */ :root .wp-block-group.is-style-align-center .kb-icon { margin-block-end: 0; } .wp-block-group.is-style-align-center a { text-decoration: none; color: var(--wp--preset--color--font); transition: color 0.15s ease; } .wp-block-group.is-style-align-center a:hover { text-decoration: underline; color: var(--wp--preset--color--primary); } /* Gouttiere laterale des sections de contenu. Horizontale uniquement : l'ancien theme ne posait pas de padding vertical ici. */ .is-style-padding-group, .is-style-padding-columns { padding-inline: var(--wp--preset--spacing--2xl); } .is-style-padding-left-group { padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--l) var(--wp--preset--spacing--l) var(--wp--preset--spacing--2xl); } @media (max-width: 1024px) { .is-style-padding-group, .is-style-padding-columns, .is-style-padding-left-group { padding-inline: 0; } } .is-style-margin-bottom-group { margin-bottom: var(--wp--preset--spacing--xs); } .is-style-small-padding-columns { padding: 10px; } /* --- Colonnes ---------------------------------------------------------- */ .is-style-margin-y-columns { margin-block: var(--wp--preset--spacing--l); } /* Le bandeau remonte sur la section precedente et se pose par-dessus. */ .wp-block-columns.is-style-margin-y-negative { position: relative; z-index: 2; width: auto; margin-top: -70px; padding: var(--wp--preset--spacing--2xl) 20vw var(--wp--preset--spacing--m); } @media (max-width: 1324px) { .wp-block-columns.is-style-margin-y-negative { margin-top: -50px; padding-inline: 15vw; } } @media (max-width: 1124px) { .wp-block-columns.is-style-margin-y-negative { margin-top: var(--wp--preset--spacing--xs); padding-inline: 10vw; } } @media (max-width: 1001px) { .wp-block-columns.is-style-margin-y-negative { margin-top: var(--wp--preset--spacing--m); padding-inline: 5vw; } } .wp-block-columns.is-style-center-content { justify-content: center; } /* Groupe de colonnes pousse a droite, largeur de colonne fixe. */ .wp-block-columns.is-style-position-right { justify-content: flex-end; } .wp-block-columns.is-style-position-right > .wp-block-column { flex-basis: 480px; } .is-style-border-separator-top-and-bottom { border-top: 1px solid var(--baulne-hairline); border-bottom: 1px solid var(--baulne-hairline); padding-block: var(--wp--preset--spacing--m); margin-top: var(--wp--preset--spacing--s); } /* Liste de colonnes separees par un filet vert. Le filet n'est pas pose sur la premiere colonne : il separe, il n'encadre pas. */ .is-style-separator-list-column { margin-block: var(--wp--preset--spacing--2xl); } .is-style-separator-list-column > .wp-block-column + .wp-block-column { border-left: 1px solid var(--wp--preset--color--primary); padding-left: var(--wp--preset--spacing--m); } @media (max-width: 781px) { .is-style-separator-list-column > .wp-block-column + .wp-block-column { border-left: none; border-top: 1px solid var(--wp--preset--color--primary); padding-left: 0; padding-top: var(--wp--preset--spacing--m); } } /* --- Cartes blanches --------------------------------------------------- */ /* Sur core/columns le style habille les colonnes filles, pas le conteneur : c'est la rangee de cartes. Sur core/column ou core/group il habille le bloc lui-meme. */ .wp-block-columns.is-style-white-shadow > .wp-block-column, .wp-block-column.is-style-white-shadow, .wp-block-group.is-style-white-shadow { background: var(--wp--preset--color--white); border-radius: var(--baulne-radius-card); box-shadow: var(--baulne-shadow-card); padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l) var(--wp--preset--spacing--l); margin-bottom: var(--wp--preset--spacing--l); z-index: 10; } /* Carte blanche + equerres vertes, version colonne du motif media-texte. Equerres en diagonale : haut a gauche, bas a droite. */ .wp-block-column.is-style-add-style-to-column { position: relative; background: var(--wp--preset--color--white); border-radius: var(--baulne-radius-card); box-shadow: var(--baulne-shadow-card); padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l) var(--wp--preset--spacing--l); margin-bottom: var(--wp--preset--spacing--l); z-index: 10; } .wp-block-column.is-style-add-style-to-column::before, .wp-block-column.is-style-add-style-to-column::after { content: ""; position: absolute; width: 50px; height: 50px; border: 4px solid var(--wp--preset--color--primary); pointer-events: none; } .wp-block-column.is-style-add-style-to-column::before { top: -15px; left: -15px; border-bottom: none; border-right: none; } .wp-block-column.is-style-add-style-to-column::after { bottom: -15px; right: -15px; border-top: none; border-left: none; } /* Encart mis en evidence : aplat gris, filet vert a gauche, rayon du cote oppose au filet. Valeurs reprises de _design/Blocs types.dc.html, bloc 07 ("Encart informations") - c'est la seule maquette qui montre ce motif en situation. Le filet y fait 4px, pas les 10px de l'ancien site. Le padding n'est pas un jeton d'espacement : 34/38 sont les valeurs de la maquette, entre le `m` (24px) et le `l` (40px) du systeme. */ .is-style-highlight { background: var(--wp--preset--color--background); border-left: 4px solid var(--wp--preset--color--primary); border-radius: 0 var(--baulne-radius-card) var(--baulne-radius-card) 0; padding: 34px 38px; } .is-style-highlight > p { margin-left: 0; } .wp-block-column.is-style-border { border: 10px solid var(--wp--preset--color--background); padding: var(--wp--preset--spacing--s); } /* Colonne entierement cliquable : la carte est la cible, le lien la remplit. */ .wp-block-column.is-style-button { position: relative; border-radius: 30px; box-shadow: var(--baulne-shadow-card); padding: var(--wp--preset--spacing--xl); margin-bottom: var(--wp--preset--spacing--l); cursor: pointer; transition: box-shadow 0.15s ease; } .wp-block-column.is-style-button:hover { box-shadow: var(--baulne-shadow-card-hover); } .wp-block-column.is-style-button:focus-within { box-shadow: var(--baulne-shadow-card-hover); } .wp-block-column.is-style-button p { margin: 0; } .wp-block-column.is-style-button p a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--wp--preset--spacing--s); text-decoration: none; color: inherit; } .wp-block-column.is-style-button p a:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .wp-block-column.is-style-button { transition: none; } } /* Aplats translucides poses sur une colonne (encarts de page interieure). */ .is-style-banner-bg-gris-opacity { background-color: rgba(50, 56, 65, 0.1); padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--s) var(--wp--preset--spacing--m) var(--wp--preset--spacing--m); } .is-style-banner-bg-gris-opacity p { margin: 0; } .is-style-block-bg-green-opacity { background-color: rgba(43, 152, 144, 0.1); padding: var(--wp--preset--spacing--l); } /* --- Titres et paragraphes --------------------------------------------- */ .is-style-remove-margin-heading { margin: 0 auto; } .is-style-remove-margin-paragraph { margin: 0 auto; } .is-style-remove-padding-left { padding-left: 0; } .is-style-lead { font-size: var(--wp--preset--font-size--lead); font-weight: 500; color: var(--wp--preset--color--secondary); } /* Titre pousse dans la moitie droite de sa colonne. Sous 1401px la mise en page se recentre, comme dans l'ancien theme. */ .is-style-add-padding-heading { padding-left: 55%; } @media (max-width: 1401px) { .is-style-add-padding-heading { padding-left: 0; text-align: center; } } .is-style-add-dotted-border { padding-bottom: var(--wp--preset--spacing--xs); border-bottom: 1px dotted var(--wp--preset--color--primary); } /* Le paragraphe porte deja sa couleur (has-white-color le plus souvent) : le lien la reprend au lieu de la sienne. */ .is-style-remove-link-style-paragraph a { color: inherit; text-decoration: none; } /* --- Blocs de la home -------------------------------------------------- */ /* Le fond n'est pose que tant qu'aucune couleur n'est choisie en admin : des qu'on en choisit une, WordPress ajoute .has-background et cette regle se desengage. */ .is-style-actuality-style:not(.has-background) { background: var(--wp--preset--color--background); } .is-style-actuality-style { border-radius: var(--baulne-radius-card); padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m); } .is-style-publications-style:not(.has-background) { background: var(--wp--preset--color--primary); } .is-style-publications-style { color: var(--wp--preset--color--white); border-radius: var(--baulne-radius-card); padding: var(--wp--preset--spacing--l); } .is-style-publications-style :is(h2, h3, h4, p) { color: var(--wp--preset--color--white); } .is-style-publications-style a { color: var(--wp--preset--color--white); text-decoration: none; } .is-style-publications-style a:hover { text-decoration: underline; } /* En-tete de section : voir section 13, ou le style est defini avec les sections de la home. */ .is-style-publications-position { align-items: center; gap: 0; } @media (max-width: 1280px) { .is-style-publications-position { flex-direction: column; } } /* --- Image, fichier, boutons de contenu -------------------------------- */ .is-style-object-fit-cover img { width: 100%; height: 100%; object-fit: cover; } /* Bloc fichier : c'est le BOUTON de telechargement qui prend le style pilule contour, pas le lien du nom de fichier. */ .wp-block-file.is-style-style-btn { padding: var(--wp--preset--spacing--s) 10px; } /* Meme recette que le bouton contour compact : fond transparent plutot que blanc, pour que la pilule ne pose pas de plaque blanche quand le bloc est sur un fond de couleur. Le rayon, la bordure et les etats viennent du bouton (theme.json + section 9), le bloc portant .wp-element-button. */ .wp-block-file.is-style-style-btn .wp-block-file__button { background-color: transparent; color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); } .wp-block-file.is-style-style-btn .wp-block-file__button:hover { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); } /* --- Listes ------------------------------------------------------------ */ .is-style-list-chevron, .is-style-list-dash, .is-style-list-disc { list-style: none; padding-left: 0; margin-top: 0; line-height: 2; } .is-style-list-chevron li, .is-style-list-dash li, .is-style-list-disc li { position: relative; padding-left: 22px; list-style: none; } .is-style-list-chevron li::before { content: "\203A"; } .is-style-list-dash li::before { content: "-"; } .is-style-list-disc li::before { content: "\2022"; } .is-style-list-chevron li::before, .is-style-list-dash li::before, .is-style-list-disc li::before { position: absolute; left: 0; color: var(--wp--preset--color--primary); font-weight: 700; } /* --- Accordeon (bloc kblocks/accordion) -------------------------------- Recette du design system (_design/README.md, "Motifs signature", et Foundations section 12) : un seul style, cadre 1px, rayon de carte, en-tete blanc a titre teal et pastille ronde "+" / "−" teal. A l'ouverture, SEUL l'en-tete passe en gris ; le contenu reste blanc. C'est le changement par rapport au site historique, dont la recette (pilule contouree de 20px, pastille grise sur fond #f1f1f1) etait encore posee ici : le design la remplace par le meme cadre que les cartes. Le plugin Kienso Blocks, lui, livre un accordeon a chevron sur en-tete gris plein. On repose l'habillage dans le theme et pas dans le plugin, partage entre les sites de l'agence et dont le style.scss prevoit explicitement la surcharge par le theme. Seul l'habillage change : le mecanisme d'ouverture (max-height pilote par --kb-content-height, mesure au scrollHeight par le view.js du plugin) est laisse intact. Specificite bumpee (`:root`) sur chaque regle. D'abord parce que le plugin se protege deja ainsi sur sa marge (`:root .kb-accordion`) : a specificite egale, il gagnerait. Ensuite parce que l'ordre des feuilles n'est pas garanti - le CSS du bloc est injecte en