/* ========================================================================== * Pages article et webinaire. Maquette v3, scopee sous .iea-art. * * LA CASCADE, DECIDEE A L AVANCE * * Le reset est a 0,1,0 exactement, grace a :where() sur les elements. Il passe * au-dessus des regles d element du theme, a 0,0,1, et reste a egalite avec * nos classes, qui sont declarees APRES lui et gagnent donc par l ordre. * L ancienne forme, .iea-art p a 0,1,1, battait chaque regle a une seule * classe : c est elle qui decentrait l image et aplatissait la tete. * * Chaque regle de classe est ecrite .iea-art .iea-art__x, soit 0,2,0, DES LE * DEPART, pour que les regles du kit Elementor .elementor-kit-N h1 a h3 et a, * a 0,1,1, ne puissent pas gagner. La maquette garde des classes simples parce * qu elle n a pas de kit ; la portee supplementaire est une adaptation de * construction, documentee ici comme dans l archive. * * Tout element qui porte une classe declare sa boite entiere, marge et * remplissage compris, parce que le theme en fournit a tout ce qui n en nomme * aucun. Aucun !important nulle part. * ========================================================================== */ .iea-art{ --ia-navy:#07124A; --ia-orange:#F18815; --ia-orange-2:#C96D0C; --ia-ink:#1E2748; --ia-muted:#666E8C; --ia-muted-2:#8A92AC; --ia-line:#E6EAF3; --ia-hair:#DDE3EF; --ia-tint:#F5F7FC; --ia-white:#FFFFFF; --ia-on-navy:#FFFFFF; --ia-r:14px; --ia-r-sm:10px; --ia-pill:999px; --ia-sh-1:0 1px 2px rgba(7,18,74,.04), 0 3px 10px -5px rgba(7,18,74,.14); --ia-sh-2:0 2px 4px rgba(7,18,74,.05), 0 18px 40px -22px rgba(7,18,74,.32); --ia-sh-navy:0 10px 24px -10px rgba(7,18,74,.55); --ia-mesure:680px; --ia-large:840px; /* ==== LE DECALAGE SOUS L EN-TETE FIXE ==== * * MESURE : #ieh-header est fixe et fait 65px, barre 64 plus filet 1, * identique en mobile et inchange au defilement. La page n apporte aucun * decalage : sans celui-ci, le fil d Ariane passait SOUS l en-tete. * * DEUX JETONS, ET LA DIFFERENCE EST MESUREE. * * --ia-sticky-top est la POSITION DE L EN-TETE DANS LA FENETRE. L archive * s en sert pour le haut de sa barre collante, et nous pour le decalage des * ancres. Elle doit inclure la barre d administration, qui pousse l en-tete * vers le bas : c est la definition de l archive, reprise telle quelle. * * --ia-offset-tete est le REMPLISSAGE HAUT DE LA PAGE, et il ne doit PAS * inclure la barre d administration. Mesure du 25 septembre, connecte a * 1440 : html recoit margin-top:32px, l article commence donc deja a y=32 et * l en-tete fixe est pousse a top:32. Ajouter 32 une seconde fois donnait un * ecart de 76px sous l en-tete au lieu des 44 voulus, et de 74 au lieu de 28 * en mobile. Le flux a deja paye la barre : on ne la paye pas deux fois. * * Les deux jetons partent de la meme mesure, calc(--ieh-bar-h + 1px), donc * les deux pages suivent ensemble le greffon d en-tete s il change de * hauteur. */ --ia-offset-tete:calc(var(--ieh-bar-h, 64px) + 1px); --ia-sticky-top:calc(var(--ieh-bar-h, 64px) + 1px); --ia-t:.2s cubic-bezier(.22,.61,.36,1); background:var(--ia-white); color:var(--ia-ink); /* LE CORPS EST EN INTER, LES TITRES EN PLUS JAKARTA SANS. La v4 et l archive posent toutes deux Inter a la racine et ne montent Plus Jakarta que sur les titres et les etiquettes. Ce fichier avait Plus Jakarta a la racine et AUCUNE declaration par element : tout le corps de l article etait donc dans la police des titres, et les deux pages du site ne se lisaient pas dans la meme fonte. Aucun audit ne l a vu parce que font-family ne figurait dans aucune liste de proprietes comparees ; elle y figure desormais. */ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:15px; line-height:1.6; margin:0; padding:calc(var(--ia-offset-tete) + 44px) 0 0; } .iea-art *{box-sizing:border-box} /* La barre d administration descend l en-tete de 32px, et de 46px sous 782px. Memes valeurs et meme forme que dans l archive, mais posees sur le SEUL jeton qui en a besoin : la position de l en-tete dans la fenetre, dont dependent les ancres. Le remplissage de page, lui, n y touche pas, parce que html porte deja cette marge. */ body.admin-bar .iea-art{--ia-sticky-top:calc(var(--ieh-bar-h, 64px) + 1px + 32px)} @media screen and (max-width:782px){ body.admin-bar .iea-art{--ia-sticky-top:calc(var(--ieh-bar-h, 64px) + 1px + 46px)} } /* Le reset, a 0,1,0. Ne jamais declarer une classe au-dessus de ce bloc. */ .iea-art :where(p,h1,h2,h3,h4,ul,ol,li,figure,blockquote,table){margin:0;padding:0} .iea-art :where(ul,ol){list-style:none} .iea-art :where(a){color:inherit;text-decoration:none} .iea-art :where(img){max-width:100%;height:auto} .iea-art a:focus-visible, .iea-art button:focus-visible{outline:2px solid var(--ia-orange);outline-offset:3px;border-radius:4px} .iea-art .iea-art__col{max-width:var(--ia-mesure);margin:0 auto;padding:0 22px} .iea-art .iea-art__large{max-width:var(--ia-large);margin:0 auto;padding:0 22px} /* ==== tete ==== */ .iea-art .iea-art__crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap; margin:0 0 26px;padding:0;font-size:12.5px;font-weight:500;color:var(--ia-muted-2)} .iea-art .iea-art__crumb a:hover{color:var(--ia-navy)} .iea-art .iea-art__crumb span{opacity:.5} .iea-art .iea-art__sur{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--ia-orange-2);margin:0 0 16px;padding:0} .iea-art .iea-art__h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(30px,4vw,42px);font-weight:800;line-height:1.14; letter-spacing:-.03em;color:var(--ia-navy);margin:0 0 22px;padding:0} .iea-art .iea-art__chapo{font-size:20px;line-height:1.58;color:var(--ia-ink); font-weight:400;margin:0 0 30px;padding:0} .iea-art .iea-art__meta{display:flex;align-items:center;justify-content:space-between; gap:18px;flex-wrap:wrap;margin:0;padding:18px 0; border-top:1px solid var(--ia-line);border-bottom:1px solid var(--ia-line)} .iea-art .iea-art__qui{display:flex;align-items:center;gap:12px;min-width:0} .iea-art .iea-art__ava{font-family:'Plus Jakarta Sans',sans-serif;width:40px;height:40px;border-radius:50%;background:var(--ia-navy); color:var(--ia-on-navy);display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700;flex:0 0 auto} .iea-art .iea-art__nom{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;color:var(--ia-navy);line-height:1.3;margin:0;padding:0} .iea-art .iea-art__date{font-size:13px;color:var(--ia-muted);line-height:1.4;margin:0;padding:0} .iea-art .iea-art__partage{display:flex;align-items:center;gap:8px} .iea-art .iea-art__ic{width:36px;height:36px;border-radius:50%;border:1px solid var(--ia-hair); background:var(--ia-white);display:flex;align-items:center;justify-content:center; margin:0;padding:0;cursor:pointer; transition:border-color var(--ia-t),background var(--ia-t)} .iea-art .iea-art__ic svg{width:15px;height:15px;fill:var(--ia-navy)} .iea-art .iea-art__ic:hover{border-color:var(--ia-navy);background:var(--ia-tint)} .iea-art .iea-art__ic.est-copie{border-color:var(--ia-navy);background:var(--ia-navy)} .iea-art .iea-art__ic.est-copie svg{fill:var(--ia-on-navy)} /* ==== visuel ==== */ /* Le centrage vit sur un DIV, jamais sur la figure : Elementor pose .elementor .elementor-widget:not(...):not(...) figure{margin:0} a 0,4,1, qui ecraserait margin:auto sans qu aucun !important ne soit permis. */ .iea-art .iea-art__une{margin:36px auto 0;padding:0 22px} .iea-art .iea-art__figure{margin:0;padding:0;width:100%} .iea-art .iea-art__media{position:relative;overflow:hidden;border-radius:var(--ia-r); background:var(--ia-navy);aspect-ratio:3/2;box-shadow:var(--ia-sh-2)} .iea-art .iea-art__media--video{aspect-ratio:16/9} .iea-art .iea-art__media img, .iea-art .iea-art__media iframe{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;border:0;z-index:2} .iea-art .iea-art__media--absent{display:flex;align-items:center;justify-content:center; background:var(--ia-tint);box-shadow:none;border:1px solid var(--ia-line)} .iea-art .iea-art__absent{font-size:14px;color:var(--ia-muted);text-align:center;margin:0;padding:0 22px} .iea-art .iea-art__absent a{color:var(--ia-navy);font-weight:700;text-decoration:underline;text-underline-offset:3px} .iea-art .iea-art__legende{font-size:12.5px;line-height:1.5;color:var(--ia-muted);margin:12px 0 0;padding:0} .iea-art .iea-art__legende em{font-style:normal;color:var(--ia-muted-2)} .iea-art .iea-art__fiche{display:flex;flex-wrap:wrap;gap:6px 28px;margin:18px 0 0; padding:16px 0 0;border-top:1px solid var(--ia-line);font-size:13.5px;color:var(--ia-ink)} .iea-art .iea-art__fiche b{color:var(--ia-muted-2);font-weight:600;margin-right:6px} /* ==== corps ==== */ .iea-art .iea-art__corps{padding-top:40px} .iea-art .iea-art__etiq{font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.15em; text-transform:uppercase;color:var(--ia-navy);margin:0 0 14px;padding:0} .iea-art .iea-art__som{margin:0 0 40px;padding:0} .iea-art .iea-art__som ol{counter-reset:som;margin:0;padding:0} .iea-art .iea-art__som li{counter-increment:som;border-bottom:1px solid var(--ia-line);margin:0;padding:0} .iea-art .iea-art__som li:first-child{border-top:1px solid var(--ia-line)} .iea-art .iea-art__som a{display:flex;gap:14px;padding:12px 0;font-size:15px;line-height:1.45; color:var(--ia-ink);font-weight:500;transition:color var(--ia-t)} .iea-art .iea-art__som a::before{font-family:'Plus Jakarta Sans',sans-serif;content:counter(som);font-weight:800;font-size:13px; color:var(--ia-muted-2);min-width:18px;padding-top:1px} .iea-art .iea-art__som a:hover{color:var(--ia-navy)} /* ========================================================================== * LE CORPS ELEMENTOR, APLATI * * Les onze billets sont des documents Elementor : le corps arrive enveloppe * dans ses conteneurs, jusqu a pres de cinq cents sur le plus long. On neutre * leur mise en page ICI SEULEMENT, sous .iea-art .iea-art__prose, pour que les * elements semantiques qu ils portent retombent dans notre rythme. * * AUCUNE DE CES REGLES NE SORT DE CETTE PORTEE. Le kit, le theme et le reste * du site ne sont pas touches. * * PAS DE display:contents sur ce qui porte une classe que nous stylons : la * boite de .en-bref et de .fond-gris doit survivre pour recevoir son fond. * ========================================================================== */ .iea-art .iea-art__prose .e-con, .iea-art .iea-art__prose .e-con-inner, .iea-art .iea-art__prose .elementor-element, .iea-art .iea-art__prose .elementor-widget, .iea-art .iea-art__prose .elementor-widget-container, .iea-art .iea-art__prose .elementor-widget-wrap{ display:block; width:auto; max-width:none; min-height:0; margin:0; padding:0; gap:0; background:none; border:0; box-shadow:none; } /* Les variables de gabarit d Elementor, remises a plat dans la portee. */ .iea-art .iea-art__prose .e-con, .iea-art .iea-art__prose .e-con-inner{ --display:block; --gap:0px; --width:auto; --content-width:none; --padding-block-start:0px; --padding-block-end:0px; --padding-inline-start:0px; --padding-inline-end:0px; --margin-top:0px; --margin-right:0px; --margin-bottom:0px; --margin-left:0px; } /* Les espaceurs doublent notre rythme : ils sortent. Aucun ne porte de classe que nous stylons. */ .iea-art .iea-art__prose .elementor-widget-spacer{display:none} /* Un separateur devient un filet, et un seul. */ .iea-art .iea-art__prose .elementor-widget-divider{margin:32px 0;padding:0} .iea-art .iea-art__prose .elementor-divider, .iea-art .iea-art__prose .elementor-divider-separator{ border:0;border-top:1px solid var(--ia-line);display:block;width:100%} .iea-art .iea-art__prose .elementor-divider{padding:0} /* ==== la prose elle-meme ==== */ .iea-art .iea-art__prose p{font-size:18px;line-height:1.75;color:var(--ia-ink);margin:0 0 24px;padding:0} /* PAS DE REGLE :last-child SUR LA PROSE. Elementor enveloppe chaque editeur de texte dans son propre conteneur : presque tous les paragraphes y sont dernier enfant, et une remise a zero de leur marge basse supprimerait le rythme entre deux widgets. L avertissement qui suit porte deja sa propre marge haute, la marge finale ne gene donc personne. */ .iea-art .iea-art__prose b, .iea-art .iea-art__prose strong{color:var(--ia-navy);font-weight:700} .iea-art .iea-art__prose h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:800;line-height:1.28;letter-spacing:-.02em; color:var(--ia-navy);margin:50px 0 16px;padding:0; scroll-margin-top:calc(var(--ia-sticky-top) + 20px)} .iea-art .iea-art__prose h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;font-weight:800;line-height:1.34;letter-spacing:-.018em; color:var(--ia-navy);margin:34px 0 12px;padding:0} .iea-art .iea-art__prose ul{margin:0 0 26px;padding:0;list-style:none} .iea-art .iea-art__prose ol{margin:0 0 26px;padding:0 0 0 22px;list-style:decimal} .iea-art .iea-art__prose ul li{position:relative;padding:0 0 0 22px;font-size:18px;line-height:1.72;margin:0 0 12px} .iea-art .iea-art__prose ol li{font-size:18px;line-height:1.72;margin:0 0 12px;padding:0} .iea-art .iea-art__prose ul li::before{content:"";position:absolute;left:3px;top:.68em; width:6px;height:6px;border-radius:50%;background:var(--ia-navy)} .iea-art .iea-art__prose a{color:var(--ia-navy);font-weight:600; text-decoration:underline;text-underline-offset:3px} .iea-art .iea-art__prose figure{margin:36px 0;padding:0} .iea-art .iea-art__prose figcaption{font-size:12.5px;color:var(--ia-muted);margin:10px 0 0;padding:0} .iea-art .iea-art__prose img{display:block;width:100%;height:auto;border-radius:var(--ia-r-sm)} .iea-art .iea-art__prose table{width:100%;border-collapse:collapse;margin:30px 0;font-size:15.5px} .iea-art .iea-art__prose th, .iea-art .iea-art__prose td{border:1px solid var(--ia-line);padding:10px 12px;text-align:left} .iea-art .iea-art__prose th{background:var(--ia-tint);color:var(--ia-navy);font-weight:700} /* Les figures du corps subissent la meme regle d Elementor a 0,4,1 : leur espacement est donc porte par le widget qui les contient, et non par la figure elle-meme. Ces regles sont posees APRES le bloc d aplatissement, a specificite egale, elles gagnent donc par l ordre. */ .iea-art .iea-art__prose .elementor-widget-image{margin:36px 0} /* La video posee dans le corps par un editeur, au gabarit de la colonne. */ .iea-art .iea-art__prose .elementor-widget-video{margin:32px 0} .iea-art .iea-art__prose .elementor-wrapper{position:relative;display:block; aspect-ratio:16/9;border-radius:var(--ia-r-sm);overflow:hidden;background:var(--ia-navy)} .iea-art .iea-art__prose .elementor-wrapper iframe, .iea-art .iea-art__prose .elementor-wrapper video{position:absolute;inset:0; width:100%;height:100%;border:0} /* ==== Un bouton pose dans le corps prend le style SECONDAIRE ==== * * UNE PAGE N A QU UNE ACTION PRINCIPALE. Trois pilules orange dans la colonne * de lecture, plus celle de la carte conseil en bas, mettraient quatre appels * en concurrence et hacheraient la lecture. Les boutons du corps reprennent * donc le traitement << Charger plus >> de l archive, .iea-arch__load : pilule * blanche, filet --ia-hair, texte navy, et au survol un aplat navy sur texte * blanc. Memes rayon et remplissage que dans l archive. * * Plus aucun bouton orange ne subsiste sur une page d article depuis le * retrait de la carte conseil. * * La portee s arrete a .iea-art .iea-art__prose : seuls les boutons rendus par * Elementor DANS LE CORPS sont concernes. */ .iea-art .iea-art__prose .elementor-widget-button{margin:30px 0} /* CINQ CLASSES, ET CHACUNE EST REELLE. * * Mesure sur #8088 : le bouton porte sa propre regle, generee par Elementor * pour cet element precis, * .elementor-8088 .elementor-element.elementor-element-8dfc6da .elementor-button * soit 0,4,0, qui pose background-color, color, font-size, padding et * border-radius. Un editeur avait donne a ce bouton un aplat navy. A 0,3,0 * notre regle perdait, et deux des trois boutons du corps restaient blancs sur * navy, l inverse de ce qui est demande. * * On monte donc a 0,5,0 en nommant la chaine que le constructeur rend * VRAIMENT. Releve sur la page servie : le lien est un enfant DIRECT du div * de widget, il n y a pas de .elementor-widget-container sur un bouton, a la * difference des autres widgets. On s appuie donc sur les deux classes que le * div porte toujours, .elementor-element et .elementor-widget-button. * Aucune classe inventee, aucun !important, et la portee ne sort pas de la * prose. */ .iea-art .iea-art__prose .elementor-element.elementor-widget-button .elementor-button{ display:inline-flex;align-items:center;gap:10px; padding:13px 26px;border:1px solid var(--ia-hair);border-radius:var(--ia-pill); background:var(--ia-white);color:var(--ia-navy);font-weight:700;font-size:13.5px; text-decoration:none;box-shadow:var(--ia-sh-1); transition:background var(--ia-t),color var(--ia-t),border-color var(--ia-t),box-shadow var(--ia-t)} .iea-art .iea-art__prose .elementor-element.elementor-widget-button .elementor-button:hover, .iea-art .iea-art__prose .elementor-element.elementor-widget-button .elementor-button:focus{ background:var(--ia-navy);border-color:var(--ia-navy);color:var(--ia-on-navy); box-shadow:var(--ia-sh-navy)} /* Un bouton rendu hors de cette chaine garde quand meme le style secondaire. */ .iea-art .iea-art__prose .elementor-button{display:inline-flex;align-items:center;gap:10px; padding:13px 26px;border:1px solid var(--ia-hair);border-radius:var(--ia-pill); background:var(--ia-white);color:var(--ia-navy);font-weight:700;font-size:13.5px; text-decoration:none;box-shadow:var(--ia-sh-1)} .iea-art .iea-art__prose .elementor-button-icon{display:inline-flex} /* Elementor enveloppe le libelle dans un span : sans ce cran, il garderait sa couleur d origine sur notre fond. */ .iea-art .iea-art__prose .elementor-element.elementor-widget-button .elementor-button .elementor-button-text{color:inherit} /* ========================================================================== * LES ENCADRES : .en-bref et .fond-gris, une seule famille * * Meme fond, meme rayon, meme remplissage. Seule l etiquette les separe : * « L'essentiel » sur .en-bref, aucune sur .fond-gris dont l auteur a ecrit * son propre titre. Pas de barre de couleur, pleine largeur de colonne. * ========================================================================== */ .iea-art .iea-art__prose .en-bref, .iea-art .iea-art__prose .fond-gris{ display:block;width:100%; background:var(--ia-tint); border-radius:var(--ia-r-sm); padding:24px 26px; margin:0 0 34px; box-shadow:none; } .iea-art .iea-art__prose .en-bref::before{ content:"L'essentiel"; display:block; font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase; color:var(--ia-navy);margin:0 0 14px; } .iea-art .iea-art__prose .en-bref p, .iea-art .iea-art__prose .fond-gris p{font-size:15.5px;line-height:1.6;margin:0 0 9px} .iea-art .iea-art__prose .en-bref p:last-child, .iea-art .iea-art__prose .fond-gris p:last-child{margin-bottom:0} .iea-art .iea-art__prose .fond-gris h2, .iea-art .iea-art__prose .fond-gris h3{margin-top:0} /* ==== lire aussi, insere dans le fil ==== */ .iea-art .iea-art__lireaussi{display:block;margin:34px 0;padding:16px 0; border-top:1px solid var(--ia-line);border-bottom:1px solid var(--ia-line);text-decoration:none} .iea-art .iea-art__lireaussi small{font-family:'Plus Jakarta Sans',sans-serif;display:block;font-size:10.5px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--ia-muted-2);margin:0 0 6px} .iea-art .iea-art__lireaussi strong{font-family:'Plus Jakarta Sans',sans-serif;display:block;font-size:17px;font-weight:700;line-height:1.4; color:var(--ia-navy);transition:color var(--ia-t)} .iea-art .iea-art__lireaussi:hover strong{text-decoration:underline;text-underline-offset:3px} /* ==== exergue ==== */ .iea-art .iea-art__prose blockquote{font-family:'Plus Jakarta Sans',sans-serif;margin:44px 0;padding:0 8px;font-size:24px;font-weight:700; line-height:1.4;letter-spacing:-.018em;color:var(--ia-navy);text-align:center} .iea-art .iea-art__prose blockquote::before{content:"\00AB\00A0"} .iea-art .iea-art__prose blockquote::after{content:"\00A0\00BB"} .iea-art .iea-art__prose blockquote p{font-size:inherit;line-height:inherit;color:inherit; font-weight:inherit;margin:0;display:inline} /* ==== fin d article ==== */ .iea-art .iea-art__avert{margin:44px 0 0;padding:20px 0 0;border-top:1px solid var(--ia-line); font-size:12.5px;line-height:1.65;color:var(--ia-muted)} .iea-art .iea-art__avert b{color:var(--ia-ink);font-weight:600} .iea-art .iea-art__pied{display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;margin:28px 0 0;padding:18px 0; border-top:1px solid var(--ia-line);border-bottom:1px solid var(--ia-line)} .iea-art .iea-art__rub{display:inline-flex;padding:6px 14px;border:1px solid var(--ia-hair); border-radius:var(--ia-pill);font-size:12.5px;font-weight:600;color:var(--ia-navy)} /* La carte conseil et son bouton orange ont ete retires en tranche 73 : .iea-art__conseil et .iea-art__btn ne sont plus rendus, leurs regles partent avec eux. Plus aucun orange de fond sur une page d article ; la couleur ne sert plus qu au texte du surtitre. */ /* ==== bloc de fin ==== */ .iea-art .iea-art__suite{margin:64px 0 0;padding:48px 0 64px;background:var(--ia-tint)} .iea-art .iea-art__suitetete{display:flex;align-items:baseline;justify-content:space-between; gap:16px;margin:0 0 8px} .iea-art .iea-art__suitetete h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em; color:var(--ia-navy);margin:0;padding:0} .iea-art .iea-art__tout{font-size:13.5px;font-weight:600;color:var(--ia-navy); text-decoration:underline;text-underline-offset:3px} .iea-art .iea-art__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px; gap:22px;align-items:center;margin:0;padding:22px 0;border-bottom:1px solid var(--ia-hair)} .iea-art .iea-art__item:last-child{border-bottom:none} .iea-art .iea-art__item p{font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--ia-orange-2);margin:0 0 8px;padding:0} .iea-art .iea-art__item h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.016em; color:var(--ia-navy);margin:0 0 6px;padding:0} .iea-art .iea-art__item time{font-size:12.5px;color:var(--ia-muted-2)} .iea-art .iea-art__item:hover h3{text-decoration:underline;text-underline-offset:3px} .iea-art .iea-art__vign{aspect-ratio:3/2;border-radius:8px;background:var(--ia-navy); overflow:hidden;position:relative} .iea-art .iea-art__vign img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .iea-art .iea-art__couvre{position:absolute;inset:0;z-index:4} @media (max-width:720px){ /* On garde le decalage sous l en-tete et on ne reduit que l air au-dessus du fil d Ariane : ecrire 28px ici remettrait le contenu sous la barre fixe. */ .iea-art{padding-top:calc(var(--ia-offset-tete) + 28px)} .iea-art .iea-art__col, .iea-art .iea-art__large, .iea-art .iea-art__une{padding:0 18px} .iea-art .iea-art__h1{font-size:28px} .iea-art .iea-art__chapo{font-size:17.5px} .iea-art .iea-art__prose p, .iea-art .iea-art__prose ul li, .iea-art .iea-art__prose ol li{font-size:16.5px} .iea-art .iea-art__prose h2{font-size:21px;margin-top:40px} .iea-art .iea-art__prose blockquote{font-size:20px} .iea-art .iea-art__media{border-radius:10px} .iea-art .iea-art__item{grid-template-columns:minmax(0,1fr) 88px;gap:14px} } /* ===================================================================== RATTRAPAGE DE CASCADE : LES REGLES D ELEMENT DU KIT ET DU THEME. L archive a recu cet audit en 1.2.4 ; la page d article ne l avait jamais eu. Mesure du 26 septembre, page servie contre maquette v4, par comparaison de CHAQUE element inerte a son parent, ce qui est la seule facon de voir un heritage casse : .elementor-kit-6 a { font-size:18px; font-weight:700; color:navy; font-family:Plus Jakarta Sans } 0,1,1 La maquette laisse ces liens HERITER de leur conteneur. Un lien du fil d Ariane y fait 12.5px, 500, gris Inter ; sur la page il sortait a 18px, 700, navy, Plus Jakarta. Seul le dernier fil, qui n est pas un lien, avait l air juste. ON RETABLIT L HERITAGE, ON NE RECOPIE PAS LES VALEURS. Copier les chiffres de la maquette les figerait ici une seconde fois, et la prochaine maquette les laisserait derriere elle : c est le defaut que le bloc de l archive documente deja. inherit suit la classe parente quoi qu elle devienne. Portee 0,2,1, un cran au-dessus du kit. Aucun !important. Liste complete des fuites relevees, articles et webinaires : a dans __crumb taille, graisse, couleur, fonte a dans __lireaussi taille, graisse, couleur, fonte, ET soulignement a dans __som fonte a dans __rub fonte a dans __tout fonte a dans __ic taille, graisse, couleur, fonte a dans __couvre taille, graisse, couleur, fonte a dans __prose taille, fonte p dans __sur interligne p dans __etiq interligne p dans __item interligne button dans __ic taille, couleur, fonte ===================================================================== */ /* Les liens qui doivent se fondre dans leur conteneur, entierement. */ .iea-art .iea-art__crumb a, .iea-art .iea-art__ic, .iea-art .iea-art__couvre, .iea-art .iea-art__lireaussi{ font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit; color:inherit;letter-spacing:inherit;text-decoration:none} /* Les liens qui gardent leur propre classe mais dont seule la fonte, ou la taille, fuyait. On ne retablit que ce qui fuit. */ .iea-art .iea-art__som a, .iea-art .iea-art__rub, .iea-art .iea-art__tout{font-family:inherit} .iea-art .iea-art__prose a{font-family:inherit;font-size:inherit} /* LE PIEGE N EST PAS LE KIT, C EST NOTRE PROPRE FEUILLE. « A lire aussi » est un que article.php insere DANS le fil du texte. Il tombe donc sous notre regle de lien de corps : .iea-art .iea-art__prose a { color:navy; font-weight:600; text-decoration:underline } 0,3,0 qui bat la regle du composant, .iea-art .iea-art__lireaussi, a 0,2,0. Mesure du 26 septembre sur les trois billets : 600, navy, underline, la ou la maquette v4 donne 400, heritage, aucun soulignement. On remonte d un cran, 0,4,0, en ajoutant la classe au meme selecteur, et on retablit l heritage plutot que de recopier la maquette. Le soulignement au survol reste porte par .iea-art__lireaussi:hover strong, intact. */ .iea-art .iea-art__prose a.iea-art__lireaussi{ font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit; color:inherit;letter-spacing:inherit;text-decoration:none;text-underline-offset:auto} /* L interligne des petits paragraphes : la maquette l herite de .iea-art, une regle d element le ramenait a 1.5. */ .iea-art .iea-art__sur, .iea-art .iea-art__etiq, .iea-art .iea-art__item p{line-height:inherit} /* Le bouton « copier le lien » est un