/* ==========================================================================
   PAGES — styles de contenu
   1. Blocs partagés par plusieurs pages
   2. Home
   3. About
   ========================================================================== */

/* ==========================================================================
   1. BLOCS PARTAGÉS
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête de page : grand titre + accroche
   -------------------------------------------------------------------------- */
.hero__title {
  padding-block: var(--space-m);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: normal;
}

.hero__subtitle {
  padding-top: var(--space-xs);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--gray-500); /* 4.83:1 sur blanc — AA ✓ */
}

@media (min-width: 900px) {
  .hero__subtitle {
    padding-top: 0;
    font-size: var(--fs-lead);
    line-height: normal;
  }
}

/* --------------------------------------------------------------------------
   Titres de section
   Mobile : Bold 24/32 · Desktop : SemiBold 32
   -------------------------------------------------------------------------- */
.section__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
}

@media (min-width: 900px) {
  .section__title {
    font-weight: 600;
  }
}

/* --------------------------------------------------------------------------
   Bloc de texte + bouton
   -------------------------------------------------------------------------- */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: flex-start;
}

.prose__text {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

@media (min-width: 900px) {
  .prose__text {
    /* Largeur de lecture fixée à 680px dans les maquettes desktop. */
    max-width: 680px;
    line-height: normal;
  }
}

/* Sur mobile, les boutons de contenu occupent toute la largeur. */
.prose .btn {
  align-self: stretch;
}

@media (min-width: 900px) {
  .prose .btn {
    align-self: flex-start;
  }
}

/* Amorce de paragraphe mise en avant (page About). */
.lead-in {
  font-weight: 700;
  color: var(--violet-700); /* 7.14:1 sur blanc — AA ✓ */
}

/* --------------------------------------------------------------------------
   Blocs de texte courant — pages About et Privacy Policy
   Desktop : colonne de lecture de 680px, espacement de 16px.
   Mobile  : pleine largeur, espacement de 8px.
   -------------------------------------------------------------------------- */
.text-block {
  padding-block: var(--space-2xs);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 900px) {
  .text-block {
    display: flex;
    padding-block: var(--space-s);
    font-size: var(--fs-lead);
    line-height: normal;
  }

  .text-block > * {
    width: 680px;
  }

  /* Variante utilisée par le récit de la About : un bloc sur deux est poussé
     contre le bord droit du conteneur. */
  .text-block--right {
    justify-content: flex-end;
  }
}

.text-list {
  padding-block: var(--space-2xs);
  padding-inline-start: 1.5em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 900px) {
  .text-list {
    max-width: 680px;
    padding-block: var(--space-s);
    font-size: var(--fs-lead);
    line-height: normal;
  }
}

.text-list strong {
  font-weight: 700;
}

/* Liste imbriquée dans un bloc de texte (page Privacy Policy) : elle hérite
   déjà de l'espacement du bloc parent. */
.text-block ul {
  padding-inline-start: 1.5em;
  list-style: disc;
}

/* Dernier bloc avant un titre de section : en desktop, l'espace qui suit est
   déjà porté par le `padding-top` du titre. */
@media (min-width: 900px) {
  .text-block--last {
    padding-bottom: 0;
  }
}

/* Accroche suivie d'un espacement propre (pages Contact et Privacy Policy). */
.hero__subtitle--spaced {
  padding-bottom: var(--space-s);
}

/* ==========================================================================
   2. HOME
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grille de projets
   Mobile  : une colonne, vignettes pleine largeur de 180px de haut.
   Desktop : trois colonnes de largeur égale, vignettes carrées de 219px.
   -------------------------------------------------------------------------- */
.work {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

@media (min-width: 900px) {
  .work {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);
  }
}

.work__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 900px) {
  .work__card {
    flex: 1 0 0;
    min-width: 0;
    gap: 0;
  }
}

.work__thumb {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-card);
  /* Mobile : l'image entière est visible (valeur de la maquette mobile). */
  object-fit: contain;
  transition: transform 0.25s ease-out;
}

@media (min-width: 900px) {
  .work__thumb {
    width: 219px;
    height: 219px;
    /* Desktop : l'image remplit le carré et déborde (valeur de la maquette). */
    object-fit: cover;
  }
}

.work__card:hover .work__thumb {
  transform: translateY(-4px);
}

.work__name {
  padding-top: var(--space-3xs);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
}

@media (min-width: 900px) {
  .work__name {
    padding-bottom: var(--space-2xs);
  }
}

.work__meta {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 900px) {
  .work__meta {
    padding-block: var(--space-2xs);
  }
}

/* --- Emplacement « More case studies coming soon » ----------------------- */
/* Bloc informatif, non cliquable.
   Mobile : bandeau arrondi pleine largeur · Desktop : cercle de 219px,
   occupant la troisième colonne de la grille. */
.work__soon {
  width: 100%;
  /* La maquette mobile entoure ce bloc de 16px ; le haut est déjà couvert
     par l'espacement de la liste, il ne reste que le bas. */
  padding-bottom: var(--space-s);
}

@media (min-width: 900px) {
  .work__soon {
    flex: 1 0 0;
    min-width: 0;
    padding-bottom: 0;
  }
}

.work__soon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  padding: var(--space-s);
  background-color: var(--yellow-50);
  border-radius: var(--radius-card);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--violet-700); /* 6.90:1 sur crème — AA ✓ */
  text-align: center;
}

@media (min-width: 900px) {
  .work__soon-badge {
    width: 219px;
    height: 219px;
    border-radius: var(--radius-pill);
  }
}

/* --------------------------------------------------------------------------
   Cercle décoratif de la Home
   -------------------------------------------------------------------------- */
.decor--home {
  top: 1429px;
  right: -239px;
  width: 479px;
  height: 479px;
  /* La maquette mobile applique 50% d'opacité au même tracé. */
  opacity: 0.5;
}

@media (min-width: 900px) {
  .decor--home {
    top: 893px;
    right: -435px;
    width: 871px;
    height: 871px;
    opacity: 1;
  }
}

/* ==========================================================================
   3. ABOUT
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bandeau photo
   L'image source est recadrée sur la seule bande visible dans la maquette
   (1600 × 527 au lieu de 1600 × 1200), d'où le cadrage par `object-position` :
   la maquette desktop montre le bas de cette bande, la mobile sa totalité.
   -------------------------------------------------------------------------- */
.about__banner {
  padding-top: var(--space-s);
  padding-bottom: var(--space-2xs);
}

.about__banner img {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 900px) {
  .about__banner img {
    height: 200px;
    object-position: center bottom;
  }
}

/* --------------------------------------------------------------------------
   « WELCOME TO MY PLACE »
   Dans Figma ce texte est positionné en absolu, ce qui le fait dériver dès que
   la largeur change. Il est ici remis dans le flux, avec les marges relevées
   sur la maquette (30px au-dessus, 46px en dessous) : rendu identique à
   1440px, mais qui tient à toutes les largeurs.
   -------------------------------------------------------------------------- */
.about__welcome {
  padding: 10px var(--space-s);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 24px;
  color: var(--violet-600); /* maquette : #A78BFA — 2.74:1, sous le seuil AA */
  text-align: center;
}

@media (min-width: 900px) {
  .about__welcome {
    margin: 30px 0 46px;
    padding: 10px 0;
    /* 313px sur les 1200px du conteneur, exprimé en % pour tenir au resserrement */
    margin-inline-start: 26%;
    font-size: 60px;
    text-align: left;
  }
}

/* Le titre qui suit « WELCOME » ne reprend pas le rythme habituel : l'espace
   qui le précède est déjà porté par les marges du bloc manuscrit, sans quoi
   il serait compté deux fois. */
.about__after-welcome {
  padding-top: 51px;
}

@media (min-width: 900px) {
  .about__after-welcome {
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Outils
   Mobile  : liste verticale, icônes de 24px, libellés à 18px.
   Desktop : rangée horizontale, icônes de 40px, libellés à 32px.
   -------------------------------------------------------------------------- */
.about__tools-label {
  padding: var(--space-s) 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-body);
  color: var(--violet-600); /* maquette : #A78BFA — 2.74:1, sous le seuil AA */
}

.about__tools {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
  padding-top: var(--space-s);
  padding-bottom: 44px;
  list-style: none;
  margin: 0;
}

@media (min-width: 900px) {
  .about__tools {
    flex-direction: row;
    align-items: center;
    /* La rangée desktop ne porte aucun espacement propre dans la maquette. */
    padding-top: 0;
    padding-bottom: 0;
  }
}

.about__tool {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  /* Inter Medium : choix délibéré de la maquette, distinct du reste du site. */
  font-family: var(--font-tools);
  font-weight: 500;
  font-size: 18px;
  line-height: var(--lh-body);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .about__tool {
    font-size: 32px;
    line-height: normal;
  }
}

.about__tool img {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

@media (min-width: 900px) {
  .about__tool img {
    width: 40px;
    height: 40px;
  }
}

/* Le logo Figma est un lockup (icône + mot) : sa largeur suit sa hauteur,
   et il ne porte pas d'arrondi puisque l'icône en contient déjà un. */
.about__tool--lockup img {
  width: auto;
  height: 24px;
  border-radius: 0;
}

@media (min-width: 900px) {
  .about__tool--lockup img {
    height: 40px;
  }
}

/* --------------------------------------------------------------------------
   Cercles décoratifs de la About
   Deux cercles en desktop (violet à droite, jaune à gauche), un seul en mobile.
   -------------------------------------------------------------------------- */
.decor--about-right {
  top: 1450px;
  right: -244px;
  width: 479px;
  height: 479px;
  opacity: 0.5;
}

@media (min-width: 900px) {
  .decor--about-right {
    top: 1346px;
    right: -438px;
    width: 871px;
    height: 871px;
    opacity: 1;
  }
}

/* Tracé décoratif de la page Walkers. */
.decor--walkers {
  display: none;
}

@media (min-width: 900px) {
  .decor--walkers {
    display: block;
    top: 1221px;
    right: 128px;
    width: 580px;
    height: 580px;
  }

  .decor--walkers img {
    width: 100%;
    height: 100%;
  }
}

/* Absent de la maquette mobile. */
.decor--about-left {
  display: none;
}

@media (min-width: 900px) {
  .decor--about-left {
    display: block;
    top: 697px;
    left: -438px;
    width: 871px;
    height: 871px;
  }

  .decor--about-left .decor__shape {
    transform: translate(-50%, -50%) rotate(-140deg);
  }
}

/* ==========================================================================
   4. CONTACT
   ========================================================================== */

/* --------------------------------------------------------------------------
   Formulaire
   Desktop : deux colonnes de 447px séparées par 80px, soit 974px — la largeur
   du champ message. La maquette place les colonnes à 445px, ce qui laissait
   4px de décalage avec le message ; les bords sont ici alignés.
   Mobile : une seule colonne.
   -------------------------------------------------------------------------- */
.form {
  max-width: 974px;
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: 0;
}

@media (min-width: 900px) {
  .form__row {
    flex-direction: row;
    gap: 80px;
    padding-block: var(--space-s);
  }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

@media (min-width: 900px) {
  .form__field {
    flex: 1 0 0;
    min-width: 0;
  }
}

.form__label {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-small);
}

@media (min-width: 900px) {
  .form__label {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
}

/* Mention « (Optional) » accolée au libellé. */
.form__optional {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-500);
}

@media (min-width: 900px) {
  .form__optional {
    font-size: var(--fs-small);
  }
}

/* Champs de saisie — mêmes valeurs pour input et textarea. */
.form__input {
  width: 100%;
  padding: var(--space-xs) var(--space-s);
  background-color: var(--yellow-50);
  border: 1px solid var(--yellow-100);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--dark);
  /* Empêche iOS de zoomer au focus : il le fait sous 16px. */
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 900px) {
  .form__input {
    padding: var(--space-s);
  }
}

.form__input::placeholder {
  /* Maquette : #9CA3AF — 2.45:1 sur le fond crème, sous le seuil AA.
     Assombri en Gray500, déjà dans la palette : 4.67:1. */
  color: var(--gray-500);
  opacity: 1;
}

.form__input:focus {
  border-color: var(--violet-600);
}

textarea.form__input {
  height: 200px;
  border-radius: var(--radius-card);
  resize: vertical;
}

.form__submit {
  width: 100%;
  margin-top: var(--space-s);
}

@media (min-width: 900px) {
  .form__submit {
    margin-top: var(--space-s);
  }
}

/* Champ piège anti-spam : invisible à l'écran et hors parcours clavier,
   mais rempli par les robots, ce qui permet à Netlify de les écarter. */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Messages de retour du formulaire
   Aucun équivalent dans les maquettes : repris du style des champs pour
   rester dans le même langage visuel.
   -------------------------------------------------------------------------- */
.form__feedback {
  max-width: 974px;
  padding: var(--space-m);
  background-color: var(--yellow-50);
  border: 1px solid var(--yellow-100);
  border-radius: var(--radius-card);
}

@media (min-width: 900px) {
  .form__feedback {
    padding: var(--space-l);
  }
}

.form__feedback h3 {
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--violet-700);
}

.form__feedback p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.form__feedback a {
  color: var(--violet-700);
}

.form__error {
  margin-top: var(--space-s);
}

/* --------------------------------------------------------------------------
   « Find me online! »
   -------------------------------------------------------------------------- */
.socials {
  list-style: none;
  margin: 0;
  padding: 0;
}

.socials a {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  /* 16 + 24 + 16 = 56px de haut : au-delà des 44px requis. */
  padding: var(--space-s) 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--dark);
  text-decoration: none;
}

.socials a:hover {
  color: var(--violet-700);
}

.socials img {
  width: 24px;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .socials--linkedin img {
    width: 56px;
  }
}

.socials--dribbble img {
  border-radius: 8px;
}

@media (min-width: 900px) {
  .socials--dribbble img {
    width: 52px;
  }
}

/* --------------------------------------------------------------------------
   Cercle décoratif de la Contact
   -------------------------------------------------------------------------- */
.decor--contact {
  top: 1044px;
  right: -182px;
  width: 357px;
  height: 357px;
  opacity: 0.5;
}

@media (min-width: 900px) {
  .decor--contact {
    top: 310px;
    right: -435px;
    width: 871px;
    height: 871px;
    opacity: 1;
  }
}

/* ==========================================================================
   5. PRIVACY POLICY
   ========================================================================== */

/* Adresses e-mail citées dans le texte. La maquette les met en gras sans les
   rendre cliquables ; elles le deviennent ici, avec un soulignement — un lien
   ne doit pas se distinguer par la seule graisse. */
.legal-mail {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
}

.legal-mail:hover {
  color: var(--violet-700);
}

/* --------------------------------------------------------------------------
   Cercles décoratifs
   Trois en desktop, un seul en mobile.
   -------------------------------------------------------------------------- */
.decor--privacy-1 {
  top: 1450px;
  right: -244px;
  width: 479px;
  height: 479px;
  opacity: 0.5;
}

@media (min-width: 900px) {
  .decor--privacy-1 {
    top: 310px;
    right: -435px;
    width: 871px;
    height: 871px;
    opacity: 1;
  }
}

/* Absents de la maquette mobile. */
.decor--privacy-2,
.decor--privacy-3 {
  display: none;
}

@media (min-width: 900px) {
  .decor--privacy-2 {
    display: block;
    top: 2967px;
    right: -435px;
    width: 871px;
    height: 871px;
  }

  /* Celui-ci est centré verticalement dans la page, pas placé à une hauteur
     fixe : il suit donc la longueur réelle du texte. */
  .decor--privacy-3 {
    display: block;
    top: 50%;
    right: -445px;
    width: 871px;
    height: 871px;
    transform: translateY(-50%);
  }
}

/* ==========================================================================
   6. ÉTUDES DE CAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête d'étude de cas
   -------------------------------------------------------------------------- */
.case__subtitle {
  padding-top: var(--space-xs);
  font-size: var(--fs-body);
  font-weight: 300; /* maquette desktop : ExtraLight 200 — voir §6 des écarts */
  line-height: var(--lh-body);
  color: var(--gray-500);
}

.case__meta {
  padding-top: var(--space-2xs);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--gray-500);
}

@media (min-width: 900px) {
  .case__subtitle {
    padding-top: 0;
    font-size: 24px;
    line-height: normal;
  }

  .case__meta {
    font-size: var(--fs-body);
  }
}

/* --------------------------------------------------------------------------
   Visuel d'ouverture
   La maquette le superpose au titre : la composition est vide en haut à
   gauche, ce qui laisse respirer le titre. Le décalage est exprimé en
   pourcentage pour rester proportionnel au resserrement.
   -------------------------------------------------------------------------- */
.case__hero {
  width: 100%;
}

.case__hero img {
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .case__hero {
    position: relative;
    /* 1200 × 695 : la hauteur réellement occupée dans le flux */
    aspect-ratio: 1200 / 695;
  }

  .case__hero img {
    position: absolute;
    top: -19%; /* -132 / 695 */
    left: 0;
  }
}

/* --------------------------------------------------------------------------
   Section en deux colonnes : texte d'un côté, visuel de l'autre
   Remplace les six cartes positionnées en absolu de la maquette, dont les
   hauteurs fixes n'auraient pas survécu au reflux du texte.
   -------------------------------------------------------------------------- */
.split {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

@media (min-width: 900px) {
  .split {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
  }

  /* Visuel à gauche, texte à droite. */
  .split--reverse {
    flex-direction: row-reverse;
  }

  /* Texte aligné en haut plutôt que centré : utile quand le texte est court
     face à un visuel haut, où le centrage le fait paraître trop bas. */
  .split--top {
    align-items: flex-start;
  }

  /* Aligné en haut, mais décalé d'un cran : sans ça le texte vient buter
     contre le titre de la sous-section. */
  .split--offset .split__text {
    padding-top: var(--space-m);
  }
}

.split__text {
  min-width: 0;
}

@media (min-width: 900px) {
  .split__text {
    width: 680px;
    flex-shrink: 0;
  }
}

.split__visual {
  display: flex;
  justify-content: center;
  min-width: 0;
}

@media (min-width: 900px) {
  .split__visual {
    flex: 1 0 0;
  }
}

.split__visual img {
  width: 100%;
  height: auto;
  max-width: 462px;
}

/* Visuels calés sur un bord du conteneur plutôt que centrés dans leur colonne
   (étiquettes de couleur, échantillons d'espacement de la page Walkers). */
@media (min-width: 900px) {
  .split__visual--start {
    justify-content: flex-start;
  }

  .split__visual--end {
    justify-content: flex-end;
  }
}

/* --------------------------------------------------------------------------
   Sous-titres de l'étude de cas (niveau 3)
   -------------------------------------------------------------------------- */
.case__sub {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-m);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
}

@media (min-width: 900px) {
  .case__sub {
    padding-top: 80px;
    font-size: 24px;
    line-height: normal;
  }
}

/* Emphase colorée, reprise de la palette de l'app présentée. Chaque étude de
   cas fixe sa propre teinte ; par défaut, l'émeraude de Habipets. */
.case-accent {
  font-weight: 700;
  color: var(--case-accent, #065f46); /* Habipets : 7.02:1 sur blanc — AA ✓ */
}

/* Walkers : bleu pour l'action, ambre pour la sélection. */
.case--walkers {
  --case-accent: #0369a1; /* Sky700 — 5.93:1 sur blanc, AA ✓ (maquette : Sky600 #0284C7, 4.10:1) */
  --case-amber: #b45309; /* Amber700 — 5.02:1 sur blanc, AA ✓ */
  --case-tint: #f0f9ff; /* Sky50 — fond des cartes */
  --case-tint-border: #e0f2fe; /* Sky100 */
}

/* Mot-symbole « Walkers » inséré dans le fil du texte. */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: 22px;
  color: var(--case-accent);
}

/* Mot manuscrit « Friendly ». */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--case-amber);
}

/* Logo Habipets inséré dans le fil du texte : dans la maquette, le mot était
   écrit en transparent avec le logo posé par-dessus en absolu. */
.case-logo {
  display: inline-block;
  height: 1.4em;
  width: auto;
  vertical-align: -0.32em;
}

/* --------------------------------------------------------------------------
   Style tile de l'application
   La maquette ne présente pas un simple nuancier mais une planche complète :
   logo, échantillons de titres, icône d'application et rampes de couleur.
   Elle est donc reprise comme un visuel unique — la reconstruire en CSS
   aurait supposé recréer le logo et l'icône, pour un résultat plus fragile.
   -------------------------------------------------------------------------- */
.styletile {
  display: flex;
  justify-content: center;
  padding-block: var(--space-m);
}

@media (min-width: 900px) {
  .styletile {
    padding-block: var(--space-xl);
  }
}

.styletile img {
  width: 100%;
  height: auto;
  max-width: 726px;
}

/* Les trois teintes clés, elles, restent en CSS : trois aplats suffisent. */
.key-colors {
  display: flex;
  gap: var(--space-m);
  justify-content: center;
  padding: var(--space-s) var(--space-m);
  background-color: #e8ddd0;
  border-radius: var(--radius-card);
}

@media (min-width: 900px) {
  .key-colors {
    gap: 60px;
  }
}

.key-colors span {
  width: 40px;
  height: 40px;
  border-radius: 15px;
}

/* --------------------------------------------------------------------------
   Blocs « The system » : un intitulé, une explication, un composant illustré
   -------------------------------------------------------------------------- */
.sys__label {
  font-weight: 700;
}

.sys__visual {
  display: flex;
  justify-content: center;
  padding-block: var(--space-s);
}

.sys__visual img {
  width: 100%;
  height: auto;
  max-width: 488px;
}

/* --------------------------------------------------------------------------
   WALKERS — éléments propres à cette étude de cas
   -------------------------------------------------------------------------- */

/* Étiquettes de couleur (« Sky600 / #0284C7 »). Positionnées en absolu dans
   la maquette ; remises dans le flux, ancrées à la sous-section qu'elles
   illustrent. Restent du texte : nettes, sélectionnables, lisibles. */
.color-label {
  display: inline-flex;
  flex-direction: column;
  padding: var(--space-s);
  background-color: var(--yellow-50);
  border-radius: 30px;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 28px;
}

@media (min-width: 900px) {
  .color-label {
    width: 370px;
    align-items: center;
    font-size: 20px;
  }
}

/* Cette étiquette énonce un code hexadécimal : elle garde la teinte réelle
   qu'elle nomme, sinon elle serait fausse. Seul cas conservé en Sky600. */
.color-label--sky {
  color: #0284c7;
}

.color-label--amber {
  color: var(--case-amber);
}


/* Composition « WCAG » + « Friendly ». Deux mots posés l'un sur l'autre dans
   la maquette ; reproduits en texte, avec les coins asymétriques d'origine. */
.wcag-badge {
  position: relative;
  display: inline-block;
  margin-block: var(--space-m);
  padding: var(--space-2xs) var(--space-m) var(--space-xs);
  background-color: var(--case-tint);
  border-bottom-left-radius: var(--radius-pill);
  border-top-right-radius: var(--radius-pill);
}

@media (min-width: 900px) {
  .wcag-badge {
    /* Décalé de 65px depuis le bord du conteneur, comme dans la maquette. */
    margin-left: 65px;
    padding: var(--space-2xs) 50px var(--space-xs);
  }
}

.wcag-badge__word {
  font-size: 48px;
  font-weight: 800;
  line-height: normal;
  color: var(--case-accent);
}

@media (min-width: 900px) {
  .wcag-badge__word {
    font-size: 85px;
  }
}

/* « Friendly » se pose en bas à droite du mot, chevauchant le bord du bloc —
   positions relevées dans la maquette. */
.wcag-badge__script {
  position: absolute;
  top: 62px;
  left: 130px;
  font-size: 24px;
}

@media (min-width: 900px) {
  .wcag-badge__script {
    top: 123.5px;
    left: 245px;
    font-size: 32px;
  }
}

/* --- Section « The system » : échantillons ------------------------------- */

/* Les blocs de cette section s'enchaînent sans titre intermédiaire : sans
   respiration ajoutée, le texte d'un bloc vient toucher le visuel du suivant.
   Porte l'écart à ~100px, la valeur de la maquette. */
@media (min-width: 900px) {
  .sys-block {
    padding-bottom: var(--space-m);
  }
}
.sys-row {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  justify-content: center;
  padding-block: var(--space-s);
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .sys-row {
    gap: 60px;
  }
}

.sys-row__swatch {
  width: 40px;
  height: 40px;
  border-radius: 15px;
}

/* Échelle d'espacement : trois carrés à leur taille réelle, légendés. */
.sys-space {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  align-items: flex-start;
}

.sys-space span:first-child {
  background-color: var(--case-tint);
  border-radius: 1px;
}

.sys-space span:last-child {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Niveaux typographiques cités dans le texte. */
.sys-type-1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--case-accent);
}

.sys-type-2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--case-accent);
}

.sys-type-3 {
  font-size: var(--fs-small);
  color: var(--case-accent);
}

/* --------------------------------------------------------------------------
   Bandeau final : la série de mockups
   -------------------------------------------------------------------------- */
.case__strip {
  padding-block: var(--space-m);
}

.case__strip img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   7. CERCLES DÉCORATIFS — géométrie commune
   Reproduit l'imbrication Figma : le tracé occupe une boîte carrée de ~71% de
   la boîte englobante, pivotée autour de son centre, et se place lui-même en
   haut à gauche de cette boîte.
   ========================================================================== */
.decor__shape {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70.98%; /* 618.342 / 871.14 — ratio identique en mobile */
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(40deg);
}

.decor__shape img {
  position: absolute;
  top: 11.7%;
  left: 0;
  width: 82.14%;
  height: 88.3%;
}