/* ===== Pages annexes : Nos valeurs, Alliance durable, Mentions légales,
        Offres associées, 404 =====

   Ces pages reprennent le vocabulaire de l'accueil : bleu foncé, cartes blanches à
   ombre portée, aucune police d'icônes. Le titre est aligné à gauche sur un fond très
   clair plutôt que sur un aplat coloré. */

/* ----- En-tête de page (commun aux 5 pages) ----- */
.page-head {
    background: linear-gradient(to bottom, var(--gris-clair), #fff);
    border-bottom: 1px solid #e8eaf2;
    padding: 42px 0 38px;
}

.page-head h1 {
    margin: 0;
    font-size: 2.4em;
    color: var(--bleu-section);
}

/* Filet court sous le titre : reprend le rôle que jouait le soulignement des
   titres de section de l'accueil, sans occuper toute la largeur. */
.page-head h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 4px;
    margin-top: 16px;
    background: var(--bleu);
}

/* La première lettre des titres est mise en avant en bleu d'accent, sans italique. */
.page-head h1 em,
.page-content h2 em {
    font-style: normal;
    color: var(--bleu);
}

.page-head .accroche {
    margin: 18px 0 0;
    max-width: 760px;
    font-size: 1.05em;
}

/* Fil d'Ariane : ces pages ne figurent dans aucune entrée de menu (elles ne
   sont atteignables que par le pied de page), d'où un retour explicite. */
.fil {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--gris-texte);
}

.fil a {
    color: var(--gris-texte);
    text-decoration: none;
}

.fil a:hover {
    color: var(--bleu);
    text-decoration: underline;
}

.fil span::before {
    content: "/";
    margin: 0 8px;
    color: #c3c8dc;
}

/* ----- Corps de page -----
   .page-content porte déjà son rythme vertical dans styles.css ; on ne
   redéfinit ici que ce qui est propre aux pages annexes. */
/* la taille et le rythme vertical viennent de styles.css ; seule la couleur
   est propre aux pages annexes */
.page-content h2 {
    color: var(--bleu-section);
}

.page-content h2:first-child {
    margin-top: 0;
}

/* Colonne de lecture, centrée : 1140 px de large pour du texte courant fatigue
   l'œil. Les blocs de prose sont ramenés à une longueur de ligne confortable. */
.colonne {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.page-content .justifie {
    text-align: justify;
}

/* Les visuels reprennent l'arrondi et l'ombre des cartes de l'accueil. */
.page-content img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: var(--ombre-carte);
}

/* ----- Nos valeurs ----- */
.valeur-par img {
    margin: 0 0 26px;
}

/* Seul bloc de prose des pages annexes qui ne soit ni dans une .carte-doc ni dans une
   .colonne : son texte n'a que le retrait de .adapt-content et paraît collé aux bords
   en mobile. Le retrait porte sur le texte, titres compris ; le visuel reste pleine
   largeur. Le seuil est la largeur maximale de .adapt-content : au-delà, le conteneur
   est centré et respire de lui-même. */
@media all and (max-width: 1140px) {
    .valeur-par h2,
    .valeur-par p {
        padding: 0 15px;
    }
}

/* ----- Alliance durable ----- */
.alliance .visuel-large {
    margin: 0 0 40px;
}

/* ----- Mentions légales ----- */
.carte-doc {
    background: #fff;
    box-shadow: var(--ombre-carte);
    border-radius: 6px;
    padding: 30px 36px;
    margin-bottom: 26px;
}

.carte-doc h2 {
    margin: 0 0 12px;
    font-size: 1.25em;
    color: var(--bleu-section);
}

.carte-doc > :first-child {
    margin-top: 0;
}

.carte-doc > :last-child {
    margin-bottom: 0;
}

/* Liens d'une carte : bleu d'accent, sans soulignement au repos. Le soulignement
   n'apparaît qu'au survol — sans lui, la couleur resterait le seul indice, ce qui
   ne suffit pas à signaler un lien. */
.carte-doc a {
    color: var(--bleu);
    text-decoration: none;
}

.carte-doc a:hover {
    text-decoration: underline;
}

/* Lien porté par un titre de carte : il fait corps avec le titre et en prend la
   couleur, plutôt que de trouer la ligne d'un mot bleu. */
.carte-doc h2 a {
    color: inherit;
    text-decoration: none;
}

.carte-doc h2 a:hover {
    color: inherit;
    text-decoration: underline;
}

/* Séparateur entre deux sections d'une même carte : un filet discret, qui
   respire autant au-dessus qu'en dessous. */
.carte-doc hr {
    margin: 28px 0;
    border: none;
    border-top: 1px solid #e8eaf2;
}

/* Le titre qui suit un séparateur n'a pas besoin du grand blanc de styles.css */
.carte-doc hr + h2 {
    margin-top: 0;
}

/* ----- Offres associées -----
   L'animation est une page autonome, laissée dans son iframe sans habillage. Elle porte
   déjà son propre .adapt-content : le doubler la rétrécirait sous la largeur pour
   laquelle les positions des pastilles sont calibrées. La hauteur ci-dessous n'est qu'un
   point de départ, scriptOffres.js la cale ensuite sur le contenu réel. */
.offres {
    padding-top: 0;
}

.offres-frame {
    display: block;
    width: 100%;
    height: 700px;
    border: 0;
}

/* ----- Page 404 ----- */
.page404 {
    text-align: center;
    padding: 90px 20px 100px;
}

.page404 .code {
    margin: 0;
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    font-size: 110px;
    font-weight: 500;
    line-height: 1;
    color: var(--bleu-section);
}

.page404 h1 {
    margin: 18px 0 10px;
    font-size: 1.9em;
    color: var(--bleu-section);
}

.page404 p {
    margin: 0 auto 28px;
    max-width: 520px;
}

/* ----- Responsive ----- */
@media all and (max-width: 800px) {
    .page-head {
        padding: 32px 0 30px;
    }

    .page-head h1 {
        font-size: 1.9em;
    }

    .carte-doc {
        padding: 24px 22px;
    }

    /* hauteur d'attente seulement : scriptOffres.js la remplace par celle du
       contenu réel dès que l'iframe est chargée */
    .offres-frame {
        height: 560px;
    }

    .offres {
        padding-bottom: 30px;
    }

    .page404 .code {
        font-size: 78px;
    }
}