/* Theme Name: Twentig One — Anaïs Fuchs Theme URI: https://fuchsavocat.fr Template: twentig-one Author: Studio M2V Author URI: https://studio-m2v.fr Description: Thème enfant de Twentig One pour le site du cabinet d'avocat Anaïs Fuchs (Strasbourg). Surcharges de design tokens et parties de modèle. Requires at least: 6.9 Tested up to: 7.1 Requires PHP: 8.0 Version: 0.1.0 License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: twentig-one-anais-fuchs */ /* --------------------------------------------------------------------------- * Les design tokens (couleurs, typographies, espacements) sont définis dans * theme.json. Ce fichier ne contient que le CSS qui ne peut pas être exprimé * en blocs natifs, options Twentig ou theme.json. * Toujours utiliser les variables : var(--wp--preset--color--*), * var(--wp--preset--spacing--*), var(--wp--preset--font-size--*). * ------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------- * Footer * Les valeurs viennent des presets theme.json. Ce bloc ne couvre que ce que les * réglages natifs et Twentig ne savent pas exprimer : une largeur de ligne de * texte, et la neutralisation d'un décalage vertical en dessous de 1024px. * ------------------------------------------------------------------------ */ .footer-anais__logo { width: fit-content; align-items: center; } .footer-anais__baseline { max-width: 35ch; } .footer-anais__col-baseline { padding-top: var(--wp--preset--spacing--55); } @media (max-width: 1023px) { .footer-anais__col-baseline { padding-top: 0; } .footer-anais__card { border-top-left-radius: var(--wp--preset--spacing--60); border-top-right-radius: var(--wp--preset--spacing--60); } } ul.footer-anais__droits { list-style: none; margin-left: 0; padding-left: 0; } ul.footer-anais__droits li { margin-inline-start: 0; } /* `blockGap` reste sans effet sur `core/list` : le conteneur est en flux, pas * en flex. L'ecartement doit donc passer par une marge. */ ul.footer-anais__droits li + li { margin-top: 16px; } /* --------------------------------------------------------------------------- * Survol des liens du footer * Maquette : deux ronds roses a gauche du libelle, 0.418em de diametre, * 0.107em d'ecart, 0.3125em avant le texte (soit 13.38 / 3.43 / 10 px pour un * libelle en 32px). Exprimes en em, ils suivent la taille de chaque niveau. * Ils sont poses hors du flux : les libelles ne se decalent pas. * Les sous-pages de Droits n'ont pas leurs propres ronds : c'est le titre * "Droits" qui reagit, ronds compris, quel que soit le sous-lien survole. * ------------------------------------------------------------------------ */ .footer-anais__menu a, .footer-anais__droits-titre { position: relative; } .footer-anais__droits-titre { transition: color 0.3s ease-out; } .footer-anais__menu a::before, .footer-anais__menu a::after, .footer-anais__droits-titre::before, .footer-anais__droits-titre::after { content: ''; position: absolute; top: 50%; width: 0.418em; height: 0.418em; margin-top: -0.209em; border-radius: 50%; background-color: var(--wp--preset--color--base-3); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; } .footer-anais__menu a::before, .footer-anais__droits-titre::before { left: -1.2555em; } .footer-anais__menu a::after, .footer-anais__droits-titre::after { left: -0.7305em; } .footer-anais__menu a:hover::before, .footer-anais__menu a:hover::after, .footer-anais__menu a:focus-visible::before, .footer-anais__menu a:focus-visible::after { opacity: 1; } /* `:has()` remonte du sous-lien survole vers le titre, qui le precede. */ .footer-anais__col-droits:has(.footer-anais__droits a:hover) .footer-anais__droits-titre::before, .footer-anais__col-droits:has(.footer-anais__droits a:hover) .footer-anais__droits-titre::after, .footer-anais__col-droits:has(.footer-anais__droits a:focus-visible) .footer-anais__droits-titre::before, .footer-anais__col-droits:has(.footer-anais__droits a:focus-visible) .footer-anais__droits-titre::after { opacity: 1; } .footer-anais__col-droits:has(.footer-anais__droits a:hover) .footer-anais__droits-titre, .footer-anais__col-droits:has(.footer-anais__droits a:focus-visible) .footer-anais__droits-titre { color: var(--wp--preset--color--base-3); } @media (prefers-reduced-motion: reduce) { .footer-anais__menu a::before, .footer-anais__menu a::after, .footer-anais__droits-titre, .footer-anais__droits-titre::before, .footer-anais__droits-titre::after { transition: none; } } /* --------------------------------------------------------------------------- * Header * ------------------------------------------------------------------------ */ .header-anais__logo { margin-top: 6px; } .header-anais__pill { flex: 0 1 548px; min-height: 56px; } .header-anais__pill .wp-block-navigation { flex: 1 1 auto; } .header-anais .af-nav-actif { font-weight: 600; text-decoration: none; } /* Quand une section prend la main, Accueil retrouve sa graisse normale. */ .header-anais .wp-block-navigation .current-menu-item.af-nav-efface > .wp-block-navigation-item__content, .header-anais__pill .wp-block-navigation .current-menu-item.af-nav-efface > .wp-block-navigation-item__content { font-weight: 300; } /* Lien courant du menu : signale par la graisse, jamais par un * soulignement. Le theme parent en pose un ; l'extension Twentig le * neutralisait, ce role nous revient depuis son retrait. */ .header-anais__pill .current-menu-item > a, .header-anais .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { font-weight: 600; text-decoration: none; } @media (max-width: 1023px) { .header-anais__pill { flex: 0 1 auto; } } /* --------------------------------------------------------------------------- * Survol des liens de navigation * Le cœur de WordPress impose `color: inherit` sur * `.wp-block-navigation-item__content` en doublant la classe dans le sélecteur * (spécificité 0-3-0). On reprend le même procédé pour passer devant, plutôt * que de recourir à !important. * ------------------------------------------------------------------------ */ .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus, .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-submenu__toggle, .wp-block-navigation .wp-block-navigation-submenu__toggle:focus { color: var(--wp--preset--color--base-3); text-decoration: none; } /* --------------------------------------------------------------------------- * Transition de couleur au survol des liens * `ease-out` = démarrage franc puis décélération progressive. * La classe de navigation est répétée pour les mêmes raisons de spécificité * que la règle de couleur ci-dessus. * ------------------------------------------------------------------------ */ a, .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-submenu__toggle { transition: color 0.3s ease-out; } /* `.wp-element-button` (0-1-0) l'emporte sur le sélecteur `a` : on remonte d'un * cran et on conserve le fondu d'opacité du thème parent. */ a.wp-element-button { transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out, opacity 0.1s ease; } @media (prefers-reduced-motion: reduce) { a, a.wp-element-button, .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-submenu__toggle { transition: none; } } /* --------------------------------------------------------------------------- * Header : bouton Contact au survol — rose plein, texte bordeaux * ------------------------------------------------------------------------ */ /* Les classes de preset du cœur (`.has-base-background-color`, * `.has-contrast-color`) sont posées en !important. Seul !important passe * devant — ce n'est pas un raccourci de confort ici. */ .header-anais__cta .wp-block-button__link:hover, .header-anais__cta .wp-block-button__link:focus { background-color: var(--wp--preset--color--base-3) !important; border-color: var(--wp--preset--color--base-3); color: var(--wp--preset--color--contrast) !important; } /* --------------------------------------------------------------------------- * Header épinglé * ------------------------------------------------------------------------ */ /* Le sticky doit porter sur la partie de modèle : `.header-anais` a exactement * la hauteur de son parent, il n'aurait aucune course pour glisser. * Maquette : la barre reste transparente, seule la pilule du menu est opaque. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; background-color: transparent; pointer-events: none; } /* La barre transparente couvre 152px de contenu : sans cela elle * intercepterait les clics destines a la page. */ .header-anais__logo, .header-anais__pill { pointer-events: auto; } /* Temoin de 1px en tete de page : sa sortie de l'ecran signale le defilement. */ .af-temoin-haut { height: 1px; margin-bottom: -1px; } /* Le logo s'efface des que la page quitte le haut : epingle et sur fond * transparent, il deviendrait illisible sur les sections bordeaux. * `visibility` conserve sa place, la pilule du menu ne bouge donc pas. */ .header-anais__logo { transition: opacity 0.3s ease-out, visibility 0s linear 0s; } .af-defilee .header-anais__logo { opacity: 0; visibility: hidden; transition: opacity 0.3s ease-out, visibility 0s linear 0.3s; } @media (prefers-reduced-motion: reduce) { .header-anais__logo { transition: none; } } .admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); } /* --------------------------------------------------------------------------- * Sous-menu Droits * ------------------------------------------------------------------------ */ .header-anais .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { left: 50%; transform: translateX(-50%); top: calc(100% + 12px); border: 0; border-radius: 15px; text-align: center; } .header-anais .wp-block-navigation__submenu-container .wp-block-navigation-item { justify-content: center; } /* Le cœur de WordPress applique déjà `rotate(180deg)` au svg quand * aria-expanded vaut true. On se contente donc de l'animer : ajouter notre * propre rotation sur le bouton donnerait 360°, soit aucun mouvement visible. */ .header-anais .wp-block-navigation-submenu__toggle > svg { transition: transform 0.3s ease-out; } .header-anais .wp-block-navigation__submenu-icon { transition: color 0.3s ease-out; } @media (prefers-reduced-motion: reduce) { .header-anais .wp-block-navigation-submenu__toggle > svg, .header-anais .wp-block-navigation__submenu-icon { transition: none; } } /* --------------------------------------------------------------------------- * Chevron : sens de rotation inverse * Le cœur applique rotate(180deg) ; à l'arrivée c'est identique, mais le sens * de parcours pendant la transition, lui, change. * ------------------------------------------------------------------------ */ .header-anais .wp-block-navigation-submenu__toggle[aria-expanded="true"] > svg { transform: rotate(-180deg); } /* --------------------------------------------------------------------------- * Passerelle de survol * Les 12px qui séparent l'entrée du sous-menu sont une zone morte : le curseur * quitte la zone survolée et le sous-menu se referme avant d'être atteint. * Ce pseudo-élément comble l'intervalle sans rien afficher. Il n'existe que * lorsque le sous-menu est ouvert, puisqu'il en hérite la visibilité. * ------------------------------------------------------------------------ */ .header-anais .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: transparent; } /* --------------------------------------------------------------------------- * Sous-menu : largeur et fondu d'apparition * `min-width` du cœur vaut 200px et force le retour à la ligne. * `max-content` dimensionne sur le plus long libellé, `white-space: nowrap` * garantit qu'aucun lien ne se coupe. * ------------------------------------------------------------------------ */ .header-anais .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { width: max-content; min-width: 0; max-width: min(90vw, 420px); padding-block: 8px; } .header-anais .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: nowrap; } /* Fondu + léger glissement. * Le cœur bascule `visibility` : on la retarde à la fermeture pour laisser le * fondu se jouer, et on la rétablit immédiatement à l'ouverture. */ .header-anais .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { opacity: 0; transform: translateX(-50%) translateY(-6px); transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0.3s; } .header-anais .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container, .header-anais .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container, .header-anais .wp-block-navigation .has-child > .wp-block-navigation__submenu-container:hover { opacity: 1; transform: translateX(-50%) translateY(0); transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s linear 0s; } @media (prefers-reduced-motion: reduce) { .header-anais .wp-block-navigation .has-child > .wp-block-navigation__submenu-container { transition: opacity 0.01s linear, visibility 0s linear; transform: translateX(-50%); } .header-anais .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container, .header-anais .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container { transform: translateX(-50%); } } /* Centrage des libellés dans le sous-menu * `width: max-content` cale le conteneur sur le plus long libellé ; les items * doivent donc s'étirer sur toute la largeur pour que le centrage opère. */ .header-anais .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item { justify-content: center; align-items: center; width: 100%; } .header-anais .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: nowrap; width: 100%; text-align: center; justify-content: center; } /* Le lien est lui-même un conteneur flex : `text-align` n'a aucun effet dessus, * seul son propre `justify-content` compte. */ .header-anais .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content { justify-content: center; text-align: center; white-space: nowrap; } /* --------------------------------------------------------------------------- * FAQ - filtres * La pilule rose est un element unique qui se deplace d'un bouton a l'autre, * conformement aux cinq variantes de la maquette. Elle est injectee par * assets/js/faq.js pour ne pas alourdir le markup edite dans Gutenberg. * ------------------------------------------------------------------------ */ .faq__filtres { position: relative; } .faq__filtres-pilule { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background-color: var(--wp--preset--color--base-3); transition: transform 0.3s ease-out, width 0.3s ease-out, opacity 0.3s ease-out; pointer-events: none; z-index: 0; } .faq__filtres .wp-block-button { position: relative; z-index: 1; } .faq__filtres .wp-block-button__link { position: relative; background-color: transparent; color: var(--wp--preset--color--contrast); border: 0; border-radius: 999px; padding: 8px 18px; font-size: var(--wp--preset--font-size--x-small); font-weight: 300; transition: color 0.3s ease-out; } .faq__filtres .wp-block-button.is-active .wp-block-button__link { font-weight: 600; } /* `.wp-element-button:hover` du theme parent applique une opacite de .85 qui * delave le libelle : on la neutralise. */ .faq__filtres .wp-block-button__link:hover, .faq__filtres .wp-block-button__link:focus-visible { color: var(--wp--preset--color--contrast); opacity: 1; } /* Deux ronds sous le libelle au survol : 14px de diametre, 4px d'ecart. */ .faq__filtres .wp-block-button__link::before, .faq__filtres .wp-block-button__link::after { content: ''; position: absolute; bottom: -10px; width: 14px; height: 14px; border-radius: 50%; background-color: var(--wp--preset--color--base-3); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; } .faq__filtres .wp-block-button__link::before { left: calc(50% - 16px); } .faq__filtres .wp-block-button__link::after { left: calc(50% + 2px); } .faq__filtres .wp-block-button__link:hover::before, .faq__filtres .wp-block-button__link:hover::after, .faq__filtres .wp-block-button__link:focus-visible::before, .faq__filtres .wp-block-button__link:focus-visible::after { opacity: 1; } /* --------------------------------------------------------------------------- * FAQ - accordeon * Rythme repris de la maquette : question, 15px, filet, 15px, reponse, * 15px avant la question suivante. * ------------------------------------------------------------------------ */ /* Le conteneur est en flux, pas en flex : `gap` n'a aucun effet, WordPress * espace ses enfants par des marges. */ .faq .wp-block-accordion > * + * { margin-block-start: 15px; } .faq .wp-block-accordion-heading { margin: 0 0 15px; border-bottom: 1px solid var(--wp--preset--color--tertiary); } .faq .wp-block-accordion-heading__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 15px; border: 0; background: none; color: var(--wp--preset--color--contrast); font-family: inherit; font-size: var(--wp--preset--font-size--normal); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-align: left; cursor: pointer; transition: color 0.3s ease-out; } .faq .wp-block-accordion-heading__toggle, .faq .wp-block-accordion-heading__toggle:hover, .faq .wp-block-accordion-heading__toggle:focus, .faq .wp-block-accordion-heading__toggle .wp-block-accordion-heading__toggle-title { text-decoration: none; } /* Chevron : le coeur affiche un '+' textuel. On le masque et on applique le * trace exact de la maquette (11x21) en masque CSS, ce qui lui fait heriter * la couleur courante et permet de le faire pivoter sans deformation. */ .faq .wp-block-accordion-heading__toggle-icon { flex: 0 0 auto; width: 21px; height: 21px; font-size: 0; line-height: 0; background-color: currentColor; -webkit-mask: url('https://dev.fuchsavocat.fr/wp-content/themes/twentig-one-anais-fuchs/assets/chevron.svg') no-repeat center / contain; mask: url('https://dev.fuchsavocat.fr/wp-content/themes/twentig-one-anais-fuchs/assets/chevron.svg') no-repeat center / contain; transform: rotate(0deg); transition: transform 0.3s ease-out; } .faq .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(90deg); } /* Ouverture : la hauteur est animee via grid-template-rows (0fr -> 1fr), seule * technique fiable pour interpoler vers une hauteur automatique. `display` est * transitionne en mode discret pour que le repli reste anime tout en conservant * `display: none` au repos - le contenu ferme reste ainsi hors des lecteurs * d'ecran. Navigateurs sans support : bascule instantanee, sans casse. */ /* Le panneau ferme porte `hidden="until-found"`, que le navigateur traduit par * `content-visibility: hidden` : le contenu est escamote instantanement. On la * transitionne en mode discret pour qu'elle ne s'applique qu'a la fin du repli. * La transition concurrente que le coeur pose sur l'item est neutralisee, sinon * le repliement se joue en deux temps. */ .faq .wp-block-accordion-item { transition: none; } .faq .wp-block-accordion-panel { display: grid; grid-template-rows: 1fr; opacity: 1; overflow: hidden; padding: 0; transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out, content-visibility 0.3s allow-discrete; } .faq .wp-block-accordion-panel > * { min-height: 0; margin: 0; font-size: var(--wp--preset--font-size--x-small); font-weight: 300; } .faq .wp-block-accordion-panel[hidden] { grid-template-rows: 0fr; opacity: 0; } @starting-style { .faq .wp-block-accordion-panel { grid-template-rows: 0fr; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .faq .wp-block-accordion-heading__toggle-icon, .faq .wp-block-accordion-panel, .faq__filtres-pilule, .faq__filtres .wp-block-button__link, .faq__filtres .wp-block-button__link::before, .faq__filtres .wp-block-button__link::after { transition: none; } } /* Le filtre actif porte deja la pilule : les ronds y feraient doublon. */ .faq__filtres .wp-block-button.is-active .wp-block-button__link::before, .faq__filtres .wp-block-button.is-active .wp-block-button__link::after, .faq__filtres .wp-block-button.is-active .wp-block-button__link:hover::before, .faq__filtres .wp-block-button.is-active .wp-block-button__link:hover::after, .faq__filtres .wp-block-button.is-active .wp-block-button__link:focus-visible::before, .faq__filtres .wp-block-button.is-active .wp-block-button__link:focus-visible::after { opacity: 0; } /* Filtres masques en mobile : le script applique deja "tout" par defaut au * chargement, la FAQ reste donc utilisable (toutes les sections visibles), * seule la barre de filtres disparait. */ @media (width <= 651px) { /* `.wp-block-buttons.is-layout-flex` du coeur gagne a specificite egale. */ .faq__filtres { display: none !important; } } /* Le footer est transparent par defaut : le fond de la page transparait * derriere la carte bordeaux. La teinte rose ne s'applique qu'aux pages qui * la demandent - ajouter ici la classe de corps correspondante. * (marqueur : footer-anais--fond) */ .af-footer-rose-clair .footer-anais { background-color: var(--wp--preset--color--base-2); } .af-footer-rose .footer-anais { background-color: var(--wp--preset--color--base-3); } /* Ecrans etroits : empeche le libelle du bouton de se casser lettre par lettre * quand la barre manque de place. Correctif de non-regression, pas une mise en * page mobile - celle-ci reste a definir d'apres la maquette. * (marqueur : header-anais--etroit) */ @media (max-width: 781px) { .header-anais__pill { flex: 0 1 auto; } .header-anais__cta .wp-block-button__link { white-space: nowrap; } } /* Le theme parent impose un "mode tablette" (bouton hamburger, menu replie) * entre 600px et 767px (cf. twentig-standalone.css). En dessous de 652px le * menu mobile propre au site prend deja le relais (cf. plus bas) : on annule * donc ce mode tablette entre les deux, pour garder le menu desktop jusqu'a * la bascule mobile du site. (marqueur : header-anais--sans-tablette) */ @media (min-width: 652px) and (max-width: 767px) { .header-anais .wp-block-navigation__responsive-container-open { display: none; } .header-anais .wp-block-navigation__responsive-container:not(.is-menu-open) { display: block; } } /* --------------------------------------------------------------------------- * Pages Droits * ------------------------------------------------------------------------ */ .af-intro { align-items: stretch; } /* Le titre s'aligne sur le bord haut de la carte, pas sur son texte. */ .af-intro__texte { padding: 0 var(--wp--preset--spacing--50) 0 0; } .af-intro__texte > :first-child { margin-top: 0; } /* La carte deborde volontairement a droite : elle n'est arrondie qu'a gauche. */ .af-honoraires { position: relative; padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--65); border-radius: 40px 0 0 40px; } /* Le fond se prolonge jusqu'au bord de l'ecran sans toucher a la boite de * contenu : une bande peinte par pseudo-element, plutot qu'une marge negative * que le coeur ecrase et un padding qui rognerait la colonne. */ /* En dessous du wideSize (82rem), la formule precedente ne compensait que le * depassement au-dela du wideSize et retombait a 0 : le fond s'arretait alors * avant le bord d'ecran, sur toute la plage ou les colonnes restent cote a * cote sans que la page ait encore atteint le wideSize (~1024-1312px). Le * plancher reprend le padding racine (meme variable que l'alignement "wide"), * seule distance restant entre la carte et le bord d'ecran sous le wideSize. */ .af-honoraires::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: max(var(--wp--style--root--padding-right, 48px), calc((100vw - 82rem) / 2)); background-color: var(--wp--preset--color--base-2); pointer-events: none; } /* Le coeur etire les colonnes a hauteur egale (align-items: stretch, pose sur * .af-intro) : la carte Honoraires prenait alors toute la hauteur de la * colonne de texte, pas seulement celle de son propre contenu. Au-dela de * 1023px (les colonnes restent cote a cote, cf. tw-cols-stack-md plus bas), * la carte se cale sur son propre contenu et reste epinglee au defilement, * avec une marge qui l'empeche de passer sous l'entete epingle (~109px). */ @media (width > 1023px) { .af-honoraires { align-self: flex-start; position: sticky; top: 90px; } } /* Le debord ne doit pas creer de defilement horizontal. */ .af-page-droit { overflow-x: clip; } /* La maquette met la liste en retrait par rapport au corps de texte. */ .af-liste { padding-left: 22px; list-style-position: outside; } .af-liste li { margin-bottom: 0; } /* Les deux pastilles tarifaires : cercles parfaits, donc ratio 1 et largeur fixe. * Le texte "Consultation de..." vit desormais hors du cercle, sous celui-ci : * c'est ce conteneur (.af-cercle-wrap) qui recoit la largeur des colonnes, le * cercle lui-meme suit en largeur 100%. */ .af-cercle-wrap { display: flex; flex-direction: column; align-items: center; width: min(232px, calc(50% - 6px)); max-width: 100%; } .af-cercle { aspect-ratio: 1; width: 100%; border-radius: 50%; padding: 24px; text-align: center; } .af-cercle-wrap > p:last-child { margin-top: 12px; text-align: center; } /* Les deux pastilles ne doivent jamais passer l'une sous l'autre : sur les * petites fenetres de bureau (colonnes cote a cote mais peu de largeur), elles * retrecissent plutot que de s'empiler sur deux lignes. */ .af-cercles { gap: 12px; flex-wrap: nowrap; align-items: flex-start; } /* Les marges propres des blocs internes faussaient le centrage vertical : * seul l'ecartement du conteneur flex doit jouer. */ .af-cercle > * { margin-top: 0; margin-bottom: 0; } /* En orientation verticale, le coeur affecte `justifyContent` a l'axe * horizontal : le centrage sur l'axe principal doit etre pose ici. */ .af-cercle { justify-content: center; } /* Le coeur pose `flex-wrap: wrap` sur les groupes flex verticaux : des que le * contenu (titre + texte + bouton) depasse la hauteur du cercle, le dernier * enfant bascule dans une deuxieme colonne poussee a droite, hors du cercle. * On force une seule colonne, quitte a deborder verticalement. */ .af-cercle { flex-wrap: nowrap; } /* Grille a deux colonnes : `display: contents` sur la rangee fait remonter les * deux paragraphes comme items de la grille, si bien que toutes les valeurs * s'alignent sur une meme verticale, calees a gauche. */ .af-tarifs { display: grid; grid-template-columns: 1fr max-content; column-gap: var(--wp--preset--spacing--30); row-gap: var(--wp--preset--spacing--15); } /* Le CSS de layout du coeur est injecte apres la feuille du theme : a * specificite egale il gagnait. On descend d'un niveau pour passer devant. */ .af-tarifs > .af-tarif { display: contents; } .af-tarif p { margin: 0; } .af-tarif__valeur { white-space: nowrap; text-align: left; } /* Sous 1024px les colonnes s'empilent (tw-cols-stack-md). Les etats * responsive de WordPress 7.1 traitent deja retraits, arrondis et couleurs : * il ne reste ici que ce qu'ils excluent, a savoir le layout. */ @media (width <= 1023px) { .af-intro__texte { padding-right: 0; } /* La carte ne deborde plus une fois empilee : la bande peinte n'a plus lieu d'etre. */ .af-honoraires::after { content: none; } .af-cercles { justify-content: flex-start; } } @media (width <= 651px) { /* Deux pastilles cote a cote et collees, sans espace entre elles : chacune * occupe pile la moitie de la largeur. */ .af-cercle-wrap { width: 50%; } .af-cercle { padding: 16px; } .af-cercles { flex-wrap: nowrap; justify-content: center; gap: 0; } /* Les tarifs restent sur deux colonnes mais la valeur peut passer dessous * si le libelle est long. */ .af-tarifs { column-gap: var(--wp--preset--spacing--20); } } /* --------------------------------------------------------------------------- * Modale "Appel telephonique" * Maquette 1384x815 : colonne de texte a gauche (416px), agenda Calendly a * droite (800x592). Le contenu vit dans un bloc de la page, donc editable * dans Gutenberg ; le script le deplace dans un natif. * ------------------------------------------------------------------------ */ .af-modale-source { display: none; } /* Hauteur imposee plutot que dictee par le contenu : l'agenda occupe alors * toute la place disponible au lieu de laisser du vide sous le calendrier. * `dvh` suit la barre d'adresse mobile, contrairement a `vh`. */ .af-modale { box-sizing: border-box; width: min(1384px, calc(100vw - 48px)); height: calc(100vh - 40px); height: calc(100dvh - 40px); max-height: none; margin-block: 20px; padding: 112px 64px; border: 0; border-radius: 30px; background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); overflow: hidden; } .af-modale[open] { display: flex; flex-direction: column; } .af-modale::backdrop { background-color: color-mix(in srgb, #6a4050 55%, transparent); } /* 416px de texte, 40px de gouttiere, l'agenda occupe le reste (800px a la * largeur de reference). */ .af-modale__corps { display: grid; grid-template-columns: 416px minmax(0, 1fr); column-gap: 40px; flex: 1; min-height: 0; } .af-modale__texte { align-self: start; } .af-modale h2 { margin: 0 0 18px; line-height: 1.1; } /* Calendly reserve 66px au-dessus de son calendrier. Ce bloc vit dans une * iframe sur calendly.com : ni le CSS ni le JavaScript de cette page ne * peuvent l'atteindre. On remonte donc l'iframe d'autant et on rogne le * debord, faute de pouvoir agir a la source. * * Valeur relevee a la main : si Calendly modifie sa mise en page, ajuster ici. * Mettre 0 retablit le rendu d'origine. */ .af-modale__agenda { --af-calendly-recadrage: 66px; min-height: 0; overflow: hidden; } .af-modale .calendly-inline-widget { margin-top: calc(var(--af-calendly-recadrage) * -1); height: calc(100% + var(--af-calendly-recadrage)); } /* Message de repli si le script tiers ne se charge pas. */ .af-modale__agenda-repli[hidden] { display: none; } .af-modale__agenda-repli { display: flex; align-items: center; justify-content: center; height: 592px; padding: 24px; border-radius: 20px; background-color: var(--wp--preset--color--base-2); text-align: center; } /* Pastille bordeaux. Reduite d'un cran par rapport a la maquette : 51px * paraissait imposant a l'usage. Marqueur : croix-fermeture-reduite */ .af-modale__fermer { position: absolute; top: 30px; right: 30px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); line-height: 1; cursor: pointer; transition: background-color 0.3s ease-out; } .af-modale__fermer svg { width: 22px; height: 22px; display: block; } .af-modale__fermer:hover, .af-modale__fermer:focus-visible { background-color: var(--wp--preset--color--contrast-2, #432934); } /* Sur un ecran peu haut, les 112px de marge interieure de la maquette * mangeraient la place de l'agenda : on les reduit plutot que de faire * defiler la modale. */ @media (height <= 800px) { .af-modale { padding-block: 56px; } } @media (width <= 1023px) { .af-modale { padding: 64px 24px 24px; overflow: auto; } .af-modale__corps { grid-template-columns: 1fr; row-gap: 32px; flex: 0 0 auto; } .af-modale__agenda { min-height: 592px; } .af-modale__fermer { top: 16px; right: 16px; width: 36px; height: 36px; } .af-modale__fermer svg { width: 18px; height: 18px; } } @media (prefers-reduced-motion: reduce) { .af-modale__fermer { transition: none; } } /* Les classes de preset du coeur portent !important : seul !important passe * devant pour l'etat de survol. */ .af-rdv .wp-block-button__link:hover, .af-rdv .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; opacity: 1; } /* --------------------------------------------------------------------------- * Footer en mobile (footer-anais--mobile) * La maquette recentre tout le contenu et remonte le filet au-dessus de la * ligne copyright / mentions. * ------------------------------------------------------------------------ */ @media (width <= 651px) { .footer-anais__card { text-align: center; } .footer-anais__logo, .footer-anais__card .wp-block-column > .wp-block-group { align-items: center; } .footer-anais .wp-block-social-links { justify-content: center; } .footer-anais__logo { width: fit-content; align-items: center; } .footer-anais__baseline { max-width: 30ch; margin-inline: auto; } ul.footer-anais__droits { text-align: center; } /* Le filet passe au-dessus et occupe toute la largeur ; le copyright et les * mentions se repartissent la ligne. */ .footer-anais__bottom { justify-content: space-between; } .footer-anais__bottom .wp-block-separator { order: -1; flex: 0 0 100%; margin-bottom: var(--wp--preset--spacing--15); } } /* --------------------------------------------------------------------------- * Header mobile (header-anais--mobile) * Maquette : cadre 390x100, logo 60 de large, bouton rond 42 a droite. * Le bouton Contact disparait : en mobile c'est une entree du menu ouvert. * ------------------------------------------------------------------------ */ @media (width <= 651px) { .header-anais { padding-top: 20px; } .header-anais__logo img { width: 60px !important; } .header-anais__logo { margin-top: 0; } /* `.wp-block-buttons-is-layout-flex` gagne a specificite egale : on monte * d'un cran plutot que de recourir a !important. */ .header-anais .header-anais__cta { display: none; } .header-anais__pill { min-height: 0; padding: 0; background: none !important; } } /* Bouton hamburger : cercle bordeaux de 42px, barres blanches. * Tout est scope au mobile : hors media query, la regle forcait l'affichage du * bouton en desktop, ou le coeur le masque. * Le coeur rend deux boutons distincts (ouvrir hors du panneau, fermer dedans) : * on les habille a l'identique et au meme emplacement, chacun animant ses * propres barres. Ce n'est donc pas une metamorphose d'un seul element, mais * l'effet percu est celui des barres qui se croisent. */ @media (width <= 651px) { .header-anais .wp-block-navigation__responsive-container-open, .header-anais .wp-block-navigation__responsive-container-close { position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background-color: var(--wp--preset--color--contrast); } .header-anais .wp-block-navigation__responsive-container-open svg, .header-anais .wp-block-navigation__responsive-container-close svg { display: none; } .header-anais .wp-block-navigation__responsive-container-open::before, .header-anais .wp-block-navigation__responsive-container-open::after, .header-anais .wp-block-navigation__responsive-container-close::before, .header-anais .wp-block-navigation__responsive-container-close::after { content: ''; position: absolute; width: 18px; height: 2px; border-radius: 2px; background-color: var(--wp--preset--color--base); transition: transform 0.3s ease-out; } .header-anais .wp-block-navigation__responsive-container-open::before { transform: translateY(-6px); box-shadow: 0 6px 0 0 var(--wp--preset--color--base); } .header-anais .wp-block-navigation__responsive-container-open::after { transform: translateY(6px); } /* Etat ouvert : deux barres croisees, la troisieme s'efface. */ .header-anais .wp-block-navigation__responsive-container-close::before { transform: rotate(45deg); box-shadow: none; } .header-anais .wp-block-navigation__responsive-container-close::after { transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .header-anais .wp-block-navigation__responsive-container-open::before, .header-anais .wp-block-navigation__responsive-container-open::after, .header-anais .wp-block-navigation__responsive-container-close::before, .header-anais .wp-block-navigation__responsive-container-close::after { transition: none; } } } /* --------------------------------------------------------------------------- * Menu mobile ouvert (menu-mobile--panneau) * Panneau bordeaux en pilule, entrees rose 40px semibold, separees par le motif * a deux ronds. C'est le meme ornement que celui laisse a opacite 0 dans le * footer desktop. * ------------------------------------------------------------------------ */ @media (width <= 651px) { .header-anais .wp-block-navigation__responsive-container.is-menu-open { background-color: transparent; padding: 0; } .header-anais .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { display: flex; align-items: center; justify-content: center; height: 100%; } .header-anais .is-menu-open .wp-block-navigation__responsive-container-content { width: min(349px, calc(100vw - 40px)); padding: 100px 24px; border-radius: 200px; background-color: var(--wp--preset--color--contrast); } .header-anais .is-menu-open .wp-block-navigation__container { gap: 20px; align-items: center; } .header-anais .is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--base-3); font-size: var(--wp--preset--font-size--xx-large); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; text-align: center; } } /* Separateur a deux ronds entre les entrees de premier niveau, sauf apres la * derniere. (menu-mobile--separateurs) */ @media (width <= 651px) { .header-anais .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { position: relative; flex-direction: column; align-items: center; padding-bottom: 33px; } .header-anais .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child { padding-bottom: 0; } .header-anais .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::before, .header-anais .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after { content: ''; position: absolute; bottom: 10px; width: 13px; height: 13px; border-radius: 50%; background-color: var(--wp--preset--color--base-3); } .header-anais .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::before { left: calc(50% - 15px); } .header-anais .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after { left: calc(50% + 2px); } /* Sous-liste Droits : 18px regular, centree, sans puce ni chevron. */ .header-anais .is-menu-open .wp-block-navigation__submenu-container { position: static; transform: none; width: auto; min-width: 0; margin-top: 10px; padding: 0; gap: 10px; background: none; opacity: 1; } .header-anais .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--normal); font-weight: 400; } .header-anais .is-menu-open .wp-block-navigation-submenu__toggle { display: none; } } /* Footer mobile : les mentions legales se replient sur deux lignes a droite. */ @media (width <= 651px) { .footer-anais__bottom > p:last-of-type { max-width: 9ch; text-align: right; } .footer-anais__bottom > p:first-of-type { max-width: 16ch; text-align: left; } } /* --------------------------------------------------------------------------- * Boutons RDV en mobile (af-rdv--icone) * La maquette remplace le libelle par une pastille ronde a icone. Le texte * reste dans le DOM (taille nulle) : il continue de nommer le lien pour les * lecteurs d'ecran et les moteurs. * ------------------------------------------------------------------------ */ @media (width <= 651px) { .af-rdv .wp-block-button__link { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 !important; font-size: 0 !important; } .af-rdv .wp-block-button__link::before { content: ''; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--af-icone) no-repeat center / contain; mask: var(--af-icone) no-repeat center / contain; } .af-rdv-cabinet .wp-block-button__link { --af-icone: url('https://dev.fuchsavocat.fr/wp-content/themes/twentig-one-anais-fuchs/assets/icone-calendrier.svg'); } .af-rdv-tel .wp-block-button__link { --af-icone: url('https://dev.fuchsavocat.fr/wp-content/themes/twentig-one-anais-fuchs/assets/icone-telephone.svg'); } } /* L'entree Contact double le bouton en desktop : elle n'est utile qu'une fois * le menu replie. */ @media (width > 651px) { .header-anais .wp-block-navigation .af-nav-contact { display: none; } } /* Sous-menu Droits : centre dans le panneau, pas seulement centre sur lui-meme. */ @media (width <= 651px) { .header-anais .is-menu-open .wp-block-navigation__submenu-container { align-items: center; width: 100%; text-align: center; } .header-anais .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; justify-content: center; } .header-anais .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { width: 100%; text-align: center; justify-content: center; } } /* La liste a puces est plus resserree que le corps de texte ; en mobile elle * reprend un peu d'air pour rester lisible sur des lignes plus courtes. */ @media (width <= 651px) { .af-liste li + li { margin-top: 6px; } } /* --------------------------------------------------------------------------- * Accueil * ------------------------------------------------------------------------ */ /* Le motif a deux ronds, deja employe dans le menu mobile. */ .af-ronds::before, .af-ronds::after { content: ''; width: 13px; height: 13px; border-radius: 50%; background-color: var(--wp--preset--color--contrast); } .af-ronds { gap: 4px; } /* Portraits : forme ovale de la maquette, obtenue par un rayon dissymetrique. */ .af-portrait img { width: 100%; aspect-ratio: 304 / 430; object-fit: cover; border-radius: 300px; } /* Les quatre pastilles d'expertise : grille de deux cercles parfaits. */ /* Deux colonnes de meme largeur, sans gouttiere : les cercles inscrits dans * des cellules carrees se touchent exactement. */ /* `1fr` vaut `minmax(auto, 1fr)` : une colonne dont le texte est long peut * depasser sa part, d'ou des cercles inegaux et un ecart vertical residuel. * `minmax(0, 1fr)` force deux colonnes strictement egales. */ .af-cercles-exp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } /* La colonne est en flux : WordPress espace ses enfants par `margin-block-start`, * marge qui se reporte en ecart de rangee une fois la grille posee. */ .af-cercles-exp > * { margin-block-start: 0; margin-block-end: 0; } /* Bordure de la meme teinte que le fond : au survol le fond s'efface et seul * le contour subsiste, sans que la pastille change de taille. */ .af-cercle-exp { aspect-ratio: 1; border-radius: 50%; border: 2px solid currentColor; padding: 24px; text-align: center; justify-content: center; transition: background-color 0.3s ease-out, color 0.3s ease-out; } .af-cercle-exp p { margin: 0; } /* Le titre de la pastille est le seul lien : tout le cercle devient cliquable. */ .af-cercle-exp a { color: inherit; } /* Les classes de fond preset du coeur sont en !important : le survol doit * l'etre aussi pour rendre la pastille transparente. */ .af-cercle-exp:hover, .af-cercle-exp:focus-within { background-color: transparent !important; } .af-cercle-exp.has-base-background-color { border-color: var(--wp--preset--color--base); } .af-cercle-exp.has-contrast-background-color { border-color: var(--wp--preset--color--contrast); } /* Une fois le fond retire, le libelle doit rester lisible sur le rose. */ .af-cercle-exp.has-base-background-color:hover, .af-cercle-exp.has-base-background-color:hover a, .af-cercle-exp.has-contrast-background-color:hover, .af-cercle-exp.has-contrast-background-color:hover a { color: var(--wp--preset--color--contrast) !important; } /* Hero : bouton au survol, fond blanc et texte bordeaux. */ .af-hero__cta .wp-block-button__link:hover, .af-hero__cta .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; opacity: 1; } /* Appels a l'action : fond rose au survol. */ .af-cta__btn .wp-block-button__link:hover, .af-cta__btn .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--base-3) !important; color: var(--wp--preset--color--contrast) !important; opacity: 1; } /* Colonne texte des avocates : corps en rose, mots en gras en blanc. */ /* Toute la colonne est en rose, y compris les passages en gras : la maquette * ne distingue que par la graisse. */ .af-avocates__texte, .af-avocates__texte p, .af-avocates__texte strong { color: var(--wp--preset--color--base-3); } /* --------------------------------------------------------------------------- * Carrousel des avocates * Les trois profils occupent la meme cellule de grille : celui qui est actif * est seul visible. Pas de defilement horizontal, donc pas de calcul de * largeur ni de risque de debordement. * ------------------------------------------------------------------------ */ .af-carrousel { overflow: hidden; } /* La piste montre deux profils cote a cote, 32px de gouttiere (maquette). * Deux clones en fin de piste assurent une rotation sans a-coup. */ .af-carrousel__piste { display: flex; align-items: flex-start; gap: 32px; min-height: 635px; transition: transform 0.5s ease-out; will-change: transform; touch-action: pan-y; cursor: grab; } /* Pendant le glissement : curseur de prise, et plus de selection de texte * parasite sous le pointeur. */ .af-carrousel.en-glissement { user-select: none; } .af-carrousel.en-glissement .af-carrousel__piste { cursor: grabbing; } .af-carrousel img { -webkit-user-drag: none; } .af-carrousel__piste.sans-transition { transition: none; } .af-carrousel__slide { flex: 0 0 calc((100% - 32px) / 2); min-width: 0; } /* Nom et mention Avocate : rose sur le fond bordeaux. */ .af-carrousel__slide p { color: var(--wp--preset--color--base-3); } /* Le portrait entier est cliquable : il ouvre la fiche detaillee. */ .af-carrousel__declencheur { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; } .af-carrousel__puces { display: flex; gap: 20px; justify-content: center; margin-top: 0; } /* Maquette : 7px de diametre. Actif = disque plein ; inactif = simple * bordure de 1px sur fond transparent. */ .af-carrousel__puce { box-sizing: border-box; width: 7px; height: 7px; padding: 0; border: 1px solid var(--wp--preset--color--base-3); border-radius: 50%; background-color: transparent; cursor: pointer; transition: background-color 0.3s ease-out; } .af-carrousel__voir { display: none; } .af-carrousel__puce[aria-selected='true'] { background-color: var(--wp--preset--color--base-3); } @media (prefers-reduced-motion: reduce) { .af-carrousel__piste, .af-carrousel__puce { transition: none; } } /* Survol d'un profil (Variante2 de la maquette) : la photo cede la place a * un aplat blanc portant l'invitation "Voir le profil" et deux ronds. */ .af-portrait { position: relative; } .af-carrousel__survol { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 300px; background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; } .af-carrousel__declencheur:hover .af-carrousel__survol, .af-carrousel__declencheur:focus-visible .af-carrousel__survol { opacity: 1; } .af-carrousel__survol-texte { font-size: 32px; font-weight: 700; letter-spacing: -0.64px; line-height: 1.1; text-align: center; } /* Maquette : deux ronds de 20px espaces de 6px. */ .af-carrousel__survol-points { display: flex; gap: 6px; } .af-carrousel__survol-points::before, .af-carrousel__survol-points::after { content: ''; width: 20px; height: 20px; border-radius: 50%; background-color: var(--wp--preset--color--base-3); } @media (prefers-reduced-motion: reduce) { .af-carrousel__survol { transition: none; } } /* Sous 651px la colonne est trop etroite pour deux portraits : un seul. */ @media (width <= 651px) { .af-carrousel__slide { flex: 0 0 100%; } .af-carrousel__puces { margin-top: 40px; } } /* --------------------------------------------------------------------------- * Fiche detaillee d'une avocate * Les trois fiches vivent dans la page (donc editables dans Gutenberg) ; le * script les deplace dans un natif muni d'onglets. * ------------------------------------------------------------------------ */ .af-profils-source { display: none; } .af-profils { width: min(1384px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 30px; background-color: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast); overflow: hidden; } .af-profils::backdrop { background-color: color-mix(in srgb, #6a4050 55%, transparent); } /* La photo occupe la colonne de gauche sur toute la hauteur ; les onglets et * le texte se partagent la colonne de droite. `display: contents` sur la fiche * active fait remonter photo et texte comme items de cette grille. */ /* Marqueur : profils-popup-ajustements */ .af-profils__corps { display: grid; grid-template-columns: 46% 1fr; grid-template-rows: auto 1fr; column-gap: 60px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; } @media (min-width: 1024px) { .af-profils .af-profil__texte { padding-right: 36px; } .af-profils .af-profil__texte h2 { font-size: 36px; } } .af-profils__onglets { grid-column: 2; grid-row: 1; } .af-profils .af-profil__photo { grid-column: 1; grid-row: 1 / span 2; margin: 0; position: sticky; top: 0; align-self: start; } .af-profils .af-profil__texte { grid-column: 2; grid-row: 2; } .af-profil__photo img { width: 100%; height: auto; aspect-ratio: 648 / 759; object-fit: cover; } /* La photo du popup occupe toute la hauteur disponible sur desktop plutot * que sa hauteur naturelle (ratio 648/759) : `align-self: start` et * `aspect-ratio` ci-dessus visaient le mobile/tablette, ou la photo garde * ses proportions ; ici le conteneur devient une hauteur fixe pour que * `stretch`/`100%` aient une base de calcul, et l'image recadre en `cover`. * Positionne apres les regles de base : specificite egale, l'ordre tranche. */ @media (min-width: 1024px) { .af-profils__corps { height: calc(100vh - 48px); } .af-profils .af-profil__photo { align-self: stretch; } .af-profils .af-profil__photo img { height: 100%; } } .af-profil__sous-titre + p { margin-block-start: 4px; } /* Onglets : les trois noms en tete de la colonne de droite. * Maquette : meme typographie pour les trois. L'onglet consulte se signale * par le logo affiche au-dessus, pas par un contraste de couleur. * Les paddings reservent la place du logo (30px + 20px) et des deux ronds * qui apparaissent au survol (18px + 14px). */ .af-profils__onglets { position: relative; display: flex; gap: 32px; justify-content: space-between; margin-bottom: 24px; padding-top: 70px; padding-right: 56px; padding-bottom: 24px; } /* Navigation par fleches (mobile uniquement, voir plus bas) : masquee par * defaut, elle ne s'affiche qu'en dessous de 652px, a la place des onglets. */ .af-profils__nav { display: none; } .af-profils__onglet { position: relative; padding: 0; border: 0; background: none; color: var(--wp--preset--color--contrast); font-family: inherit; font-size: 18px; font-weight: 700; letter-spacing: -0.36px; line-height: 1.1; text-align: center; cursor: pointer; } /* Logo au-dessus de l'onglet en cours de consultation : un seul element, * partage par les trois onglets, que le script deplace horizontalement d'une * consultation a l'autre plutot que de le faire apparaitre sur place. */ .af-profils__renard { /* Haut et gauche sont poses en JavaScript : ils dependent de la position * exacte de l'onglet consulte, mesuree sur le rendu. */ position: absolute; width: 78px; height: 30px; transform: translateX(-50%); background-image: url('assets/logo-renard-bordeaux.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0; pointer-events: none; transition: left 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease-out; } .af-profils__renard.est-visible { opacity: 1; } .af-profils__renard.sans-transition { transition: none; } @media (prefers-reduced-motion: reduce) { .af-profils__renard { transition: opacity 0.3s ease-out; } } /* Deux ronds sous le libelle au survol, comme les filtres de la FAQ : * 14px de diametre, 4px d'ecart, fondu de 0.3s. */ .af-profils__onglet-libelle { position: relative; display: block; } .af-profils__onglet-libelle::before, .af-profils__onglet-libelle::after { content: ''; position: absolute; bottom: -18px; width: 14px; height: 14px; border-radius: 50%; background-color: var(--wp--preset--color--base-3); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; } .af-profils__onglet-libelle::before { left: calc(50% - 16px); } .af-profils__onglet-libelle::after { left: calc(50% + 2px); } .af-profils__onglet:not([aria-selected='true']):hover .af-profils__onglet-libelle::before, .af-profils__onglet:not([aria-selected='true']):hover .af-profils__onglet-libelle::after, .af-profils__onglet:not([aria-selected='true']):focus-visible .af-profils__onglet-libelle::before, .af-profils__onglet:not([aria-selected='true']):focus-visible .af-profils__onglet-libelle::after { opacity: 1; } /* Croix de fermeture : pastille rose de 51px, croix de 28px (maquette). */ /* Marqueur : z-index-croix-profils */ .af-profils__fermer { position: absolute; z-index: 1; top: 30px; right: 30px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background-color: var(--wp--preset--color--base-3); color: var(--wp--preset--color--contrast); line-height: 1; cursor: pointer; } .af-profils__fermer svg { width: 22px; height: 22px; display: block; } .af-profils .af-profil { display: none; } .af-profils .af-profil.est-actif { display: contents; } .af-profils .af-profil.est-actif > * { animation: af-profil-fondu 0.35s ease-out; } @keyframes af-profil-fondu { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .af-profils .af-profil.est-actif > * { animation: none; } } /* --------------------------------------------------------------------------- * Popup des profils sur tablette et mobile (maquette node 299-24419) * Marqueur : profils-popup-mobile * * La grille cote a cote laisse place a un empilement en 3 zones dans le * dialogue lui-meme (colonne flex) : la photo pleine largeur en haut, le * nom et le texte qui defilent dessous, les onglets epingles en pied. * * `display: contents` sur la fiche active n a de sens que pour la grille * desktop, ou elle doit remonter photo et texte comme items directs. Ici la * fiche redevient une boite a part entiere : c est elle qui defile, pas le * conteneur global, pour que les onglets restent visibles en toute * circonstance. * ------------------------------------------------------------------------ */ @media (width <= 1023px) { /* Meme piege que .af-modale : `display: flex` sans le filtrer par [open] * s'applique aussi au dialogue ferme, au-dessus du `display: none` par * defaut du navigateur pour `dialog:not([open])`. Le popup restait alors * visible en permanence, en bas de page (l a ou il est ajoute au DOM). */ .af-profils[open] { display: flex; flex-direction: column; width: calc(100vw - 32px); /* `max-height` seul laisse la hauteur se calculer sur le contenu : les * enfants flex:1 (la fiche qui defile) n'ont alors aucune base fixe pour * se dimensionner, ce que les moteurs traitent differemment. Une hauteur * explicite leve l'ambiguite. * * `100vh` compte la hauteur totale de l'ecran, barre d'adresse comprise : * sur tablette Android, ou cette barre reste affichee, le popup depassait * en haut et en bas. `100dvh` suit la zone reellement visible. */ height: calc(100vh - 48px); height: calc(100dvh - 48px); } .af-profils__corps { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: none; overflow: visible; padding: 0; } .af-profils .af-profil.est-actif { display: flex; flex-direction: column; order: 1; flex: 1; min-height: 0; overflow-y: auto; } /* Pleine largeur, flush avec le haut du dialogue : le rayon et le * `overflow: hidden` de .af-profils l arrondissent gratuitement. */ .af-profils .af-profil__photo { grid-column: auto; grid-row: auto; position: static; flex-shrink: 0; /* Meme retrait que le texte (.af-profils .af-profil__texte), pour un * inset uniforme de part et d'autre du popup. */ margin: 24px 24px 0; } .af-profils .af-profil__photo img { aspect-ratio: 1 / 1; } .af-profils .af-profil__texte { grid-column: auto; grid-row: auto; /* Le bloc de texte est le second enfant de la fiche (is-layout-flow) : * le blockGap par defaut lui ajoute ~24px de marge haute en plus du * padding ci-dessous, doublant l'ecart voulu avec la photo. */ margin-block-start: 0; padding: 12px 24px 24px; } .af-profils .af-profil__texte h2 { /* Le titre est le premier enfant du bloc, mais le blockGap par defaut de * WordPress s'applique quand meme (regle generale posterieure a celle du * premier enfant, meme specificite) : sans ce reset, ~24px s'ajoutaient au * padding du bloc de texte, doublant l'ecart avec la photo. */ margin-block-start: 0; font-size: 28px; } /* Pied fixe : la croix (positionnee sur le dialogue, hors de ce flux) le * chevauche visuellement au-dessus de la photo. */ .af-profils__onglets { order: 2; flex-shrink: 0; gap: 12px; padding: 28px 24px 24px; margin-bottom: 0; } .af-profils__onglet { font-size: 13px; } .af-profils__fermer { top: 16px; right: 16px; width: 36px; height: 36px; } .af-profils__fermer svg { width: 18px; height: 18px; } /* Le survol n existe pas au doigt : les deux points signalent l onglet * consulte plutot qu un etat de pointeur. */ .af-profils__onglet[aria-selected='true'] .af-profils__onglet-libelle::before, .af-profils__onglet[aria-selected='true'] .af-profils__onglet-libelle::after { opacity: 1; } } /* --------------------------------------------------------------------------- * Popup des profils sur mobile uniquement (marqueur : profils-popup-fleches) * Les onglets cedent la place a deux fleches precedent/suivant : du texte * fixe qui ne depend pas du nombre de profils, contrairement aux onglets qui * passeraient sur plusieurs lignes des qu'on en ajoute un de plus. * ------------------------------------------------------------------------ */ @media (width <= 651px) { .af-profils__onglets { display: none; } .af-profils__nav { display: flex; order: 2; flex-shrink: 0; justify-content: space-between; padding: 12px 24px 24px; } .af-profils__fleche { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background-color: var(--wp--preset--color--base-3); color: var(--wp--preset--color--contrast); cursor: pointer; } .af-profils__fleche svg { width: 20px; height: 20px; } } /* --------------------------------------------------------------------------- * Popup des profils sur tablette uniquement (marqueur : profils-popup-tablette) * Photo reduite de moitie par rapport au plein retrait pose ci-dessus. * ------------------------------------------------------------------------ */ @media (min-width: 652px) and (max-width: 1023px) { .af-profils .af-profil__photo { width: 67%; margin-inline: auto; } } /* ========================================================================== Page Contact Maquette : champs rose clair en pilule, libelles semibold bordeaux. ========================================================================== */ .af-contact .af-contact__titre { line-height: 1.1; } .af-contact .wpcf7 { margin: 30px 0 0; } /* La grille du formulaire : 10px entre les groupes de champs, 25px avant le consentement puis avant le bouton (maquette). */ .af-contact .wpcf7-form { display: flex; flex-direction: column; gap: 10px; } .af-contact .af-consentement, .af-contact .af-form__envoi { margin-block-start: 15px; } .af-contact .af-form__rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .af-contact .af-champ, .af-contact .af-form__rangee .af-champ { display: block; margin: 0; } .af-contact .af-champ label { display: block; margin-block-end: 5px; color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 16px; } .af-contact .wpcf7-form-control-wrap { display: block; } .af-contact input[type="text"], .af-contact input[type="email"], .af-contact select, .af-contact textarea { box-sizing: border-box; width: 100%; height: 38px; padding: 0 20px; border: 0; border-radius: 20px; background-color: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast); font-family: inherit; font-size: var(--wp--preset--font-size--x-small); font-weight: 300; display: block; line-height: 1; appearance: none; } .af-contact textarea { height: 130px; padding: 10px 20px; line-height: 1.4; resize: vertical; } .af-contact ::placeholder { color: var(--wp--preset--color--contrast); opacity: 1; } .af-contact input[type="text"]:focus-visible, .af-contact input[type="email"]:focus-visible, .af-contact select:focus-visible, .af-contact textarea:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 2px; } /* Chevron du menu deroulant : trace Lucide, 24px, a 10px du bord. */ .af-contact select { padding-inline-end: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a4050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 24px 24px; cursor: pointer; } /* Liste deployee : le navigateur ne rend pas le fond rose du champ, il faut * habiller la liste elle-meme. Support partiel selon les navigateurs. */ .af-contact select option { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* Liste deroulante entierement stylisable. Le rendu natif d'un