/* Règles propres à la page « portail-transparence » — engendré depuis maquette/corps/portail-transparence.css */
/* =====================================================================================
   PORTAIL DE TRANSPARENCE
   Page de texte pur : une seule bande, un seul bloc de paragraphes.
   Tout est accroché à `.sec--grain`, la bande propre à cette page : les bandes communes
   (rendez-vous, newsletter, pied) posées par build.js ne doivent rien recevoir d'ici.
   ===================================================================================== */

/* Fond blanc recouvert du grain du site d'origine (tuile de 100 × 100 px, répétée).
   Sans la tuile, le fond ressort à #FFFFFF au lieu du gris très clair mesuré (#F3F3F3). */
body[data-page="portail-transparence"] .sec--grain {
  background-color: var(--blanc);
  background-image: url('/assets/img/6xpos-bg-grain.jpg');
  background-repeat: repeat;
}

/* Ouverture de page, traitée comme le grand titre bicolore du Living Lab : le titre en rose,
   la phrase d'accueil en bleu nuit, les deux composés à la même échelle pour se lire comme un
   seul bloc. Valeurs RELEVÉES sur le rendu de .ll-titre — 53 px sur 40 d'interligne, degular
   en graisse 400, #F7CDD4 puis #252550 — et non déduites de la feuille, où le jeton --rose
   ne donne pas la couleur réellement servie. */
body[data-page="portail-transparence"] .sec--grain .titre-portail,
body[data-page="portail-transparence"] .sec--grain .chapeau-portail {
  font-size: 53px;
  line-height: 40px;
  font-weight: 400;
  margin: 0;
  padding-bottom: 0;
}
body[data-page="portail-transparence"] .sec--grain .titre-portail { color: var(--rose-2); }
/* Le bloc d'ouverture court sur 1080px quand le corps s'arrete a 515 : l'ecart se voit. On
   le ramene a une largeur intermediaire, assez large pour que le titre reste un titre, assez
   proche du corps pour que la page se lise comme une seule colonne. */
body[data-page="portail-transparence"] .sec--grain .titre-portail,
body[data-page="portail-transparence"] .sec--grain .chapeau-portail { max-width: 760px; }

/* Chapeau : la phrase d'accueil, qui tenait lieu de titre avant que le titre validé par le
   DPO ne prenne sa place. On la garde en tête de bloc, un cran au-dessus du corps du texte,
   sans en faire un second titre. */
/* La phrase d'accueil ferme le bloc d'ouverture : même échelle que le titre, en bleu nuit,
   puis l'air qui la sépare du corps du texte. */
body[data-page="portail-transparence"] .sec--grain .chapeau-portail {
  color: var(--nuit);
  margin-bottom: 34px;
}

/* Le bloc de texte d'origine sépare ses paragraphes de 1 em (16 px), pas des 18 px du
   socle : sur onze paragraphes, la différence vaut 22 px de hauteur de bande. */
body[data-page="portail-transparence"] .sec--grain p { margin-bottom: 16px; }
body[data-page="portail-transparence"] .sec--grain p:last-child { margin-bottom: 0; }

/* Les deux liens gardent le bleu du site d'origine. Le soulignement au survol et au focus
   est un ajout : sur l'original, rien ne distingue le lien hors la couleur. */
body[data-page="portail-transparence"] .sec--grain a { color: #2ea3f2; text-decoration: none; }
body[data-page="portail-transparence"] .sec--grain a:hover,
body[data-page="portail-transparence"] .sec--grain a:focus-visible { text-decoration: underline; }

/* Adaptatif : le titre reste lisible sans déborder sur les petits écrans. */
/* Palier intermédiaire, aligné sur celui du Living Lab. */
@media (max-width: 1100px) {
  body[data-page="portail-transparence"] .sec--grain .titre-portail,
  body[data-page="portail-transparence"] .sec--grain .chapeau-portail { font-size: 42px; line-height: 40px; }
}

@media (max-width: 767px) {
  body[data-page="portail-transparence"] .sec--grain .titre-portail,
  body[data-page="portail-transparence"] .sec--grain .chapeau-portail { font-size: 32px; line-height: 32px; }
}

/* --- Mise en page du corps -----------------------------------------------------------------
   Le reproche fait a cette page etait juste : un pave. La cause n'est pas la longueur du
   texte, c'est la LONGUEUR DE LIGNE. Sur une rangee de 1080px, une ligne portait environ
   150 caracteres ; l'oeil en suit confortablement 65 a 80, au-dela il perd le debut de la
   ligne suivante. On ramene donc la colonne a 80 caracteres — MESURE au navigateur, pas
   deduite du ch, qui vaut ici 8,6px quand le caractere moyen en vaut 6,4 — et on desserre
   l'interligne. Pas un mot du texte valide n'est touche.                                   */
body[data-page="portail-transparence"] .sec--grain .portail-corps { max-width: 515px; }
body[data-page="portail-transparence"] .sec--grain .portail-corps p,
body[data-page="portail-transparence"] .sec--grain .portail-droits p,
body[data-page="portail-transparence"] .sec--grain .portail-note {
  line-height: 26px;
}

/* Les droits et la maniere de les exercer : c'est ce qu'une patiente vient chercher, elle
   doit le trouver sans lire le reste. Un encadre blanc au rayon de la charte suffit a le
   detacher — aucun mot ajoute, aucun intertitre invente. */
body[data-page="portail-transparence"] .sec--grain .portail-droits {
  max-width: 515px;
  margin: 40px 0;
  padding: 34px 40px;
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  border-left: 4px solid var(--mauve);
}
body[data-page="portail-transparence"] .sec--grain .portail-droits p:last-child {
  margin-bottom: 0;
}
/* L'adresse a ecrire est le point d'aboutissement du bloc : on lui donne sa propre ligne. */
body[data-page="portail-transparence"] .sec--grain .portail-droits a[href^="mailto:"] {
  font-size: 20px;
}

/* La derniere phrase n'est pas un paragraphe de plus : c'est une note sur le portail
   lui-meme. Elle se compose comme telle, un cran en retrait. */
body[data-page="portail-transparence"] .sec--grain .portail-note {
  max-width: 515px;
  font-size: 15px;
  font-style: italic;
  opacity: .75;
}

@media (max-width: 767px) {
  body[data-page="portail-transparence"] .sec--grain .portail-droits {
    padding: 24px 22px;
    margin: 28px 0;
    border-radius: 26px;
  }
}