/*
 * Section Certifications du site public.
 *
 * Pourquoi cette feuille existe
 * -----------------------------
 * Jusqu en septembre 2026, les certifications etaient trois blocs ecrits en dur
 * dans la vue, poses au pixel pres par-dessus le visuel cert.png :
 *
 *     .cert    { height: 1175px }
 *     .cert-1  { position: absolute }
 *     .cert-1-1{ top: 120px; left: 340px }
 *     .cert-1-2{ top: 320px; right: 395px; width: 450px; text-align: right }
 *     .cert-1-3{ top: 830px; left: 350px; width: 400px }
 *
 * Ces coordonnees ne valaient que pour trois blocs, de ces hauteurs-la, et
 * cert.png etait une image de 710x937 presque vide dont les trois logos etaient
 * places pour tomber en face de chacun. Le client gerant desormais ses
 * certificats depuis le back-office, leur nombre et leur longueur varient : ce
 * montage ne pouvait pas suivre.
 *
 * La section repasse donc en flux, en cartes, chaque certificat portant son
 * propre logo. La typographie d origine est conservee telle quelle : titres en
 * vert de marque, texte en 14/18, liens en pastille verte.
 *
 * Pourquoi elle n est pas dans le SCSS
 * ------------------------------------
 * resources/assets/sass/style.scss est bien la source, mais Laravel Mix ne peut
 * plus etre relance sur ce projet : node_modules n est pas installe et le
 * webpack.mix date de 2018. Les regles ci-dessous sont donc ecrites a la main et
 * chargees APRES la feuille compilee, qu elles surchargent. Elles ont aussi ete
 * reportees dans le SCSS, pour qu une future recompilation ne les perde pas.
 */

.cert {
    /* Etait fige a 1175px pour loger trois blocs absolus. */
    height: auto;
    padding-bottom: 80px;
}

.cert-title {
    /* Le titre etait masque par la barre verte en haut de cert.png. */
    margin-bottom: 46px;
}

.cert-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 44px 40px;
    align-items: start;
}

.cert-1 {
    /* Etait absolu, aux coordonnees ci-dessus. */
    position: static;
    width: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cert-1-logo-zone {
    /* Hauteur reservee, logo ou pas : sinon le titre d un certificat sans logo
       remonte et les cartes de la grille ne s alignent plus. */
    min-height: 74px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 16px;
}

.cert-1-logo {
    /* Decoupe depuis cert.png, puis televersable par certificat. La hauteur est
       bornee ici : la collection medialibrary n a pas de conversion. */
    max-height: 74px;
    max-width: 170px;
    width: auto;
    height: auto;
}

.cert-1-title {
    /* Les intitules sont saisis en casse normale dans le back-office ; ils
       etaient ecrits en capitales dans l ancienne vue. */
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1.2;
}

.cert-1-text {
    margin-bottom: 12px;
}

.cert-1-link {
    margin: 0 6px 6px 0;
}

/*
 * Pas de media query ici, et ce n est pas un oubli.
 *
 * Le layout declare <meta name="viewport" content="width=1400"> : le site est
 * rendu a 1400 pixels CSS sur tout appareil, puis dezoome par le navigateur.
 * Aucune media query ne se declenche donc jamais, pas meme celles de
 * resources/assets/sass/base/_media-query.scss, toutes ecrites en max-width
 * 1200 ou moins et de ce fait inertes.
 *
 * La grille s adapte a la largeur du conteneur, qui vaut toujours 1140 pixels,
 * via auto-fit et minmax : trois colonnes aujourd hui, et le bon nombre si le
 * client ajoute ou retire des certificats. C est le seul mecanisme qui reponde
 * reellement sur ce site.
 *
 * Si le site devait un jour passer en responsive, il faudrait d abord retirer
 * cette meta, puis reprendre TOUTES les sections : elles sont posees en pixels
 * absolus avec des hauteurs figees.
 */