/*
 * Accueil (#hero) & vedettes (.home-feature-vedette) : le PHP pose title-align-* sur #title-home / #home-about
 * (et équivalents vedettes), alors que les gabarits head-*.css / feature design-*.css ciblent encore .align-*.
 * On réaligne titres, paragraphes et boutons (.folio_button) de la même façon.
 */

/* ----- Texte : même logique que les anciennes règles .align-* / #home-about ----- */

#portfolio_page #hero #title-home.title-align-left #home-about h1,
#portfolio_page #hero #title-home.title-align-left #home-about h2,
#portfolio_page #hero #title-home.title-align-left #home-about p,
#portfolio_page #hero #home-about.title-align-left h1,
#portfolio_page #hero #home-about.title-align-left h2,
#portfolio_page #hero #home-about.title-align-left p {
    text-align: left;
}

#portfolio_page #hero #title-home.title-align-center #home-about h1,
#portfolio_page #hero #title-home.title-align-center #home-about h2,
#portfolio_page #hero #title-home.title-align-center #home-about p,
#portfolio_page #hero #home-about.title-align-center h1,
#portfolio_page #hero #home-about.title-align-center h2,
#portfolio_page #hero #home-about.title-align-center p {
    text-align: center;
}

#portfolio_page #hero #title-home.title-align-right #home-about h1,
#portfolio_page #hero #title-home.title-align-right #home-about h2,
#portfolio_page #hero #title-home.title-align-right #home-about p,
#portfolio_page #hero #home-about.title-align-right h1,
#portfolio_page #hero #home-about.title-align-right h2,
#portfolio_page #hero #home-about.title-align-right p {
    text-align: right;
}

#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about h1,
#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about h2,
#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about p,
#portfolio_page section.home-feature-vedette #feature-about.title-align-left h1,
#portfolio_page section.home-feature-vedette #feature-about.title-align-left h2,
#portfolio_page section.home-feature-vedette #feature-about.title-align-left p {
    text-align: left;
}

#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about h1,
#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about h2,
#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about p,
#portfolio_page section.home-feature-vedette #feature-about.title-align-center h1,
#portfolio_page section.home-feature-vedette #feature-about.title-align-center h2,
#portfolio_page section.home-feature-vedette #feature-about.title-align-center p {
    text-align: center;
}

#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about h1,
#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about h2,
#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about p,
#portfolio_page section.home-feature-vedette #feature-about.title-align-right h1,
#portfolio_page section.home-feature-vedette #feature-about.title-align-right h2,
#portfolio_page section.home-feature-vedette #feature-about.title-align-right p {
    text-align: right;
}

/* ----- Gabarit 1 & 2 (flex) : alignement transversal comme les anciennes .align-* sur #title-home / #title-feature ----- */

#portfolio_page #hero.home-design-one #title-home.title-align-left {
    align-items: flex-start;
}

#portfolio_page #hero.home-design-one #title-home.title-align-center {
    align-items: center;
}

#portfolio_page #hero.home-design-one #title-home.title-align-right {
    align-items: flex-end;
}

/* Gabarit 1 : colonne texte (#home-about / #feature-about), comme .align-* #home-about */
#portfolio_page #hero.home-design-one #title-home.title-align-left #home-about,
#portfolio_page #hero.home-design-one #home-about.title-align-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#portfolio_page #hero.home-design-one #title-home.title-align-center #home-about,
#portfolio_page #hero.home-design-one #home-about.title-align-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#portfolio_page #hero.home-design-one #title-home.title-align-right #home-about,
#portfolio_page #hero.home-design-one #home-about.title-align-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-left #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-one #feature-about.title-align-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-center #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-one #feature-about.title-align-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-right #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-one #feature-about.title-align-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#portfolio_page #hero.home-design-two #title-home.title-align-left,
#portfolio_page section.home-feature-vedette.feature-design-two #title-feature.title-align-left {
    align-items: flex-start;
    text-align: left;
}

#portfolio_page #hero.home-design-two #title-home.title-align-center,
#portfolio_page section.home-feature-vedette.feature-design-two #title-feature.title-align-center {
    align-items: center;
    text-align: center;
}

#portfolio_page #hero.home-design-two #title-home.title-align-right,
#portfolio_page section.home-feature-vedette.feature-design-two #title-feature.title-align-right {
    align-items: flex-end;
    text-align: right;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-left {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-center {
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-right {
    align-items: flex-end;
}

/* Gabarit 3 : section en colonne ; #title-home porte title-align-* */
#portfolio_page #hero.home-design-three #title-home.title-align-left {
    align-items: flex-start;
}

#portfolio_page #hero.home-design-three #title-home.title-align-center {
    align-items: center;
}

#portfolio_page #hero.home-design-three #title-home.title-align-right {
    align-items: flex-end;
}

#portfolio_page #hero.home-design-three #title-home {
    display: flex;
    flex-direction: column;
}

#portfolio_page section.home-feature-vedette.feature-design-three #title-feature.title-align-left {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-three #title-feature.title-align-center {
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-three #title-feature.title-align-right {
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette.feature-design-three #title-feature {
    display: flex;
    flex-direction: column;
}

/* Gabarit 4 : titres dans #*-present ; CTA souvent dans #*-about sous #title-* */
#portfolio_page #hero.home-design-four #title-home.title-align-left {
    align-items: flex-start;
}

#portfolio_page #hero.home-design-four #title-home.title-align-center {
    align-items: center;
}

#portfolio_page #hero.home-design-four #title-home.title-align-right {
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-left {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-center {
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-right {
    align-items: flex-end;
}

#portfolio_page #hero.home-design-four #title-home.title-align-left #home-about,
#portfolio_page #hero.home-design-four #title-home.title-align-center #home-about,
#portfolio_page #hero.home-design-four #title-home.title-align-right #home-about {
    display: flex;
    flex-direction: column;
}

#portfolio_page #hero.home-design-four #title-home.title-align-left #home-about {
    align-items: flex-start;
}

#portfolio_page #hero.home-design-four #title-home.title-align-center #home-about {
    align-items: center;
}

#portfolio_page #hero.home-design-four #title-home.title-align-right #home-about {
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-left #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-center #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-right #feature-about {
    display: flex;
    flex-direction: column;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-left #feature-about {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-center #feature-about {
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-right #feature-about {
    align-items: flex-end;
}

/* ----- Colonnes #home-about / #feature-about (flex + media fonts.css) : pas d’étirement des CTA ----- */

#portfolio_page #hero #home-about.title-align-left,
#portfolio_page #hero #title-home.title-align-left #home-about:not([class*="title-align-"]) {
    align-items: flex-start;
}

#portfolio_page #hero #home-about.title-align-center,
#portfolio_page #hero #title-home.title-align-center #home-about:not([class*="title-align-"]) {
    align-items: center;
}

#portfolio_page #hero #home-about.title-align-right,
#portfolio_page #hero #title-home.title-align-right #home-about:not([class*="title-align-"]) {
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette #feature-about.title-align-left,
#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about:not([class*="title-align-"]) {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette #feature-about.title-align-center,
#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about:not([class*="title-align-"]) {
    align-items: center;
}

#portfolio_page section.home-feature-vedette #feature-about.title-align-right,
#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about:not([class*="title-align-"]) {
    align-items: flex-end;
}

/* Boutons : même ligne de base que le bloc de texte (flex : align-self ; flux : héritage text-align sur inline-block) */
#portfolio_page #hero #title-home.title-align-left #home-about .folio_button,
#portfolio_page #hero #home-about.title-align-left .folio_button,
#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about .folio_button,
#portfolio_page section.home-feature-vedette #feature-about.title-align-left .folio_button {
    align-self: flex-start;
}

#portfolio_page #hero #title-home.title-align-center #home-about .folio_button,
#portfolio_page #hero #home-about.title-align-center .folio_button,
#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about .folio_button,
#portfolio_page section.home-feature-vedette #feature-about.title-align-center .folio_button {
    align-self: center;
}

#portfolio_page #hero #title-home.title-align-right #home-about .folio_button,
#portfolio_page #hero #home-about.title-align-right .folio_button,
#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about .folio_button,
#portfolio_page section.home-feature-vedette #feature-about.title-align-right .folio_button {
    align-self: flex-end;
}