/* page Partenariats : logos, parrains, structures de stage */ /* La page est blanche, et le gris ne sert plus qu'une fois : il se resserre en un panneau autour des partenaires. Étendu à toute la hauteur, il était le fond de la page et ne disait plus rien ; borné, il désigne un bloc. Le panneau prend la largeur de la colonne de texte, d'un bord à l'autre : ses côtés tombent sur ceux des cases des parrains, juste au-dessus. */ #vue-partenariats .sec.alt{background:none} /* Les panneaux se décollent du blanc : une ombre large et basse, qui déteint sur la page, et un filet d'un pixel tout autour. L'ombre seule aurait laissé le bord du haut à la seule différence du gris au blanc — quatorze points sur deux cent cinquante-cinq, autant dire rien. Ces deux-là n'ont pas de pourtour à eux : ils prennent le filet en plus de l'ombre. Les tableaux et les rails du reste du site en ont déjà un, et se contentent de l'ombre. */ #vue-partenariats{--panneau-ombre:var(--filet-bloc),var(--ombre-bloc)} .partenaires-cadre{background:var(--gris-page);padding:58px 48px 62px; box-shadow:var(--panneau-ombre)} /* Le titre ne coiffe plus une section de pleine page mais un bloc : il se met au milieu, plus petit, et son filet passe au-dessus de lui. Le filet est centré par une marge négative et non par « translateX » : la transformation est déjà prise, c'est elle qui tire le trait au défilement. Elle part donc du milieu plutôt que de la gauche. */ .partenaires-cadre .sec-head{text-align:center;margin-bottom:48px} .partenaires-cadre .sec-head h2{font-size:clamp(23px,2.4vw,30px)} .partenaires-cadre .sec-head::before{left:50%;margin-left:-23px} .partenaires-cadre .sec-head.apparait::before{transform-origin:center} @media (max-width:860px){.partenaires-cadre{padding:44px 26px 48px}} @media (max-width:560px){.partenaires-cadre{padding:36px 18px 40px}} /* ---------- grille des partenaires ---------- */ /* Grille souple plutôt que grille rigide : la dernière rangée, souvent incomplète, se centre au lieu de laisser des cases vides en bout de ligne. Le filet vient d'une ombre portée sur chaque case — les ombres voisines se rejoignent dans l'interstice d'1px et ne dessinent qu'un seul trait. */ .logos-grille{display:flex;flex-wrap:wrap;justify-content:center;gap:1px} .logo-case{flex:0 0 calc(20% - 1px);background:#fff;height:124px; display:flex;align-items:center;justify-content:center;padding:0 22px; box-shadow:0 0 0 1px var(--line)} .logo-case img{max-height:58px;max-width:150px;width:auto;height:auto;object-fit:contain} @media (max-width:1040px){.logo-case{flex:0 0 calc(33.333% - 1px)}} @media (max-width:680px){.logo-case{flex:0 0 calc(50% - 1px);height:104px;padding:0 16px}} /* ---------- carrousel des structures de stage ---------- */ /* La page est d'un seul tenant : sans alternance de fond, le rythme vertical des pages intérieures (104 px de part et d'autre) creuse des trous entre les trois blocs. On resserre, en gardant une respiration plus large sous l'entête et avant le pied de page. */ #vue-partenariats .sec{padding:56px 0 44px} #vue-partenariats #parrains{padding-top:76px} /* ---------- les croix entre les deux panneaux ---------- Le blanc qui sépare les cases des anciens parrains du panneau gris des partenaires était vide sur toute sa gauche, le bouton tenant la droite. Les croix l'occupent : même semis que sur la page des promotions, posé ici en bas à gauche. C'est le seul motif que deux pages partagent, et c'est voulu — ce sont les deux endroits du site où une grille de cases laisse un angle libre. Le calque déborde de 220 px sous la section pour que le semis enjambe la jonction. Il doit passer derrière le panneau gris : « isolation : isolate » fait de la section un contexte d'empilement, qui se peint alors après les sections suivantes et non avant — les croix se retrouvaient par-dessus le panneau. Un rang explicite sur la section des partenaires rétablit l'ordre que le flux donnait tout seul. Le masque les tient loin de la bande du parrain, qui a déjà sa propre trame : deux matières superposées se seraient brouillées. */ #vue-partenariats #parrains{position:relative;isolation:isolate} #vue-partenariats #parrains::before{content:"";position:absolute;inset:0 0 -220px 0;z-index:-1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 17.5v9M17.5 22h9' stroke='%231C1C1C' stroke-opacity='.26' stroke-width='1'/%3E%3C/svg%3E"); -webkit-mask-image:radial-gradient(44% 30% at 2% 88%,#000 8%,transparent 78%); mask-image:radial-gradient(44% 30% at 2% 88%,#000 8%,transparent 78%)} #vue-partenariats #partenaires{position:relative;z-index:1} /* Le bandeau de logos est le dernier bloc de la page : on laisse respirer sous lui, sinon il vient buter contre le pied de page noir. */ #vue-partenariats .sec.confiance{padding-bottom:128px} /* Les logos n'ont plus de fond à contrarier — la page est blanche — mais le filet leur reste : sans lui le bandeau n'est plus qu'une rangée d'images flottantes, sans rythme. */ #vue-partenariats .logo-tile{background:#fff;box-shadow:0 0 0 1px var(--line)} .confiance .marquee-track.lent{animation-duration:64s} .confiance .logo-tile{height:104px} /* ---------- le parrain de la promotion en cours ---------- Une seule entreprise accompagne la promotion d'aujourd'hui : elle a droit à plus de place que celles qui l'ont précédée, descendues dans le rail. Elle occupe une bande blanche d'un bord à l'autre de l'écran, comme le manifeste de L'école occupe sa bande rouge : c'est le changement de fond qui détache le bloc, sans contour à faire flotter. La composition tient en trois temps plutôt qu'en deux colonnes. Le logo à gauche et les trois paragraphes empilés à droite donnaient un mur de gris et laissaient le bas de la colonne du logo vide : 1. le nom et le logo sur la même ligne, aux deux bouts de la bande ; 2. la phrase de présentation sous un filet, en grand, sur toute la largeur ; 3. les deux développements côte à côte. Les deux colonnes du bas sont inégales : « pourquoi ce parrainage » fait deux fois la longueur de la présentation du groupe, et deux colonnes égales auraient laissé la première à moitié vide. */ /* ---------- le fond de la bande du parrain ---------- La bande était un blanc nu : un tiers d'écran sans rien, entre deux blocs pleins. Elle reçoit une matière, entièrement faite de dégradés — aucune image à charger, et elle suit n'importe quelle largeur. Trois couches, de la plus discrète à la plus lue : 1. un quadrillage de filets d'un pixel tous les 78, qui donne l'échelle ; 2. un fondu radial qui l'efface vers les bords, pour que la trame n'arrive jamais nette sur une arête — sans lui elle ferait du papier millimétré ; 3. une lueur cramoisie du côté du logo, et une ombre froide à l'opposé, qui creusent l'espace en diagonale. Tout est très bas en opacité — de trois à sept pour cent. À cette dose la trame ne se voit pas, elle se sent : c'est ce qui la distingue d'un motif. */ .parrain-bande{position:relative;isolation:isolate; padding:60px 0 62px;margin-bottom:58px; background: radial-gradient(62% 68% at 84% 16%, rgba(194,3,25,.065), transparent 68%), radial-gradient(58% 72% at 4% 94%, rgba(28,28,28,.055), transparent 70%), #FCFCFD; border-top:1px solid rgba(28,28,28,.08); border-bottom:1px solid rgba(28,28,28,.08)} .parrain-bande::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: repeating-linear-gradient(90deg,rgba(28,28,28,.062) 0 1px,transparent 1px 78px), repeating-linear-gradient(0deg,rgba(28,28,28,.042) 0 1px,transparent 1px 78px); -webkit-mask-image:radial-gradient(86% 78% at 50% 34%,#000 6%,transparent 74%); mask-image:radial-gradient(86% 78% at 50% 34%,#000 6%,transparent 74%)} /* Le filet court sous le nom et s'arrête avant le logo : porté par la première colonne et non par l'entête entière, il s'interrompt dans l'écart qui les sépare. On le raccourcit à 46 % de la bande pour laisser le logo respirer et avancer vers le milieu, au lieu d'être plaqué contre le bord droit. « align-items:center » centre le logo sur la hauteur de l'entête, et la marge basse du nom est réglée pour que le filet tombe sous lui sans le toucher. */ .parrain-tuile-tete{display:flex;flex-wrap:wrap;align-items:center;gap:26px 40px} .parrain-tuile-tete>div:first-child{position:relative;flex:0 1 40%;padding-bottom:38px} /* Le filet est un pseudo-élément et non une bordure : une bordure ne se transforme pas, et celui-ci se trace de gauche à droite à l'arrivée du bloc. */ .parrain-tuile-tete>div:first-child::after{content:"";position:absolute;left:0;right:0;bottom:0; height:1px;background:var(--line)} .parrain-tuile-rubrique{margin:0 0 12px;font-family:Montserrat,sans-serif;font-size:11px; font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--crimson); display:flex;align-items:center;gap:13px} .parrain-tuile-rubrique::before{content:"";width:28px;height:2px;background:var(--crimson);flex:none; transform-origin:left} .parrain-tuile h3{margin:0;font-family:Spectral,serif;font-weight:400; font-size:clamp(30px,3.4vw,44px);line-height:1.1;color:var(--ink)} /* Le logo est borné des deux côtés : par sa hauteur pour les sigles carrés, par sa largeur pour les très allongés — Air France tient dans un rapport de 3,7 pour 1 et serait sinon trois fois plus petit en surface qu'un carré. */ /* « flex:1 1 0 » et non « auto » : avec « auto », c'est la taille naturelle du logo qui décide du retour à la ligne, et il basculait sous le titre dès 1100 px sans avoir eu l'occasion de rétrécir. Avec une base nulle, il prend la place qui reste et se réduit dedans ; la ligne tient jusqu'à la rupture prévue à 860. */ /* La classe « parait » et « --derive » sont posées par js/animations.js au défilement. Le logo arrive quand il entre dans l'écran, puis monte de quelques pixels pendant qu'on traverse la bande, le texte restant fixe. Rien ne se joue au chargement de la page : c'est le défilement qui anime. Sans script, ni l'une ni l'autre n'est posée : le logo est là, immobile. */ .parrain-tuile-blason{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center; transform:translateY(var(--derive,0px)); will-change:transform,opacity; /* Le logo descend franchement sous la ligne du filet : il est plus bas que le nom, pas aligné sur lui. Le filet ne court que sur les quatre premiers dixièmes de la bande, les deux ne se rencontrent donc jamais. La marge grandit l'entête, qui recentre le bloc du nom : le logo ne descend donc que de la moitié de ce qu'on lui ajoute. 88 px le posent 54 sous le filet. */ margin-top:88px} /* 148 px : au-delà, c'est la largeur qui borne le logo d'Air France — il tient dans un rapport de 3,7 pour 1 et toucherait le filet. */ .parrain-tuile-blason img{max-width:100%;max-height:148px;width:auto;height:auto;object-fit:contain; /* Le logo monte en se révélant, comme les blocs de la section Débouchés : même durée, même courbe, même course de seize pixels. Il remplaçait un balayage de gauche à droite, lié au défilement pixel par pixel. C'est le script qui pose « parait », quand le logo entre vraiment dans l'écran (js/animations.js). Sans lui la règle suivante ne s'applique jamais, et le logo se montre d'emblée — simplement sans arriver. */ transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)} .parrain-tuile-blason:not(.parait) img{opacity:0;transform:translateY(16px)} /* La phrase de présentation porte le bloc : elle passe en Spectral, au corps d'un chapeau de page, et n'est pas justifiée — une seule phrase justifiée se serait creusée de blancs. */ /* La phrase se rapproche du logo : il descend assez bas pour que l'ancienne respiration de 30 px creuse un trou sous lui. */ .parrain-tuile-texte{margin:16px 0 0;font-family:Spectral,serif;font-weight:300; font-size:clamp(19px,2vw,25px);line-height:1.5;color:var(--ink);max-width:42ch} .parrain-tuile-detail{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:34px 72px;margin-top:38px} .parrain-tuile-detail h4{margin:0 0 12px;font-family:Montserrat,sans-serif;font-size:11px; font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)} .parrain-tuile-note{margin:0;font-size:15.4px;line-height:1.75;color:var(--muted); text-align:justify;hyphens:manual} .parrain-tuile .fiche-site{margin-top:20px;padding-top:0;align-self:flex-start} @media (max-width:860px){ .parrain-bande{padding:42px 0 44px;margin-bottom:44px} .parrain-tuile-tete>div:first-child{flex:1 1 100%;padding-bottom:22px} .parrain-tuile-blason{justify-content:flex-start;margin-top:0} .parrain-tuile-blason img{max-height:92px} .parrain-tuile-detail{grid-template-columns:1fr;gap:28px} .parrain-tuile-texte{margin-top:24px;max-width:none} } /* ---------- les cartes des parrains précédents ---------- Même largeur que les vues du ruban des pôles, même mécanique de rail que les distinctions de L'école : défilement horizontal natif, et un bouton qui avance d'une carte puis propose de revenir au début. Sans JavaScript le bouton ne paraît pas et la bande se fait glisser au doigt ou à la molette. La carte tient en deux étages : un en-tête clair où le logo est posé au centre, avec l'année dans l'angle, puis le corps blanc. Les logos ont des formats trop différents — d'un carré à un bandeau de 3,7 pour 1 — pour être posés à même le texte : chacun trouvait sa propre hauteur et les neuf titres ne s'alignaient plus. Sur un fond à part, de hauteur fixe, ils sont tous à la même place. Le filet d'un pixel ne vient pas du fond du cadre mais de chaque case, posé à l'extérieur de celle-ci. Deux cases voisines écrivent le leur au même pixel — celui de la goutttière — et il n'y paraît qu'un trait. Le fond du cadre ne pouvait plus s'en charger : le second panneau a une case seule sur sa deuxième ligne, et ce fond se serait vu de part et d'autre. */ .parrains-avant{margin-top:56px} .parrains-avant-titre{margin:0 0 20px;font-family:Montserrat,sans-serif;font-size:11px; font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)} /* Quatre par ligne, et la ligne fait toute la largeur. Un panneau de cinq met donc son dernier à la ligne suivante, où le centrage le pose au milieu : rien ne vise ce cinquième-là, c'est la règle commune qui l'y met. Les lignes sont écartées, les colonnes jointes : la case restée seule touchait la rangée du dessus par son filet et s'y lisait comme une cinquième colonne tombée. Chaque rangée se tient maintenant à part. */ .parrains-panneau{display:flex;flex-wrap:wrap;justify-content:center; column-gap:1px;row-gap:24px} .parrains-panneau[hidden]{display:none} /* Des carrés : la carte ne porte plus qu'un logo et une phrase, elle n'a plus besoin de la hauteur qu'un paragraphe lui demandait. */ .parrains-panneau>.parrain-carte{flex:0 0 calc(25% - .75px);aspect-ratio:1; display:flex;flex-direction:column;background:#fff;color:inherit; box-shadow:0 0 0 1px var(--line); transition:background .35s ease} /* Le bouton qui échange les deux panneaux, sous celui qui est montré — donc sous la case seule quand ce sont les anciens. Il ne paraît qu'une fois le script en place : c'est lui qui replie le second panneau, et sans lui le bouton n'aurait rien à échanger. */ .parrains-commande{display:flex;justify-content:center;margin:30px 0 0} .parrains-commande[data-repli-commande]{display:none} .parrains-bascule svg{transition:transform .3s cubic-bezier(.22,.7,.3,1)} .parrains-bascule:hover svg{transform:translateY(3px)} .parrains-bascule.retour svg{transform:rotate(180deg)} .parrains-bascule.retour:hover svg{transform:rotate(180deg) translateY(3px)} /* L'en-tête : un aplat froid, très clair, et le logo au centre. Le crème chaud d'avant tirait sur le beige dès qu'on le voyait quatre fois de suite, et jurait avec le gris du panneau des partenaires, juste dessous. */ .parrain-carte-blason{position:relative;display:flex;align-items:center;justify-content:center; /* Une hauteur en pixels, et non en pourcentage : la case n'a pas de hauteur fixe — elle s'étire à la plus haute de sa ligne — et un pourcentage s'y résolvait en « auto ». L'en-tête d'Hermès, dont la phrase tient en deux lignes, faisait alors huit pixels de plus que ses voisines. */ flex:0 0 136px;min-height:0;padding:20px 24px;background:#F7F7F9; border-bottom:1px solid var(--line); transition:background .4s ease} /* Le filet cramoisi se tire au survol, au ras du haut de la case. */ .parrain-carte-blason::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px; background:var(--crimson);transform:scaleX(0);transform-origin:left; transition:transform .5s cubic-bezier(.22,.7,.3,1)} .parrain-carte-blason img{max-width:138px;max-height:96px;width:auto;height:auto;object-fit:contain; transition:transform .4s cubic-bezier(.22,.68,.3,1)} /* Le corps : l'année en petites capitales cramoisies, le nom en Archivo — la sans du texte courant, pas la serif des titres : à vingt pixels, le Spectral de ces neuf noms faisait un alignement de faire-part. */ .parrain-carte-corps{display:flex;flex-direction:column;flex:1; padding:20px 24px 22px} .parrain-carte-annee{margin:0 0 9px;font-family:Montserrat,sans-serif;font-size:10px; font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--crimson); transition:color .35s ease} .parrain-carte h4{margin:0 0 10px;font-family:Archivo,sans-serif;font-weight:600; font-size:17.5px;line-height:1.2;letter-spacing:-.011em;color:var(--ink)} .parrain-carte-qui{margin:0;font-size:13.4px;line-height:1.66;color:var(--muted)} a.parrain-carte:hover .parrain-carte-blason::before, a.parrain-carte:focus-visible .parrain-carte-blason::before{transform:scaleX(1)} a.parrain-carte:hover .parrain-carte-blason, a.parrain-carte:focus-visible .parrain-carte-blason{background:#fff} a.parrain-carte:hover .parrain-carte-blason img, a.parrain-carte:focus-visible .parrain-carte-blason img{transform:translateY(-4px)} /* En dessous de 1100 px la carte atteint sa largeur minimale : la phrase la plus longue y gagne une ligne et la carte cesse d'être carrée de huit pixels. On resserre le texte d'autant. */ /* Deux par ligne en deçà de 1100 px. La case y ferait plus de 500 px de côté si elle restait carrée : elle reprend sa hauteur naturelle, et c'est l'en-tête qui garde une hauteur fixe pour que les logos restent alignés. */ @media (max-width:1100px){ .parrains-panneau>.parrain-carte{flex-basis:calc(50% - .5px);aspect-ratio:auto} .parrain-carte-blason{flex-basis:146px} .parrain-carte-corps{padding:14px 20px 16px} .parrain-carte-qui{font-size:13px;line-height:1.55} } @media (max-width:680px){ .parrains-panneau>.parrain-carte{flex-basis:100%} .parrain-carte h4{font-size:19px} } /* ---------- arrivée de la tuile et du rail ---------- La tuile et le rail paraissent au défilement par « apparait » ; ces règles animent ce qu'il y a dedans, une fois le bloc montré. Elles ne peuvent donc rien cacher que l'observateur n'ait déjà caché : si « vu » n'arrivait jamais, le bloc entier serait invisible de toute façon. Le logo s'ouvre d'un rien plutôt que de monter comme le texte : la tuile paraît alors d'un seul tenant, et non en deux morceaux qui glissent. */ @keyframes tuile-texte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* Les vignettes s'ouvrent au lieu de monter. Une montée de 16 px allongeait le contenu du rail d'autant pendant toute l'animation : la bande devenait verticalement défilable pendant une seconde, et un doigt ou une molette pouvait la décaler. Une mise à l'échelle part d'une taille plus petite et ne déborde donc jamais. */ @keyframes vignette-entre{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} /* Les deux traits se tirent de la gauche vers la droite, le court d'abord : le bloc se construit sous les yeux au lieu de paraître d'un coup. */ @keyframes trait-se-tire{from{transform:scaleX(0)}to{transform:scaleX(1)}} .parrain-tuile.vu .parrain-tuile-rubrique::before{ animation:trait-se-tire .5s cubic-bezier(.22,.7,.3,1) .12s backwards} .parrain-tuile.vu .parrain-tuile-tete>div:first-child::after{ transform-origin:left; animation:trait-se-tire .9s cubic-bezier(.22,.7,.3,1) .30s backwards} .parrain-tuile.vu .parrain-tuile-tete>*, .parrain-tuile.vu .parrain-tuile-texte, .parrain-tuile.vu .parrain-tuile-detail>*{ animation:paraitre .72s cubic-bezier(.22,.7,.3,1) backwards} .parrain-tuile.vu .parrain-tuile-tete>*:nth-child(1){animation-delay:.14s} .parrain-tuile.vu .parrain-tuile-tete>*:nth-child(2){animation-delay:.22s} /* Le blason est retiré de cette arrivée : il a la sienne, et surtout il porte la dérive, un « transform » réécrit à chaque image du défilement. « paraitre » en porte un aussi, et une animation l'emporte sur la règle tant qu'elle dure : la dérive était donc suspendue pendant sept dixièmes de seconde, puis rendue d'un coup à la valeur qu'elle avait atteinte entre-temps. Le logo sautait de dix-huit pixels — et comme l'entête est déclaré « vu » un tiers d'écran à l'avance, ce saut tombait pile au moment où il entrait dans le champ. C'est le « retour en arrière » qu'on voyait. */ .parrain-tuile.vu .parrain-tuile-tete>.parrain-tuile-blason{animation:none} .parrain-tuile.vu .parrain-tuile-texte{animation-delay:.30s} .parrain-tuile.vu .parrain-tuile-detail>*:nth-child(1){animation-delay:.38s} .parrain-tuile.vu .parrain-tuile-detail>*:nth-child(2){animation-delay:.46s} /* Les vignettes se posent de gauche à droite. Le retard est plafonné par le nombre de vignettes visibles, pas par leur nombre total : les suivantes sont hors du cadre, et les faire attendre leur tour ne se verrait pas — mais leur donnerait un retard de plusieurs secondes si on venait à les faire défiler tout de suite. */ .parrains-avant.vu>.parrains-panneau>.parrain-carte, .parrains-panneau.bascule>.parrain-carte{ animation:vignette-entre .68s cubic-bezier(.22,.7,.3,1) backwards} .parrains-avant.vu>.parrains-panneau>.parrain-carte:nth-child(1), .parrains-panneau.bascule>.parrain-carte:nth-child(1){animation-delay:.06s} .parrains-avant.vu>.parrains-panneau>.parrain-carte:nth-child(2), .parrains-panneau.bascule>.parrain-carte:nth-child(2){animation-delay:.13s} .parrains-avant.vu>.parrains-panneau>.parrain-carte:nth-child(3), .parrains-panneau.bascule>.parrain-carte:nth-child(3){animation-delay:.20s} .parrains-avant.vu>.parrains-panneau>.parrain-carte:nth-child(4), .parrains-panneau.bascule>.parrain-carte:nth-child(4){animation-delay:.27s} /* La case seule de la deuxième ligne arrive après les quatre du dessus. */ .parrains-avant.vu>.parrains-panneau>.parrain-carte:nth-child(n+5), .parrains-panneau.bascule>.parrain-carte:nth-child(n+5){animation-delay:.36s} /* Au survol, le logo s'ouvre d'un cheveu et l'année passe au cramoisi. Pas de soulèvement : la case porte son filet en ombre portée, qu'un déplacement décalerait du trait de sa voisine. */ @media (prefers-reduced-motion:reduce){ .parrain-tuile.vu .parrain-tuile-tete>*, .parrain-tuile.vu .parrain-tuile-texte, .parrain-tuile.vu .parrain-tuile-detail>*, .parrain-tuile.vu .parrain-tuile-rubrique::before, .parrain-tuile.vu .parrain-tuile-tete>div:first-child::after, .parrains-avant.vu>.parrains-panneau>.parrain-carte, .parrains-panneau.bascule>.parrain-carte{animation:none} /* Les deux traits restent tirés, et le logo ne dérive pas. */ .parrain-tuile-rubrique::before, .parrain-tuile-tete>div:first-child::after{transform:none} .parrain-tuile-blason{transform:none} .parrain-tuile-blason:not(.parait) img{opacity:1;transform:none} .parrain-carte-blason img,.parrain-carte-blason::before{transition:none} a.parrain-carte:hover .parrain-carte-blason img{transform:none} .parrain-carte-blason::before{transform:none} } /* ---------- fiches (parrains, partenaires) ---------- Une fiche = un logo, un nom, une qualité en petites capitales, et une présentation repliée derrière un bouton. Le numéro d'ordre est posé par un compteur CSS : rien à renuméroter quand on ajoute ou retire une fiche. */ /* La fiche n'a plus qu'une rangée depuis que le dépliant « Lire la présentation » est retiré : plus de subgrid à partager, les cases d'une même ligne s'alignent d'elles-mêmes sur la plus haute. */ /* Pas de numéro sur les encarts : ces structures ne sont pas classées, et un « 01 » posé sur l'une et un « 03 » sur l'autre les opposaient sans le dire. */ .fiches{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} /* Plus de pourtour : c'est le panneau gris qui détache les fiches maintenant, et un trait de plus autour de chacune refaisait le quadrillage que le gris permet justement d'éviter. */ .fiche{position:relative; background:#fff;padding:30px 30px 28px} /* Plus de marge basse : il n'y a plus rien sous l'en-tête. */ .fiche-tete{display:flex;align-items:flex-start;gap:20px} .fiche-logo{flex:none;width:78px;height:78px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;padding:9px;background:#fff} .fiche-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .fiche-identite{display:block;padding-top:4px} .fiche-identite b{display:block;font-family:Spectral,serif;font-size:20px;font-weight:600; line-height:1.25;color:var(--ink)} /* Quand le partenaire a un site, l'en-tête devient un lien : le logo et le nom sont cliquables d'un seul tenant. Plus de flèche après le nom — vingt-et-une flèches dans une grille de vingt-et-une fiches ne signalaient plus rien. Le survol suffit : le nom passe au cramoisi et la pastille du logo avec lui. Le « title » du lien, lui, continue d'annoncer l'ouverture dans un nouvel onglet. Les fiches sans lien gardent un
: rien ne laisse croire qu'on peut cliquer. */ a.fiche-tete{color:inherit} a.fiche-tete .fiche-logo,a.fiche-tete .fiche-identite b{transition:border-color .22s ease,color .22s ease} a.fiche-tete:hover .fiche-identite b,a.fiche-tete:focus-visible .fiche-identite b{color:var(--crimson)} a.fiche-tete:hover .fiche-logo,a.fiche-tete:focus-visible .fiche-logo{border-color:var(--crimson)} .fiche-qualite{display:block;margin-top:8px;font-family:Montserrat,sans-serif;font-size:11px; font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.7} .fiche-site{margin-top:auto;padding-top:22px;align-self:flex-start; font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px; transition:color .22s ease,border-color .22s ease} .fiche-site::after{content:" \2197"} .fiche-site:hover{color:var(--crimson);border-color:var(--crimson)} @media (max-width:1040px){.fiches{grid-template-columns:repeat(2,1fr)}} @media (max-width:680px){.fiches{grid-template-columns:1fr}} /* ---------- les deux voies du panneau de pied de page ---------- « Déposer une offre de stage » était seul sous le bandeau des structures d'accueil, et « devenir partenaire ou parrain » le suivait : deux appels, deux boutons rouges, séparés de cent pixels de vide. Ils tiennent maintenant côte à côte sous un seul titre, séparés d'un filet. La démarche n'est pas la même, mais l'interlocuteur l'est, et c'est lui qui lit. Chaque voie est une colonne qui pousse son bouton en bas : les deux phrases n'ont pas la même longueur, et sans cela les boutons se seraient décalés l'un par rapport à l'autre. */ .rejoindre-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 54px; margin-top:30px;padding-top:34px;border-top:1px solid var(--line)} .rejoindre-voie{display:flex;flex-direction:column;justify-content:space-between; align-items:center} .rejoindre-voie p{margin:0 0 26px;font-size:15.2px;line-height:1.68;color:var(--muted)} .rejoindre-voie .btn{white-space:nowrap} /* Le filet entre les deux, tiré au milieu de la gouttière. */ .rejoindre-voie + .rejoindre-voie{position:relative} .rejoindre-voie + .rejoindre-voie::before{content:"";position:absolute; left:-27px;top:0;bottom:0;width:1px;background:var(--line)} @media (max-width:760px){ .rejoindre-duo{grid-template-columns:1fr;gap:30px} .rejoindre-voie + .rejoindre-voie{padding-top:30px} .rejoindre-voie + .rejoindre-voie::before{left:0;right:0;top:0;bottom:auto; width:auto;height:1px} } /* ---------- devenir partenaire ou parrain ---------- Dernier bloc de la page des partenariats : après la liste de celles et ceux qui accompagnent le diplôme, l'invitation à les rejoindre. Même gris et même ombre que le panneau des partenaires : ce sont les deux blocs qui se détachent de la page, et rien ne justifierait qu'ils flottent différemment. Le filet rouge du haut lui reste — c'est lui qui ouvre l'appel. */ #vue-partenariats .sec.confiance{padding-bottom:64px} #vue-partenariats .sec.rejoindre{padding:0 0 116px} /* ---------- la matière du pied de page ---------- Des filets verticaux serrés, qui montent du bas de la page et s'éteignent avant le panneau. Le bas de cette page était le dernier grand blanc nu du site ; c'est aussi le seul endroit où le fondu est vertical, parce que c'est le pied de page noir qui donne la ligne de départ. Les filets passent derrière le panneau sans qu'on les y voie : il est gris et opaque. Ne restent visibles que les marges qui le longent et la bande qui le sépare du pied. */ #vue-partenariats .sec.rejoindre{position:relative;isolation:isolate} #vue-partenariats .sec.rejoindre::before{content:"";position:absolute;inset:0;z-index:-1; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(28,28,28,.075) 0 1px,transparent 1px 14px); -webkit-mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.4) 38%,transparent 82%); mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.4) 38%,transparent 82%)} /* Beaucoup plus étroit que le panneau des partenaires, et centré : celui-ci tient une liste, qui a besoin de toute la largeur ; celui-là tient trois lignes et un bouton, et la même largeur n'y mettait que du vide. */ .rejoindre-bloc{background:var(--gris-page);border-top:2px solid var(--crimson); box-shadow:var(--panneau-ombre);max-width:980px;margin:0 auto; padding:46px 48px 48px;text-align:center} .rejoindre-bloc h2{margin:0 0 16px;font-family:Spectral,serif;font-weight:300; font-size:clamp(25px,2.7vw,33px);line-height:1.18;color:var(--ink)} .rejoindre-bloc p{margin:0 auto 30px;max-width:66ch;font-size:16px;line-height:1.72;color:var(--muted); text-wrap:pretty} @media (max-width:680px){.rejoindre-bloc{padding:38px 24px 40px}} /* ---------- page « Devenir partenaire ou parrain » ---------- Tout est rattaché à la vue : « voies » et « voie » servent aussi, avec un tout autre dessin, à la page Candidater (candidatures.css). Voir la note dans cette feuille. */ /* Deux voies côte à côte, parce qu'elles n'ont pas le même interlocuteur : les mettre l'une sous l'autre laisserait croire à un parcours en deux étapes. */ #vue-nous-rejoindre .sec{background:var(--gris-page);padding:76px 0 116px} /* « align-items:start » : chaque carte s'arrête à son texte. Les deux faisaient la même hauteur, ce qui alignait leurs pieds — c'était juste tant que les textes étaient de longueur voisine. Depuis que l'encadré du parrainage porte une question mise en avant et son explication, il dépasse l'autre de plus de 200 px, et la carte du partenariat se retrouvait avec un trou blanc au milieu. */ #vue-nous-rejoindre .voies{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;align-items:start} #vue-nous-rejoindre .voie{background:#fff;border:1px solid var(--line);border-top:2px solid var(--crimson); padding:38px 38px 36px;display:flex;flex-direction:column} #vue-nous-rejoindre .voie-rubrique{margin:0 0 14px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} #vue-nous-rejoindre .voie h2{margin:0 0 16px;font-family:Spectral,serif;font-size:23px;font-weight:600;line-height:1.28; color:var(--ink)} #vue-nous-rejoindre .voie-texte{margin:0 0 26px;font-size:15.4px;line-height:1.72;color:var(--muted); text-align:justify;hyphens:auto} /* Le nom de l'interlocuteur et son adresse forment le pied de la fiche : « margin-top:auto » les colle en bas, et les deux cartes s'alignent même quand un texte est plus court que l'autre. */ #vue-nous-rejoindre .voie-qui{margin:0 0 10px;padding-top:22px;border-top:1px solid var(--line); font-size:14.6px;color:var(--ink)} #vue-nous-rejoindre .voie-mail{align-self:flex-start;font-family:Montserrat,sans-serif;font-size:15.2px; color:var(--crimson);border-bottom:1px solid currentColor;padding-bottom:3px; word-break:break-word;transition:opacity .22s ease} #vue-nous-rejoindre .voie-mail:hover{opacity:.72} /* Deux interlocuteurs pour le parrainage : les adresses se suivent, séparées d'un cran. Collées, on les lirait comme une seule. */ #vue-nous-rejoindre .voie-mail + .voie-mail{margin-top:9px} /* La question, juste au-dessus des deux adresses : posée là où elle trouve sa réponse. Le filet rouge reprend celui des fiches. « margin-top:auto » la cale en bas de la colonne — c'est elle, et non la ligne des noms, qui ouvre désormais le pied de l'encadré. */ #vue-nous-rejoindre .voie-relance{margin:auto 0 14px;padding-top:24px;border-top:2px solid var(--crimson); font-family:Spectral,serif;font-size:19.5px;font-weight:600;line-height:1.35;color:var(--ink); text-wrap:balance} @media (max-width:680px){#vue-nous-rejoindre .voie-relance{font-size:18px;padding-top:20px}} #vue-nous-rejoindre .voies-note{margin:34px 0 0;font-size:15px;line-height:1.7;color:var(--muted);text-align:center} @media (max-width:820px){#vue-nous-rejoindre .voies{grid-template-columns:1fr} #vue-nous-rejoindre .sec{padding:56px 0 92px}}