/* ===================================================================== LA LIVRAISON. Scopé sous .iea-arch, préfixe iea-arch__, variables --ia-*. Jeu de jetons unique : aucune valeur en dur ailleurs dans la feuille. ===================================================================== */ .iea-arch{ --ia-navy:#07124A; --ia-navy-2:#12205F; --ia-orange:#F18815; --ia-orange-2:#C96D0C; --ia-ink:#1E2748; --ia-muted:#666E8C; --ia-muted-2:#8A92AC; --ia-line:#E6EAF3; --ia-hair:#DDE3EF; --ia-bg:#F6F8FC; --ia-band:#EDF1FA; --ia-tint:#F4F7FC; --ia-white:#FFFFFF; --ia-on-navy:#FFFFFF; --ia-r:20px; --ia-r-sm:12px; --ia-r-xs:8px; --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,.04), 0 16px 36px -18px rgba(7,18,74,.26); --ia-sh-3:0 4px 10px rgba(7,18,74,.05), 0 30px 60px -26px rgba(7,18,74,.38); --ia-sh-navy:0 10px 24px -10px rgba(7,18,74,.55); --ia-sh-orange:0 10px 24px -10px rgba(241,136,21,.62); --ia-ring:inset 0 0 0 1px rgba(255,255,255,.06); --ia-pad:36px; --ia-gap:30px; --ia-maxw:1200px; /* mesuré : #ieh-header fait 65px (barre 64 + filet 1), identique en mobile, inchangé au défilement. Au build, écrire calc(var(--ieh-bar-h,64px) + 1px). */ /* mesure du 21 septembre : #ieh-header fait 65px, barre 64 plus filet 1, identique en mobile et inchange au defilement. On calcule au lieu de figer, pour suivre le greffon d en-tete s il retouche sa hauteur. */ /* DEUX JETONS, PARCE QU ILS NE PAYENT PAS LA MEME CHOSE. Memes noms et memes definitions que dans iea-article.css : les deux pages ne se chargent jamais ensemble, aussi le partage ne peut passer que par une definition identique, et c en est une. Ne pas inventer ici un troisieme nom. --ia-sticky-top est la POSITION DE L EN-TETE DANS LA FENETRE. Elle sert au haut de la barre collante et au decalage des ancres. Elle DOIT inclure la barre d administration, qui pousse l en-tete vers le bas : un top sur un element colle n est pas paye par le flux. --ia-offset-tete est le REMPLISSAGE HAUT DE LA PAGE, et il ne doit PAS inclure la barre d administration. Mesure du 26 septembre, connecte : html recoit margin-top 32px, l archive commence donc deja a y=32 et l en-tete fixe est pousse a 97. Le remplissage valait lui aussi 97, d ou un haut de contenu a 129 et une bande vide de 32px sous l en-tete. A 390px la barre fait 46px et le vide montait a 46. Le flux a deja paye la barre : on ne la paye pas deux fois. L article avait recu cette separation ; l archive ne l avait jamais eue. */ --ia-offset-tete:calc(var(--ieh-bar-h, 64px) + 1px); --ia-sticky-top:calc(var(--ieh-bar-h, 64px) + 1px); --ia-anchor:calc(var(--ia-sticky-top) + 76px); /* décalage des ancres sous la barre collante */ --ia-t:.22s cubic-bezier(.22,.61,.36,1); --ia-dots:radial-gradient(circle, rgba(7,18,74,.08) 1px, transparent 1.4px); background:var(--ia-bg);color:var(--ia-ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:15px;line-height:1.6; } .iea-arch *{box-sizing:border-box} .iea-arch p,.iea-arch h1,.iea-arch h2,.iea-arch h3,.iea-arch ul,.iea-arch li{margin:0;padding:0} .iea-arch ul{list-style:none} .iea-arch a{color:inherit;text-decoration:none} /* Reset volontairement minimal : ne jamais poser ici background, border ou color, sinon .iea-arch button (0,1,1) bat les composants en classe seule (0,1,0) et leur retire bordure et fond. Chaque bouton déclare son état complet. */ .iea-arch button{font:inherit;cursor:pointer} .iea-arch__in{max-width:var(--ia-maxw);margin:0 auto;padding:0 28px} /* L'en-tete descend de 32px sous la barre d'admin, 46px sous 782px. Memes valeurs et meme forme que dans l'article, et posees sur le SEUL jeton qui en a besoin : la position de l'en-tete dans la fenetre. Le remplissage de page n'y touche pas, parce que html porte deja cette marge. */ body.admin-bar .iea-arch{--ia-sticky-top:calc(var(--ieh-bar-h, 64px) + 1px + 32px)} @media screen and (max-width:782px){ body.admin-bar .iea-arch{--ia-sticky-top:calc(var(--ieh-bar-h, 64px) + 1px + 46px)} } /* L'en-tete du site est fixe et la page n'apportait aucun decalage : mesure du 21 septembre, body padding-top 0 et premier conteneur a 0, aucun .publique-hero sur cette page. L'archive porte donc son propre decalage, ce que la maquette laissait a faire au build. */ .iea-arch{padding-top:var(--ia-offset-tete)} .iea-arch a:focus-visible,.iea-arch button:focus-visible,.iea-arch input:focus-visible{ outline:2px solid var(--ia-orange);outline-offset:3px;border-radius:5px} /* ============ Panneau : brique unique de la page ============ */ .iea-arch__panel{background:var(--ia-white);border:1px solid var(--ia-line); border-radius:var(--ia-r);box-shadow:var(--ia-sh-2);overflow:hidden; scroll-margin-top:var(--ia-anchor)} .iea-arch__panelhead{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px var(--ia-pad);border-bottom:1px solid var(--ia-line)} .iea-arch__panellbl{font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:800; letter-spacing:.17em;text-transform:uppercase;color:var(--ia-navy);display:flex;align-items:center;gap:10px} .iea-arch__panellbl::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--ia-orange)} .iea-arch__panelmeta{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--ia-muted-2);white-space:nowrap} /* ================= Manchette ================= */ .iea-arch__mast{position:relative;overflow:hidden;background:var(--ia-band);padding:40px 0 58px} .iea-arch__mast::before{content:"";position:absolute;inset:0;background-image:var(--ia-dots); background-size:24px 24px; -webkit-mask-image:linear-gradient(105deg,#000 0%,transparent 58%); mask-image:linear-gradient(105deg,#000 0%,transparent 58%)} .iea-arch__mast::after{content:"";position:absolute;right:-130px;top:-160px;width:470px;height:470px; border-radius:50%;border:1px solid rgba(7,18,74,.09);box-shadow:inset 0 0 0 64px rgba(241,136,21,.05)} .iea-arch__crumb{position:relative;z-index:2;display:flex;align-items:center;gap:9px;margin-bottom:32px; font-size:12px;font-weight:600;color:var(--ia-muted-2)} .iea-arch__crumb a:hover{color:var(--ia-orange-2)} .iea-arch__crumb svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;opacity:.6} .iea-arch__crumb b{color:var(--ia-navy);font-weight:700} .iea-arch__mastin{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between; gap:40px;flex-wrap:wrap} .iea-arch__h1{position:relative; font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(34px,4.4vw,46px);font-weight:800; line-height:1.08;letter-spacing:-.032em;color:var(--ia-navy);margin-bottom:18px} .iea-arch__h1::before{content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:5px; border-radius:3px;background:var(--ia-orange);box-shadow:var(--ia-sh-orange)} .iea-arch__lede{font-size:16.5px;line-height:1.7;color:var(--ia-muted);max-width:580px} /* Le reset plus haut, .iea-arch h1 et .iea-arch p, pese 0,1,1 et bat une classe seule a 0,1,0 : le padding-left de ces deux regles ne s appliquait pas et le titre venait toucher la barre orange. D ou le cran de portee. */ .iea-arch .iea-arch__h1, .iea-arch .iea-arch__lede{padding-left:30px} .iea-arch__dateline{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ia-muted-2);padding-bottom:6px;white-space:nowrap} /* ================= Filtres ================= */ .iea-arch__sentinel{height:1px} .iea-arch__filters{position:sticky;top:var(--ia-sticky-top);z-index:5; background:rgba(255,255,255,.88);backdrop-filter:blur(12px); border-top:1px solid var(--ia-line);border-bottom:1px solid var(--ia-line); transition:box-shadow var(--ia-t)} .iea-arch.is-stuck .iea-arch__filters{box-shadow:var(--ia-sh-2)} .iea-arch__filterrow{display:flex;align-items:center;gap:18px;padding:13px 0;flex-wrap:wrap} .iea-arch__seg{display:inline-flex;background:var(--ia-tint);border:1px solid var(--ia-line); border-radius:var(--ia-pill);padding:4px;gap:2px;box-shadow:inset 0 1px 2px rgba(7,18,74,.05)} .iea-arch .iea-arch__segbtn{padding:8px 18px;border:0;border-radius:var(--ia-pill);font-size:13px;font-weight:600; background-color:transparent;color:var(--ia-muted); transition:background var(--ia-t),color var(--ia-t),box-shadow var(--ia-t);white-space:nowrap} .iea-arch__segbtn:hover,.iea-arch__segbtn:focus{background-color:rgba(7,18,74,.05);color:var(--ia-navy)} .iea-arch__segbtn[aria-pressed="true"]{background:var(--ia-navy);color:var(--ia-on-navy);box-shadow:var(--ia-sh-navy)} /* Rubriques : un menu deroulant, pas une rangee de pastilles qui glisse. Le nombre de rubriques grandit avec les publications ; une rangee qui defile lateralement se decoupe mal, se decouvre mal et tient mal sur un portable. */ .iea-arch__drop{position:relative;flex:0 0 auto} .iea-arch .iea-arch__droptrig{display:inline-flex;align-items:center;justify-content:space-between;gap:12px; min-width:230px;padding:10px 16px;background:var(--ia-white);border:1px solid var(--ia-hair); border-radius:var(--ia-pill);font-size:13px;font-weight:600;color:var(--ia-muted); box-shadow:var(--ia-sh-1);white-space:nowrap; transition:border-color var(--ia-t),color var(--ia-t),background var(--ia-t),box-shadow var(--ia-t)} .iea-arch__droptrig:hover{border-color:var(--ia-orange);color:var(--ia-orange-2)} .iea-arch__drop.is-on .iea-arch__droptrig{background:var(--ia-navy);border-color:var(--ia-navy); color:var(--ia-on-navy);box-shadow:var(--ia-sh-navy)} .iea-arch__dropchev{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none; flex:0 0 auto;transition:transform var(--ia-t)} .iea-arch__droptrig[aria-expanded="true"] .iea-arch__dropchev{transform:rotate(180deg)} .iea-arch__droppanel{position:absolute;top:calc(100% + 9px);left:0;z-index:7;min-width:300px; background:var(--ia-white);border:1px solid var(--ia-line);border-radius:var(--ia-r-sm); box-shadow:var(--ia-sh-3);padding:7px;max-height:340px;overflow-y:auto} .iea-arch__droppanel[hidden]{display:none} .iea-arch .iea-arch__dropitem{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px; background:transparent;border:0; border-radius:var(--ia-r-xs);font-size:13.5px;font-weight:600;color:var(--ia-ink);text-align:left; transition:background var(--ia-t),color var(--ia-t)} .iea-arch__dropitem span{flex:1;min-width:0} .iea-arch__dropitem em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ia-muted-2)} .iea-arch__dropitem:hover{background:var(--ia-tint)} .iea-arch__dropitem[aria-selected="true"]{color:var(--ia-orange-2)} .iea-arch__dropitem[aria-selected="true"] em{color:var(--ia-orange-2)} .iea-arch__dropitem::after{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto; background:transparent} .iea-arch__dropitem[aria-selected="true"]::after{background:var(--ia-orange)} .iea-arch__dropsep{height:1px;background:var(--ia-line);margin:7px 10px} .iea-arch__search{position:relative;flex:0 0 auto;width:210px} .iea-arch__search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%); width:14px;height:14px;stroke:var(--ia-muted-2);stroke-width:2;fill:none;pointer-events:none} .iea-arch__input{width:100%;padding:9px 14px 9px 34px;border:1px solid var(--ia-hair); border-radius:var(--ia-pill);font-size:13px;font-family:inherit;color:var(--ia-ink); background:var(--ia-white);box-shadow:var(--ia-sh-1);transition:border-color var(--ia-t),box-shadow var(--ia-t)} .iea-arch__input::placeholder{color:var(--ia-muted-2)} .iea-arch__input:focus{outline:none;border-color:var(--ia-navy);box-shadow:var(--ia-sh-2)} .iea-arch.is-nouv .iea-arch__drop{opacity:0;pointer-events:none;width:0;overflow:hidden} /* ================= Briques typographiques ================= */ .iea-arch__sur{font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:var(--ia-orange-2)} .iea-arch__sur em{font-style:normal;color:var(--ia-muted-2);font-weight:700;letter-spacing:.1em} .iea-arch__hl{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--ia-navy); letter-spacing:-.02em;transition:color var(--ia-t)} .iea-arch__chapo{color:var(--ia-muted);line-height:1.6} .iea-arch__by{display:flex;align-items:center;gap:11px} .iea-arch__ava{width:38px;height:38px;border-radius:50%;background:var(--ia-navy);color:var(--ia-on-navy); display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700; font-family:'Plus Jakarta Sans',sans-serif;flex:0 0 auto;box-shadow:var(--ia-sh-navy)} .iea-arch__byname{font-size:13px;font-weight:700;color:var(--ia-navy);line-height:1.35} .iea-arch__byrole{font-size:11.5px;color:var(--ia-muted-2);font-weight:600} .iea-arch__stretch::after{content:"";position:absolute;inset:0;z-index:4} .iea-arch__cover{position:absolute;inset:0;z-index:4} .iea-arch .iea-arch__link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700; background-color:transparent;border:0;color:var(--ia-orange-2);font-family:'Plus Jakarta Sans',sans-serif} .iea-arch__link:hover,.iea-arch__link:focus{background-color:transparent;color:var(--ia-orange-2)} .iea-arch__link svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none; transition:transform var(--ia-t)} .iea-arch__link:hover svg{transform:translateX(4px)} .iea-arch__th{position:relative;overflow:hidden;background:var(--ia-navy);flex:0 0 auto; border-radius:var(--ia-r-xs);box-shadow:var(--ia-sh-1),var(--ia-ring)} .iea-arch__th::before{content:"";position:absolute;inset:0; background-image:radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1.3px);background-size:14px 14px} /* AJOUT DU BUILD : la maquette dessinait une vignette factice, fond navy plus pastille. En production elle porte l'image mise en avant, qui recouvre le decor ; celui-ci ne reste visible que le temps du chargement, ou si le fichier manque. Le badge de lecture reste au-dessus, z-index 3. */ .iea-arch__th img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block;z-index:2} .iea-arch__th::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%; border:1px solid rgba(241,136,21,.45);right:-72px;top:-62px} .iea-arch__th[data-m="b"]::after{right:auto;left:-80px;top:auto;bottom:-70px;border-color:rgba(255,255,255,.28)} .iea-arch__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3} .iea-arch__play span{width:30px;height:30px;border-radius:50%;background:var(--ia-orange); display:flex;align-items:center;justify-content:center;box-shadow:var(--ia-sh-orange); transition:transform var(--ia-t)} .iea-arch__play svg{width:10px;height:10px;fill:var(--ia-on-navy);margin-left:2px} .iea-arch__row:hover .iea-arch__play span, .iea-arch__sideitem:hover .iea-arch__play span{transform:scale(1.1)} /* ================= La une ================= */ .iea-arch__une{padding:52px 0 0} .iea-arch__unein{display:grid;grid-template-columns:minmax(0,1.66fr) minmax(0,1fr)} .iea-arch__lead{position:relative;align-self:center;padding:48px 52px 48px var(--ia-pad)} .iea-arch__leadtop{display:flex;align-items:center;gap:14px;margin-bottom:24px} .iea-arch__leadtop::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--ia-orange); opacity:.22;max-width:150px} .iea-arch__leadhl{font-size:clamp(30px,3.7vw,43px);line-height:1.12;letter-spacing:-.033em;margin-bottom:24px} .iea-arch__leadchapo{font-size:17px;line-height:1.7;margin-bottom:34px;max-width:640px} .iea-arch__leadfoot{display:flex;align-items:center;gap:32px;flex-wrap:wrap; padding-top:28px;border-top:1px solid var(--ia-line)} .iea-arch__lead:hover .iea-arch__hl{color:var(--ia-orange-2)} .iea-arch__lead:hover .iea-arch__link svg{transform:translateX(5px)} /* ================= La une en mode media ================= Copie de la v14. Le visuel de la une vient de la meme regle que les vignettes de la colonne et du fil, pour qu un billet ait le meme visuel partout. AVEC UNE IMAGE AU-DESSUS DU TEXTE, la une depassait la colonne de droite d environ 300px et laissait un grand vide sous ses trois entrees. En mode media l image et le texte se placent cote a cote, donc a la meme hauteur PAR CONSTRUCTION, et le bandeau passe dessous en trois colonnes. Sans media, la une garde sa forme d avant. */ .iea-arch__leadmedia{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--ia-r-sm); background:var(--ia-navy);margin-bottom:28px;box-shadow:var(--ia-sh-1),var(--ia-ring)} .iea-arch__leadmedia::before{content:"";position:absolute;inset:0; background-image:radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.3px);background-size:18px 18px} .iea-arch__leadmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2; transition:transform .5s cubic-bezier(.22,.61,.36,1)} .iea-arch__lead:hover .iea-arch__leadmedia img{transform:scale(1.02)} .iea-arch__leadmedia .iea-arch__play span{width:58px;height:58px} .iea-arch__leadmedia .iea-arch__play svg{width:18px;height:18px;margin-left:3px} .iea-arch__lead:hover .iea-arch__leadmedia .iea-arch__play span{transform:scale(1.06)} .iea-arch__une--media .iea-arch__unein{grid-template-columns:minmax(0,1fr)} .iea-arch__une--media .iea-arch__lead{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:44px;align-items:center;align-self:stretch;padding:36px var(--ia-pad)} .iea-arch__une--media .iea-arch__leadmedia{aspect-ratio:auto;height:100%;min-height:300px;margin-bottom:0} .iea-arch__une--media .iea-arch__leadhl{font-size:clamp(28px,2.9vw,36px)} .iea-arch__une--media .iea-arch__leadchapo{font-size:16px;margin-bottom:28px} .iea-arch__une--media .iea-arch__side{border-left:none;border-top:1px solid var(--ia-line); box-shadow:none;padding:26px var(--ia-pad) 30px} .iea-arch__une--media .iea-arch__sidelist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .iea-arch__une--media .iea-arch__sideitem{border-bottom:none;padding:20px 26px 0 26px; border-left:1px solid var(--ia-line)} .iea-arch__une--media .iea-arch__sideitem:first-child{border-left:none;padding-left:0} .iea-arch__une--media .iea-arch__sideitem:last-child{padding-right:0} .iea-arch__side{padding:30px var(--ia-pad) 34px;background:var(--ia-tint); border-left:1px solid var(--ia-line);box-shadow:inset 2px 0 6px -4px rgba(7,18,74,.10)} .iea-arch__sidelbl{font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:800; letter-spacing:.17em;text-transform:uppercase;color:var(--ia-navy);padding-bottom:13px; border-bottom:2px solid var(--ia-navy)} .iea-arch__sideitem{position:relative;display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--ia-line)} .iea-arch__sideitem:last-child{border-bottom:none;padding-bottom:0} .iea-arch__sideitem .iea-arch__th{width:76px;height:56px} .iea-arch__sideitem .iea-arch__sur{margin-bottom:7px;font-size:9.5px;letter-spacing:.14em} .iea-arch__sidehl{font-size:15.5px;line-height:1.42} .iea-arch__sidedate{font-size:11px;color:var(--ia-muted-2);font-weight:600;margin-top:9px} .iea-arch__sideitem:hover .iea-arch__hl{color:var(--ia-orange-2)} .iea-arch__grow{flex:1;min-width:0} /* ================= Le fil ================= */ .iea-arch__fil{padding:var(--ia-gap) 0 0} .iea-arch__filgrid{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:var(--ia-gap);align-items:start} .iea-arch__river{padding:0 var(--ia-pad)} /* césure d'année : rend l'archive lisible quand le fil s'allonge */ .iea-arch__year{display:none;align-items:center;gap:16px;padding:28px 0 6px; font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:800;letter-spacing:.2em; color:var(--ia-navy)} .iea-arch__year.is-on{display:flex} .iea-arch__year::after{content:"";flex:1;height:1px;background:var(--ia-line)} .iea-arch__row{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr) auto; gap:28px;align-items:start;border-bottom:1px solid var(--ia-line); margin:0 calc(var(--ia-pad) * -1);padding:30px var(--ia-pad); transition:background var(--ia-t)} .iea-arch__row.is-last{border-bottom:none} .iea-arch__row:hover{background:var(--ia-tint)} .iea-arch__row:hover .iea-arch__hl{color:var(--ia-orange-2)} .iea-arch__rowdate{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--ia-muted-2);padding-top:3px;white-space:nowrap} .iea-arch__rowmain{min-width:0} .iea-arch__row .iea-arch__sur{margin-bottom:13px} .iea-arch__rowhl{font-size:20px;line-height:1.34;margin-bottom:13px} .iea-arch__rowchapo{font-size:13.5px;line-height:1.66; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .iea-arch__row .iea-arch__th{width:128px;height:88px} .iea-arch__filfoot{display:flex;flex-direction:column;align-items:center;gap:12px; padding:26px var(--ia-pad) 30px;border-top:1px solid var(--ia-line);background:var(--ia-tint)} .iea-arch__filfoot.is-off{display:none} .iea-arch__progress{font-size:11.5px;color:var(--ia-muted-2);font-weight:600} /* ================= Rail des nouveautés ================= */ .iea-arch__rail{background:var(--ia-white);border:1px solid var(--ia-line); border-radius:var(--ia-r);box-shadow:var(--ia-sh-2);padding:24px 26px 26px} .iea-arch__raillbl{font-family:'Plus Jakarta Sans',sans-serif;font-size:10.5px;font-weight:800; letter-spacing:.17em;text-transform:uppercase;color:var(--ia-navy); padding-bottom:13px;border-bottom:2px solid var(--ia-navy)} .iea-arch__railitem{position:relative;padding:19px 0;border-bottom:1px solid var(--ia-line)} .iea-arch__railitem .iea-arch__rowdate{margin-bottom:7px;font-size:10px;color:var(--ia-muted-2)} .iea-arch__railhl{font-size:14px;line-height:1.38;margin-bottom:5px} .iea-arch__railtxt{font-size:12.5px;line-height:1.52;color:var(--ia-muted)} .iea-arch__railitem:hover .iea-arch__hl{color:var(--ia-orange-2)} .iea-arch__railfoot{padding-top:17px} .iea-arch.is-filtered .iea-arch__rail{display:none} .iea-arch.is-filtered .iea-arch__filgrid{grid-template-columns:minmax(0,1fr)} .iea-arch__empty{display:none;text-align:center;padding:64px var(--ia-pad)} .iea-arch__empty h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700; color:var(--ia-navy);margin-bottom:9px} .iea-arch__empty p{font-size:14px;color:var(--ia-muted);margin-bottom:20px} .iea-arch.is-empty .iea-arch__empty{display:block} .iea-arch.is-empty .iea-arch__river,.iea-arch.is-empty .iea-arch__filfoot{display:none} .iea-arch.is-filtered .iea-arch__une{display:none} /* ================= Boutons ================= */ .iea-arch .iea-arch__load{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:var(--ia-pill); background:var(--ia-white);border:1px solid var(--ia-hair);color:var(--ia-navy);font-weight:700; font-size:13.5px;font-family:'Plus Jakarta Sans',sans-serif;box-shadow:var(--ia-sh-1); transition:background var(--ia-t),color var(--ia-t),box-shadow var(--ia-t),transform var(--ia-t)} .iea-arch__load:hover,.iea-arch__load:focus{background:var(--ia-navy);border-color:var(--ia-navy);color:var(--ia-on-navy); box-shadow:var(--ia-sh-navy);transform:translateY(-2px)} .iea-arch__btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:var(--ia-pill); background:var(--ia-orange);color:var(--ia-on-navy);font-weight:700;font-size:14px; font-family:'Plus Jakarta Sans',sans-serif;box-shadow:var(--ia-sh-orange); transition:background var(--ia-t),box-shadow var(--ia-t),transform var(--ia-t);white-space:nowrap} .iea-arch__btn:hover{background:var(--ia-orange-2);transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(241,136,21,.7)} /* .iea-arch a{color:inherit} plus haut pese 0,1,1 et bat .iea-arch__btn a 0,1,0. Sans ce cran de portee, le bouton herite du texte sombre au lieu du blanc, ce qui etait le cas dans les versions precedentes de cette maquette. */ .iea-arch .iea-arch__btn{color:var(--ia-on-navy)} .iea-arch__btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none} /* ================= Bandeau de fin ================= */ /* Pas de newsletter : le pied de page du site en porte déjà une. */ /* LA BANDE PLEINE LARGEUR NAVY EST DEVENUE UN PANNEAU BLANC. Le pied de page du site est navy lui aussi : colles l un sous l autre, la page semblait finir deux fois. Le contenu entre dans un panneau aligne sur ceux du dessus, et .iea-arch__ctain disparait avec l ancienne bande, ses deux pseudo-elements et son anneau. La texture de pastilles de la manchette revient en fondu depuis la droite. */ .iea-arch__cta{margin-top:var(--ia-gap)} .iea-arch__ctacard{position:relative;overflow:hidden;background:var(--ia-white); border:1px solid var(--ia-line);border-radius:var(--ia-r);box-shadow:var(--ia-sh-2); padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap} .iea-arch__ctacard::before{content:"";position:absolute;inset:0;background-image:var(--ia-dots); background-size:24px 24px;pointer-events:none; -webkit-mask-image:linear-gradient(255deg,#000 0%,transparent 52%); mask-image:linear-gradient(255deg,#000 0%,transparent 52%)} .iea-arch__ctacard > *{position:relative;z-index:1} .iea-arch__ctatitle{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:800; line-height:1.28;letter-spacing:-.024em;color:var(--ia-navy);margin-bottom:9px;max-width:560px} .iea-arch__ctasub{font-size:14px;line-height:1.6;color:var(--ia-muted);max-width:520px} /* ================= Texte de rubrique ================= */ .iea-arch__seo{padding:48px 0 60px} .iea-arch__seoin{max-width:900px} .iea-arch__seo h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;font-weight:700; color:var(--ia-navy);margin-bottom:12px} .iea-arch__seo p{font-size:13.5px;line-height:1.78;color:var(--ia-muted);margin-bottom:11px} /* ================= Responsive ================= */ @media (max-width:1040px){ .iea-arch__filgrid{grid-template-columns:minmax(0,1fr)} } @media (max-width:900px){ .iea-arch__unein{grid-template-columns:1fr} .iea-arch__lead{padding:28px var(--ia-pad)} .iea-arch__side{border-left:none;border-top:1px solid var(--ia-line);box-shadow:none} .iea-arch__une--media .iea-arch__lead{grid-template-columns:minmax(0,1fr);gap:26px} .iea-arch__une--media .iea-arch__leadmedia{aspect-ratio:16/9;height:auto;min-height:0} .iea-arch__une--media .iea-arch__sidelist{grid-template-columns:minmax(0,1fr)} .iea-arch__une--media .iea-arch__sideitem{border-left:none;padding:20px 0; border-bottom:1px solid var(--ia-line)} .iea-arch__une--media .iea-arch__sideitem:last-child{border-bottom:none;padding-bottom:0} } @media (max-width:720px){ .iea-arch{--ia-pad:20px;--ia-gap:18px;--ia-r:16px} .iea-arch__in{padding:0 18px} .iea-arch__mast{padding:24px 0 32px} .iea-arch__crumb{margin-bottom:20px} /* meme cran de portee que la regle de bureau, sinon 0,2,0 la bat */ .iea-arch .iea-arch__h1{padding-left:16px;font-size:31px} .iea-arch .iea-arch__lede{padding-left:16px;font-size:15px} .iea-arch__dateline{display:none} .iea-arch__une{padding-top:26px} .iea-arch__leadchapo{font-size:15.5px} .iea-arch__row{grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:20px var(--ia-pad)} .iea-arch__rowdate{grid-column:1 / -1;padding-top:0;margin-bottom:-4px} .iea-arch .iea-arch__rowhl{font-size:17.5px} .iea-arch__row .iea-arch__th{width:92px;height:66px} .iea-arch__search{width:100%;order:3} .iea-arch .iea-arch__drop,.iea-arch .iea-arch__droptrig{width:100%;min-width:0} .iea-arch .iea-arch__droppanel{min-width:0;width:100%} .iea-arch__seg{width:100%} .iea-arch .iea-arch__segbtn{flex:1;text-align:center;padding:9px 6px;font-size:12.5px} .iea-arch__ctacard{padding:28px 24px;gap:22px} } @media (prefers-reduced-motion:reduce){ .iea-arch__link svg,.iea-arch__hl,.iea-arch__row,.iea-arch__load,.iea-arch__btn, .iea-arch__cat,.iea-arch__play span{transition:none} .iea-arch__load:hover,.iea-arch__btn:hover,.iea-arch__cat:hover{transform:none} } /* ===================================================================== RATTRAPAGE DE CASCADE, AJOUT DU BUILD. Le reset du theme parent. MESURE DU 21 SEPTEMBRE, sur la page d apercu, champ de recherche : padding-left 16px au lieu de 34px border-radius 3px au lieu de la pilule border-color #666 au lieu de --ia-hair Consequence visible : la loupe, posee a gauche en absolu, MORD DE 11px sur le debut du texte saisi. D OU CELA VIENT : themes/hello-elementor/assets/css/reset.css declare input[type=date],...,input[type=search],...,textarea{ border:1px solid #666; border-radius:3px; padding:.5rem 1rem; width:100% } Ce selecteur pese 0,1,1 ; .iea-arch__input ne pese que 0,1,0 et perd. C est la meme famille de fuite que le rose #c36 du meme fichier, que le greffon du tableau de bord neutralise deja par ailleurs. LE REMEDE EST CELUI DE LA MAISON : on ne touche pas au fichier du theme, qui serait reecrase a sa prochaine mise a jour, et on n emploie pas !important. On redeclare les MEMES proprietes, a l identique, sous un selecteur plus specifique que 0,1,1. Rien d autre n est ajoute : les valeurs ci-dessous sont copiees des regles d origine, quinze lignes plus haut. ===================================================================== */ .iea-arch .iea-arch__search .iea-arch__input{ width:100%;padding:9px 14px 9px 34px;border:1px solid var(--ia-hair); border-radius:var(--ia-pill);font-size:13px;font-family:inherit;color:var(--ia-ink); background:var(--ia-white);box-shadow:var(--ia-sh-1); transition:border-color var(--ia-t),box-shadow var(--ia-t)} .iea-arch .iea-arch__search .iea-arch__input:focus{ outline:none;border-color:var(--ia-navy);box-shadow:var(--ia-sh-2)} /* L anneau de focus reste celui de la page, orange, et passe devant le outline-offset:-2px que le reset pose sur [type=search]. */ .iea-arch .iea-arch__search .iea-arch__input:focus-visible{ outline:2px solid var(--ia-orange);outline-offset:3px} /* ===================================================================== RATTRAPAGE DE CASCADE 2 : LE KIT GLOBAL D ELEMENTOR. Ne pas supprimer en croyant a des doublons, voir la mesure ci-dessous. Elementor emet ses reglages globaux dans post-6.css sous la forme .elementor-kit-6 h1 { font-size:2.4rem; line-height:3.5rem; ... } .elementor-kit-6 h2 { font-size:2.125rem; line-height:3rem; ... } .elementor-kit-6 h3 { font-size:1.4rem; line-height:1.5em; ... } .elementor-kit-6 a { font-size:18px } Ces selecteurs pesent 0,1,1. Les titres de l archive ne portent qu une classe, 0,1,0, et perdaient donc TOUS leur corps et leur interligne. MESURE DU 21 SEPTEMBRE, maquette rendue contre page rendue, a 1440 : __h1 46px / 800 / 48.76px -> 35.2px / 700 / 56.32px __leadhl 43px / 47.3px -> 32px / 56px __sidehl 15.5px / 21.08px -> 22.4px / 35.84px __rowhl 20px / 26px -> 22.4px / 35.84px __ctatitle 24px / 30.72px -> 32px / 56px __seo h2 14.5px -> 32px __btn 14px, ombre orange -> 18px, aucune ombre Le titre de la bande d appel a l action virait au navy sur fond navy : il devenait illisible, pas seulement mal dimensionne. On ne touche ni au kit ni au theme, tous deux reecrits a chaque mise a jour, et on n emploie pas !important. On repete les MEMES declarations sous un niveau d imbrication de plus, .iea-arch .iea-arch__x, soit 0,2,0, qui passe devant 0,1,1. Les valeurs sont copiees de la maquette. ATTENTION, CE BLOC EST UNE COPIE ET IL DERIVE. Toute maquette qui change un corps ou un interligne de titre doit etre reportee ICI AUSSI, sinon ce bloc epingle silencieusement l ancienne valeur : c est arrive au passage de la v7.1 a la v8, quatre interlignes figes a leur valeur d avant. Le seul garde-fou est l audit rejoue apres chaque nouvelle maquette. Un inherit serait preferable, mais un corps de titre ne s herite pas. ===================================================================== */ .iea-arch .iea-arch__hl{font-weight:700;color:var(--ia-navy);letter-spacing:-.02em} .iea-arch .iea-arch__h1{font-size:clamp(34px,4.4vw,46px);font-weight:800;line-height:1.08; letter-spacing:-.032em;color:var(--ia-navy)} .iea-arch .iea-arch__leadhl{font-size:clamp(30px,3.7vw,43px);line-height:1.12;letter-spacing:-.033em} /* LE MODE MEDIA REDUIT LE TITRE, ET CE BLOC DOIT LE SAVOIR. La regle de la maquette, .iea-arch__une--media .iea-arch__leadhl, pese 0,2,0 comme la ligne du dessus, mais elle est declaree AVANT : a egalite, l ordre tranche, et le rattrapage la battait. Mesure : 43px au lieu des 36px de la v14. On repete donc la valeur du mode media ici, a 0,3,0. Meme piege que le titre de la bande de fin, meme remede. */ .iea-arch .iea-arch__une--media .iea-arch__leadhl{font-size:clamp(28px,2.9vw,36px)} .iea-arch .iea-arch__sidehl{font-size:15.5px;line-height:1.42} .iea-arch .iea-arch__rowhl{font-size:20px;line-height:1.34} .iea-arch .iea-arch__railhl{font-size:14px;line-height:1.38} /* TRANCHE 73 : LE NAVY REMPLACE LE BLANC ICI AUSSI. La bande de fin n est plus navy mais blanche. Ce bloc epingle la couleur a 0,2,0 pour passer devant le kit ; s il gardait --ia-on-navy, le titre s afficherait BLANC SUR BLANC, donc invisible, et l audit mene contre la maquette continuerait pourtant de passer, puisque la maquette dit bien navy. C est exactement la derive que l avertissement en tete de ce bloc annonce. */ .iea-arch .iea-arch__ctatitle{font-size:24px;font-weight:800;line-height:1.28; letter-spacing:-.024em;color:var(--ia-navy)} /* 0,2,1 : le h3 du kit pese 0,1,1, et .iea-arch__seo h2 seul faisait 0,1,1, donc egalite tranchee par l ordre de chargement, que le kit gagnait. */ .iea-arch .iea-arch__seo h2{font-size:14.5px;font-weight:700;color:var(--ia-navy)} .iea-arch .iea-arch__btn{font-size:14px;box-shadow:var(--ia-sh-orange)} .iea-arch .iea-arch__btn:hover{box-shadow:var(--ia-sh-orange)} /* Le rattrapage mobile qui se trouvait ici a ete absorbe par la maquette : la v9 ecrit elle-meme ses trois regles sous 720px en .iea-arch .iea-arch__x, au cran de portee qui bat le kit. Il n y a donc plus rien a reprendre ici, et un doublon aurait fige les valeurs une seconde fois. Voir le bloc de livraison. */ /* ===================================================================== LA VIGNETTE N ETAIT PAS RECADREE, ELLE ETAIT SOUS-DIMENSIONNEE. Mesure : la boite fait 76x56, l image mesurait 76x43 et 13px de navy restaient visibles dessous. Ni un recadrage ni un choix de maquette : .elementor img { height:auto } custom-frontend.min.css 0,1,1 .iea-arch__th img { height:100% } archive.css 0,1,1 Egalite de specificite, tranchee par l ordre de chargement : Elementor passe apres, donc height:auto l emportait et object-fit:cover n avait plus rien a recadrer. Un cran de specificite de plus suffit. ===================================================================== */ .iea-arch .iea-arch__th img{height:100%;width:100%;max-width:none} /* ===================================================================== LA MEME REGLE A FRAPPE UNE SECONDE FOIS, SUR L IMAGE DE LA UNE. Mesure du 25 septembre sur #16842, a 1440 : la cellule de l image s etire bien a la hauteur de la colonne de texte, mais l image, elle, gardait ses proportions 16/9 et laissait une bande de navy d environ 40px sous elle. getMatchedStylesForNode sur le a nomme le coupable, le meme qu en tranche 62 : .iea-arch__leadmedia img { height:100% } archive.css 0,1,1 .elementor img { height:auto } custom-frontend.min.css 0,1,1 Egalite, tranchee par l ordre de chargement, qu Elementor gagne. Une image en position absolue avec height:auto ignore son bord bas et reprend son rapport naturel : c est exactement le symptome. POURQUOI L AUDIT N AVAIT RIEN VU. La mesure 879 contre 879 comparait le bas de la CELLULE, qui se remplit bien, pas celui de l image. Et la maquette ne charge aucune image reelle : aucune regle de dimension d image n y est jamais comparee. Desormais, pour toute boite de media, on mesure la boite du contre celle de son conteneur, les deux bords, aux deux largeurs. TOUTES LES BOITES DE MEDIA SONT DESORMAIS AU MEME CRAN, pour qu une troisieme instance ne puisse pas apparaitre plus tard : .iea-arch .iea-arch__th img 0,2,1 fil et colonne .iea-arch .iea-arch__leadmedia img 0,2,1 une (ci-dessous) .iea-art .iea-art__media img 0,2,1 hero d article (deja) .iea-art .iea-art__vign img 0,2,1 billets de fin (deja) ===================================================================== */ .iea-arch .iea-arch__leadmedia img{position:absolute;inset:0;width:100%;height:100%; max-width:none;object-fit:cover} /* Voir le commentaire dans inc/archive.php : sans rail, la grille du fil reservait 394px de colonne vide a 1440 et desalignait les deux panneaux. Meme repli que celui que la maquette applique deja a .is-filtered. */ .iea-arch--sans-rail .iea-arch__filgrid{grid-template-columns:minmax(0,1fr)} /* ===================================================================== RATTRAPAGE DE CASCADE 3 : LES SELECTEURS D ELEMENT. Ne pas supprimer, voir les mesures. Aucun !important, aucun fichier etranger modifie. La tranche precedente n a corrige que des classes qui declaraient deja quelque chose. Or une regle d element EXPLICITE bat toujours une valeur HERITEE, quelle que soit la specificite : l heritage n en a aucune. Tout ce que la maquette laissait hériter etait donc grand ouvert. DEUX SOURCES, MESUREES LE 21 SEPTEMBRE, maquette rendue contre page rendue a 1440 : 1. .elementor-kit-6 a [0,1,1] post-6.css font-size:18px, font-family, font-weight:700, color et .elementor a [0,1,1] custom-frontend.min.css text-decoration-color Touchait TOUS nos liens, qui ne declarent rien et heritaient : __crumb a 12px / 600 / gris -> 18px / 700 / navy __link a 13px / orange -> 18px / navy << Lire l article >> __cover 15px / 400 / encre -> 18px / 700 / navy __btn encre -> navy La maquette neutralise cela par .iea-arch a{color:inherit} en 0,1,1 : a egalite, l ordre de chargement tranche, et le kit passe apres. 2. p [0,0,1] post-6.css line-height Battait l heritage de 1.6 sur les sept paragraphes qui ne declarent pas le leur : __sur, __rowdate, __panelmeta, __year, __progress, __sidedate, __empty p. Tous perdaient 1.6 pour 1.5. ON RETABLIT L HERITAGE PLUTOT QUE DE RECOPIER DES VALEURS. inherit suit le parent : si la maquette change 13px en 14px sur __link, le lien suit sans qu on ait a maintenir une seconde copie qui divergerait. ===================================================================== */ /* LE PIEGE, A LIRE AVANT DE STYLER UNE ANCRE DANS CE COMPOSANT. .iea-arch a{color:inherit;text-decoration:none}, declare tout en haut de cette feuille, pese 0,1,1. Il battra donc EN SILENCE toute regle future qui habille une ancre par sa seule classe, a 0,1,0, y compris une regle ecrite juste en dessous de lui. Cela nous a coute deux passages : le corps de << Lire l article >> d abord, la couleur du bouton ensuite. Le remede est le cran de portee, .iea-arch .iea-arch__x, et surtout PAS une nouvelle regle de base qui viendrait s ajouter au probleme. */ .iea-arch .iea-arch__crumb a, .iea-arch .iea-arch__link a, .iea-arch .iea-arch__cover{ font-size:inherit;font-family:inherit;font-weight:inherit; color:inherit;text-decoration:none;text-decoration-color:currentColor} /* Le blanc du bouton d appel a l action n est plus ici : la maquette porte desormais elle-meme .iea-arch .iea-arch__btn{color:var(--ia-on-navy)}, au meme cran de portee, plus haut dans cette feuille. Le doublon a ete retire pour qu il n y ait qu un seul endroit a modifier. */ /* Les sept paragraphes qui vivaient d heritage. On ne peut pas ecrire .iea-arch p{line-height:inherit} : a 0,1,1 cette regle ecraserait __chapo et __rowchapo, qui declarent le leur en 0,1,0. */ .iea-arch .iea-arch__sur, .iea-arch .iea-arch__rowdate, .iea-arch .iea-arch__panelmeta, .iea-arch .iea-arch__year, .iea-arch .iea-arch__progress, .iea-arch .iea-arch__sidedate, .iea-arch .iea-arch__empty p{line-height:inherit} /* Le titre de l etat vide est un h3 : meme fuite que les autres titres, simplement oublie en 1.2.3 parce qu il ne porte pas de classe __hl. */ .iea-arch .iea-arch__empty h3{font-size:18px;line-height:inherit;letter-spacing:normal} /* Le h2 du texte de rubrique : le corps et la couleur ont ete repris en 1.2.3, l interligne et l approche etaient restes au kit. */ .iea-arch .iea-arch__seo h2{line-height:inherit;letter-spacing:normal} /* reset.css impose line-height:1.5 a tous les champs de formulaire. */ .iea-arch .iea-arch__search .iea-arch__input{line-height:normal} /* Le rail n est pas rendu tant qu aucune Nouveaute n est publiee : cette regle est posee d avance pour que son bouton, un