/* page d'accueil : hero, repères, mot des co-directeurs, partenaires */ /* ---------- hero ---------- */ .hero{position:relative;min-height:742px;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden} .hero-bg{position:absolute;inset:0;background-size:cover; /* Sans position explicite, le navigateur cale le fond en haut à gauche : sur un écran étroit toute la rognure se fait à droite et la façade, pourtant symétrique, paraît de travers. On recentre. */ background-position:center center; background-repeat:no-repeat;transform:scale(1.03); /* Dérive très lente : l'image n'est jamais tout à fait immobile, sans que le mouvement soit perceptible autrement que comme une impression de relief. */ animation:derive 34s ease-in-out infinite alternate} @keyframes derive{from{transform:scale(1.03)}to{transform:scale(1.1)}} .hero-bg.parlement{background-position:center 26%;background-image:var(--diapo-1, url("../assets/img/hero-parlement.jpg"))} .hero-bg.promo{background-image:var(--diapo-2, url("../assets/img/hero-promo.jpg"));opacity:0; animation:diapo 26s ease-in-out infinite, derive 34s ease-in-out infinite alternate} @keyframes diapo{0%,55%{opacity:0}61%,92%{opacity:1}98%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){.hero-bg.promo{display:none}} .hero::after{ content:"";position:absolute;inset:0; /* Deux couches : un dégradé vertical qui assoit le bas de l'image, et un voile uniforme très léger qui détache le titre des parties claires de la façade. */ background: linear-gradient(180deg,rgba(14,12,12,.26) 0,rgba(14,12,12,.44) 40%,rgba(14,12,12,.92) 100%), rgba(14,12,12,.14); } .hero .wrap{position:relative;z-index:2;padding-top:190px;padding-bottom:78px;width:100%} .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:13px;font-weight:500;letter-spacing:.13em; color:#fff;margin:0 0 26px;text-transform:uppercase;text-shadow:0 1px 16px rgba(0,0,0,.6)} .eyebrow::before{content:"";width:30px;height:2px;background:var(--crimson);flex:none} .hero h1{ font-size:clamp(42px,6.4vw,80px);line-height:1.02;margin:0 0 26px;font-weight:300;letter-spacing:-.01em;max-width:15ch; text-shadow:0 2px 30px rgba(0,0,0,.45) } .hero h1 em{display:block;font-style:normal;color:inherit} .hero p.lede{font-size:clamp(17px,1.7vw,20.5px);max-width:56ch;color:#fff;margin:0 0 38px;font-family:Spectral,serif; line-height:1.6;text-shadow:0 1px 20px rgba(0,0,0,.5)} /* Repère de défilement : un filet dans lequel un segment rouge descend en boucle, posé à l'écart du titre et des boutons. Masqué sur les petits écrans, où le geste de défiler n'a pas besoin d'être suggéré. */ .hero-defiler{position:absolute;right:34px;bottom:38px;z-index:2; display:block;width:16px;height:74px} .hero-defiler-trait{position:absolute;left:50%;top:0;width:1px;height:100%; background:rgba(255,255,255,.34);overflow:hidden} .hero-defiler-trait::after{content:"";position:absolute;left:0;width:1px;height:34%; background:var(--crimson);animation:descendre 2.6s cubic-bezier(.6,.05,.35,1) infinite} @keyframes descendre{0%{top:-40%}55%,100%{top:110%}} .hero-defiler:hover .hero-defiler-trait{background:rgba(255,255,255,.6)} @media (max-width:680px){.hero-defiler{display:none}} /* ---------- repères ---------- */ .figures{background:#fff;border-bottom:1px solid var(--line)} .figures .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .fig{padding:40px 32px 42px;border-left:1px solid var(--line)} .fig:first-child{border-left:0;padding-left:0} /* Chiffres d'un cran plus petits que dans la version d'origine (52 px), pour que la bande se remarque sans occuper le haut de la page. */ .fig b{display:block;font-family:Spectral,serif;font-size:42px;font-weight:300;line-height:1;color:var(--crimson)} .fig span{display:block;margin-top:14px;font-size:13.5px;color:var(--muted);max-width:20ch} /* ---------- mot des co-directeurs ---------- */ .word{position:relative;padding:88px 0 64px} .word .wrap{display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:start} /* La photo occupe la colonne de gauche, à hauteur du texte et non du titre : la marge haute reprend la hauteur du h2 (taille × interligne) et sa marge basse, pour que le haut de la photo tombe sur la ligne du sous-titre. */ /* height:auto est indispensable : l'attribut height de la balise vaut sinon hauteur fixe, et aspect-ratio est ignoré. */ .word-photo{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block; margin-top:calc(clamp(29px,3.4vw,42px) * 1.15 + 10px)} .word h2{font-size:clamp(29px,3.4vw,42px);font-weight:300;line-height:1.15;margin:0 0 10px} .word .subtitle{font-family:Spectral,serif;font-size:17px;color:var(--crimson);margin:0 0 32px} blockquote{margin:0;font-family:Spectral,serif;font-style:italic;font-size:clamp(21px,2.4vw,28px); line-height:1.62;font-weight:300;color:var(--ink); /* Justifiée. La césure automatique est indispensable ici : sans elle, une colonne de cette largeur creuse des rivières de blanc entre les mots. (La page est en lang="fr", le navigateur coupe donc selon le français.) */ text-align:justify;hyphens:auto} .signature{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:44px} .signature div{max-width:32ch} .signature div b{display:block;font-family:Spectral,serif;font-size:18.5px;font-weight:600} .signature div span{font-size:13.5px;color:var(--muted)} .readmore{display:inline-block;margin-top:28px;font-size:14.5px;font-weight:600;color:var(--crimson); border-bottom:1px solid currentColor;padding-bottom:2px} /* ---------- carrousel partenaires ---------- */ /* Le bandeau blanc des partenaires : resserré, et remonté vers le mot des co-directeurs. */ .partners{background:#fff;padding:60px 0 58px;border-top:1px solid var(--line)} /* Rythme vertical de l'accueil, plus resserré que sur les pages intérieures. « Ce qui distingue » et « Actualités » partagent le même fond : rien ne marque la coupure entre les deux, et l'espace d'une section à l'autre s'y lit comme un trou. C'est là qu'on serre le plus. */ #formation{padding:72px 0 40px} #actualites{padding:40px 0 76px} .partners .sec-head{margin-bottom:36px} /* ---------- effets de l'accueil ---------- Tout reprend le vocabulaire déjà en place ailleurs sur le site : le filet rouge des titres de carte, l'agrandissement d'image au survol des pôles, l'apparition au défilement de Candidater et de La formation. */ /* Les encarts sont de simples blocs : pas de filet au-dessus du titre, un titre en romaine claire plutôt qu'en gras, et aucun effet au survol — ils ne sont pas cliquables. */ #vue-index .grid3 .card h3{font-weight:400} #vue-index .grid3 .card h3::before{display:none} /* Actualités : pas d'ombre portée au repos, mais la vignette se soulève et s'agrandit légèrement au survol, et le titre passe au rouge. */ #vue-index .pub-cover{box-shadow:none;overflow:hidden} #vue-index .pub-cover img{transition:transform .6s cubic-bezier(.2,.7,.3,1)} #vue-index .pub-cover:hover img{transform:scale(1.05)} #vue-index .pub h3 a{transition:color .22s ease} #vue-index .pub:hover h3 a{color:var(--crimson)} /* Les encarts reprennent la justification du reste du site (composants.css) : la règle qui les passait en drapeau est retirée. Chaque encart se referme sur un filet rouge, posé après le texte. */ /* L'encart devient une colonne, ce qui permet de pousser le filet tout en bas (margin-top:auto) : les encarts d'une rangée ayant la même hauteur, leurs filets tombent alors sur une même ligne, quelle que soit la longueur des textes. La marge basse du paragraphe garantit l'écart minimal. */ #vue-index .grid3 .card{display:flex;flex-direction:column} #vue-index .grid3 .card p{margin-bottom:26px} #vue-index .grid3 .card::after{content:"";display:block;width:50%;height:2px; background:var(--crimson);margin-top:auto} /* Les deux liens de fin de bloc s'assombrissent au survol. */ #vue-index .readmore,#vue-index .sec-foot a{transition:color .22s ease,border-bottom-color .22s ease} #vue-index .readmore:hover,#vue-index .sec-foot a:hover{color:var(--crimson-dark)} /* ---------- animation d'ouverture ---------- */ @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero .wrap>*{animation:rise .9s cubic-bezier(.22,.7,.3,1) backwards} .hero .wrap>*:nth-child(1){animation-delay:.05s} .hero .wrap>*:nth-child(2){animation-delay:.18s} .hero .wrap>*:nth-child(3){animation-delay:.31s} /* ---------- actualités de l'accueil ---------- Deux objets seulement : la dernière parution, et la dernière publication LinkedIn. La colonne de gauche est fixe pour que la couverture garde une taille de vignette et ne s'étire pas sur la moitié de la page. */ /* Les deux colonnes s'étirent à la même hauteur : c'est la fiche de la Gazette, dont la hauteur dépend du texte, qui donne la mesure — le rail des posts s'y aligne au lieu d'imposer une hauteur fixe. */ #vue-index .accueil-actus{display:grid;grid-template-columns:330px minmax(0,1fr);gap:38px; align-items:stretch} /* Rail horizontal : on en voit deux, la barre donne accès aux suivants. Le rail est focusable pour pouvoir le parcourir aussi au clavier. */ #vue-index .posts-defilants{display:flex;gap:20px;height:100%; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity; padding-bottom:14px} /* Pas de scrollbar-width ni de scrollbar-color ici : les poser désactive les règles ::-webkit-scrollbar, et macOS revient alors à sa barre flottante, qui n'apparaît que pendant le défilement. Sans elles, la barre est dessinée et reste visible en permanence. */ #vue-index .posts-defilants::-webkit-scrollbar{height:8px} #vue-index .posts-defilants::-webkit-scrollbar-track{background:rgba(28,28,28,.09)} #vue-index .posts-defilants::-webkit-scrollbar-thumb{background:var(--crimson)} #vue-index .posts-defilants .post{flex:0 0 330px;scroll-snap-align:start;display:flex} #vue-index .posts-defilants .post iframe{height:100%} #vue-index .posts-defilants:focus-visible{outline:2px solid var(--crimson);outline-offset:3px} @media (max-width:900px){ #vue-index .accueil-actus{grid-template-columns:1fr;gap:30px} #vue-index .accueil-actus .publication{max-width:330px} /* en colonne unique, la fiche ne donne plus la hauteur : on la fixe */ #vue-index .posts-defilants{height:auto} #vue-index .posts-defilants .post iframe{height:560px} } /* Les publications du rail sont nos propres cartes, plus des intégrations : elles occupent toute la hauteur du rail, comme le faisaient les cadres. */ #vue-index .posts-defilants .post-li{flex:0 0 330px;scroll-snap-align:start;height:100%} #vue-index .posts-defilants .post-visuel img{aspect-ratio:1;object-fit:cover} @media (max-width:1040px){ #vue-index .posts-defilants .post-li{height:auto} } /* ---------- entêtes de section de l'accueil ---------- Le titre était en graisse 300 à grande taille : un empattement aussi maigre paraît fragile à l'écran, et le chapeau posé dessous, au format d'un paragraphe ordinaire, n'apportait aucune structure. Titre et chapeau passent donc côte à côte, alignés sur leur ligne de base et séparés du bloc précédent par un filet. La composition tient d'elle-même : c'est la mise en page qui structure, plus la seule taille du texte. */ #vue-index .sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px 64px;align-items:baseline; padding-top:30px;border-top:1px solid var(--line);margin-bottom:46px} #vue-index .sec-head h2{margin:0;font-size:clamp(25px,2.7vw,34px);font-weight:600; line-height:1.12;letter-spacing:-.012em;white-space:normal;text-wrap:balance} #vue-index .sec-head p{margin:0;font-size:15.6px;line-height:1.72;color:var(--muted); max-width:54ch} @media (max-width:860px){ #vue-index .sec-head{grid-template-columns:1fr;gap:12px;margin-bottom:34px} } /* Crème pour le mot des co-directeurs et les six chiffres, blanc pour le bandeau des logos et les actualités : l'alternance marque les coupures. */ .word,#formation{background:var(--stone-soft)} #actualites{background:#fff} /* ---------- apparition au défilement ---------- Les trois blocs qui suivent le mot des co-directeurs se lèvent quand ils entrent dans l'écran. Le mouvement est court et ne se joue qu'une fois : il casse la monotonie du défilement sans se faire remarquer à chaque visite. L'observateur est celui du site (js/animations.js) ; sans JavaScript, ou si le système demande moins d'animations, tout reste affiché. */ #vue-index .partners.apparait, #vue-index .sec.apparait{transition-duration:.62s} /* Un chapeau vidé laisse une colonne inutile : le titre reprend la largeur. */ #vue-index .sec-head:has(p:empty){grid-template-columns:1fr} /* ---------- « Le DJCE en quelques chiffres » : liste numérotée ---------- Les six points étaient six cases de même taille, en petites colonnes justifiées : rien n'attirait l'œil, et la justification sur quarante signes creusait des blancs entre les mots à chaque ligne. Ils s'empilent désormais sur toute la largeur, chacun précédé de son numéro. Le texte gagne une colonne confortable, au fer à gauche et sans coupure : on lit d'une traite au lieu de picorer six cases. Le numéro en rouge remplace les filets, qui ne disaient rien. */ #vue-index .reperes{list-style:none;margin:0;padding:0;counter-reset:repere} #vue-index .repere{counter-increment:repere; display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 36px; padding:34px 0;border-top:1px solid var(--line)} #vue-index .repere:first-child{border-top:0;padding-top:4px} #vue-index .repere::before{content:counter(repere,decimal-leading-zero); font-family:Spectral,Georgia,serif;font-size:36px;font-weight:300;line-height:.9; color:var(--crimson);letter-spacing:.01em} #vue-index .repere h3{margin:0 0 9px;font-size:21.5px;font-weight:600;line-height:1.2} #vue-index .repere p{margin:0;font-size:16.5px;line-height:1.72;color:#3F3F3F; max-width:72ch;text-align:left;hyphens:none} @media (max-width:680px){ #vue-index .repere{grid-template-columns:1fr;gap:10px;padding:26px 0} #vue-index .repere::before{font-size:28px} } /* ---------- variante : mosaïque asymétrique ---------- Même contenu, autre composition : les six points reprennent la grille, mais de tailles inégales. Le premier occupe quatre cases et porte un texte plus grand : l'œil sait par où commencer, ce que six cases identiques ne disaient pas. Une classe suffit à passer d'une forme à l'autre. */ #vue-index .reperes.mosaique{display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:var(--line);border:1px solid var(--line)} #vue-index .mosaique .repere{display:block;background:#fff;border-top:0; padding:30px 32px 34px} #vue-index .mosaique .repere::before{display:block;margin-bottom:14px;font-size:23px} #vue-index .mosaique .repere h3{font-size:20px;margin-bottom:8px} #vue-index .mosaique .repere p{font-size:15.8px;line-height:1.68;max-width:46ch} /* La première entrée tient la place de quatre : c'est elle qu'on lit d'abord. */ #vue-index .mosaique .repere:nth-child(1){grid-column:span 2;grid-row:span 2; padding:42px 44px 46px} #vue-index .mosaique .repere:nth-child(1)::before{font-size:34px;margin-bottom:18px} #vue-index .mosaique .repere:nth-child(1) h3{font-size:27px;margin-bottom:12px} #vue-index .mosaique .repere:nth-child(1) p{font-size:17.4px;line-height:1.72;max-width:58ch} /* La dernière rangée : une case simple, puis une large. */ #vue-index .mosaique .repere:nth-child(5){grid-column:span 2} #vue-index .mosaique .repere:nth-child(5) p{max-width:62ch} @media (max-width:1040px){ #vue-index .reperes.mosaique{grid-template-columns:repeat(2,1fr)} #vue-index .mosaique .repere:nth-child(1){grid-column:span 2;grid-row:auto} #vue-index .mosaique .repere:nth-child(5){grid-column:span 2} } @media (max-width:680px){ #vue-index .reperes.mosaique{grid-template-columns:1fr} #vue-index .mosaique .repere, #vue-index .mosaique .repere:nth-child(1), #vue-index .mosaique .repere:nth-child(5){grid-column:auto;padding:26px 24px 28px} } /* ---------- variante : les chiffres en avant ---------- Le contenu change autant que la forme : six données plutôt que six paragraphes. Le chiffre porte l'information, la phrase l'explique en une ligne ou deux. C'est ce qui se retient d'un site qu'on parcourt debout, dans un couloir de faculté. */ #vue-index .chiffres{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:54px 64px} #vue-index .chiffres li{display:block} #vue-index .chiffre{margin:0 0 12px;display:flex;align-items:baseline;gap:10px; padding-bottom:14px;border-bottom:2px solid var(--crimson)} #vue-index .chiffre b{font-family:Spectral,Georgia,serif;font-size:clamp(42px,5vw,62px); font-weight:300;line-height:.86;letter-spacing:-.02em;color:var(--crimson)} #vue-index .chiffre span{font-family:Montserrat,sans-serif;font-size:12px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} #vue-index .chiffre-texte{margin:0;font-size:15.8px;line-height:1.66;color:#3F3F3F; text-align:left;hyphens:none} @media (max-width:1040px){ #vue-index .chiffres{grid-template-columns:repeat(2,1fr);gap:44px 48px} } @media (max-width:680px){ #vue-index .chiffres{grid-template-columns:1fr;gap:34px} } /* ---------- apparition en deux temps ---------- « Le DJCE de Rennes en quelques chiffres » et « Actualités » ne se lèvent plus d'un bloc : le titre vient d'abord, puis son développement suit, chiffre après chiffre. Le décalage est court — six centièmes de seconde entre deux éléments — assez pour que l'œil suive, trop peu pour attendre. La section elle-même ne bouge plus : c'est la classe « vu », posée par l'observateur au moment où elle entre dans l'écran, qui déclenche ses enfants. */ #vue-index #formation.apparait, #vue-index #actualites.apparait{opacity:1;transform:none;transition:none} #vue-index #formation .sec-head, #vue-index #actualites .sec-head, #vue-index .chiffres li, #vue-index .accueil-actus{opacity:0;transform:translateY(16px); transition:opacity .58s ease,transform .58s cubic-bezier(.2,.7,.3,1)} /* Les sélecteurs de révélation reprennent l'identifiant de la section : une règle à deux identifiants l'emporte sur une règle à un seul, et le titre serait resté invisible. */ #vue-index #formation.vu .sec-head, #vue-index #actualites.vu .sec-head, #vue-index .vu .chiffres li, #vue-index .vu .accueil-actus{opacity:1;transform:none} #vue-index .vu .chiffres li{transition-delay:.14s} #vue-index .vu .chiffres li:nth-child(2){transition-delay:.20s} #vue-index .vu .chiffres li:nth-child(3){transition-delay:.26s} #vue-index .vu .chiffres li:nth-child(4){transition-delay:.32s} #vue-index .vu .chiffres li:nth-child(5){transition-delay:.38s} #vue-index .vu .chiffres li:nth-child(6){transition-delay:.44s} #vue-index .vu .accueil-actus{transition-delay:.16s} @media (prefers-reduced-motion:reduce){ #vue-index #formation .sec-head, #vue-index #actualites .sec-head, #vue-index .chiffres li, #vue-index .accueil-actus{opacity:1;transform:none;transition:none} } /* ---------- échelle resserrée de la page d'accueil ---------- Parti minimaliste : tout descend d'un cran. Les grandes tailles donnaient à la page un ton de brochure ; en réduisant, le texte redevient du texte et c'est le blanc qui structure. La photo des directeurs passe de 360 à 240 pixels de côté — elle accompagne le propos au lieu de le dominer. Rien ne descend sous 15 px : en deçà, la lecture devient pénible pour une part non négligeable des visiteurs. */ #vue-index .word .wrap{grid-template-columns:240px 1fr;gap:56px} #vue-index .word-photo{margin-top:calc(clamp(23px,2.3vw,29px) * 1.15 + 8px)} #vue-index .word h2{font-size:clamp(23px,2.3vw,29px);margin-bottom:8px} #vue-index .word .subtitle{font-size:14.5px;margin-bottom:24px} #vue-index blockquote{font-size:clamp(17px,1.6vw,20px);line-height:1.66} #vue-index .signature{margin-top:26px;padding-top:20px;gap:36px} #vue-index .signature div b{font-size:16px} #vue-index .signature div span{font-size:12.8px} #vue-index .readmore{margin-top:22px;font-size:13.5px} #vue-index .sec-head h2{font-size:clamp(22px,2.2vw,28px)} #vue-index .sec-head p{font-size:14.8px} #vue-index .chiffres{gap:46px 56px} #vue-index .chiffre b{font-size:clamp(34px,3.6vw,46px)} #vue-index .chiffre span{font-size:11px} #vue-index .chiffre-texte{font-size:15px;line-height:1.64} #vue-index .partners .sec-head{margin-bottom:28px} @media (max-width:1040px){ #vue-index .word .wrap{grid-template-columns:200px 1fr;gap:38px} } @media (max-width:680px){ #vue-index .word .wrap{grid-template-columns:1fr} #vue-index .word-photo{max-width:220px;margin-top:0} } /* ---------- la photo des directeurs déborde vers la gauche ---------- Sa colonne garde exactement sa largeur : le texte ne bouge pas d'un pixel. La photo, elle, s'étend dans la marge libre à gauche du contenu — autant que l'écran le permet, jamais au-delà, pour ne pas créer de défilement horizontal. Sur un écran étroit, le débord vaut zéro et rien ne change. */ #vue-index .word{--debord:clamp(0px, calc((100vw - var(--wrap)) / 2 - 16px), 120px)} #vue-index .word-photo{width:calc(100% + var(--debord));max-width:none; margin-left:calc(var(--debord) * -1)} @media (max-width:680px){ #vue-index .word{--debord:0px} } /* ---------- encarts courts du rail d'actualités ---------- Sur l'accueil, une publication ou un post se résume à son image et à son titre : le détail est sur la page Actualités, à un clic. Les cartes y gagnent en hauteur et le rail se parcourt d'un coup d'œil. */ #vue-index .publication-courte h3{margin:18px 0 0;font-size:17.5px;line-height:1.32} #vue-index .publication-courte .publication-actions{margin-top:16px} #vue-index .posts-defilants .post-texte{font-size:15px;line-height:1.55; margin-bottom:14px} #vue-index .posts-defilants .post-corps{padding:18px 20px 18px} #vue-index .posts-defilants .post-lien{font-size:13px} /* ---------- les posts du rail deviennent carrés ---------- La carte occupait toute la hauteur du rail, fixée par celle de la gazette : d'où un grand vide entre le texte et le lien, que « margin-top:auto » repoussait en bas. Elle prend maintenant une proportion carrée, le lien suit immédiatement le texte, et c'est l'image qui absorbe la hauteur restante. Le texte est borné à deux lignes pour que toutes les cartes se ressemblent. */ /* Centrées dans la hauteur du rail, que fixe la carte de la gazette : sans quoi les carrés se collent en haut et laissent un vide sous eux. */ #vue-index .posts-defilants .post-li{flex:0 0 330px;height:auto;align-self:start; aspect-ratio:1;overflow:hidden;display:flex;flex-direction:column} #vue-index .posts-defilants .post-visuel{flex:1;min-height:0;overflow:hidden} #vue-index .posts-defilants .post-visuel img{width:100%;height:100%; aspect-ratio:auto;object-fit:cover} #vue-index .posts-defilants .post-corps{flex:none;padding:14px 18px 16px} #vue-index .posts-defilants .post-texte{margin:0 0 9px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #vue-index .posts-defilants .post-lien{margin-top:0} @media (max-width:1040px){ #vue-index .posts-defilants .post-li{flex:0 0 280px} } /* ---------- la gazette au même format que les actualités ---------- Carte carrée elle aussi : la couverture occupe la hauteur restante, recadrée sur son centre, et le titre comme les deux boutons se resserrent en pied. Les quatre encarts du rail ont ainsi la même silhouette. */ /* Calée en haut de la rangée, comme les posts : le rail réserve sa barre de défilement en bas, et sans cela les deux cartes ne partaient pas de la même ligne. */ #vue-index .publication-courte{aspect-ratio:1;align-self:start;overflow:hidden} #vue-index .publication-courte .publication-couverture{flex:1;min-height:0} #vue-index .publication-courte .publication-couverture img{height:100%; aspect-ratio:auto;object-fit:cover;object-position:center 32%} /* Le pied de carte se resserre : à hauteur constante, tout ce que le texte cède en marges, la couverture le gagne. */ #vue-index .publication-courte{padding:14px 14px 12px} #vue-index .publication-courte h3{margin:11px 0 0;font-size:15.5px;line-height:1.28} #vue-index .publication-courte .publication-actions{margin-top:9px} #vue-index .publication-courte .pub-btn{padding:7px 13px;font-size:12.5px} /* Les noms des co-directeurs en rouge : ce sont eux qui signent le propos. */ #vue-index .signature div b{color:var(--crimson)}