/* Base et composants de la charte Qellio (DESIGN.md, sections 4, 6, 7 et 8). Aucune valeur de couleur ici : tout vient de jetons.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond-creme-nappes);
  color: var(--texte);
  font: 400 16.5px/1.7 var(--font-texte);
  overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--lien); }
p { margin: 0 0 var(--espace-4); }
ul, ol { margin: 0 0 var(--espace-4); padding-left: var(--espace-5); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

.q-saut {
  position: absolute; left: var(--espace-4); top: -100px;
  background: var(--neutre-blanc); color: var(--neutre-encre);
  padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-bouton);
}
.q-saut:focus { top: var(--espace-4); }

/* Styles de texte */
h1, h2, h3, h4 { font-family: var(--font-titres); font-weight: 600; color: var(--texte); margin: 0 0 var(--espace-5); }
.titre-accueil { font-size: 84px; line-height: 1.03; letter-spacing: -.042em; }
.titre-page, h1 { font-size: 64px; line-height: 1.02; letter-spacing: -.042em; }
.titre-section, h2 { font-size: 48px; line-height: 1.07; letter-spacing: -.042em; }
.titre-carte, h3 { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
.question, h4 { font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -.028em; }
.chapo { font-size: 20px; line-height: 1.7; color: var(--texte-second); max-width: var(--largeur-lecture); }
.petit-texte { font-size: 13px; line-height: 1.5; color: var(--texte-second); }
.donnees { font: 500 16.5px/1.5 var(--font-donnees); }
.mot-cle { color: var(--mot-cle); }
.q-souligne {
  background: var(--degrade-soulignement) no-repeat 0 92% / 100% .14em;
  padding-bottom: .04em;
}

/* Mise en page */
.q-conteneur { width: 100%; max-width: calc(var(--largeur-contenu) + 2 * var(--espace-7)); margin: 0 auto; padding: 0 var(--espace-7); }
.q-section { padding: 104px 0; }
.q-lecture { max-width: var(--largeur-lecture); }

/* Étiquette et pastille */
.q-etiquette {
  display: inline-block;
  font: 500 12.5px/1.3 var(--font-donnees);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--acquisition-violet-profond);
  margin-bottom: var(--espace-4);
}
.q-panneau .q-etiquette { color: var(--marque-lavande); }
.q-pastille {
  display: inline-flex; align-items: center; gap: var(--espace-2);
  font: 500 12.5px/1.3 var(--font-donnees); letter-spacing: .1em; text-transform: uppercase;
  color: var(--acquisition-violet-profond);
  border: 1px solid var(--acquisition-lilas); background: var(--acquisition-lavande-pale);
  border-radius: var(--rayon-pilule); padding: var(--espace-1) var(--espace-3);
}

/* Carte, à plat */
.q-carte {
  background: var(--neutre-blanc); color: var(--neutre-encre);
  border: 1px solid var(--neutre-brume); border-radius: var(--rayon-carte);
  padding: var(--espace-5); box-shadow: var(--ombre-plat);
}
.q-carte--posee { border-radius: var(--rayon-solution); padding: var(--espace-6); box-shadow: var(--ombre-pose); }

/* Action principale : seul aplat violet de l'écran */
.q-action {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  min-height: 48px; padding: var(--espace-3) var(--espace-5);
  border: 0; border-radius: var(--rayon-bouton);
  background: var(--marque-violet); color: var(--neutre-blanc);
  font: 600 16px/1.3 var(--font-titres); text-decoration: none; cursor: pointer;
  box-shadow: var(--ombre-colore);
  transition: transform var(--duree-survol) var(--courbe);
}
.q-action:hover { transform: translateY(-2px); }
.q-action:disabled, .q-action[aria-disabled="true"] { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }

/* Bouton secondaire : contour seulement */
.q-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  min-height: 44px; padding: var(--espace-2) var(--espace-5);
  background: transparent; color: var(--lien);
  border: 1.5px solid currentColor; border-radius: var(--rayon-pilule);
  font: 500 16px/1.3 var(--font-texte); text-decoration: none; cursor: pointer;
  transition: background var(--duree-survol) var(--courbe);
}
.q-bouton:hover { background: var(--acquisition-lavande-pale); }
.q-bouton:disabled { cursor: not-allowed; opacity: .55; }

/* Lien */
.q-lien { color: var(--lien); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Panneau sombre : un par page */
.q-panneau {
  background: var(--degrade-sombre); color: var(--texte);
  border-radius: var(--rayon-panneau); padding: var(--espace-8);
}
.q-panneau h2, .q-panneau h3 { color: var(--neutre-creme); }
.q-panneau p, .q-panneau li { color: var(--texte-second); }

/* Accordéon sur details/summary natifs */
.q-accordeon { border-top: 1px solid var(--neutre-brume); }
.q-accordeon details { border-bottom: 1px solid var(--neutre-brume); }
.q-accordeon summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--espace-4);
  padding: var(--espace-5) 0; cursor: pointer; list-style: none;
  font: 500 20px/1.3 var(--font-titres); letter-spacing: -.028em;
}
.q-accordeon summary::-webkit-details-marker { display: none; }
.q-accordeon summary::after { content: '+'; font-size: 28px; line-height: 1; color: var(--marque-violet); transition: transform var(--duree-survol) var(--courbe); }
.q-accordeon details[open] summary::after { transform: rotate(45deg); }
.q-accordeon details > div { padding: 0 0 var(--espace-5); color: var(--texte-second); max-width: var(--largeur-lecture); }

/* États : icône et libellé, jamais la couleur seule */
.q-etat { display: flex; gap: var(--espace-3); align-items: flex-start; border-radius: var(--rayon-etiquette); padding: var(--espace-3) var(--espace-4); font-size: 15px; }
.q-etat strong { font-weight: 600; }
.q-etat--information { color: var(--etat-information); background: var(--etat-information-fond); }
.q-etat--attention { color: var(--etat-attention); background: var(--etat-attention-fond); }
.q-etat--erreur { color: var(--etat-erreur); background: var(--etat-erreur-fond); }
.q-etat--succes { color: var(--etat-succes); background: var(--etat-succes-fond); }

/* Champs */
.q-champ { display: grid; gap: var(--espace-2); margin-bottom: var(--espace-4); }
.q-champ label { font-weight: 500; }
.q-champ input, .q-champ textarea {
  font: inherit; color: var(--neutre-encre); background: var(--neutre-blanc);
  border: 1px solid var(--neutre-brume); border-radius: var(--rayon-etiquette);
  padding: var(--espace-3); min-height: 44px; width: 100%;
}
.q-case { display: flex; gap: var(--espace-3); align-items: flex-start; font-size: 15px; }
.q-case input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--marque-violet); flex: none; }

/* Points de rupture de la charte : 1100, 900, 820, 560, 420 */
@media (max-width: 1100px) {
  .q-conteneur { padding: 0 var(--espace-6); }
  .titre-accueil { font-size: 68px; }
}
@media (max-width: 900px) {
  .titre-accueil { font-size: 56px; }
  .titre-page, h1 { font-size: 48px; }
  .titre-section, h2 { font-size: 38px; }
}
@media (max-width: 820px) {
  .q-conteneur { padding: 0 20px; }
  .q-section { padding: 64px 0; }
  .q-panneau { padding: var(--espace-6) var(--espace-5); }
}
@media (max-width: 560px) {
  .titre-accueil { font-size: 42px; }
  .titre-page, h1 { font-size: 38px; }
  .titre-section, h2 { font-size: 31px; }
  .titre-carte, h3 { font-size: 23px; }
  .chapo { font-size: 18px; }
}
@media (max-width: 420px) {
  .titre-accueil { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}