/* ============================================================================
   Pecify — socle commun à toutes les pages
   ----------------------------------------------------------------------------
   Polices, couleurs, typographie de base, en-tête (logo + liens légaux) et
   gabarit des pages légales. Chaque page le charge, puis ajoute dans son propre
   <style> ce qui n'appartient qu'à elle.

   Tout ce qui est partagé vit ICI et nulle part ailleurs : c'est la
   duplication de ces règles d'une page à l'autre qui avait produit les
   dérives de romaldent.fr (corrigées le 17 septembre 2026).
   ============================================================================ */

/* Poppins, hébergée ici : aucune requête vers Google. Sous-ensemble « latin »
   seulement, qui couvre le français (accents, ç, œ, guillemets, €). */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --creme: #FFF6E5;
  --encre: #2B2A2A;
  --gris: #6B6B66;
  --violet: #7A2BE0;
  --violet-vif: #9847FF;
  --ambre: #FFB627;
  --blanc: #FFFFFF;
  --filet: rgba(43, 42, 42, .12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-vif); }
::selection { background: var(--violet); color: var(--blanc); }

/* ── En-tête : logo à gauche, liens légaux à droite, sur la même ligne ─────── */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.entete__logo { display: block; flex: none; }
.entete__logo img { display: block; width: 150px; height: auto; }

.liens-legaux {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.liens-legaux a { color: var(--gris); transition: color .2s ease; }
.liens-legaux a:hover,
.liens-legaux a:focus-visible { color: var(--violet); }
.liens-legaux a[aria-current="page"] { color: var(--encre); }

/* Sur téléphone, les trois liens s'empilent à droite du logo, avec 24 px au
   moins entre leurs centres, pour qu'un doigt vise l'un sans toucher l'autre
   (WCAG 2.5.8, relevé par PageSpeed le 24 septembre 2026 à 4 px d'écart) :
   16 + 10 px, centres à 26 px, 68 px de haut. C'est 26 px de plus que le logo
   depuis l'ajout de « Cookies » (30 septembre 2026) : l'accueil, qui tient sur
   un écran, les reprend sur ses marges (voir son --titre et ses petits
   téléphones). Un quatrième lien imposerait de refaire ce calcul. */
@media (max-width: 600px) {
  .liens-legaux { flex-direction: column; align-items: flex-end; gap: 10px; font-size: 12px; line-height: 16px; }
}

/* Texte lu par les lecteurs d'écran, invisible à l'écran : par exemple
   « (nouvel onglet) » sur un lien qui ouvre un autre onglet. */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Bandeau de consentement (construit par assets/consentement.js) ─────────
   En bas à gauche, au-dessus de tout, sans décaler la page : sur l'accueil,
   qui tient sur un écran, il recouvre le bandeau défilant le temps du choix.
   Les deux boutons ont la même taille : refuser doit être aussi simple
   qu'accepter. */
.consentement {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: grid;
  gap: 12px;
  width: min(400px, calc(100% - 32px));
  padding: 20px 22px;
  border: 1px solid var(--filet);
  border-radius: 16px;
  background: var(--blanc);
  color: var(--encre);
  box-shadow: 0 18px 50px rgba(43, 42, 42, .22);
}
.consentement[hidden] { display: none; }
.consentement:focus:not(:focus-visible) { outline: none; }
.consentement b { font-size: 15px; font-weight: 600; }
.consentement p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gris); }
.consentement a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.consentement__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consentement__actions .bouton { flex: 1 1 140px; padding: 12px 18px; font-size: 15px; text-align: center; }
/* Même hauteur que le bouton à contour, qui porte une bordure. */
.consentement__actions .bouton--plein { border: 1px solid transparent; }
/* Sur téléphone, les deux boutons restent côte à côte : empilés, ils doublaient
   la hauteur du bandeau (305 px sur 568 en 320 de large). */
@media (max-width: 600px) {
  .consentement { left: 12px; bottom: 12px; width: calc(100% - 24px); gap: 10px; padding: 16px 18px; }
  .consentement p { font-size: 13.5px; line-height: 1.5; }
  .consentement__actions .bouton { flex-basis: 100px; padding: 11px 14px; }
}

/* ── Boutons : liens <a> comme <button> de formulaire ──────────────────────── */
.bouton {
  display: inline-block;
  padding: 15px 26px;
  border: 0;
  border-radius: 11px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  cursor: pointer;
}
.bouton--plein {
  background-color: var(--violet);
  color: var(--blanc);
  transition: background-color .25s ease, transform .25s ease;
}
.bouton--plein:hover,
.bouton--plein:focus-visible {
  background-color: var(--ambre);
  color: var(--encre);
  transform: translateY(-2px);
}
.bouton--contour {
  border: 1px solid rgba(43, 42, 42, .22);
  background-color: transparent;
  color: var(--encre);
  transition: border-color .25s ease;
}
.bouton--contour:hover,
.bouton--contour:focus-visible {
  border-color: var(--encre);
  color: var(--encre);
}

/* ── Gabarit des pages légales ─────────────────────────────────────────────── */
.conteneur { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.legal-haut {
  background: var(--creme);
  border-bottom: 1px solid var(--filet);
  padding: 28px 0 44px;
}
.legal-tete { margin-top: 56px; max-width: 760px; }
.legal-surtitre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.legal-surtitre::before { content: ""; flex: none; width: 28px; height: 3px; background: var(--ambre); }
.legal-tete h1 {
  margin: 18px 0 0;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.legal-chapo { margin: 22px 0 0; font-size: 17px; line-height: 1.65; color: var(--gris); }
.legal-meta { margin: 18px 0 0; font-size: 14px; color: var(--gris); }
.legal-meta b { color: var(--encre); font-weight: 500; }

/* Boutons sous l'en-tête d'une page courte : merci, pages d'erreur. */
.legal-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 40px; padding-bottom: 64px; }

.legal-corps { padding-top: 48px; padding-bottom: 72px; }
.legal-corps > * { max-width: 760px; }

.sommaire {
  padding: 20px 24px;
  border: 1px solid var(--filet);
  border-radius: 12px;
  font-size: 14px;
}
.sommaire b { font-weight: 600; }
.sommaire ol { margin: 10px 0 0; padding-left: 22px; columns: 2 220px; column-gap: 32px; line-height: 1.9; }
.sommaire a { color: var(--encre); }
.sommaire a:hover { color: var(--violet); }

.legal-article { margin-top: 48px; scroll-margin-top: 24px; font-size: 16px; line-height: 1.7; }
.legal-article h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.legal-article h2 span { flex: none; font-size: 14px; font-weight: 600; color: var(--violet); }
.legal-article h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 600; }
.legal-article p { margin: 0 0 14px; }
.legal-article ul { margin: 0 0 14px; padding-left: 22px; }
.legal-article li { margin-bottom: 6px; }
.legal-article b { font-weight: 600; }
/* Noms techniques (cookies, domaines) : en police à chasse fixe, sur fond crème. */
.legal-article code { padding: 1px 5px; border-radius: 5px; background: var(--creme); font-size: .9em; }

/* Fiches d'identité (éditeur, hébergeur) */
.fiche { margin: 0 0 14px; border-top: 1px solid var(--filet); }
.fiche div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.fiche dt { color: var(--gris); }
.fiche dd { margin: 0; }
@media (max-width: 600px) {
  .fiche div { grid-template-columns: 1fr; gap: 2px; }
}

/* Tableaux (traitements, cookies) : défilent seuls sur petit écran */
.tableau { overflow-x: auto; margin: 0 0 14px; }
.tableau table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.tableau th, .tableau td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
.tableau th { font-weight: 600; background: var(--creme); }

.legal-pied { padding-top: 28px; padding-bottom: 48px; border-top: 1px solid var(--filet); font-size: 14px; }
.legal-pied a { font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}