/* =========================================================================
   Socle commun à toutes les pages du site.

   Né de la refonte de l'accueil : les jetons, l'en-tête, le pied et les
   composants de contenu y étaient enfermés sous `.page-outil`, pendant que
   /guide, /hebergeurs, /contribuer et les autres gardaient chacune sa
   feuille, sa police et son bleu de lien. Tout ce qui n'appartient pas en
   propre à l'outil de recherche vit donc ici, sous `.page-site`, posé sur le
   <body> de chaque page via base.html.

   Ce qui reste ailleurs : style-accueil.css (champ de recherche, verdict,
   analyse, enquête presse), les feuilles de page pour leurs blocs propres,
   et /press, qui garde sa mise en page d'enquête autonome.
   ========================================================================= */

.page-site {
    /* Palette du site : le marine et le cyan font l'identité. */
    --navy: #273678;
    --navy-clair: #3d52a8;
    --cyan: #5aafcc;
    --cyan-fonce: #3c8ba6;
    /* Le cyan de l'identité ne tient pas sur le marine : 3,6:1, sous le 4,5:1
       exigé pour du petit texte. Cette version éclaircie passe à 5,4:1. */
    --cyan-clair: #8ed3e6;

    --encre: #1f2533;
    --encre-doux: #59617a;
    --encre-tenu: #8990a6;

    --fond: #f4f6fc;
    --surface: #fff;
    --surface-douce: #f8f9fd;
    --bordure: #e2e7f4;
    --bordure-tenue: #eef1f9;

    --succes: #2e7d32;
    --succes-fond: #eef7ef;
    --succes-bordure: #bcdcbe;
    --alerte: #b3322c;
    --alerte-fond: #fdf1f0;
    --alerte-bordure: #f0c7c4;

    --rayon: 14px;
    --rayon-s: 9px;
    --ombre: 0 1px 2px rgba(39, 54, 120, .05), 0 6px 22px rgba(39, 54, 120, .07);
    --ombre-relief: 0 2px 4px rgba(39, 54, 120, .07), 0 12px 34px rgba(39, 54, 120, .11);

    --largeur: 1120px;
    --largeur-lecture: 760px;

    display: block;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Drapeaux : images substituées aux emoji au rendu (voir drapeaux_en_images
   dans app.py). Calés sur la hauteur des capitales pour se lire comme un
   caractère ; le liseré sépare du fond les drapeaux à bande blanche. */
.page-site img.drapeau {
    display: inline-block;
    height: .8em;
    width: auto;
    vertical-align: -.05em;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.page-site .enveloppe {
    width: 100%;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Les pages de lecture (guide, mentions, contribuer) n'ont pas de grille à
   remplir : une colonne de texte large de 1120 px se lit mal, l'œil perd la
   ligne suivante. Elles resserrent leur enveloppe. */
.page-site .enveloppe-lecture {
    max-width: var(--largeur-lecture);
}

/* `hidden` gouverne l'affichage de certains blocs. Les règles de mise en page
   portent une classe et l'emporteraient sinon sur la règle navigateur
   `[hidden] { display: none }`, qui n'en a pas. */
.page-site [hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------- En-tête */

.page-site .site-entete {
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    padding: 20px 0 26px;
    text-align: center;
}

.page-site #logo_mail {
    max-width: 92px;
    height: auto;
    display: block;
    margin: 0 auto 8px;
}

/* Signature de l'éditeur : volontairement le plus petit texte de l'en-tête.
   Elle doit se lire si on la cherche, pas s'imposer avant le titre, d'où le
   gris tenu, et le logotype à hauteur de capitale plutôt qu'un second logo. */
.page-site .signature-editeur {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--encre-tenu);
}

.page-site .signature-editeur img {
    display: block;
    height: 15px;
    width: auto;
}

.page-site .signature-editeur a {
    display: inline-flex;
    border-radius: 3px;
    opacity: .85;
    transition: opacity .18s ease;
}

.page-site .signature-editeur a:hover {
    opacity: 1;
}

.page-site .signature-editeur a:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

.page-site h1 {
    margin: 0 0 8px;
    padding: 0;
    color: var(--navy);
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.page-site .accroche {
    margin: 0 auto 20px;
    max-width: 70ch;
    color: var(--encre-doux);
    font-size: 15px;
}

/* Retour vers l'outil, repris de la pastille « chercher par commune » de
   l'accueil : sur une page de contenu, c'est le seul chemin de retour, il ne
   doit pas se confondre avec les liens du texte. */
.page-site .entete-retour {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    padding: 8px 16px;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--encre-doux);
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}

.page-site .entete-retour:hover {
    border-color: var(--cyan);
    color: var(--navy);
}

.page-site .entete-retour svg {
    color: var(--cyan-fonce);
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ Corps */

.page-site main {
    padding: 34px 0 8px;
}

/* ------------------------------------------------------------ Composants */

/* La carte : le bloc de contenu par défaut. Même objet que « Pourquoi cet
   outil ? » sur l'accueil, pour que les pages se reconnaissent entre elles. */
.page-site .carte {
    margin-top: 22px;
    padding: 26px 30px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

.page-site .carte:first-child {
    margin-top: 0;
}

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

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

/* Encadré : une remarque, un exemple, un avertissement. Teinté, sans ombre,
   pour rester subordonné à la carte qui le contient. */
.page-site .encadre {
    margin: 18px 0;
    padding: 16px 18px;
    background: var(--surface-douce);
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--cyan);
    border-radius: var(--rayon-s);
    font-size: 14.5px;
    color: var(--encre-doux);
}

.page-site .encadre > :first-child { margin-top: 0; }
.page-site .encadre > :last-child { margin-bottom: 0; }

.page-site h2 {
    margin: 0 0 14px;
    color: var(--navy);
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.page-site h3 {
    margin: 24px 0 8px;
    color: var(--encre);
    font-size: 16px;
    font-weight: 700;
}

.page-site p {
    margin: 0 0 14px;
    color: var(--encre-doux);
}

.page-site li {
    margin-bottom: 8px;
    color: var(--encre-doux);
}

.page-site strong {
    color: var(--encre);
}

.page-site a {
    color: var(--cyan-fonce);
    text-decoration-color: rgba(60, 139, 166, .4);
    text-underline-offset: 2px;
}

.page-site a:hover {
    color: var(--navy);
    text-decoration-color: currentColor;
}

.page-site a:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 3px;
}

.page-site code {
    padding: 2px 5px;
    background: var(--surface-douce);
    border: 1px solid var(--bordure);
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    color: var(--navy);
}

.page-site pre {
    margin: 0 0 14px;
    padding: 14px 16px;
    overflow-x: auto;
    background: #1d2545;
    border-radius: var(--rayon-s);
    color: #e8ecf8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}

.page-site pre code {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-size: inherit;
}

/* Les tableaux débordent sur un téléphone : ils sont posés dans un conteneur
   qui glisse, plutôt que de faire glisser la page entière. */
.page-site .tableau-glissant {
    overflow-x: auto;
    margin: 0 0 14px;
}

.page-site table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.page-site th,
.page-site td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--bordure);
    text-align: left;
    vertical-align: top;
}

.page-site th {
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-site td {
    color: var(--encre-doux);
}

/* Boutons : le plein marine pour l'action principale, le contour pour une
   action secondaire. Mêmes formes que « Découvrir » sur l'accueil. */
.page-site .bouton,
.page-site .bouton-secondaire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--rayon-s);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.page-site .bouton {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 2px 8px rgba(39, 54, 120, .22);
}

.page-site .bouton:hover {
    background: var(--navy-clair);
    color: #fff;
    box-shadow: var(--ombre-relief);
}

.page-site .bouton-secondaire {
    background: var(--surface);
    border-color: var(--bordure);
    color: var(--navy);
}

.page-site .bouton-secondaire:hover {
    border-color: var(--cyan);
    color: var(--navy);
}

/* Un bouton qui commande tout un formulaire prend la largeur du formulaire :
   il n'y a rien d'autre à faire sur la page. */
.page-site .bouton-large {
    display: flex;
    width: 100%;
    margin-top: 4px;
}

/* -------------------------------------------------------------- Formulaire */

.page-site .champ {
    margin-bottom: 18px;
}

.page-site .champ label {
    display: block;
    margin-bottom: 6px;
    color: var(--encre);
    font-size: 14px;
    font-weight: 600;
}

.page-site .champ .indice {
    display: block;
    margin-top: 3px;
    color: var(--encre-tenu);
    font-size: 12.5px;
    font-weight: 400;
}

.page-site .champ input[type="text"],
.page-site .champ input[type="url"],
.page-site .champ input[type="email"],
.page-site .champ textarea {
    width: 100%;
    padding: 11px 13px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1.5px solid var(--bordure);
    border-radius: var(--rayon-s);
    font-family: inherit;
    font-size: 15px;
    color: var(--encre);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.page-site .champ input:focus,
.page-site .champ textarea:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(90, 175, 204, .18);
}

.page-site .champ textarea {
    min-height: 90px;
    resize: vertical;
}

.page-site .obligatoire {
    color: var(--alerte);
}

.page-site .alerte {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: var(--rayon-s);
    font-size: 14.5px;
}

.page-site .alerte-succes {
    background: var(--succes-fond);
    border: 1px solid var(--succes-bordure);
    color: var(--succes);
}

.page-site .alerte-erreur {
    background: var(--alerte-fond);
    border: 1px solid var(--alerte-bordure);
    color: var(--alerte);
}

/* Date de mise à jour d'un document : une mention de bas de page, pas une
   information de lecture. */
.page-site .date-maj {
    margin: 26px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--bordure-tenue);
    text-align: center;
    font-size: 12.5px;
    color: var(--encre-tenu);
}

/* Piège à robots : le champ doit rester hors de vue sans être `display: none`,
   qu'un robot repérerait aussi bien qu'un humain. */
.page-site .honeypot {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

/* ------------------------------------------------------------------- Pied */

.page-site .pied {
    margin-top: 40px;
    padding: 22px 0 30px;
    border-top: 1px solid var(--bordure);
    text-align: center;
    font-size: 13px;
    color: var(--encre-tenu);
}

.page-site .pied a {
    color: var(--encre-doux);
    text-decoration: none;
}

.page-site .pied a:hover {
    color: var(--navy);
    text-decoration: underline;
}

/* ------------------------------------------------------------ Adaptations */

@media (max-width: 780px) {
    .page-site .enveloppe { padding: 0 16px; }
    .page-site h1 { font-size: 24px; }
    .page-site h2 { font-size: 19px; }
    .page-site .accroche { font-size: 14.5px; }
    .page-site main { padding-top: 26px; }
    .page-site .carte { padding: 20px 18px; }
    .page-site .encadre { padding: 14px 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-site * {
        transition: none !important;
        transform: none !important;
    }
}