@charset "UTF-8";

/*
 * Contact page: the contributed description, vertically centred, closed by the row of published
 * social network icons (FO-CONTACT-PAGES-01).
 *
 * Everything above the icons is contributor markup, produced by the Quill editor of the Back-Office
 * "Custom pages" screen. This stylesheet therefore says what the mockup asks of each kind of block,
 * it never assumes a given line is there.
 */

/*
 * Vertical centring. The wrapper is turned into a column only when it actually holds a contact
 * page, which leaves the four other Front-Office screens with the plain block they were laid out
 * with. Scoping it here rather than in the template is what keeps "FO/base_fo.html.twig", shared by
 * every page, untouched.
 */
.fo__main:has(.fo-contact) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/*
 * "margin: auto" and NOT "justify-content: center": on a column that overflows its container, the
 * latter pushes the top of the content out of reach, where an auto margin simply collapses to zero
 * as soon as there is no free space left to share. Short content is therefore centred with no
 * scrollbar at all, long content scrolls from its first line (AC5).
 *
 * ".fo" is already a 100vh flex column whose ".fo__main" carries "flex: 1 0 auto", so the free
 * space this margin eats is exactly what the header and the footer leave.
 */
.fo-contact {
    width: 80vw; /* The white margins of the header, the footer, the galleries and the about page */
    margin: auto;
    padding: 4vh 0;
    text-align: center;
}

/* --------------- D E S C R I P T I O N --------------- */

/*
 * AC6. Quill writes the font a contributor picked as a class on the span, and leaves its default
 * entry, "Sans Serif", carrying no class at all: the base family below IS that default, and the
 * rule underneath is the "Serif" entry. Nothing to do for the cyrillic languages, ".fo--cyrillic"
 * having already swapped both custom properties (general.css) - no locale code is written here.
 *
 * The dropdown offers a THIRD entry, "Monospace". The design system has exactly two families, a
 * serif and a sans (docs/05-maquettes/README.md), and the project ships no other face: that entry
 * is therefore deliberately left without a rule and falls back on the base. Writing a monospace
 * stack here would hard code a font the site does not own.
 */
.fo-contact__description {
    /*
     * Size of an h1, in multiples of the running text. It is the ONLY value a breakpoint has to
     * redefine: h6 lands exactly on the running text, and the four levels in between step down from
     * this anchor, which keeps the ladder regular whatever the screen.
     */
    --fo-heading-scale: 1.875em;

    font-family: var(--fo-font-sans);
    font-size: 4vw;
    line-height: 1.6;
    letter-spacing: 0.3vw;
    /*
     * Contributed text is beyond this stylesheet's control: a pasted address is one single
     * unbreakable word, and left alone it would widen the page until it scrolls sideways, which
     * AC5 rules out.
     */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.fo-contact__description .ql-font-serif {
    font-family: var(--fo-font-serif);
}

/*
 * The size dropdown. The editor registers it as a CLASS too - "formats/size" resolves to the class
 * attributor, the style one being left under "attributors/style/size" - and its "Normal" entry
 * carries no class, exactly like the default of the font dropdown.
 *
 * The three ratios are the ones Quill applies inside its own editor, read off
 * "quill/dist/quill.snow.min.css", where they are scoped to ".ql-editor" and shipped by the
 * Back-Office entry point alone: nothing of it ever reached the Front-Office. Reusing the very same
 * values is what makes the contributor see, while typing, what the page will render.
 *
 * "em" is what turns them into a FACTOR rather than a size: a span multiplies whatever it sits in,
 * so these three rules ride on the running text and on each of the six heading levels alike, at
 * every breakpoint, with nothing to restate.
 */
.fo-contact__description .ql-size-small {
    font-size: 0.75em;
}

.fo-contact__description .ql-size-large {
    font-size: 1.5em;
}

.fo-contact__description .ql-size-huge {
    font-size: 2.5em;
}

/*
 * The mockup sets the name and the tagline in serif, the contact lines in the sans above. Which
 * line is which belongs to the contributor, through the font dropdown of the editor: the headings
 * only get their size and their spacing here.
 *
 * The spacing is expressed in "em" rather than in "vw", so that it follows each level down on its
 * own: a fixed length would leave an h6, which is the size of the running text, spaced out like a
 * title.
 */
.fo-contact__description h1,
.fo-contact__description h2,
.fo-contact__description h3,
.fo-contact__description h4,
.fo-contact__description h5,
.fo-contact__description h6 {
    margin: 2vh 0 0.3vh;
    font-weight: normal;
    line-height: 1.15;
    letter-spacing: 0.1em;
}

/*
 * The ladder itself, read off the anchor above. Each level sits a fixed share of the way between
 * the running text and an h1, which gives six sizes separated by a regular step, and only ONE
 * number to touch per breakpoint. An h6 is deliberately the size of the running text rather than
 * smaller: on a page whose whole content is contributed, a heading that reads smaller than a
 * paragraph is a trap, not a hierarchy.
 */
.fo-contact__description h1 { font-size: var(--fo-heading-scale); }
.fo-contact__description h2 { font-size: calc(1em + (var(--fo-heading-scale) - 1em) * 0.75); }
.fo-contact__description h3 { font-size: calc(1em + (var(--fo-heading-scale) - 1em) * 0.52); }
.fo-contact__description h4 { font-size: calc(1em + (var(--fo-heading-scale) - 1em) * 0.33); }
.fo-contact__description h5 { font-size: calc(1em + (var(--fo-heading-scale) - 1em) * 0.15); }
.fo-contact__description h6 { font-size: 1em; }

.fo-contact__description p {
    margin: 0 0 2vh;
}

/*
 * The editor offers lists and a code block. Both are laid out from the left by default, which reads
 * as off-centre inside a centred column, and a code block does not wrap at all: left alone it would
 * widen the page sideways, which AC5 rules out.
 */
.fo-contact__description ul,
.fo-contact__description ol {
    margin: 0 0 2vh;
    padding-left: 0;
    list-style-position: inside;
}

.fo-contact__description pre {
    max-width: 100%;
    overflow-x: auto;
    text-align: left;
}

/* A picture embedded in the text must not push the column wider than the page */
.fo-contact__description img {
    max-width: 100%;
    height: auto;
}

/* ".fo a" clears every decoration: the email and the phone number have to stay recognisable */
.fo-contact__description a {
    text-decoration: underline;
    -webkit-transition: color 0.4s ease;
    -moz-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
    transition: color 0.4s ease;
}

.fo-contact__description a:hover {
    color: var(--fo-color-primary);
}

/* ------------- S O C I A L   N E T W O R K S ------------- */

/*
 * Inline, centred, wrapping on a second line rather than shrinking: the icons are square files of a
 * fixed definition, and squeezing them would be visible straight away (AC8).
 */
.fo-contact__socials {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 5vh 0 0;
    padding: 0;
    list-style: none;
}

.fo-contact__social {
    margin: 1%;
}

/* Positioning context of the grey icon, which is laid over the black one rather than next to it */
.fo-contact__social-link {
    position: relative;
    display: block;
}

/*
 * The files are already round black discs: no border radius, no background, nothing drawn here.
 * Both icons of a pair share the same definition, so the grey one covers the black one exactly.
 */
.fo-contact__social-icon {
    display: block;
    width: 9vw;
    height: auto;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}

.fo-contact__social-icon--grey {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/*
 * Black by default, grey on hover, the two superimposed: the behaviour docs/12-glossaire.md
 * describes, and the very reason the project ships two strictly paired sets of fifty icons.
 * ":focus-visible" gives a visitor browsing with the keyboard the same answer as the mouse.
 */
.fo-contact__social-link:hover .fo-contact__social-icon--grey,
.fo-contact__social-link:focus-visible .fo-contact__social-icon--grey {
    opacity: 1;
}

.fo-contact__social-link:hover .fo-contact__social-icon--black,
.fo-contact__social-link:focus-visible .fo-contact__social-icon--black {
    opacity: 0;
}

/* -------- R E S P O N S I V E    D E S I G N --------- */

@media only screen and (min-width: 768px) {
    .fo-contact__description {
        font-size: 2.7vw;
    }

    .fo-contact__description {
        --fo-heading-scale: 1.48em;
    }

    .fo-contact__social-icon {
        width: 5vw;
    }
}

@media only screen and (min-width: 992px) {
    .fo-contact__description {
        --fo-heading-scale: 1.58em;

        font-size: 1.9vw;
        letter-spacing: 0.2vw;
    }

    .fo-contact__socials {
        margin-top: 4vh;
    }

    .fo-contact__social-icon {
        width: 4vw;
    }
}

@media only screen and (min-width: 1200px) {
    .fo-contact__description {
        --fo-heading-scale: 1.69em;

        font-size: 1.3vw;
        letter-spacing: 0.1vw;
    }

    .fo-contact__socials {
        margin-top: 3vh;
    }

    .fo-contact__social-icon {
        width: 2.5vw;
    }
}