/* =====================================================================
   PAGES ÉDITORIALES — feuille dédiée
   =====================================================================
   Ces règles vivent dans leur propre fichier, et non dans `style.css`.
   Deux raisons : votre feuille principale n'a pas à grossir pour une
   fonctionnalité isolée, et une livraison qui ne la touche pas ne peut
   pas l'abîmer.

   Le fichier est appelé une seule fois, par `functions_pages_contenu.php`,
   et seulement sur les pages qui composent réellement du contenu.
   ===================================================================== */

/* =====================================================================
   PAGES ÉDITORIALES — sections deux colonnes
   =====================================================================
   Contenu saisi depuis Paramètres > Pages du site > Contenu. Une page est
   une suite de sections ; chaque section porte un titre facultatif et un
   modèle de colonnage.

   Aucune couleur en dur ici : les titres et le texte prennent celles de
   l'univers, comme partout ailleurs. */

.page-sections {
    padding: 40px 0 20px;
}

.page-section + .page-section {
    margin-top: 48px;
}

/* Titre d'une colonne de texte. Il vit DANS sa colonne : dans une section
   « 50/50 » chaque colonne peut avoir le sien, et dans une section
   texte + visuel il se cale sur le texte plutôt que de coiffer l'ensemble. */
.page-section-titre {
    margin: 0 0 16px;
}

/* Écart vertical puis horizontal. Les deux sont réglés séparément : sur
   mobile les colonnes s'empilent, et c'est alors l'écart VERTICAL qui les
   sépare — 50 px y creuseraient un trou entre un visuel et son texte. */
.page-section-grille {
    display: grid;
    gap: 32px 50px;
    align-items: start;
}

/* Un modèle = une classe. Les largeurs vivent donc dans la feuille de
   style et non dans le HTML généré. */
.page-section-100   .page-section-grille { grid-template-columns: 1fr; }
.page-section-50-50 .page-section-grille { grid-template-columns: 1fr 1fr; }
.page-section-33-66 .page-section-grille { grid-template-columns: 1fr 2fr; }
.page-section-66-33 .page-section-grille { grid-template-columns: 2fr 1fr; }

.page-section-col {
    min-width: 0;
}

.page-section-texte {
    line-height: var(--line-height, 1.7);
}

.page-section-texte > *:first-child { margin-top: 0; }
.page-section-texte > *:last-child  { margin-bottom: 0; }

.page-section-texte ul,
.page-section-texte ol {
    padding-left: 22px;
    margin: 12px 0;
}

.page-section-texte li {
    margin-bottom: 6px;
}

.page-section-texte a {
    color: var(--couleur-liens, var(--couleur-principale));
}

.page-section-texte table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.page-section-texte th,
.page-section-texte td {
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 8px 10px;
    text-align: left;
}

.page-section-visuel {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Page sans contenu : le bloc d'attente, tant que la page n'a pas encore
   été composée dans l'administration. */
.page-attente {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 80px 20px;
}

.page-attente .material-symbols-outlined {
    font-size: 48px;
    opacity: .35;
}

.page-attente h2 {
    margin: 20px 0 10px;
}

.page-attente p {
    opacity: .7;
}

/* Sur mobile, les deux colonnes s'empilent dans l'ordre de saisie :
   colonne 1, puis colonne 2. */
@media (max-width: 768px) {
    .page-sections {
        padding: 24px 0 10px;
    }

    /* L'ORDRE DES COLONNES, tel que l'éditeur l'a réglé.

       Chaque colonne porte son rang dans `--ordre-mobile`, écrit par le
       serveur. La règle ne connaît donc ni le nombre de colonnes ni
       laquelle passe devant : le jour où une section en portera trois,
       elle n'aura pas à changer.

       Le repli à 0 couvre les sections à une seule colonne, où le serveur
       n'émet rien : `order: 0` est la valeur par défaut, l'ordre du
       document est conservé.

       `order` ne déplace que l'AFFICHAGE : la tabulation au clavier et la
       lecture d'écran suivent toujours l'ordre du document, colonne 1 puis
       colonne 2. C'est le comportement voulu pour un choix de présentation. */
    .page-section-col { order: var(--ordre-mobile, 0); }

    .page-section + .page-section {
        margin-top: 32px;
    }

    .page-section-grille {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}

/* =====================================================================
   L'INTRODUCTION D'UNE COLONNE
   Deux ou trois lignes entre le titre et ce qu'elles annoncent — un
   visuel, un formulaire, une liste.

   Elle reprend la typographie du texte courant : c'est du texte de page,
   pas une légende. Seul l'écart au-dessous la distingue, pour qu'elle se
   détache de ce qu'elle introduit sans s'en séparer.
   ===================================================================== */
.page-section-intro {
    line-height: var(--line-height, 1.7);
    margin-bottom: 22px;
}

.page-section-intro > *:first-child { margin-top: 0; }
.page-section-intro > *:last-child  { margin-bottom: 0; }

.page-section-intro ul,
.page-section-intro ol {
    padding-left: 22px;
    margin: 10px 0;
}

/* Un titre de colonne suivi d'une introduction ne garde pas tout son écart :
   les deux forment une seule entrée en matière. */
.page-section-titre + .page-section-intro {
    margin-top: -4px;
}