/*
 * PharmaShift, pages publiques : feuille commune à l’accueil et aux trois pages légales.
 * Spec : docs/superpowers/specs/2026-10-15-accueil-carnet-design.md, §3.7, §3.8, §4.6 et §5.1.
 * Valeurs : maquettes v4 et spec-direction-A.md, §2 à §4. Les règles propres à l’accueil sont dans
 * accueil.css, chargé par accueil.html seulement (décision D-b du plan).
 * Téléphone d’abord : hors media query, les valeurs de la maquette mobile (390 px) ; à partir de
 * 768 px puis de 1024 px, celles de la maquette desktop.
 *
 *   1. Polices auto-hébergées        7. Visibilité par largeur
 *   2. Jetons                        8. À partir de 768 px
 *   3. Base                          9. À partir de 1024 px
 *   4. Conteneur                    10. Mouvement
 *   5. En-tête, pied, messages      11. Impression
 *   6. Pages légales
 */

/* 1. Polices auto-hébergées : Fontsource 5.3.0, licences OFL 1.1 dans fonts/OFL-Newsreader.txt et
 *    fonts/OFL-Caveat.txt. Noms de famille propres, sans « Variable ». Newsreader porte les axes opsz
 *    et wght, Caveat l’axe wght. Sous-ensembles latin-ext puis latin, dans l’ordre de Fontsource :
 *    pour un caractère commun aux deux, la règle déclarée en dernier (latin) est essayée d’abord. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext-opsz-normal.2e01db0610b1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-normal.f94a697b1650.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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext-opsz-italic.43736a955d60.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-italic.e97067eb043b.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: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/caveat-latin-ext-wght-normal.2a8768f8ef1f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/caveat-latin-wght-normal.2d9de14f93a2.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;
}

/* 2. Jetons : une couleur par entrée de la palette (spec-direction-A.md §2) et les deux piles de
 *    polices. Seules les paires texte / fond du tableau des contrastes sont employées. */
:root {
  --papier: #f6f1e6;
  --feuille: #fffdf7;
  --papier-fonce: #efe8da;
  --reglure: #d8ccb6;
  --bord-feuille: #c4b89f;
  --planche: #c9b28c;
  --blanc: #ffffff;
  --froid: #eef4f5;
  --bord-carte: #d5dde1;
  --encre: #1d2830;
  --encre-2: #4a5761;
  --stylo: #1e3a8a;
  --crayon-rouge: #b42318;
  --canard: #187890;
  --canard-fonce: #0d5566;
  --surligneur: #cdeee2;
  --post-it: #f9e27d;
  --pied-texte: #e9e4d8;
  --pied-2: #b9c2c8;
  --alerte-fond: #fdf3e7;
  --alerte-texte: #8a2c0d;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --main: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  color-scheme: light;
}

/* 3. Base. Les marges des titres, paragraphes et listes sont remises à zéro : chaque composant
 *    pose les siennes, comme le font les maquettes. Pas de mode sombre (spec §3.7, §10). */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--canard-fonce); text-underline-offset: 3px; }
a:hover { color: var(--encre); }
/* Anneau de focus (§4.6) : jamais supprimé ; au moins 7,3:1 sur tous les fonds clairs. */
:focus-visible { outline: 3px solid var(--canard-fonce); outline-offset: 3px; }
.icone { flex: 0 0 auto; vertical-align: -0.125em; }

/* Texte réservé aux lecteurs d’écran (préfixe « Offre » des pilules, par exemple). */
.masque,
.evitement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Lien d’évitement : premier élément focalisable, visible seulement au focus (§4.6). */
.evitement { display: inline-block; padding: 12px; background: var(--blanc); }
.evitement:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* 4. Conteneur : 440 px de contenu au plus sur téléphone (358 px utiles à 390), en content-box comme
 *    la maquette mobile ; 1 240 px en border-box à partir de 768 px, comme la maquette desktop. */
.conteneur { box-sizing: content-box; max-width: 440px; margin: 0 auto; padding: 0 16px; }

/* 5. En-tête (maquettes §3.1 et §4.1) */
.entete { background: var(--papier); border-bottom: 1px solid var(--reglure); }
.entete-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 64px;
}
.entete-marque { display: flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.entete-marque img { display: block; width: 40px; height: 40px; flex: 0 0 auto; }
.entete-marque span { font-weight: 700; font-size: 19px; line-height: 1; color: var(--encre); }
.entete-liens { display: flex; flex-wrap: wrap; align-items: center; }
.entete-liens a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-underline-offset: 4px;
}
.entete-liens a > span { display: inline-flex; }
/* Lien-bouton « Créer un compte », affiché à partir de 1024 px (classe vue-large du gabarit). */
.entete-liens .btn-nav {
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--canard);
  border-radius: 10px;
  background: transparent;
  color: var(--canard-fonce);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}
.entete-liens .btn-nav:hover { background: var(--froid); color: var(--encre); }

/* Pied (maquettes §3.16 et §4.17) : texte #e9e4d8 et liens blancs sur l’encre ; l’anneau de focus y
 * passe en #e9e4d8 (11,84:1). Chaque lien mesure au moins 44 px de haut. */
.pied { background: var(--encre); color: var(--pied-texte); padding: 32px 0; }
.pied a { color: var(--blanc); }
.pied a:hover { color: var(--pied-texte); }
.pied :focus-visible { outline-color: var(--pied-texte); }
.pied-marque a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.pied-marque img { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.pied-marque span { font-weight: 700; font-size: 18px; line-height: 1; }
.pied-marque p { margin-top: 12px; font-size: 15px; line-height: 22px; }
.pied-liens,
.pied-legal { margin-top: 24px; }
.pied-liens ul,
.liens-legaux ul { margin: 0; padding: 0; list-style: none; }
.liens-legaux li { display: block; }
.pied-liens a,
.liens-legaux a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  line-height: 1.3;
}
.pied-hebergeur { margin-top: 8px; font-size: 15px; line-height: 22px; }
.pied-copyright { margin-top: 24px; font-size: 13.5px; line-height: 20px; color: var(--pied-2); }

/* Messages Django (MESSAGE_TAGS de settings.py : secondary, info, success, warning, danger) :
 * bandeau statique ; une paire du tableau des contrastes par niveau (§8.2, critère 6). */
.messages { margin-top: 16px; }
.message {
  padding: 12px 16px;
  border: 1px solid var(--bord-carte);
  border-radius: 12px;
  background: var(--froid);
  color: var(--encre);
  font-size: 16px;
  line-height: 1.5;
}
.message + .message { margin-top: 8px; }
.message-success { background: var(--froid); color: var(--canard-fonce); }
.message-info, .message-secondary { background: var(--froid); color: var(--encre); }
.message-warning { background: var(--alerte-fond); color: var(--alerte-texte); }
.message-danger { background: var(--feuille); color: var(--crayon-rouge); }

/* 6. Pages légales (§5.1) : colonne de lecture de 42em, Newsreader 17 px, interligne 1,6.
 *    Les URL et adresses e-mail trop longues se coupent n’importe où : jamais de défilement
 *    horizontal, même à 320 px. */
.page-legale {
  max-width: calc(42em + 32px);
  margin: 0 auto;
  padding: 32px 16px 56px;
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.page-legale h1 { font-weight: 600; font-size: 30px; line-height: 36px; letter-spacing: -0.01em; text-wrap: balance; }
.page-legale h2 { margin-top: 40px; font-weight: 600; font-size: 23px; line-height: 1.25; text-wrap: balance; scroll-margin-top: 16px; }
.page-legale h3 { margin-top: 28px; font-weight: 600; font-size: 19px; line-height: 1.35; }
.page-legale p,
.page-legale ul,
.page-legale ol,
.page-legale dl { margin-top: 12px; }
.page-legale ul,
.page-legale ol { padding-left: 1.4em; }
.page-legale li + li { margin-top: 6px; }
.page-legale dt { font-weight: 600; }
.page-legale .mise-a-jour { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--encre-2); }

/* Sommaire de la politique et des CGV : liens d’au moins 44 px de haut (§4.6, §8.2 critère 8). */
.sommaire {
  margin-top: 24px;
  padding: 8px 20px;
  border: 1px solid var(--bord-carte);
  border-radius: 16px;
  background: var(--blanc);
}
.page-legale .sommaire ol,
.page-legale .sommaire ul { margin-top: 0; padding-left: 0; list-style: none; }
.page-legale .sommaire li + li { margin-top: 0; }
.sommaire a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; }

/* Bloc éditeur et prestataires : cartes blanches (texte #1d2830 à 15,02:1, liens #0d5566 à 8,37:1). */
.identite-editeur,
.prestataire {
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--bord-carte);
  border-radius: 16px;
  background: var(--blanc);
}
.page-legale .identite-editeur p { margin-top: 0; }
.page-legale .identite-editeur p + p { margin-top: 4px; }
.page-legale .prestataire dl { margin-top: 0; }
.prestataire dt { font-weight: 700; }
.prestataire dd { margin-top: 2px; }
.prestataire dd + dt { margin-top: 8px; }

/* 7. Visibilité par largeur (§3.7) : vue-large à partir de 1024 px, vue-etroite en dessous. Seule
 *    requête en max-width de la feuille : elle évite de redonner à chaque élément son display. */
@media (max-width: 1023.98px) { .vue-large { display: none !important; } }
@media (min-width: 1024px) { .vue-etroite { display: none !important; } }

/* 8. À partir de 768 px : conteneur de la maquette desktop, en-tête de 76 px. */
@media (min-width: 768px) {
  .conteneur { box-sizing: border-box; max-width: 1240px; padding: 0 clamp(16px, 4vw, 40px); }
  .entete-nav { min-height: 76px; }
  .page-legale { max-width: calc(42em + 80px); padding: 56px 40px 80px; }
  .page-legale h1 { font-size: clamp(30px, 1.9vw + 17px, 44px); line-height: 1.15; }
  .page-legale h2 { margin-top: 48px; font-size: 26px; }
  .page-legale h3 { font-size: 20px; }
}

/* 9. À partir de 1024 px : en-tête desktop (logo 44 px, icône avant « Se connecter », bouton
 *    « Créer un compte ») et pied en 3 colonnes. Les clamp() de la maquette valent ici leur
 *    maximum (liens : padding 10 px, écart 8 px). */
@media (min-width: 1024px) {
  .entete-marque img { width: 44px; height: 44px; }
  .entete-marque span { font-size: 22px; line-height: 1.2; }
  .entete-liens { gap: 8px; }
  .entete-liens a { font-size: 17px; line-height: 1.2; }
  .pied { padding: 48px 0 32px; }
  .pied-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .pied-liens,
  .pied-legal { margin-top: 0; }
  .pied-marque a { gap: 10px; }
  .pied-marque span { line-height: 1.2; }
  .pied-copyright { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--encre-2); }
}

/* 10. Défilement doux vers les ancres, seulement si l’utilisateur n’a pas réduit les animations.
 *     Aucune autre animation (§4.6). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 11. Impression (CGV imprimables, Code de commerce, art. L441-1) : ni navigation, ni lien
 *     d’évitement, ni pied, ni messages ; texte noir sur blanc. */
@media print {
  .evitement,
  .entete,
  .pied,
  .messages { display: none !important; }
  body { background: #ffffff; color: #000000; font-size: 11pt; }
  .page-legale { max-width: none; padding: 0; font-size: 11pt; }
  .page-legale * { color: #000000 !important; background: transparent !important; }
  .identite-editeur,
  .prestataire,
  .sommaire { border-color: #000000; break-inside: avoid; }
  .page-legale h2,
  .page-legale h3 { break-after: avoid; }
}