/* ========================================================================== Cypress - socle de la direction Sous-bois Aligne les valeurs de base du theme Hello sur la palette du site. Hello sort par defaut un texte #333333 (gris pur) et des liens #CC3366 (rose), tous deux hors palette et visibles des qu'un element n'est pas style par Elementor, c'est-a-dire surtout dans le contenu des articles. Cette feuille est chargee depuis cypress-site.php avec une version basee sur la date du fichier : contrairement au style.css du theme enfant, dont Hello fige la version a 2.0.0, toute modification est donc servie immediatement sans purge de cache. ========================================================================== */ :root { --cypress-papier: #F6F7F4; --cypress-surface: #FFFFFF; --cypress-encre: #16211C; --cypress-attenue: #5A6862; --cypress-accent: #1C5D3A; --cypress-ambre: #C97A20; --cypress-filet: #DDE2DC; --cypress-profond: #0E1A14; --cypress-sur-profond: #A8B5AE; } body { background-color: var(--cypress-papier); color: var(--cypress-encre); } a { color: var(--cypress-accent); } a:hover, a:focus { color: var(--cypress-profond); } /* Anneau de focus dans la palette, au lieu du contour noir du navigateur. Visible uniquement au clavier, donc sans halo parasite apres un clic. */ :focus-visible { outline: 2px solid var(--cypress-accent); outline-offset: 3px; } .elementor-button:focus:not(:focus-visible) { outline: none; } /* -------------------------------------------------------------------------- Apparition au defilement Une page pilier est longue : sans rien, tout arrive a plat et rien ne marque l'entree dans une nouvelle section. Les titres de section, les cartes de boucle et les encarts montent de 18px en se revelant, en cascade entre freres immediats. Le masquage est conditionne a la classe cypress-anim, posee sur depuis le head. Sans JavaScript, sans ce fichier, ou si le lecteur demande moins de mouvement, la classe n'est jamais posee ou est retiree : aucun contenu ne peut rester invisible. Ce bloc est place tot dans la feuille a dessein : les regles de survol des composants viennent ensuite et reprennent donc la main sur transform. -------------------------------------------------------------------------- */ .cypress-anim .cypress-titre-section, .cypress-anim .e-loop-item, .cypress-anim .cypress-encart, .cypress-anim .cypress-revele { opacity: 0; transform: translateY(18px); } .cypress-anim .est-visible { opacity: 1; transform: none; transition: opacity 720ms cubic-bezier(.2,.7,.3,1) var(--cypress-retard, 0ms), transform 720ms cubic-bezier(.2,.7,.3,1) var(--cypress-retard, 0ms); } /* -------------------------------------------------------------------------- Logotype La taille se pose ici, pas dans le widget : le reglage de largeur du widget image n'emet qu'un max-width. On raisonne en hauteur, la seule dimension qui compte pour aligner un logotype sur une barre de navigation. -------------------------------------------------------------------------- */ .cypress-logotype a, .cypress-logotype .elementor-widget-container { display: block; line-height: 0; } .cypress-logotype img { display: block; height: 38px; width: auto; max-width: none; /* Pas d'etalonnage photo ici : c'est un aplat, pas une image. */ filter: none; } .cypress-logotype--clair img { height: 34px; } @media (max-width: 767px) { .cypress-logotype img { height: 30px; } .cypress-logotype--clair img { height: 28px; } } /* -------------------------------------------------------------------------- Visuels de cartes Le reglage de largeur du widget image d'Elementor n'emet que max-width : avec une hauteur fixe et object-fit, l'image garde sa largeur naturelle calculee sur son ratio et flotte au centre de sa colonne. On force la largeur ici, une fois pour toutes. -------------------------------------------------------------------------- */ .cypress-media, .cypress-media .elementor-widget-container { width: 100%; } /* Le lien que le widget enroule autour de l'image est en inline-block sans largeur : il se retracte donc sur la largeur naturelle de l'image, et le width:100% de l'image se resout contre cette largeur retractee au lieu de la colonne. L'image restait a sa taille propre des que la colonne etait plus large qu'elle. Il faut ouvrir le lien avant de contraindre l'image. */ .cypress-media a, .cypress-media picture, .cypress-media figure { display: block; width: 100%; margin: 0; } .elementor-widget.cypress-media img, .cypress-media img { width: 100%; display: block; border-radius: 4px; /* Etalonnage unifie : les photographies du site proviennent de sources heterogenes et ne partagent aucun rendu. Une legere desaturation les ramene dans une meme famille et evite l'effet banque d'images. La couleur revient pleine au survol, ce qui recompense l'intention de cliquer. */ filter: saturate(0.86) contrast(1.03); transition: transform 420ms ease, filter 420ms ease; } .cypress-carte:hover .cypress-media img { filter: saturate(1.04) contrast(1); } /* Une image qui touche le bord de l'ecran n'est pas une surface contenue : elle ne prend pas de rayon. */ .cypress-media--nu img, .cypress-carte--fleche .cypress-media--nu { border-radius: 0; } /* Le zoom au survol est une affordance, pas une decoration : il signale que la vignette est cliquable. Il reste sous le seuil du perceptible-agressif et se desactive pour qui demande moins de mouvement. */ .cypress-carte .cypress-media { overflow: hidden; border-radius: 4px; } .cypress-carte:hover .cypress-media img { transform: scale(1.04); } /* -------------------------------------------------------------------------- Fleche d'acces Pastille ambre posee dans l'angle de la vignette. Ce n'est pas une decoration : elle signale que la carte entiere est cliquable, la ou une image seule ne dit rien. Elle se deplace vers sa direction au survol. -------------------------------------------------------------------------- */ .cypress-carte--fleche .cypress-media { position: relative; } .cypress-carte--fleche .cypress-media::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 999px; background-color: var(--cypress-ambre); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 19px 19px; transition: transform 280ms cubic-bezier(.2,.7,.3,1), background-color 280ms ease; pointer-events: none; } .cypress-carte--fleche:hover .cypress-media::after { transform: translate(4px, -4px); background-color: var(--cypress-accent); } /* -------------------------------------------------------------------------- Encarts pratiques Surfaces blanches posees sur le papier. Le filet de tete passe a l'ambre au survol et la carte se souleve : assez pour que la page respire, trop peu pour distraire de la lecture. -------------------------------------------------------------------------- */ .cypress-encart { position: relative; background-color: var(--cypress-surface); border-radius: 4px; border-top: 2px solid var(--cypress-filet); box-shadow: 0 1px 2px rgba(22, 33, 28, 0.05); transition: transform 280ms ease, box-shadow 280ms ease; } /* Le filet de tete ne change pas de couleur d'un coup : il se deroule de gauche a droite par-dessus le filet gris. Le mouvement dit "tu es ici" mieux qu'un aplat qui change de teinte. */ .cypress-encart::before { content: ""; position: absolute; top: -2px; left: 0; width: 0; height: 2px; background-color: var(--cypress-ambre); transition: width 520ms cubic-bezier(.2,.7,.3,1); } .cypress-encart:hover::before { width: 100%; } .cypress-encart:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(22, 33, 28, 0.11); } /* Le chiffre reste en retrait tant qu'on ne s'interesse pas a la carte : il numerote sans crier. Au survol il reprend sa pleine densite et grandit, ce qui donne a la rangee un point de mire qui bouge avec le curseur. */ .cypress-chiffre-encart .elementor-heading-title { display: block; line-height: 1; opacity: 0.32; transform-origin: left center; transition: opacity 360ms ease, transform 360ms cubic-bezier(.2,.7,.3,1); } .cypress-encart:hover .cypress-chiffre-encart .elementor-heading-title { opacity: 1; transform: scale(1.14); } /* -------------------------------------------------------------------------- Tuiles de rubrique Les cellules du bento de la page d'accueil sont des conteneurs-liens a image de fond : l'encart blanc ne leur convient pas, il masquerait la photo. Elles reprennent donc la grammaire des encarts - filet ambre qui se deroule, soulevement - appliquee a une surface photographique. -------------------------------------------------------------------------- */ .cypress-tuile { position: relative; overflow: hidden; border-radius: 4px; text-decoration: none; transition: transform 320ms cubic-bezier(.2,.7,.3,1), box-shadow 320ms ease; } /* Le filet passe par ::after et non ::before : sur un conteneur qui porte une image de fond, Elementor emet sa propre regle ::before pour la surcouche, scopee en .elementor-{page} .elementor-element.elementor-element-{id}, soit une specificite de 0-3-0 qu'une simple classe ne peut pas depasser. Les encarts, eux, n'ont pas d'image de fond : leur ::before reste disponible. */ .cypress-tuile::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 3px; z-index: 2; background-color: var(--cypress-ambre); transition: width 520ms cubic-bezier(.2,.7,.3,1); pointer-events: none; } .cypress-tuile:hover::after, .cypress-tuile:focus-visible::after { width: 100%; } .cypress-tuile:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(14, 26, 20, 0.24); } /* Sur fond profond, le vert d'accent n'a plus de contraste : le titre qui reagit au survol passe a l'ambre. */ .cypress-carte--sombre:hover .elementor-widget-theme-post-title a { color: var(--cypress-ambre); } /* -------------------------------------------------------------------------- Grille d'encarts align-items:stretch ne suffisait pas : une hauteur en pourcentage sur un parent sans hauteur definie retombe sur auto et annule l'etirement. En grille, grid-auto-rows:1fr donne la meme hauteur a toutes les rangees, donc aux quatre cartes et pas seulement a deux. -------------------------------------------------------------------------- */ .cypress-grille-encarts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } /* Les largeurs en pourcentage posees par Elementor sur les cellules n'ont plus de sens dans une grille : la piste fait deja la largeur. */ .cypress-grille-encarts > * { width: auto; max-width: none; } @media (max-width: 767px) { .cypress-grille-encarts { grid-template-columns: 1fr; grid-auto-rows: auto; } } /* -------------------------------------------------------------------------- Pastille de manchette Le nombre de guides d'une rubrique est le seul chiffre de la page : il a droit a un traitement de chiffre cle de presse. Disque blanc - la meme surface que les cartes, donc le dispositif reste dans le systeme - cercle d'un filet ambre pose en retrait, qui se deploie vers l'exterieur a l'apparition. Un disque ambre plein aurait fait pastille d'infographie et aurait surtout brule l'ambre, reserve aux etiquettes et aux affordances. -------------------------------------------------------------------------- */ .cypress-pastille { position: relative; width: 244px; height: 244px; max-width: 100%; border-radius: 999px; background-color: var(--cypress-surface); box-shadow: 0 1px 2px rgba(22, 33, 28, 0.05); } .cypress-pastille::before { content: ""; position: absolute; inset: -20px; border: 1px solid var(--cypress-ambre); border-radius: inherit; opacity: 0.45; pointer-events: none; } /* Le chiffre doit tenir sa largeur pendant qu'il defile : sinon le disque entier tremble a chaque changement de nombre de caracteres. La largeur est figee en JavaScript sur la valeur finale avant le depart. */ .cypress-compteur .elementor-heading-title { display: inline-block; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } @media (max-width: 1024px) { .cypress-pastille { width: 188px; height: 188px; } .cypress-pastille::before { inset: -15px; } } @media (max-width: 767px) { .cypress-pastille { width: 152px; height: 152px; } .cypress-pastille::before { inset: -12px; } } /* Le cercle ne se contente pas d'arriver avec le disque : il s'ouvre depuis le centre, un temps apres, ce qui donne au chiffre son moment. */ .cypress-anim .cypress-pastille::before { opacity: 0; transform: scale(0.8); } .cypress-anim .cypress-pastille.est-visible::before { opacity: 0.45; transform: scale(1); transition: opacity 900ms ease 260ms, transform 900ms cubic-bezier(.2,.7,.3,1) 260ms; } /* -------------------------------------------------------------------------- Page 404 Une page d'erreur qui se contente d'annoncer l'erreur renvoie le lecteur au bouton precedent. Celle-ci lui donne trois sorties : un champ de recherche, les rubriques avec leur volume reel, et les dernieres publications. -------------------------------------------------------------------------- */ .cypress-404-chiffre .elementor-heading-title { display: block; line-height: 1; letter-spacing: -0.04em; } /* Cinq rubriques : une grille qui se repartit toute seule plutot qu'un nombre de colonnes fige, pour ne pas casser le jour ou il y en aura six. */ .cypress-grille-rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); grid-auto-rows: 1fr; } .cypress-grille-rubriques > * { width: auto; max-width: none; text-decoration: none; } /* Etiquette fixe, la ou il n'y a pas de rubrique a lier : l'ambre n'existe pas comme couleur globale du kit, il vient de la palette CSS. La classe est doublee a dessein. Le kit Elementor pose la couleur des titres en .elementor-kit-XXXX .elementor-widget-heading .elementor-heading-title, soit 0-3-0 : une classe simple passe dessous et l'etiquette ressortait en vert. Doubler la classe egalise la specificite, et cette feuille est chargee apres celle du kit. */ .cypress-etiquette-titre.cypress-etiquette-titre .elementor-heading-title { color: var(--cypress-ambre); } /* -------------------------------------------------------------------------- Champ de recherche -------------------------------------------------------------------------- */ .cypress-recherche .e-search-form { display: flex; align-items: stretch; gap: 10px; } .cypress-recherche .e-search-input-wrapper { position: relative; flex: 1 1 auto; min-width: 0; } .cypress-recherche .e-search-input { width: 100%; padding: 15px 18px; border: 1px solid var(--cypress-filet); border-radius: 4px; background-color: var(--cypress-surface); color: var(--cypress-encre); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 16px; letter-spacing: 0; text-transform: none; transition: border-color 220ms ease, box-shadow 220ms ease; } .cypress-recherche .e-search-input::placeholder { color: var(--cypress-attenue); opacity: 1; } .cypress-recherche .e-search-input:focus { outline: none; border-color: var(--cypress-accent); box-shadow: 0 0 0 3px rgba(28, 93, 58, 0.12); } /* Le widget pose son propre fond anthracite avec une specificite de 0-2-0 : il faut descendre le selecteur d'un cran pour reprendre la main. */ .cypress-recherche .e-search .e-search-submit, .cypress-recherche .e-search-submit { flex: 0 0 auto; padding: 0 26px; border: 0; border-radius: 4px; background-color: var(--cypress-accent); color: var(--cypress-papier); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 220ms ease; } .cypress-recherche .e-search .e-search-submit:hover, .cypress-recherche .e-search .e-search-submit:focus, .cypress-recherche .e-search-submit:hover, .cypress-recherche .e-search-submit:focus { background-color: var(--cypress-profond); color: var(--cypress-papier); } /* Resultats en direct proposes par le widget. */ .cypress-recherche .e-search-results-container { background-color: var(--cypress-surface); border: 1px solid var(--cypress-filet); border-radius: 4px; box-shadow: 0 12px 28px rgba(22, 33, 28, 0.10); } @media (max-width: 767px) { .cypress-recherche .e-search-form { flex-wrap: wrap; } .cypress-recherche .e-search-submit { flex: 1 1 100%; padding: 14px 26px; } } /* -------------------------------------------------------------------------- Ligne de liste Les guides restants se lisent en liste, pas en grille. Une ligne de liste n'a pas de bord a soulever : elle avance vers la droite et prend le fond blanc, ce qui la detache du papier le temps du survol. -------------------------------------------------------------------------- */ .cypress-ligne { /* La vignette reste a gauche du titre, y compris en mobile : le conteneur passerait sinon a la ligne, faute de largeur minimale de retrait sur la colonne de texte, et la liste se transformerait en empilement d'images pleine largeur. */ flex-wrap: nowrap; border-radius: 4px; transition: background-color 260ms ease, transform 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease; } .cypress-ligne > * { /* Sans cela, la largeur minimale d'un flex item est celle de son plus long mot : le titre refuse de se retrecir et pousse le retour a la ligne. */ min-width: 0; } .cypress-ligne:hover { background-color: var(--cypress-surface); transform: translateX(8px); box-shadow: 0 6px 18px rgba(22, 33, 28, 0.07); } /* -------------------------------------------------------------------------- Menu deroulant mobile Elementor n'expose pas de fond pour l'element actif du menu deroulant et retombe sur une valeur sombre : la rubrique en cours s'affichait en vert sur anthracite, illisible. On reprend la main : fond blanc comme les autres entrees, texte vert, et un filet ambre a gauche pour marquer la position - le meme ambre que les etiquettes de rubrique. -------------------------------------------------------------------------- */ .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, .elementor-nav-menu--dropdown .current-menu-item > .elementor-item { background-color: var(--cypress-surface); color: var(--cypress-accent); box-shadow: inset 3px 0 0 0 var(--cypress-ambre); } .elementor-nav-menu--dropdown .elementor-item:focus, .elementor-nav-menu--dropdown .elementor-item:hover { background-color: var(--cypress-papier); color: var(--cypress-accent); } /* Chaque entree est separee par un filet, comme les lignes d'un sommaire. */ .elementor-nav-menu--dropdown .elementor-nav-menu > li + li > .elementor-item { border-top: 1px solid var(--cypress-filet); } /* Le titre d'une carte suit la couleur d'accent quand on survole la carte entiere, pas seulement le texte du lien. */ .cypress-carte:hover .elementor-widget-theme-post-title a { color: var(--cypress-accent); } /* Dans une ligne de liste, la date passe a l'ambre : c'est le seul repere de reperage chronologique, il merite de reagir. */ .cypress-ligne .elementor-widget-heading .elementor-heading-title { transition: color 260ms ease; } .cypress-ligne:hover .elementor-widget-heading .elementor-heading-title { color: var(--cypress-ambre); } /* -------------------------------------------------------------------------- Titre de section Le filet ne souligne plus le titre, il part de sa droite et court jusqu'au bord du conteneur, cale sur la ligne de base. C'est le dispositif de presse qui donne son rythme a une page longue, et il se lit comme une signature la ou un soulignement se lit comme un reglage par defaut. -------------------------------------------------------------------------- */ .cypress-titre-section .elementor-heading-title { display: flex; align-items: baseline; gap: 24px; } .cypress-titre-section .elementor-heading-title::after { content: ""; flex: 1 1 auto; height: 1px; min-width: 40px; background-color: var(--cypress-filet); transform: translateY(-8px); } .cypress-titre-section--clair .elementor-heading-title::after { background-color: rgba(246, 247, 244, 0.24); } @media (max-width: 767px) { .cypress-titre-section .elementor-heading-title { gap: 16px; } } /* ========================================================================== ARTICLE Les valeurs de police ne sont jamais ecrites en dur ici : on reprend les variables que le kit Elementor expose deja (--e-global-typography-*), pour qu'un changement de direction dans le kit se propage aussi dans le corps des articles. Le repli sur inherit couvre le cas ou le kit change de nom de token. ========================================================================== */ /* -------------------------------------------------------------------------- Manchette : etiquette de rubrique et signature -------------------------------------------------------------------------- */ /* Le widget titre d'Elementor impose `color: inherit` aux liens qu'il contient, avec une specificite de 0-3-1 : une simple classe ne passe jamais devant, et l'etiquette reprenait donc la couleur du titre - vert accent - au lieu de l'ambre. D'ou un vert sur vert profond illisible des que l'encadre est passe en sombre. */ .elementor-widget-heading .elementor-heading-title a.cypress-etiquette, a.cypress-etiquette, .cypress-etiquette { display: inline-block; color: var(--cypress-ambre); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; transition: border-bottom-color 220ms ease; } .cypress-etiquette:hover, .cypress-etiquette:focus { color: var(--cypress-ambre); border-bottom-color: var(--cypress-ambre); } .cypress-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; color: var(--cypress-attenue); } .cypress-meta-auteur { color: var(--cypress-encre); } /* La date de mise a jour est le signal de fraicheur d'un guide long : elle porte la couleur d'accent plutot que le gris des autres metadonnees. */ .cypress-meta-maj { color: var(--cypress-ambre); } .cypress-meta-sep { display: inline-block; width: 3px; height: 3px; border-radius: 999px; background-color: var(--cypress-filet); } /* -------------------------------------------------------------------------- Photo de manchette Elle s'etire sur toute la hauteur de la colonne de texte : calee en bas a hauteur fixe, elle laissait au-dessus d'elle un vide qui grandissait avec la longueur du titre. La marge negative posee sur la colonne la fait depasser de 104px sous la bande papier, si bien que la photo repose sur le blanc de l'article. -------------------------------------------------------------------------- */ /* L'encadre de titre chevauche la photo. C'est lui qui porte l'information, donc c'est lui qui prend la lumiere : surface blanche detachee du papier par une ombre portee large et basse, plutot qu'un cadre. */ .cypress-encadre-manchette { border-radius: 4px; box-shadow: 0 18px 44px rgba(22, 33, 28, 0.13); } /* Variante sombre. En blanc sur le papier, l'encadre ne se detachait pas : #FFFFFF sur #F6F7F4, il n'y a pas de contraste, et on ne lisait pas une superposition mais deux tuiles qui se touchent. Augmenter le recouvrement n'y changeait rien tant que les deux surfaces avaient la meme valeur. Le vert profond est la surface que le site emploie deja pour ses moments forts - le dossier des pages piliers, l'education positive sur la home. */ .cypress-encadre-manchette--sombre { box-shadow: 0 24px 60px rgba(14, 26, 20, 0.28); } /* Le widget chapo n'emet pas de conteneur interne : la couleur posee par la globale Elementor ne trouve pas sa cible et le texte reste a l'encre, donc illisible sur le vert profond. On la pose ici, ou elle s'applique. */ .cypress-encadre-manchette--sombre .elementor-widget-theme-post-excerpt, .cypress-encadre-manchette--sombre .elementor-widget-theme-post-excerpt p { color: var(--cypress-sur-profond); } .cypress-encadre-manchette--sombre .cypress-meta { color: var(--cypress-sur-profond); } .cypress-encadre-manchette--sombre .cypress-meta-auteur { color: var(--cypress-papier); } .cypress-encadre-manchette--sombre .cypress-meta-sep { background-color: rgba(246, 247, 244, 0.32); } /* L'ambre garde sa lisibilite sur le vert profond : on ne le remplace pas, c'est lui qui porte l'etiquette de rubrique partout ailleurs sur le site. */ .cypress-encadre-manchette--sombre .cypress-etiquette:hover, .cypress-encadre-manchette--sombre .cypress-etiquette:focus { border-bottom-color: var(--cypress-ambre); } /* L'encadre reste cale sur la grille du site alors que son conteneur, lui, fait toute la largeur de l'ecran pour que la photo puisse mordre le bord droit. La gouttiere se calcule ici sans vw : 100% vaut la largeur du conteneur, barre de defilement deja deduite, la ou 100vw l'inclut et provoquerait un debordement de quelques pixels. */ @media (min-width: 1025px) { .cypress-encadre-manchette { margin-left: max(32px, calc((100% - 1280px) / 2)); } /* La photo part sous l'encadre et court jusqu'au bord de l'ecran : elle n'a pas de coin arrondi a droite, puisqu'elle n'y a plus de bord. */ .cypress-manchette .cypress-media img { border-top-right-radius: 0; border-bottom-right-radius: 0; } } /* En colonne, le chevauchement passe de l'horizontale a la verticale : la photo d'abord, l'encadre remonte par-dessus son bas. A partir de la tablette, parce qu'en dessous de 1025px l'encadre devient nettement plus haut que la photo et le cote a cote se deregle. */ @media (max-width: 1024px) { .cypress-photo-manchette { order: 1; } .cypress-encadre-manchette { order: 2; align-self: center; } } /* Le rapport est impose, pas subi : aspect-ratio donne sa hauteur a l'image quelle que soit la source, et object-fit recadre. Une photo etiree sur la hauteur d'un bloc de titre variable produisait un cadrage different a chaque article, d'autant plus vertical que le titre etait long. */ .cypress-photo-manchette img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center center; } /* Repli pour les navigateurs sans aspect-ratio : une hauteur fixe vaut mieux qu'une image a sa taille naturelle sous un bloc de titre. */ @supports not (aspect-ratio: 16 / 9) { .cypress-photo-manchette img { height: 56.25vw; max-height: 675px; } } /* -------------------------------------------------------------------------- Sommaire lateral Le noeud vient du plugin LuckyWP, deplace ici par cypress-article.js. On n'en garde que la structure : toute son apparence est refaite. -------------------------------------------------------------------------- */ .cypress-rail--vide { display: none; } /* Sous 1025px la colonne laterale passe au-dessus de l'article : un sommaire place apres 3 000 mots ne sert a personne. */ @media (max-width: 1024px) { .cypress-rail { order: -1; } } .cypress-rail .lwptoc { margin: 0; padding: 0; background: none; border: 0; } @media (min-width: 1025px) { .cypress-rail .lwptoc { position: sticky; top: 40px; } } .cypress-rail .lwptoc_header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cypress-filet); } .cypress-rail .lwptoc_title { color: var(--cypress-attenue); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* Le plugin ecrit display:none en style en ligne quand le repli est actif. Le reglage a ete change cote plugin, cette regle n'est qu'une securite si quelqu'un le repasse en "replie" depuis l'administration. */ .cypress-rail .lwptoc_items { display: block !important; } .cypress-rail .lwptoc_toggle { display: none; } .cypress-rail .lwptoc_item > a { display: block; padding: 9px 0 9px 16px; border-left: 2px solid var(--cypress-filet); color: var(--cypress-attenue); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.4; text-decoration: none; transition: color 220ms ease, border-left-color 220ms ease; } .cypress-rail .lwptoc_item > a:hover { color: var(--cypress-accent); border-left-color: var(--cypress-attenue); } /* Section en cours de lecture, posee par cypress-article.js. */ .cypress-rail .lwptoc_item > a.est-actif { color: var(--cypress-encre); border-left-color: var(--cypress-ambre); } /* -------------------------------------------------------------------------- Titre de page Une page n'a pas de rubrique, donc pas d'etiquette ambre pour l'annoncer. Le filet sous le titre reprend le meme signe au meme endroit que sur les H3 du corps : la page reste dans la famille sans emprunter un dispositif qui ne lui appartient pas. -------------------------------------------------------------------------- */ .cypress-titre-page .elementor-heading-title { position: relative; display: inline-block; padding-bottom: 22px; } .cypress-titre-page .elementor-heading-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 2px; background-color: var(--cypress-ambre); } /* -------------------------------------------------------------------------- Corps de l'article : rythme general -------------------------------------------------------------------------- */ .cypress-corps { color: var(--cypress-encre); } .cypress-corps > .elementor-widget-container > *:first-child, .cypress-corps > *:first-child { margin-top: 0; } .cypress-corps p { margin: 0 0 22px; } /* 3 474 occurrences de sur 70 articles : a 700 la page entiere clignote. 600 marque sans crier. */ .cypress-corps strong, .cypress-corps b { font-weight: 600; color: var(--cypress-encre); } .cypress-corps a { color: var(--cypress-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(28, 93, 58, 0.35); transition: color 200ms ease, text-decoration-color 200ms ease; } .cypress-corps a:hover, .cypress-corps a:focus { color: var(--cypress-profond); text-decoration-color: var(--cypress-ambre); } .cypress-corps hr { border: 0; height: 1px; background-color: var(--cypress-filet); margin: 56px 0; } /* -------------------------------------------------------------------------- Titres du corps Les guides comptent en moyenne sept H2 et une dizaine de H3 : sans hierarchie visuelle forte, un article de 3 000 mots se lit comme un mur. Le H2 est donc traite en ouverture de chapitre - filet pleine largeur et numero d'ordre calcule tout seul par un compteur CSS, qui se cale dans la marge des que l'ecran le permet. Le H3 reprend le tiret ambre des listes, pour que les deux niveaux se distinguent d'un coup d'oeil. -------------------------------------------------------------------------- */ /* Le H2 ouvre un chapitre : il lui faut un signe a lui, qui ne soit ni le tiret des H3 et des puces, ni le filet sous le titre de page, ni un numero - trois primitives deja prises. C'est donc un filet de section complet, a la maniere d'un journal : il court sur toute la mesure, et sa tete est en ambre sur 72px. Un seul objet, une seule regle, et le pseudo-element ::before reste libre. Le filet de 1px en gris pale qui tenait ce role etait invisible a l'ecran. */ .cypress-corps h2 { position: relative; margin: 76px 0 20px; padding-top: 28px; border-top: 0; background-image: linear-gradient( to right, var(--cypress-ambre) 0, var(--cypress-ambre) 72px, var(--cypress-filet) 72px, var(--cypress-filet) 100% ); background-repeat: no-repeat; background-size: 100% 2px; background-position: left top; } /* Le kit ne declare pas de typographie pour les titres du contenu : H2 et H3 heritaient donc du serif du texte courant, a 32 et 28px et a la meme graisse. Deux niveaux de titre separes par 4px dans la meme police, c'est une hierarchie qui n'existe pas. On repasse les titres dans la police d'affichage du kit - le changement de famille fait a lui seul la moitie du travail - et on creuse l'ecart de corps. */ .cypress-corps h2, .cypress-corps h3 { font-family: var(--e-global-typography-primary-font-family, inherit); font-weight: var(--e-global-typography-primary-font-weight, 700); color: var(--cypress-encre); } .cypress-corps h2 { font-size: 32px; line-height: 1.14; letter-spacing: -0.015em; } .cypress-corps h3 { position: relative; margin: 48px 0 16px; padding-left: 0; padding-bottom: 13px; font-size: 22px; line-height: 1.28; letter-spacing: -0.01em; } /* Le filet passe SOUS le titre. A gauche, il se confondait avec le tiret des puces - deux tirets ambre de meme nature a deux niveaux differents - et on ne distinguait plus un sous-titre d'un element de liste. */ .cypress-corps h3::before { content: ""; position: absolute; left: 0; top: auto; bottom: 0; width: 30px; height: 2px; background-color: var(--cypress-ambre); } /* L'echelle des titres doit rester decroissante a toutes les largeurs. En mobile, le H1 tombait a 26px pendant que les H2 du contenu restaient a 27 : la hierarchie s'inversait. Le H1 est remonte a 30 dans le kit, et les titres du corps redescendent ici par paliers. */ @media (max-width: 1024px) { .cypress-corps h2 { font-size: 28px; } .cypress-corps h3 { font-size: 21px; } } @media (max-width: 767px) { .cypress-corps h2 { font-size: 25px; margin-top: 56px; padding-top: 22px; /* La tete ambre se raccourcit avec la mesure. */ background-image: linear-gradient( to right, var(--cypress-ambre) 0, var(--cypress-ambre) 48px, var(--cypress-filet) 48px, var(--cypress-filet) 100% ); } .cypress-corps h3 { font-size: 20px; } } .cypress-corps h4 { margin: 36px 0 12px; color: var(--cypress-attenue); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* La numerotation automatique des H2 a ete retiree : dans un article qui contient une liste numerotee, les "01 02 03" des elements de liste et le numero du chapitre partageaient le meme ambre au meme endroit, et on ne savait plus lequel comptait quoi. Le filet pleine largeur et la police d'affichage tiennent la hierarchie a eux seuls. La classe cypress-corps--page reste posee sur les pages : elle ne distingue plus rien aujourd'hui, mais c'est le point d'accroche si les deux contextes doivent diverger plus tard. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Listes Les puces natives sont posees par le navigateur, pas par la direction. Un tiret ambre, le meme que celui des H3, rattache les listes au reste. -------------------------------------------------------------------------- */ .cypress-corps ul, .cypress-corps ol { list-style: none; margin: 26px 0; padding-left: 0; } .cypress-corps li { position: relative; margin-bottom: 12px; } .cypress-corps ul > li { padding-left: 30px; } .cypress-corps ul > li::before { content: ""; position: absolute; left: 2px; top: 0.68em; width: 12px; height: 2px; background-color: var(--cypress-ambre); } /* Une liste imbriquee ne merite pas le meme poids que son parent. */ .cypress-corps li ul > li::before { width: 8px; background-color: var(--cypress-filet); } .cypress-corps ol { counter-reset: cypress-puce; } .cypress-corps ol > li { padding-left: 38px; counter-increment: cypress-puce; } .cypress-corps ol > li::before { content: counter(cypress-puce, decimal-leading-zero); position: absolute; left: 0; top: 0.18em; color: var(--cypress-ambre); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 0.78em; font-weight: 700; letter-spacing: 0.04em; } .cypress-corps li ul, .cypress-corps li ol { margin: 12px 0 0; } /* -------------------------------------------------------------------------- Listes de definitions Dans les articles du site, dl/dt/dd n'est jamais un glossaire : c'est une foire aux questions, le dt portant la question et le dd la reponse. Elle est donc traitee comme un encart, pas comme du texte courant - 38 articles sur 70 en contiennent une. -------------------------------------------------------------------------- */ .cypress-corps dl { margin: 48px 0; padding: 4px 30px 26px; background-color: var(--cypress-papier); border-top: 2px solid var(--cypress-ambre); border-radius: 4px; } .cypress-corps dt { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--cypress-filet); color: var(--cypress-encre); font-family: var(--e-global-typography-secondary-font-family, inherit); font-weight: 600; font-size: 17px; line-height: 1.45; } .cypress-corps dt:first-of-type { margin-top: 0; padding-top: 26px; border-top: 0; } .cypress-corps dd { margin: 10px 0 0; color: var(--cypress-attenue); font-size: 0.94em; } @media (max-width: 767px) { .cypress-corps dl { padding-left: 20px; padding-right: 20px; } } /* -------------------------------------------------------------------------- Tableaux 48 articles sur 70 en contiennent, souvent a quatre colonnes. Le conteneur defilable est pose par cypress-article.js : sans lui, une largeur minimale de 520px ferait deborder la page entiere en mobile au lieu du seul tableau. -------------------------------------------------------------------------- */ .cypress-tableau { margin: 44px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cypress-filet); border-radius: 4px; } .cypress-corps table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9em; } .cypress-corps thead th { background-color: var(--cypress-profond); color: var(--cypress-papier); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; padding: 14px 18px; } .cypress-corps tbody td, .cypress-corps tbody th { padding: 14px 18px; border-top: 1px solid var(--cypress-filet); vertical-align: top; } /* Certains tableaux portent un en-tete de ligne plutot que de colonne. */ .cypress-corps tbody th { text-align: left; font-weight: 600; color: var(--cypress-encre); } .cypress-corps tbody tr:nth-child(even) { background-color: var(--cypress-papier); } /* -------------------------------------------------------------------------- Images et incrustations -------------------------------------------------------------------------- */ .cypress-corps figure { margin: 44px 0; } .cypress-corps figure img { width: 100%; } .cypress-corps img { max-width: 100%; height: auto; display: block; border-radius: 4px; /* Le meme etalonnage que les vignettes des cartes : les illustrations viennent des memes sources heterogenes. */ filter: saturate(0.86) contrast(1.03); } .cypress-corps figcaption { margin-top: 12px; color: var(--cypress-attenue); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 14px; line-height: 1.5; } .cypress-incruste { position: relative; margin: 44px 0; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background-color: var(--cypress-filet); } .cypress-incruste iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* -------------------------------------------------------------------------- Citation Aucun article n'en contient aujourd'hui. Le style est pose pour que la premiere citation ecrite tombe juste sans retoucher quoi que ce soit. -------------------------------------------------------------------------- */ .cypress-corps blockquote { margin: 48px 0; padding: 2px 0 2px 30px; border-left: 2px solid var(--cypress-ambre); color: var(--cypress-encre); font-size: 1.22em; line-height: 1.5; font-style: italic; } .cypress-corps blockquote p:last-child { margin-bottom: 0; } .cypress-corps blockquote cite { display: block; margin-top: 14px; color: var(--cypress-attenue); font-family: var(--e-global-typography-etiquette-font-family, inherit); font-size: 12px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; } /* -------------------------------------------------------------------------- Encart auteur Construit avec le widget Elementor, en element frere du contenu. Simple Author Box, l'extension qu'il remplace, s'accrochait au filtre the_content : son encart etait rendu A L'INTERIEUR de .cypress-corps, et toute la typographie d'article lui tombait dessus par accident. L'extension a ete desinstallee, la regle qui masquait son encart est donc retiree. -------------------------------------------------------------------------- */ .cypress-auteur { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--cypress-filet); } .cypress-auteur-box .elementor-author-box { display: block; text-align: left; } .cypress-auteur-box .elementor-author-box__name { margin: 0 0 6px; } /* La bio est de la prose, pas une metadonnee : elle reprend le serif de lecture du site, a un corps intermediaire entre la signature de manchette et le texte de l'article. Le token `meta` du kit, lui, est une police d'interface - juste pour une ligne de date, illisible sur 320 signes. */ .cypress-auteur-box .elementor-author-box__bio { margin: 0; font-family: var(--e-global-typography-text-font-family, inherit); font-size: 16px; line-height: 1.6; /* Une bio se lit sur une mesure courte, pas sur la largeur de l'article. */ max-width: 62ch; } @media (prefers-reduced-motion: reduce) { .cypress-media img, .cypress-carte:hover .cypress-media img, .cypress-carte--fleche .cypress-media::after, .cypress-carte--fleche:hover .cypress-media::after, .cypress-encart, .cypress-encart:hover, .cypress-chiffre-encart .elementor-heading-title, .cypress-encart:hover .cypress-chiffre-encart .elementor-heading-title, .cypress-ligne, .cypress-ligne:hover { transition: none; transform: none; } /* Le filet de tete reste, mais il apparait d'un coup plutot que de se derouler, et le chiffre garde sa pleine densite. */ .cypress-encart::before, .cypress-encart:hover::before { transition: none; } .cypress-chiffre-encart .elementor-heading-title { opacity: 1; } .cypress-anim .cypress-titre-section, .cypress-anim .e-loop-item, .cypress-anim .cypress-encart, .cypress-anim .cypress-revele { opacity: 1; transform: none; } }