/* page Partenariats : logos, parrains, structures de stage */

/* Même parti que la page des intervenants : un gris très clair en fond, les
   fiches et les cases de logo en blanc. La section « alt », crème ailleurs sur
   le site, suit le même gris pour que la page reste d'un seul tenant. */
#vue-partenariats .sec,#vue-partenariats .sec.alt{background:var(--gris-page)}

/* ---------- 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}
/* 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}
/* Sur le gris, les logos dont l'image porte son propre fond blanc dessineraient
   des rectangles clairs : chaque vignette devient donc une case blanche. */
#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}

/* ---------- 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. */
/* Chaque fiche occupe trois rangées de la grille — en-tête, bouton, présentation —
   et reprend les rangées du parent (subgrid). Les trois rangées sont donc communes
   à toute la ligne : l'en-tête d'un nom sur deux lignes impose sa hauteur aux
   voisines, et les filets rouges tombent tous au même endroit, ouvert ou fermé. */
.fiches{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:fiche}
.fiche{counter-increment:fiche;position:relative;
  display:grid;grid-template-rows:subgrid;grid-row:span 3;
  background:#fff;border:1px solid var(--line);padding:30px 30px 28px}
.fiche-rang{position:absolute;top:24px;right:28px;margin:0;
  font-family:Spectral,serif;font-size:17px;font-weight:300;color:var(--muted);opacity:.65}
.fiche-rang::before{content:counter(fiche,decimal-leading-zero)}

/* L'écart sous l'en-tête s'ajoute à la gouttière de la grille (24 px) : à 26 px
   le filet flottait loin du logo, on le remonte. */
.fiche-tete{display:flex;align-items:flex-start;gap:20px;padding-right:34px;margin-bottom:12px}
.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, et une flèche signale qu'on quitte le site.
   Les fiches sans lien gardent un <div> : 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 .fiche-identite b::after{content:" \2197";font-size:.76em;vertical-align:.14em;
  color:var(--muted);transition: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-identite b::after,a.fiche-tete:focus-visible .fiche-identite b::after{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}

/* Le filet reprend celui des légendes de photo des pages de promotion : 2 px
   cramoisi. Les fiches d'une même rangée ont toutes la hauteur de la plus haute
   (comportement normal d'une grille), et « margin-top:auto » pousse le bouton
   tout en bas de chacune : les filets se retrouvent donc sur une même ligne,
   quel que soit le nombre de lignes du nom ou de la spécialité. L'écart minimal
   avec le bloc du dessus est porté par la marge basse de .fiche-tete. */
.fiche-bascule{margin:0;padding:16px 0 0;width:100%;border:0;border-top:2px solid var(--crimson);
  align-self:start;
  background:none;font:inherit;font-size:14.5px;color:var(--ink);text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:color .22s ease}
.fiche-bascule:hover{color:var(--crimson)}
.fiche-plus{position:relative;flex:none;width:14px;height:14px}
.fiche-plus::before,.fiche-plus::after{content:"";position:absolute;background:currentColor;
  transition:transform .28s cubic-bezier(.3,.7,.3,1),opacity .28s ease}
.fiche-plus::before{left:0;top:6.5px;width:14px;height:1px}
.fiche-plus::after{left:6.5px;top:0;width:1px;height:14px}
.fiche-bascule.ouvert .fiche-plus::after{transform:rotate(90deg);opacity:0}

.fiche-presentation{margin-top:16px;align-self:start}
/* Les fiches de parrains portent deux dépliants : cinq rangées au lieu de trois
   (en-tête, bouton, présentation, bouton, présentation). Le second bouton garde
   son écart que le premier bloc soit ouvert ou replié. */
.fiches-double .fiche{grid-row:span 5}
/* Le second dépliant n'a pas de filet : un seul trait rouge par fiche, celui qui
   ouvre la série. Il garde son écart, que le bloc du dessus soit ouvert ou non. */
.fiche-presentation + .fiche-bascule{margin-top:0;padding-top:18px;border-top:0}
.fiche-presentation p{margin:0;font-size:14.8px;line-height:1.7;color:var(--muted)}
.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}}

/* ---------- 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. Le bloc blanc sur
   le gris de la page le détache sans changer de couleur de fond, et le filet
   rouge du haut reprend celui des fiches. */
#vue-partenariats .sec.confiance{padding-bottom:64px}
#vue-partenariats .sec.rejoindre{padding:0 0 116px}
.rejoindre-bloc{background:#fff;border:1px solid var(--line);border-top:2px solid var(--crimson);
  padding:52px 56px 54px;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 » ----------
   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}
.voies{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.voie{background:#fff;border:1px solid var(--line);border-top:2px solid var(--crimson);
  padding:38px 38px 36px;display:flex;flex-direction:column}
.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)}
.voie h2{margin:0 0 16px;font-family:Spectral,serif;font-size:23px;font-weight:600;line-height:1.28;
  color:var(--ink)}
.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. */
.voie-qui{margin:auto 0 10px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14.6px;color:var(--ink)}
.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}
.voie-mail:hover{opacity:.72}
.voies-note{margin:34px 0 0;font-size:15px;line-height:1.7;color:var(--muted);text-align:center}
@media (max-width:820px){.voies{grid-template-columns:1fr}
  #vue-nous-rejoindre .sec{padding:56px 0 92px}}