@charset "UTF-8";

:root {
  --color-fond-nuit: #0E0F13;
  --color-fond-atelier: #16181F;
  --color-fond-verre: rgba(22, 24, 31, 0.72);
  --color-texte-principal: #F2EFE9;
  --color-texte-secondaire: #A8A49C;
  --color-laiton: #C9A96E;
  --color-laiton-clair: #E0C48A;
  --color-vert-fusion: #5E8C7A;
  --color-bordure-fine: #2A2D36;
  --color-ombre-portee: rgba(0, 0, 0, 0.45);

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --text-display-size: clamp(36px, 4.5vw, 56px);
  --text-display-leading: 1.05;
  --text-display-weight: 600;
  --text-display-tracking: -0.02em;

  --text-h1-size: clamp(28px, 3.2vw, 40px);
  --text-h1-leading: 1.1;
  --text-h1-weight: 600;
  --text-h1-tracking: -0.01em;

  --text-h2-size: 28px;
  --text-h2-leading: 1.2;
  --text-h2-weight: 600;
  --text-h2-tracking: 0;

  --text-h3-size: 20px;
  --text-h3-leading: 1.3;
  --text-h3-weight: 600;
  --text-h3-tracking: 0;

  --text-body-size: 17px;
  --text-body-leading: 1.65;
  --text-body-weight: 400;
  --text-body-tracking: 0;

  --text-small-size: 14px;
  --text-small-leading: 1.5;
  --text-small-weight: 400;
  --text-small-tracking: 0.01em;

  --text-caption-size: 12px;
  --text-caption-leading: 1.4;
  --text-caption-weight: 500;
  --text-caption-tracking: 0.06em;

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  --container-editorial: 1120px;
  --container-grille: 1280px;
  --gutter-mobile: 20px;
  --gutter-tablet: 40px;
  --gutter-desktop: 64px;
  --grid-gutter: 24px;

  --radius-0: 0;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;

  --shadow-interactive: 0 4px 16px var(--color-ombre-portee);

  --transition-fast: 150ms ease-out;
  --transition-image: 300ms ease-out;

  --focus-outline: 2px solid var(--color-laiton);
  --focus-offset: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  font-weight: var(--text-body-weight);
  letter-spacing: var(--text-body-tracking);
  color: var(--color-texte-principal);
  background-color: var(--color-fond-nuit);
  min-height: 100vh;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--color-laiton);
  text-decoration: underline;
  text-decoration-color: var(--color-laiton);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition-fast);
}

a:hover {
  color: var(--color-laiton-clair);
  text-decoration-color: var(--color-laiton-clair);
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--text-h1-weight);
  color: var(--color-texte-principal);
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
  margin-block-end: var(--space-24);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  margin-block-end: var(--space-16);
}

h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
  margin-block-end: var(--space-12);
}

h4,
h5,
h6 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
  margin-block-end: var(--space-12);
}

p {
  margin-block-end: var(--space-16);
}

ul,
ol {
  margin-block-end: var(--space-16);
  padding-inline-start: var(--space-24);
}

blockquote {
  margin-block-end: var(--space-16);
  padding-inline-start: var(--space-16);
  border-inline-start: 2px solid var(--color-laiton);
  color: var(--color-texte-secondaire);
}

figure {
  margin-block-end: var(--space-24);
}

figcaption {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-texte-secondaire);
  margin-block-start: var(--space-8);
}

hr {
  border: none;
  height: 2px;
  width: 48px;
  background-color: var(--color-laiton);
  margin-block: var(--space-32);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: var(--space-24);
}

th,
td {
  text-align: start;
  padding: var(--space-8) var(--space-12);
  border-block-end: 1px solid var(--color-bordure-fine);
}

th {
  font-weight: 600;
  color: var(--color-texte-principal);
}

td {
  color: var(--color-texte-secondaire);
}

.container {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.container-large {
  max-width: var(--container-grille);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.section {
  padding-block: var(--space-48);
}

.section-alt {
  background-color: var(--color-fond-atelier);
}

.surtitre {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-laiton);
  margin-block-end: var(--space-8);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-8);
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  font-weight: 600;
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-primary {
  background-color: var(--color-laiton);
  color: var(--color-fond-nuit);
}

.btn-primary:hover {
  background-color: var(--color-laiton-clair);
  box-shadow: var(--shadow-interactive);
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--color-laiton);
  color: var(--color-laiton);
}

.btn-secondary:hover {
  border-color: var(--color-laiton-clair);
  color: var(--color-laiton-clair);
}

.card {
  background-color: var(--color-fond-atelier);
  border: 1px solid var(--color-bordure-fine);
  border-radius: var(--radius-8);
  padding: var(--space-24);
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  border-color: var(--color-laiton);
  box-shadow: var(--shadow-interactive);
  transform: translateY(-2px);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-vert-fusion);
  border-radius: var(--radius-4);
  color: var(--color-vert-fusion);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
}

.bloc-telechargement {
  background-color: var(--color-fond-atelier);
  border-radius: var(--radius-16);
  padding: var(--space-32);
}

.bloc-telechargement .mention {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading);
  color: var(--color-texte-secondaire);
  margin-block-start: var(--space-12);
}

.guide-chapitre {
  background-color: var(--color-fond-atelier);
  border-inline-start: 2px solid var(--color-laiton);
  padding: var(--space-24);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
}

.capture-9-16 {
  aspect-ratio: 9 / 16;
  background-color: #000;
  border: 1px solid var(--color-laiton);
  overflow: hidden;
}

.capture-4-3 {
  aspect-ratio: 4 / 3;
  background-color: #000;
  border: 1px solid var(--color-bordure-fine);
  overflow: hidden;
}

.capture-4-3 img {
  filter: saturate(0.85);
}

.image-fondu {
  opacity: 0;
  background-color: var(--color-fond-atelier);
  transition: opacity var(--transition-image);
}

.image-fondu.chargee {
  opacity: 1;
}

.liste-combinaisons {
  list-style: none;
  padding-inline-start: 0;
  counter-reset: combinaison;
}

.liste-combinaisons li {
  counter-increment: combinaison;
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-block-end: var(--space-12);
}

.liste-combinaisons li::before {
  content: counter(combinaison);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-laiton);
  line-height: 1.3;
  min-width: 24px;
}

.liste-contenu {
  list-style: disc;
  padding-inline-start: var(--space-24);
}

.liste-contenu li {
  margin-block-end: var(--space-8);
}

.liste-contenu li:last-child {
  margin-block-end: 0;
}

.flex {
  display: flex;
  gap: var(--space-16);
}

.flex > * {
  min-width: 0;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-between {
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  align-items: flex-start;
}

.flex-end {
  align-items: flex-end;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 0 0 auto;
}

.flex-grow {
  flex: 1 1 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-16);
  z-index: 9999;
  padding: var(--space-8) var(--space-16);
  background-color: var(--color-laiton);
  color: var(--color-fond-nuit);
  border-radius: var(--radius-4);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-16);
}

:is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table):last-child {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .container,
  .container-large {
    padding-inline: var(--gutter-tablet);
  }

  .section {
    padding-block: var(--space-64);
  }

  .card {
    padding: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .container,
  .container-large {
    padding-inline: var(--gutter-desktop);
  }

  .section {
    padding-block: var(--space-96);
  }

  .bloc-telechargement {
    padding: var(--space-32);
  }
}

/* ===== Header component ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-fond-verre);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-bordure-fine);
}

.site-header__inner {
  max-width: var(--container-grille);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 64px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
  color: var(--color-texte-principal);
  flex-shrink: 0;
}

.site-header__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.site-header__brand-text {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-texte-principal);
  white-space: nowrap;
}

.site-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-4);
  cursor: pointer;
  flex-shrink: 0;
}

.site-header__toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-texte-principal);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(2) {
  opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header__toggle:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.site-header__nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-fond-atelier);
  border-bottom: 1px solid var(--color-bordure-fine);
  padding: var(--space-16) var(--gutter-mobile);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  z-index: 999;
}

.site-header__nav.is-open {
  display: block;
}

.site-header__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-header__item {
  margin: 0;
  padding: 0;
}

.site-header__link {
  display: block;
  padding: var(--space-8) var(--space-12);
  color: var(--color-texte-principal);
  text-decoration: none;
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  font-weight: 500;
  border-radius: var(--radius-4);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-header__link:hover {
  background-color: var(--color-fond-nuit);
  color: var(--color-laiton-clair);
}

.site-header__link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

@media (min-width: 768px) {
  .site-header__inner {
    padding-inline: var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    padding-inline: var(--gutter-desktop);
    min-height: 72px;
  }

  .site-header__toggle {
    display: none;
  }

  .site-header__nav {
    display: block;
    position: static;
    background: none;
    border: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  .site-header__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
  }

  .site-header__link {
    padding: var(--space-8) 0;
    font-size: var(--text-small-size);
    line-height: var(--text-small-leading);
    font-weight: 500;
    color: var(--color-texte-secondaire);
    border-radius: 0;
    transition: color var(--transition-fast);
  }

  .site-header__link:hover {
    background: none;
    color: var(--color-laiton-clair);
  }
}

/* ===== Footer component ===== */
.site-footer {
  background-color: var(--color-fond-nuit);
  border-top: 1px solid var(--color-laiton);
  padding-block: var(--space-48) var(--space-24);
  margin-top: var(--space-64);
}

.site-footer__inner {
  max-width: var(--container-grille);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.site-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
  color: var(--color-texte-principal);
}

.site-footer__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.site-footer__brand-text {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-texte-principal);
}

.site-footer__tagline {
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  color: var(--color-texte-secondaire);
  margin: 0;
  max-width: 40ch;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.site-footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-laiton);
  margin: 0;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-footer__link {
  color: var(--color-texte-secondaire);
  text-decoration: none;
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-laiton-clair);
  text-decoration: underline;
  text-decoration-color: var(--color-laiton-clair);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site-footer__link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.site-footer__bottom {
  border-top: 1px solid var(--color-bordure-fine);
  padding-top: var(--space-16);
  margin-top: var(--space-16);
}

.site-footer__copyright {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading);
  color: var(--color-texte-secondaire);
  margin: 0;
  text-align: center;
}

/* ===== Consent banner ===== */
.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background-color: var(--color-fond-atelier);
  border-top: 1px solid var(--color-laiton);
  padding: var(--space-16) var(--gutter-mobile);
  box-shadow: 0 -4px 16px var(--color-ombre-portee);
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner__inner {
  max-width: var(--container-editorial);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: flex-start;
}

.consent-banner__text {
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  color: var(--color-texte-principal);
  margin: 0;
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.consent-banner__button {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-4);
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  font-weight: 600;
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.consent-banner__button--accept {
  background-color: var(--color-laiton);
  color: var(--color-fond-nuit);
  border: 1px solid var(--color-laiton);
}

.consent-banner__button--accept:hover {
  background-color: var(--color-laiton-clair);
  border-color: var(--color-laiton-clair);
}

.consent-banner__button--reject {
  background-color: transparent;
  color: var(--color-laiton);
  border: 1px solid var(--color-laiton);
}

.consent-banner__button--reject:hover {
  border-color: var(--color-laiton-clair);
  color: var(--color-laiton-clair);
}

.consent-banner__button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-48);
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }

  .consent-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .consent-banner__text {
    flex: 1 1 auto;
  }

  .consent-banner__actions {
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    padding-inline: var(--gutter-desktop);
  }
}

/* ===== Page Contact — styles spécifiques ===== */

/* En-tête de contact */
.contact-hero {
  padding-block-start: var(--space-128);
  padding-block-end: var(--space-64);
}

.contact-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 720px;
  margin-inline-start: 0;
}

.contact-hero__intro {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-texte-principal);
}

/* Coordonnées principales */
.contact-coordonnees {
  background-color: var(--color-fond-atelier);
}

.contact-coordonnees__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-block-start: var(--space-32);
}

.contact-coordonnees__carte {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-24);
  background-color: var(--color-fond-atelier);
  border: 1px solid var(--color-bordure-fine);
  border-radius: var(--radius-8);
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.contact-coordonnees__carte:hover {
  border-color: var(--color-laiton);
  box-shadow: var(--shadow-interactive);
  transform: translateY(-2px);
}

.contact-coordonnees__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-bordure-fine);
  border-radius: var(--radius-4);
  background-color: var(--color-fond-nuit);
}

.contact-coordonnees__carte h3 {
  margin-block-end: 0;
}

.contact-coordonnees__carte p {
  margin-block-end: 0;
  color: var(--color-texte-secondaire);
}

.contact-coordonnees__carte a {
  color: var(--color-texte-principal);
  font-weight: 600;
}

/* Pourquoi nous contacter */
.contact-raisons {
  background-color: var(--color-fond-nuit);
}

.contact-raisons__liste {
  max-width: 720px;
  margin-inline-start: 0;
  margin-block-start: var(--space-32);
}

.contact-raisons__liste li {
  margin-block-end: var(--space-24);
}

.contact-raisons__liste li:last-child {
  margin-block-end: 0;
}

.contact-raisons__liste h3 {
  margin-block-end: var(--space-8);
}

.contact-raisons__liste p {
  color: var(--color-texte-secondaire);
}

/* Conseils pour une demande efficace */
.contact-conseils {
  background-color: var(--color-fond-atelier);
}

.contact-conseils__carte {
  max-width: 720px;
  margin-inline-start: 0;
  padding: var(--space-24);
  background-color: var(--color-fond-atelier);
  border-inline-start: 2px solid var(--color-laiton);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
}

.contact-conseils__liste {
  margin-block-start: var(--space-16);
  padding-inline-start: var(--space-24);
}

.contact-conseils__liste li {
  margin-block-end: var(--space-12);
  color: var(--color-texte-secondaire);
}

.contact-conseils__liste li:last-child {
  margin-block-end: 0;
}

.contact-conseils__liste strong {
  color: var(--color-texte-principal);
  font-weight: 600;
}

/* Délais de réponse */
.contact-delais {
  background-color: var(--color-fond-nuit);
}

.contact-delais__table-wrapper {
  max-width: 720px;
  margin-inline-start: 0;
  margin-block-start: var(--space-32);
  overflow-x: auto;
}

.contact-delais__table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: 0;
}

.contact-delais__table th,
.contact-delais__table td {
  text-align: start;
  padding: var(--space-12) var(--space-16);
  border-block-end: 1px solid var(--color-bordure-fine);
}

.contact-delais__table th {
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  font-weight: 600;
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-texte-secondaire);
}

.contact-delais__table td {
  color: var(--color-texte-principal);
}

/* Confidentialité */
.contact-confidentialite {
  background-color: var(--color-fond-atelier);
  border-block-start: 2px solid var(--color-laiton);
}

.contact-confidentialite__bloc {
  max-width: 720px;
  margin-inline-start: 0;
}

.contact-confidentialite__bloc p {
  color: var(--color-texte-secondaire);
}

/* Responsive — tablette */
@media (max-width: 1023px) {
  .contact-coordonnees__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-coordonnees__carte:last-child {
    grid-column: span 2;
  }
}

/* Responsive — mobile */
@media (max-width: 767px) {
  .contact-hero {
    padding-block-start: var(--space-96);
    padding-block-end: var(--space-48);
  }

  .contact-hero__inner {
    gap: var(--space-12);
  }

  .contact-coordonnees__grille {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .contact-coordonnees__carte:last-child {
    grid-column: auto;
  }

  .contact-coordonnees__carte {
    padding: var(--space-16);
  }

  .contact-conseils__carte {
    padding: var(--space-16);
  }

  .contact-delais__table-wrapper {
    margin-inline-start: 0;
  }

  .contact-delais__table thead {
    display: none;
  }

  .contact-delais__table,
  .contact-delais__table tbody,
  .contact-delais__table tr,
  .contact-delais__table td {
    display: block;
    width: 100%;
  }

  .contact-delais__table tr {
    margin-block-end: var(--space-16);
    border: 1px solid var(--color-bordure-fine);
    border-radius: var(--radius-8);
    padding: var(--space-12);
    background-color: var(--color-fond-atelier);
  }

  .contact-delais__table td {
    border-block-end: none;
    padding: var(--space-4) 0;
  }

  .contact-delais__table td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-caption-size);
    font-weight: 600;
    letter-spacing: var(--text-caption-tracking);
    text-transform: uppercase;
    color: var(--color-laiton);
    margin-block-end: var(--space-4);
  }

  .contact-confidentialite__bloc {
    margin-inline-start: 0;
  }
}

@media (min-width: 1024px) {
  .contact-hero__inner,
  .contact-raisons__liste,
  .contact-conseils__carte,
  .contact-delais__table-wrapper,
  .contact-confidentialite__bloc {
    margin-inline-start: calc(var(--gutter-desktop) * -1);
    padding-inline-start: var(--gutter-desktop);
  }
}

/* Conditions Générales — styles propres à la page */

.cg-page {
  background-color: var(--color-fond-nuit);
}

.cg-article {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.cg-hero {
  padding-block-start: var(--space-48);
  padding-block-end: var(--space-32);
}

.cg-hero__inner {
  max-width: 65ch;
  margin-inline-start: 0;
}

.cg-hero__surtitre {
  margin-inline-start: 16px;
}

.cg-hero__titre {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
  margin-block-end: var(--space-24);
}

.cg-hero__chapeau {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-texte-secondaire);
  margin-block-end: var(--space-16);
}

.cg-hero__date {
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  color: var(--color-texte-principal);
  margin-block-end: 0;
}

.cg-hero__date strong {
  color: var(--color-laiton);
  font-weight: 600;
}

.cg-section {
  padding-block: var(--space-48);
  border-block-start: 2px solid var(--color-laiton);
  margin-block-start: var(--space-32);
}

.cg-section:first-of-type {
  margin-block-start: 0;
}

.cg-section__inner {
  max-width: 65ch;
  margin-inline-start: 0;
}

.cg-section__titre {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  margin-block-end: var(--space-24);
}

.cg-section__contenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.cg-sous-titre {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
  margin-block-end: 0;
}

.cg-section__contenu p {
  margin-block-end: 0;
}

.cg-section--carte .cg-section__inner {
  max-width: none;
}

.cg-carte {
  max-width: 65ch;
  background-color: var(--color-fond-atelier);
  border-inline-start: 2px solid var(--color-laiton);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  padding: var(--space-16);
}

.cg-code {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  color: var(--color-laiton);
  background-color: var(--color-fond-nuit);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-4);
}

.cg-liste-contact {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.cg-liste-contact li {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-texte-secondaire);
}

.cg-liste-contact strong {
  color: var(--color-texte-principal);
  font-weight: 600;
}

.cg-liste-contact a {
  color: var(--color-laiton);
  text-decoration: underline;
  text-decoration-color: var(--color-laiton);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition-fast), color var(--transition-fast);
}

.cg-liste-contact a:hover {
  color: var(--color-laiton-clair);
  text-decoration-color: var(--color-laiton-clair);
  text-decoration-thickness: 2px;
}

@media (min-width: 768px) {
  .cg-article {
    padding-inline: var(--gutter-tablet);
  }

  .cg-hero {
    padding-block-start: var(--space-64);
    padding-block-end: var(--space-48);
  }

  .cg-section {
    padding-block: var(--space-64);
  }

  .cg-carte {
    padding: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .cg-article {
    padding-inline: var(--gutter-desktop);
  }

  .cg-hero {
    padding-block-start: var(--space-96);
    padding-block-end: var(--space-64);
  }

  .cg-section {
    padding-block: var(--space-96);
  }

  .cg-hero__inner,
  .cg-section__inner {
    margin-inline-start: calc((100% - 65ch) / 2);
  }

  .cg-section--carte .cg-section__inner {
    margin-inline-start: 0;
  }

  .cg-carte {
    max-width: 65ch;
    margin-inline-start: calc((100% - 65ch) / 2);
  }
}

@media (max-width: 389px) {
  .cg-article {
    padding-inline: var(--gutter-mobile);
  }

  .cg-hero__titre {
    font-size: 28px;
  }

  .cg-section__titre {
    font-size: 24px;
  }
}

/* Styles spécifiques à la page Politique de Confidentialité */

.politique-section {
  padding-block: var(--space-48);
}

.politique-section-alt {
  background-color: var(--color-fond-atelier);
}

.politique-conteneur {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.politique-bloc-texte {
  max-width: 100%;
}

.politique-retrait-2 {
  /* Retrait de 2 colonnes sur desktop */
}

.politique-lead {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-texte-principal);
  margin-block-end: var(--space-24);
}

.politique-encart-date {
  background-color: var(--color-fond-atelier);
  border: 1px solid var(--color-laiton);
  border-radius: var(--radius-8);
  padding: var(--space-24);
  margin-block-start: var(--space-32);
}

.politique-encart-date h2 {
  margin-block-end: var(--space-8);
}

.politique-encart-date p {
  margin-block-end: var(--space-8);
}

.politique-encart-date .politique-mention {
  font-size: var(--text-small-size);
  color: var(--color-texte-secondaire);
  margin-block-start: var(--space-8);
}

.politique-liste {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: var(--space-24);
}

.politique-liste li {
  position: relative;
  padding-inline-start: var(--space-24);
  margin-block-end: var(--space-8);
  color: var(--color-texte-secondaire);
}

.politique-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-laiton);
}

.politique-liste li:last-child {
  margin-block-end: 0;
}

.politique-section h2 {
  margin-block-end: var(--space-16);
}

.politique-section h3 {
  margin-block-start: var(--space-24);
  margin-block-end: var(--space-8);
}

.politique-section p {
  margin-block-end: var(--space-16);
}

.politique-section a {
  color: var(--color-laiton);
  text-decoration: underline;
  text-decoration-color: var(--color-laiton);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition-fast);
}

.politique-section a:hover {
  color: var(--color-laiton-clair);
  text-decoration-color: var(--color-laiton-clair);
  text-decoration-thickness: 2px;
}

/* Séparateurs laiton entre sections */
.politique-section + .politique-section {
  border-block-start: 2px solid var(--color-laiton);
  padding-block-start: var(--space-48);
}

/* Responsive */
@media (min-width: 768px) {
  .politique-conteneur {
    padding-inline: var(--gutter-tablet);
  }

  .politique-section {
    padding-block: var(--space-64);
  }

  .politique-section + .politique-section {
    padding-block-start: var(--space-64);
  }
}

@media (min-width: 1024px) {
  .politique-conteneur {
    padding-inline: var(--gutter-desktop);
  }

  .politique-section {
    padding-block: var(--space-96);
  }

  .politique-section + .politique-section {
    padding-block-start: var(--space-96);
  }

  .politique-retrait-2 {
    margin-inline-start: calc((100% / 12) * 2);
    width: calc((100% / 12) * 8);
  }

  .politique-bloc-texte:not(.politique-retrait-2) {
    width: calc((100% / 12) * 8);
  }
}

@media (max-width: 767px) {
  .politique-retrait-2 {
    margin-inline-start: 16px;
    width: calc(100% - 16px);
  }

  .politique-bloc-texte:not(.politique-retrait-2) {
    width: 100%;
  }
}

/* Styles spécifiques à la page Politique de Cookies */

.page-politique-cookies {
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
    padding-block: var(--space-48);
}

.section-cookies {
    width: 100%;
    padding-block: var(--space-48);
}

.section-intro {
    background-color: var(--color-fond-nuit);
}

.section-definition,
.section-types,
.section-tiers,
.section-modifications {
    background-color: var(--color-fond-atelier);
}

.section-consentement,
.section-droits,
.section-liens {
    background-color: var(--color-fond-nuit);
}

.conteneur-texte-cookies {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--gutter-mobile);
}

.conteneur-texte-cookies h1 {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-leading);
    letter-spacing: var(--text-h1-tracking);
    margin-block-end: var(--space-24);
}

.conteneur-texte-cookies h2 {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-leading);
    letter-spacing: var(--text-h2-tracking);
    margin-block-end: var(--space-16);
}

.conteneur-texte-cookies h3 {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-leading);
    letter-spacing: var(--text-h3-tracking);
    margin-block-end: var(--space-12);
}

.conteneur-texte-cookies p {margin-block-end: var(--space-16);
}

.separateur-cookies {
    border: none;
    height: 2px;
    width: 48px;
    background-color: var(--color-laiton);
    margin-block: var(--space-32);
}

.legende-cookies {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-leading);
    font-weight: var(--text-caption-weight);
    letter-spacing: var(--text-caption-tracking);
    text-transform: uppercase;
    color: var(--color-texte-secondaire);
    margin-block-end: var(--space-8);
}

.liste-cookies {
    list-style: disc;
    padding-inline-start: var(--space-24);
    margin-block-end: var(--space-16);
}

.liste-cookies li {
    margin-block-end: var(--space-8);
}

.liste-cookies li:last-child {
    margin-block-end: 0;
}

.liste-categories-cookies {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
    margin-block-start: var(--space-24);
}

.categorie-cookie {
    background-color: var(--color-fond-atelier);
    border: 1px solid var(--color-bordure-fine);
    border-radius: var(--radius-8);
    padding: var(--space-24);
}

.categorie-cookie h3 {
    margin-block-end: var(--space-12);
}

.categorie-cookie p {margin-block-end: 0;
}

.bordure-gauche-laiton {
    border-left: 2px solid var(--color-laiton);
    padding-left: var(--space-24);
}

.coordonnees-cookies {
    list-style: none;
    padding-inline-start: 0;
}

.coordonnees-cookies li {
    margin-block-end: var(--space-8);
}

.coordonnees-cookies a {
    color: var(--color-laiton);
    text-decoration: underline;
    text-decoration-color: var(--color-laiton);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness var(--transition-fast);
}

.coordonnees-cookies a:hover {
    color: var(--color-laiton-clair);
    text-decoration-color: var(--color-laiton-clair);
    text-decoration-thickness: 2px;
}

@media (min-width: 768px) {
    .page-politique-cookies {
        padding-block: var(--space-64);
        gap: var(--space-64);
    }

    .section-cookies {
        padding-block: var(--space-64);
    }

    .conteneur-texte-cookies {
        padding-inline: var(--gutter-tablet);
    }

    .liste-categories-cookies {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-24);
    }

    .categorie-cookie {
        padding: var(--space-24);
    }
}

@media (min-width: 1024px) {
    .page-politique-cookies {
        padding-block: var(--space-96);
        gap: var(--space-96);
    }

    .section-cookies {
        padding-block: var(--space-96);
    }

    .conteneur-texte-cookies {
        padding-inline: var(--gutter-desktop);
    }

    .conteneur-texte-cookies h1 {
        font-size: var(--text-h1-size);
    }

    .conteneur-texte-cookies h2 {
        font-size: var(--text-h2-size);
    }
}

@media (max-width: 767px) {
    .page-politique-cookies {
        padding-block: var(--space-48);
        gap: var(--space-48);
    }

    .section-cookies {
        padding-block: var(--space-48);
    }

    .conteneur-texte-cookies {
        padding-inline: var(--gutter-mobile);
    }

    .conteneur-texte-cookies h1 {
        font-size: 28px;
    }

    .conteneur-texte-cookies h2 {
        font-size: 24px;
    }

    .liste-categories-cookies {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }

    .categorie-cookie {
        padding: var(--space-16);
    }

    .bordure-gauche-laiton {
        padding-left: var(--space-16);
    }
}

/* ===== Page : Principe du Merge ===== */
/* Scoped to .page-main and page-owned components only. */

.page-main {
  overflow-x: hidden;
}

/* --- Shared page grid helpers --- */
.page-main .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
}

.page-main .container > * {
  min-width: 0;
}

/* --- 1. Introduction au Merge --- */
.intro-merge {
  background-color: var(--color-fond-nuit);
}

.intro-merge__grille {
  align-items: start;
}

.intro-merge__texte {
  grid-column: 1 / 9;
  text-align: left;
}

.intro-merge__texte .surtitre {
  margin-block-end: var(--space-8);
}

.intro-merge__texte h1 {
  margin-block-end: var(--space-24);
}

.intro-merge__texte p {margin-block-end: var(--space-32);
}

.intro-merge__separateur {
  margin-block: 0;
}

/* --- 2. Pourquoi le Merge est Essentiel --- */
.benefices-merge {
  background-color: var(--color-fond-atelier);
}

.benefices-merge__grille {
  align-items: start;
}

.benefices-merge__contenu {
  grid-column: 3 / 10;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.benefices-merge__contenu h2 {
  margin-block-end: 0;
}

.benefices-merge__contenu p {
  margin-block-end: 0;
}

.benefices-merge__contenu .liste-combinaisons {
  margin-block-end: 0;
}

/* --- 3. Comment Combiner les Objets --- */
.combiner-objets {
  background-color: var(--color-fond-nuit);
}

.combiner-objets__grille {
  align-items: start;
}

.combiner-objets__texte {
  grid-column: 1 / 8;
  text-align: left;
}

.combiner-objets__texte h2 {
  margin-block-end: var(--space-16);
}

.combiner-objets__texte p {
  margin-block-end: var(--space-16);
}

.combiner-objets__texte .liste-combinaisons {
  margin-block-end: 0;
}

.combiner-objets__figure {
  grid-column: 8 / 12;
  margin-block-end: 0;
}

.combiner-objets__figure .capture-4-3 {
  width: 100%;
  max-width: 100%;
}

.combiner-objets__figure figcaption {
  margin-block-start: var(--space-8);
}

/* --- 4. Gestion du Plateau --- */
.gestion-plateau {
  background-color: var(--color-fond-atelier);
}

.gestion-plateau__grille {
  align-items: start;
}

.gestion-plateau__contenu {
  grid-column: 1 / 9;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.gestion-plateau__contenu h2 {
  margin-block-end: 0;
}

.gestion-plateau__contenu p {
  margin-block-end: 0;
}

.gestion-plateau__contenu .liste-contenu {
  margin-block-end: 0;
}

.gestion-plateau__liste {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.gestion-plateau__liste li {
  position: relative;
  padding-inline-start: var(--space-24);
}

.gestion-plateau__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-laiton);
}

/* --- 5. Fabrication des Outils --- */
.fabrication-outils {
  background-color: var(--color-fond-nuit);
}

.fabrication-outils__grille {
  align-items: start;
}

.fabrication-outils__texte {
  grid-column: 1 / 8;
  text-align: left;
}

.fabrication-outils__texte h2 {
  margin-block-end: var(--space-16);
}

.fabrication-outils__texte p {
  margin-block-end: var(--space-16);
}

.fabrication-outils__texte .liste-contenu {
  margin-block-end: 0;
}

.fabrication-outils__figure {
  grid-column: 8 / 12;
  margin-block-end: 0;
}

.fabrication-outils__figure .capture-4-3 {
  width: 100%;
  max-width: 100%;
}

.fabrication-outils__figure figcaption {
  margin-block-start: var(--space-8);
}

/* --- 6. Erreurs Courantes à Éviter --- */
.erreurs-courantes {
  background-color: var(--color-fond-atelier);
}

.erreurs-courantes__grille {
  align-items: start;
}

.erreurs-courantes__contenu {
  grid-column: 3 / 10;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.erreurs-courantes__contenu h2 {
  margin-block-end: 0;
}

.erreurs-courantes__contenu p {
  margin-block-end: 0;
}

.erreurs-courantes__contenu .liste-contenu {
  margin-block-end: 0;
}

.erreurs-courantes__liste {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.erreurs-courantes__liste li {
  border-inline-start: 2px solid var(--color-laiton);
  padding-inline-start: var(--space-16);
}

/* --- 7. Exemple de Chaîne de Fusion --- */
.chaine-fusion {
  background-color: var(--color-fond-nuit);
}

.chaine-fusion__grille {
  align-items: start;
}

.chaine-fusion__texte {
  grid-column: 1 / 8;
  text-align: left;
}

.chaine-fusion__texte h2 {
  margin-block-end: var(--space-16);
}

.chaine-fusion__texte p {
  margin-block-end: var(--space-16);
}

.chaine-fusion__niveaux {
  margin-block-end: 0;
}

.chaine-fusion__figure {
  grid-column: 8 / 12;
  margin-block-end: 0;
}

.chaine-fusion__figure .capture-4-3 {
  width: 100%;
  max-width: 100%;
}

.chaine-fusion__figure figcaption {
  margin-block-start: var(--space-8);
}

/* --- 8. Conseils Avancés --- */
.conseils-avances {
  background-color: var(--color-fond-atelier);
}

.conseils-avances__grille {
  align-items: start;
}

.conseils-avances__contenu {
  grid-column: 3 / 10;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.conseils-avances__contenu h2 {
  margin-block-end: 0;
}

.conseils-avances__contenu p {
  margin-block-end: 0;
}

.conseils-avances__contenu .liste-contenu {
  margin-block-end: 0;
}

.conseils-avances__liste {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.conseils-avances__liste li {
  border-inline-start: 2px solid var(--color-laiton);
  padding-inline-start: var(--space-16);
}

/* --- 9. Télécharger Happy Merge Decoration --- */
.telechargement {
  background-color: var(--color-fond-nuit);
}

.telechargement__grille {
  align-items: start;
}

.telechargement__contenu {
  grid-column: 3 / 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.telechargement__contenu h2 {
  margin-block-end: 0;
}

.telechargement__contenu p {
  margin-block-end: 0;}

.telechargement__contenu .btn {
  margin-block-start: var(--space-8);
}

.telechargement__contenu .mention {
  max-width: 540px;
}

/* --- Image fade-in --- */
.page-main .image-fondu {
  opacity: 0;
  background-color: var(--color-fond-atelier);
  transition: opacity var(--transition-image);
}

.page-main .image-fondu.chargee {
  opacity: 1;
}

/* --- Tablet breakpoint --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-main .container {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .intro-merge__texte {
    grid-column: 1 / 8;
  }

  .benefices-merge__contenu,
  .erreurs-courantes__contenu,
  .conseils-avances__contenu,
  .telechargement__contenu {
    grid-column: 2 / 8;
  }

  .combiner-objets__texte,
  .fabrication-outils__texte,
  .chaine-fusion__texte {
    grid-column: 1 / 5;
  }

  .combiner-objets__figure,
  .fabrication-outils__figure,
  .chaine-fusion__figure {
    grid-column: 5 / 9;
  }

  .gestion-plateau__contenu {
    grid-column: 1 / 8;
  }
}

/* --- Mobile breakpoint --- */
@media (max-width: 767px) {
  .page-main .container {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .page-main .container > * {
    grid-column: 1 / -1;
  }

  .intro-merge__texte p {}

  .benefices-merge__contenu,
  .gestion-plateau__contenu,
  .erreurs-courantes__contenu,
  .conseils-avances__contenu {
    padding: var(--space-16);
  }

  .combiner-objets__figure,
  .fabrication-outils__figure,
  .chaine-fusion__figure {
    margin-block-start: var(--space-8);
  }

  .telechargement__contenu {
    padding: var(--space-24);
  }
}

/* ===== Page Guides et Combo ===== */
.page-guides {
  overflow-x: hidden;
}

/* Introduction */
.intro-guides {
  padding-block-start: var(--space-96);
}

.intro-guides__conteneur {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: flex-start;
}

.intro-guides__conteneur .surtitre {
  margin-inline-start: 0;
}

.intro-guides__conteneur h1 {
  max-width: 66.666%;
  margin-block-end: 0;
}

.intro-guides__paragraphe {
  max-width: 66.666%;
  margin-block-end: 0;
}

.intro-guides__liste {
  max-width: 66.666%;
  margin-block-end: 0;
}

/* Comprendre l'énergie */
.energie-base .guide-chapitre {
  max-width: 66.666%;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.energie-base .guide-chapitre h2,
.energie-base .guide-chapitre h3,
.energie-base .guide-chapitre p,
.energie-base .guide-chapitre ul {
  margin-block-end: 0;
}

/* Stratégies avancées */
.strategies-energie__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-block-start: var(--space-32);
}

.strategies-energie__carte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.strategies-energie__carte h3,
.strategies-energie__carte p,
.strategies-energie__carte ul {
  margin-block-end: 0;
}

.strategies-energie__icone {
  color: var(--color-laiton);
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.strategies-energie__icone svg {
  width: 100%;
  height: 100%;
}

/* Chaînes rares */
.chaines-rares__conteneur {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: flex-start;
}

.chaines-rares__conteneur h2,
.chaines-rares__conteneur h3,
.chaines-rares__conteneur p,
.chaines-rares__conteneur ul,
.chaines-rares__conteneur ol {
  max-width: 66.666%;
  margin-block-end: 0;
}

.chaines-rares__etapes {
  list-style: none;
  padding-inline-start: 0;
  counter-reset: etape;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.chaines-rares__etapes li {
  counter-increment: etape;
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.chaines-rares__etapes li::before {
  content: counter(etape);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-laiton);
  line-height: 1.3;
  min-width: 24px;
}

/* Exemples de combos */
.exemples-combos__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  margin-block-start: var(--space-32);
}

.exemples-combos__carte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.exemples-combos__carte h3,
.exemples-combos__carte p,
.exemples-combos__carte ul {
  margin-block-end: 0;
}

/* Erreurs courantes */
.erreurs-courantes__conteneur {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: flex-start;
}

.erreurs-courantes__conteneur h2,
.erreurs-courantes__conteneur h3,
.erreurs-courantes__conteneur p,
.erreurs-courantes__conteneur ul {
  max-width: 66.666%;
  margin-block-end: 0;
}

.erreurs-courantes__liste {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.erreurs-courantes__liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.erreurs-courantes__liste li::before {
  content: "!";
  color: var(--color-vert-fusion);
  font-weight: 600;
  line-height: 1.5;
  min-width: 16px;
  text-align: center;
}

/* Ressources supplémentaires */
.ressources-supplementaires__conteneur {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: flex-start;
}

.ressources-supplementaires__conteneur h2,
.ressources-supplementaires__conteneur h3,
.ressources-supplementaires__conteneur p,
.ressources-supplementaires__conteneur ul {
  max-width: 66.666%;
  margin-block-end: 0;
}

.ressources-supplementaires__liens {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Bloc de téléchargement */
.bloc-telechargement-section__bloc {
  max-width: 66.666%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}

.bloc-telechargement-section__bloc h2,
.bloc-telechargement-section__bloc p {
  margin-block-end: 0;
}

.bloc-telechargement-section__bloc .btn {
  margin-block-start: var(--space-8);
}

.bloc-telechargement-section__bloc .mention {
  margin-block-start: 0;
}

/* ===== Responsive ===== */
@media (min-width: 768px) {
  .intro-guides__conteneur,
  .chaines-rares__conteneur,
  .erreurs-courantes__conteneur,
  .ressources-supplementaires__conteneur {
    padding-inline: var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .intro-guides__conteneur,
  .chaines-rares__conteneur,
  .erreurs-courantes__conteneur,
  .ressources-supplementaires__conteneur {
    padding-inline: var(--gutter-desktop);
  }

  .intro-guides__conteneur .surtitre {
    margin-inline-start: 16.666%;
  }

  .intro-guides__conteneur h1,
  .intro-guides__paragraphe,
  .intro-guides__liste {
    margin-inline-start: 16.666%;
  }

  .energie-base .guide-chapitre {
    margin-inline-start: 16.666%;
  }

  .chaines-rares__conteneur h2,
  .chaines-rares__conteneur h3,
  .chaines-rares__conteneur p,
  .chaines-rares__conteneur ul,
  .chaines-rares__conteneur ol {
    margin-inline-start: 16.666%;
  }

  .erreurs-courantes__conteneur h2,
  .erreurs-courantes__conteneur h3,
  .erreurs-courantes__conteneur p,
  .erreurs-courantes__conteneur ul {
    margin-inline-start: 16.666%;
  }

  .ressources-supplementaires__conteneur h2,
  .ressources-supplementaires__conteneur h3,
  .ressources-supplementaires__conteneur p,
  .ressources-supplementaires__conteneur ul {
    margin-inline-start: 16.666%;
  }
}

@media (max-width: 767px) {
  .intro-guides {
    padding-block-start: var(--space-48);
  }

  .intro-guides__conteneur h1,
  .intro-guides__paragraphe,
  .intro-guides__liste,
  .energie-base .guide-chapitre,
  .chaines-rares__conteneur h2,
  .chaines-rares__conteneur h3,
  .chaines-rares__conteneur p,
  .chaines-rares__conteneur ul,
  .chaines-rares__conteneur ol,
  .erreurs-courantes__conteneur h2,
  .erreurs-courantes__conteneur h3,
  .erreurs-courantes__conteneur p,
  .erreurs-courantes__conteneur ul,
  .ressources-supplementaires__conteneur h2,
  .ressources-supplementaires__conteneur h3,
  .ressources-supplementaires__conteneur p,
  .ressources-supplementaires__conteneur ul,
  .bloc-telechargement-section__bloc {
    max-width: 100%;
    margin-inline-start: 0;
  }

  .strategies-energie__grille,
  .exemples-combos__grille {
    grid-template-columns: 1fr;
  }

  .bloc-telechargement-section__bloc {
    padding: var(--space-24);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .strategies-energie__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strategies-energie__carte:last-child {
    grid-column: 1 / -1;
  }
}

/* Page-owned styles for progression-niveaux */

.progression-intro__texte,
.progression-systeme__texte,
.progression-defis__texte,
.progression-optimiser__texte,
.progression-energie__texte,
.progression-monnaie__texte,
.progression-social__texte,
.progression-maj__texte {
  max-width: 1120px;
  width: 100%;
}

.progression-systeme__unite,
.progression-defis__unite,
.progression-optimiser__unite {
  margin-block-end: var(--space-24);
}

.progression-systeme__unite:last-child,
.progression-defis__unite:last-child,
.progression-optimiser__unite:last-child {
  margin-block-end: 0;
}

.progression-systeme__liste,
.progression-defis__liste,
.progression-optimiser__erreurs {
  list-style: none;
  padding-inline-start: 0;
}

.progression-systeme__liste li,
.progression-defis__liste li,
.progression-optimiser__erreurs li {
  position: relative;
  padding-inline-start: var(--space-24);
  margin-block-end: var(--space-8);
}

.progression-systeme__liste li::before,
.progression-defis__liste li::before,
.progression-optimiser__erreurs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background-color: var(--color-laiton);
  border-radius: 50%;
}

.progression-systeme__liste li:last-child,
.progression-defis__liste li:last-child,
.progression-optimiser__erreurs li:last-child {
  margin-block-end: 0;
}

.progression-renovation__grille,
.progression-objets-rares__grille {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--space-32);
  align-items: start;
}

.progression-renovation__texte,
.progression-objets-rares__texte {
  min-width: 0;
}

.progression-renovation__figure,
.progression-objets-rares__figure {
  min-width: 0;
  margin-block-end: 0;
}

.progression-renovation__image,
.progression-objets-rares__image {
  width: 100%;
  max-width: 100%;
}

.progression-renovation__image img,
.progression-objets-rares__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progression-renovation__etapes,
.progression-optimiser__conseils {
  list-style: none;
  padding-inline-start: 0;
  counter-reset: progression-etape;
}

.progression-renovation__etapes li,
.progression-optimiser__conseils li {
  counter-increment: progression-etape;
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-block-end: var(--space-12);
}

.progression-renovation__etapes li::before,
.progression-optimiser__conseils li::before {
  content: counter(progression-etape);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-laiton);
  line-height: 1.3;
  min-width: 24px;
}

.progression-renovation__etapes li:last-child,
.progression-optimiser__conseils li:last-child {
  margin-block-end: 0;
}

.progression-conclusion__bloc {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
}

.progression-conclusion__bloc h2,
.progression-conclusion__bloc p {
  margin-block-end: 0;
}

.progression-conclusion__bouton {
  margin-block-start: var(--space-8);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .progression-renovation__grille,
  .progression-objets-rares__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-24);
  }
}

@media (max-width: 767px) {
  .progression-renovation__grille,
  .progression-objets-rares__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-24);
  }

  .progression-renovation__figure,
  .progression-objets-rares__figure {
    order: 2;
  }

  .progression-renovation__texte,
  .progression-objets-rares__texte {
    order: 1;
  }

  .progression-conclusion__bloc {
    padding: var(--space-24);
  }
}

/* ===== Page : Astuces pour Gérer l'Énergie ===== */

/* Introduction */
.astuces-energie-intro__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.astuces-energie-intro__contenu {
  min-width: 0;
}

.astuces-energie-intro__paragraphe {
  max-width: 65ch;
  margin-inline-start: 0;
}

.astuces-energie-intro__liste {
  max-width: 65ch;
  margin-inline-start: 0;
  list-style: disc;
  padding-inline-start: var(--space-24);
}

@media (min-width: 1024px) {
  .astuces-energie-intro__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .astuces-energie-intro__contenu {
    grid-column: 3 / span 8;
  }
}

/* Système d'énergie */
.astuces-energie-systeme__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.astuces-energie-systeme__texte {
  min-width: 0;
}

.astuces-energie-systeme__texte p {}

.astuces-energie-systeme__encadre {
  background-color: var(--color-fond-atelier);
  border: 1px solid var(--color-bordure-fine);
  border-inline-start: 2px solid var(--color-laiton);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  padding: var(--space-24);
  min-width: 0;
}

@media (min-width: 1024px) {
  .astuces-energie-systeme__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .astuces-energie-systeme__texte {
    grid-column: 1 / span 8;
  }

  .astuces-energie-systeme__encadre {
    grid-column: 9 / span 4;
  }
}

/* Sources d'énergie */
.astuces-energie-sources__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.astuces-energie-sources__contenu {
  min-width: 0;
}

.astuces-energie-sources__contenu > p {}

.astuces-energie-sources__liste {
  max-width: 70ch;
}

.astuces-energie-sources__liste li div {
  min-width: 0;
}

.astuces-energie-sources__liste li p {
  margin-block-end: 0;
}

@media (min-width: 1024px) {
  .astuces-energie-sources__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .astuces-energie-sources__contenu {
    grid-column: 3 / span 8;
  }
}

/* Planification */
.astuces-energie-planification__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.astuces-energie-planification__carte {
  min-width: 0;
}

@media (min-width: 768px) {
  .astuces-energie-planification__grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .astuces-energie-planification__grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pièges courants */
.astuces-energie-pieges__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.astuces-energie-pieges__contenu {
  min-width: 0;
}

.astuces-energie-pieges__contenu > p {}

.astuces-energie-pieges__liste {
  list-style: none;
  padding-inline-start: 0;
  max-width: 70ch;
}

.astuces-energie-pieges__liste li {
  position: relative;
  padding-inline-start: var(--space-24);
  margin-block-end: var(--space-12);
}

.astuces-energie-pieges__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background-color: var(--color-laiton);
  transform: rotate(45deg);
}

@media (min-width: 1024px) {
  .astuces-energie-pieges__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .astuces-energie-pieges__contenu {
    grid-column: 3 / span 8;
  }
}

/* Astuces avancées */
.astuces-energie-avancees__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.astuces-energie-avancees__texte {
  min-width: 0;
}

.astuces-energie-avancees__texte p {}

.astuces-energie-avancees__encadre {
  background-color: var(--color-fond-atelier);
  border: 1px solid var(--color-laiton);
  border-radius: var(--radius-8);
  padding: var(--space-24);
  min-width: 0;
}

@media (min-width: 1024px) {
  .astuces-energie-avancees__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .astuces-energie-avancees__texte {
    grid-column: 1 / span 8;
  }

  .astuces-energie-avancees__encadre {
    grid-column: 9 / span 4;
  }
}

/* Témoignage */
.astuces-energie-temoignage__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.astuces-energie-temoignage__encadre {
  background-color: var(--color-fond-atelier);
  border: 1px solid var(--color-bordure-fine);
  border-inline-start: 2px solid var(--color-laiton);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  padding: var(--space-24);
  min-width: 0;
  text-align: center;
}

.astuces-energie-temoignage__citation {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-texte-principal);
  max-width: 60ch;
  margin-inline: auto;
  margin-block-end: var(--space-16);
  border-inline-start: none;
  padding-inline-start: 0;
}

.astuces-energie-temoignage__detail {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--color-texte-secondaire);
}

@media (min-width: 1024px) {
  .astuces-energie-temoignage__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .astuces-energie-temoignage__encadre {
    grid-column: 4 / span 6;
  }
}

/* Téléchargement */
.astuces-energie-telechargement__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.astuces-energie-telechargement__bloc {
  min-width: 0;
  text-align: center;
}

.astuces-energie-telechargement__bloc p {margin-inline: auto;
}

.astuces-energie-telechargement__bloc .btn {
  margin-block-start: var(--space-24);
}

@media (min-width: 1024px) {
  .astuces-energie-telechargement__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .astuces-energie-telechargement__bloc {
    grid-column: 3 / span 8;
  }
}

/* Conclusion */
.astuces-energie-conclusion__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.astuces-energie-conclusion__contenu {
  min-width: 0;
}

.astuces-energie-conclusion__separateur {
  margin-block-start: 0;
}

.astuces-energie-conclusion__contenu p {}

@media (min-width: 1024px) {
  .astuces-energie-conclusion__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .astuces-energie-conclusion__contenu {
    grid-column: 3 / span 8;
  }
}

/* Responsive global */
@media (max-width: 767px) {
  .astuces-energie-intro__paragraphe,
  .astuces-energie-intro__liste,
  .astuces-energie-systeme__texte p,
  .astuces-energie-sources__contenu > p,
  .astuces-energie-sources__liste,
  .astuces-energie-pieges__contenu > p,
  .astuces-energie-pieges__liste,
  .astuces-energie-avancees__texte p,
  .astuces-energie-telechargement__bloc p,
  .astuces-energie-conclusion__contenu p {}

  .astuces-energie-temoignage__citation,
  .astuces-energie-temoignage__detail {
    max-width: 100%;
  }
}

/* Page-specific styles for projets-de-renovation */

/* Introduction */
.intro-renovation__contenu {
  max-width: 800px;
  margin-inline: auto;
  text-align: left;
}

.intro-renovation__liste {
  margin-block-start: var(--space-16);
}

/* Types de projets */
.types-projets__contenu {
  max-width: var(--container-editorial);
  margin-inline: auto;
}

.types-projets__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-block-start: var(--space-32);
}

.types-projets__carte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
}

.types-projets__figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #000;
  border: 1px solid var(--color-bordure-fine);
}

.types-projets__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}

.types-projets__carte h3 {
  margin-block-end: 0;
}

.types-projets__carte p {
  margin-block-end: 0;
}

/* Mécaniques de rénovation */
.mecaniques-renovation__contenu {
  max-width: 800px;
  margin-inline: 0;
  text-align: left;
}

.mecaniques-renovation__guide {
  margin-block-start: var(--space-24);
}

.mecaniques-renovation__etapes {
  margin-block-end: var(--space-24);
}

/* Styles de décoration */
.styles-decoration__contenu {
  max-width: var(--container-editorial);
  margin-inline: auto;
}

.styles-decoration__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-block-start: var(--space-32);
}

.styles-decoration__carte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
}

.styles-decoration__carte h3 {
  margin-block-end: 0;
}

.styles-decoration__carte p {
  margin-block-end: 0;
}

/* Progression et récompenses */
.progression-recompenses__contenu {
  max-width: 800px;
  margin-inline: auto;
  text-align: left;
}

.progression-recompenses__separateur {
  margin-block: 0 var(--space-32);
}

/* Conseils pour réussir */
.conseils-renovation__contenu {
  max-width: var(--container-editorial);
  margin-inline: auto;
}

.conseils-renovation__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-block-start: var(--space-32);
}

.conseils-renovation__carte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
}

.conseils-renovation__carte h3 {
  margin-block-end: 0;
}

.conseils-renovation__carte p {
  margin-block-end: 0;
}

.conseils-renovation__carte ul {
  margin-block-end: 0;
}

/* Exemples de projets réussis */
.exemples-projets__contenu {
  max-width: var(--container-editorial);
  margin-inline: auto;
}

.exemples-projets__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  margin-block-start: var(--space-32);
}

.exemples-projets__bloc {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.exemples-projets__figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #000;
  border: 1px solid var(--color-bordure-fine);
}

.exemples-projets__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
}

.exemples-projets__bloc h3 {
  margin-block-end: 0;
}

.exemples-projets__bloc p {
  margin-block-end: 0;
}

/* Événements et rénovations spéciales */
.evenements-speciaux__contenu {
  max-width: 800px;
  margin-inline: 0;
  text-align: left;
}

.evenements-speciaux__guide {
  margin-block-start: var(--space-24);
}

/* Communauté et partage */
.communaute-partage__contenu {
  max-width: 800px;
  margin-inline: auto;
  text-align: left;
}

/* Téléchargement */
.telechargement__contenu {
  max-width: var(--container-editorial);
  margin-inline: auto;
}

.telechargement__bloc {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-32);
}

.telechargement__bloc h2 {
  margin-block-end: 0;
}

.telechargement__bloc p {
  margin-block-end: 0;
}

.telechargement__liste {
  text-align: left;
  margin-block-end: 0;
}

.telechargement__bouton {
  margin-block-start: var(--space-8);
}

.telechargement__bloc .mention {
  margin-block-start: 0;
}

/* Responsive */
@media (max-width: 1023px) {
  .types-projets__grille,
  .styles-decoration__grille,
  .conseils-renovation__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exemples-projets__grille {
    grid-template-columns: 1fr;
  }

  .mecaniques-renovation__contenu,
  .evenements-speciaux__contenu {
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .types-projets__grille,
  .styles-decoration__grille,
  .conseils-renovation__grille {
    grid-template-columns: 1fr;
  }

  .types-projets__carte,
  .styles-decoration__carte,
  .conseils-renovation__carte {
    padding: var(--space-16);
  }

  .telechargement__bloc {
    padding: var(--space-24);
  }
}

/* ===== Page : Chaînes de Fusion et Objets Rares ===== */

/* Conteneurs généraux */
.container,
.container-large {
  width: 100%;
}

/* Section intro */
.section-intro {
  padding-block: var(--space-64) var(--space-48);
  background-color: var(--color-fond-nuit);
}

.intro-texte {
  width: 100%;
  max-width: 800px;
  margin-inline: auto 0;
  padding-inline-start: 0;
}

.intro-texte .surtitre {
  margin-block-end: var(--space-8);
}

.intro-texte h1 {
  margin-block-end: var(--space-24);
}

.intro-lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-texte-secondaire);
  margin-block-end: var(--space-24);
}

/* Section lecture */
.section-lecture {
  padding-block: var(--space-48);
  background-color: var(--color-fond-atelier);
}

.lecture-bloc {
  width: 100%;
  max-width: 800px;
  margin-inline: auto 0;
  padding: var(--space-24);
  border-inline-start: 2px solid var(--color-laiton);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  background-color: var(--color-fond-atelier);
}

.lecture-bloc .surtitre {
  margin-block-end: var(--space-8);
}

.lecture-bloc h2 {
  margin-block-end: var(--space-16);
}

.lecture-bloc h3 {
  margin-block-start: var(--space-24);
  margin-block-end: var(--space-12);
}

.lecture-bloc p {
  margin-block-end: var(--space-16);
}

/* Section objets rares */
.section-rares {
  padding-block: var(--space-48);
  background-color: var(--color-fond-nuit);
}

.rares-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.rares-texte {
  width: 100%;
  max-width: 800px;
  margin-inline: auto 0;
}

.rares-texte .surtitre {
  margin-block-end: var(--space-8);
}

.rares-texte h2 {
  margin-block-end: var(--space-16);
}

.rares-texte p {
  margin-block-end: var(--space-16);
}

.rares-encadre {
  width: 100%;
  max-width: 400px;
  margin-inline: auto 0;
  padding: var(--space-24);
  background-color: var(--color-fond-atelier);
  border: 1px solid var(--color-laiton);
  border-radius: var(--radius-8);
}

.rares-encadre h3 {
  margin-block-end: var(--space-12);
}

.rares-encadre ul {
  margin-block-end: 0;
}

/* Section stratégies */
.section-strategies {
  padding-block: var(--space-48);
  background-color: var(--color-fond-atelier);
}

.strategies-bloc {
  width: 100%;
  max-width: 800px;
  margin-inline: auto 0;
  padding: var(--space-24);
  border-inline-start: 2px solid var(--color-laiton);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  background-color: var(--color-fond-atelier);
}

.strategies-bloc .surtitre {
  margin-block-end: var(--space-8);
}

.strategies-bloc h2 {
  margin-block-end: var(--space-16);
}

.strategies-bloc h3 {
  margin-block-start: var(--space-24);
  margin-block-end: var(--space-12);
}

.strategies-bloc p {
  margin-block-end: var(--space-16);
}

/* Section exemples */
.section-exemples {
  padding-block: var(--space-48);
  background-color: var(--color-fond-nuit);
}

.section-exemples .surtitre {
  margin-block-end: var(--space-8);
}

.section-exemples h2 {
  margin-block-end: var(--space-24);
}

.exemples-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.chaine-carte {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: var(--color-fond-atelier);
  border: 1px solid var(--color-bordure-fine);
  border-radius: var(--radius-8);
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.chaine-carte:hover {
  border-color: var(--color-laiton);
  box-shadow: var(--shadow-interactive);
  transform: translateY(-2px);
}

.chaine-carte h3 {
  margin-block-end: 0;
}

.chaine-carte p {
  margin-block-end: 0;
}

.chaine-carte ol {
  margin-block-end: 0;
}

/* Section embranchements */
.section-embranchements {
  padding-block: var(--space-48);
  background-color: var(--color-fond-atelier);
}

.embranchements-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.embranchements-texte {
  width: 100%;
  max-width: 800px;
  margin-inline: auto 0;
}

.embranchements-texte .surtitre {
  margin-block-end: var(--space-8);
}

.embranchements-texte h2 {
  margin-block-end: var(--space-16);
}

.embranchements-texte p {
  margin-block-end: var(--space-16);
}

.embranchements-encadre {
  width: 100%;
  max-width: 400px;
  margin-inline: auto 0;
  padding: var(--space-24);
  background-color: var(--color-fond-nuit);
  border: 1px solid var(--color-laiton);
  border-radius: var(--radius-8);
}

.embranchements-encadre h3 {
  margin-block-end: var(--space-12);
}

.embranchements-encadre p {
  margin-block-end: var(--space-8);
}

.embranchements-encadre p:last-child {
  margin-block-end: 0;
}

/* Section collections */
.section-collections {
  padding-block: var(--space-48);
  background-color: var(--color-fond-nuit);
}

.collections-bloc {
  width: 100%;
  max-width: 800px;
  margin-inline: auto 0;
}

.collections-bloc .surtitre {
  margin-block-end: var(--space-8);
}

.collections-bloc h2 {
  margin-block-end: var(--space-16);
}

.collections-bloc h3 {
  margin-block-start: var(--space-24);
  margin-block-end: var(--space-12);
}

.collections-bloc p {
  margin-block-end: var(--space-16);
}

/* Section erreurs */
.section-erreurs {
  padding-block: var(--space-48);
  background-color: var(--color-fond-atelier);
}

.erreurs-bloc {
  width: 100%;
  max-width: 800px;
  margin-inline: auto 0;
}

.erreurs-bloc .surtitre {
  margin-block-end: var(--space-8);
}

.erreurs-bloc h2 {
  margin-block-end: var(--space-16);
}

.liste-avertissements {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
}

.liste-avertissements li {
  position: relative;
  padding-inline-start: var(--space-24);
  margin-block-end: var(--space-16);
}

.liste-avertissements li::before {
  content: "⚠";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--color-laiton);
  font-size: 1.1em;
}

.liste-avertissements li:last-child {
  margin-block-end: 0;
}

/* Section témoignages */
.section-temoignages {
  padding-block: var(--space-48);
  background-color: var(--color-fond-nuit);
}

.temoignages-bloc {
  width: 100%;
  max-width: 800px;
  margin-inline: auto 0;
}

.temoignages-bloc .surtitre {
  margin-block-end: var(--space-8);
}

.temoignages-bloc h2 {
  margin-block-end: var(--space-16);
}

.temoignages-bloc blockquote {
  margin-block-end: var(--space-24);
  padding-inline-start: var(--space-16);
  border-inline-start: 2px solid var(--color-laiton);
  color: var(--color-texte-secondaire);
  font-style: italic;
}

.temoignages-bloc blockquote:last-child {
  margin-block-end: 0;
}

.temoignages-bloc blockquote footer {
  margin-block-start: var(--space-8);
  font-style: normal;
  font-weight: 600;
  color: var(--color-texte-principal);
}

/* Section téléchargement */
.section-telechargement {
  padding-block: var(--space-48);
  background-color: var(--color-fond-atelier);
}

.telechargement-bloc {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding: var(--space-32);
  background-color: var(--color-fond-atelier);
  border-radius: var(--radius-16);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.telechargement-bloc .surtitre {
  margin-block-end: 0;
}

.telechargement-bloc h2 {
  margin-block-end: 0;
}

.telechargement-bloc p {
  margin-block-end: 0;}

.telechargement-bloc .btn {
  margin-block-start: var(--space-8);
}

.telechargement-bloc .mention {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-leading);
  color: var(--color-texte-secondaire);
}

/* ===== Breakpoints ===== */

/* Tablette : 768px et plus */
@media (min-width: 768px) {
  .section-intro,
  .section-lecture,
  .section-rares,
  .section-strategies,
  .section-exemples,
  .section-embranchements,
  .section-collections,
  .section-erreurs,
  .section-temoignages,
  .section-telechargement {
    padding-block: var(--space-64);
  }

  .rares-grille,
  .embranchements-grille {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-32);
  }

  .rares-texte,
  .embranchements-texte {
    max-width: none;
    margin-inline: 0;
  }

  .rares-encadre,
  .embranchements-encadre {
    max-width: none;
    margin-inline: 0;
  }

  .exemples-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .chaine-carte:last-child {
    grid-column: span 2;
  }
}

/* Desktop : 1024px et plus */
@media (min-width: 1024px) {
  .section-intro,
  .section-lecture,
  .section-rares,
  .section-strategies,
  .section-exemples,
  .section-embranchements,
  .section-collections,
  .section-erreurs,
  .section-temoignages,
  .section-telechargement {
    padding-block: var(--space-96);
  }

  .intro-texte,
  .lecture-bloc,
  .strategies-bloc,
  .collections-bloc,
  .erreurs-bloc,
  .temoignages-bloc {
    max-width: 800px;
    margin-inline: auto 0;
  }

  .exemples-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .chaine-carte:last-child {
    grid-column: auto;
  }

  .telechargement-bloc {
    padding: var(--space-32);
  }
}

/* Mobile très étroit : 390px et moins */
@media (max-width: 390px) {
  .intro-texte,
  .lecture-bloc,
  .strategies-bloc,
  .collections-bloc,
  .erreurs-bloc,
  .temoignages-bloc,
  .rares-texte,
  .embranchements-texte {
    padding-inline: 0;
  }

  .lecture-bloc,
  .strategies-bloc {
    padding: var(--space-16);
  }

  .rares-encadre,
  .embranchements-encadre {
    padding: var(--space-16);
  }

  .telechargement-bloc {
    padding: var(--space-24);
  }

  .chaine-carte {
    padding: var(--space-16);
  }
}

/* ===== Page d'accueil UniversDesReceptions ===== */

/* --- Héro --- */
.hero-accueil {
  background-color: var(--color-fond-nuit);
  padding-block: var(--space-96) var(--space-64);
  position: relative;
  overflow: hidden;
}

.hero-accueil::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-accueil__contenu {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  position: relative;
  z-index: 1;
}

.hero-accueil h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
  max-width: 700px;
  margin-block-end: 0;
}

.hero-accueil__sous-titre {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-texte-principal);
  max-width: 700px;
  margin-block-end: 0;
}

.hero-accueil__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  max-width: 700px;
}

.hero-accueil__actions .btn {
  flex: 0 0 auto;
}

/* --- Section Mécaniques de fusion et décoration --- */
.fusion-decoration {
  background-color: var(--color-fond-atelier);
  border-inline-start: 2px solid var(--color-laiton);
}

.fusion-decoration__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

.fusion-decoration__texte {
  min-width: 0;
}

.fusion-decoration__texte h2 {
  margin-block-end: var(--space-16);
}

.fusion-decoration__texte p {
  margin-block-end: var(--space-16);
}

.fusion-decoration__liste {
  margin-block-start: var(--space-16);
}

.fusion-decoration__visuel {
  margin-block-end: 0;
}

.fusion-decoration__visuel .capture-9-16 {
  aspect-ratio: 3 / 4;
}

/* --- Section Projets de rénovation --- */
.projets-renovation {
  background-color: var(--color-fond-nuit);
}

.projets-renovation__contenu {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.projets-renovation__contenu h2 {
  margin-block-end: var(--space-16);
}

.projets-renovation__separateur {
  margin-block: var(--space-32);
}

.projets-renovation__contenu p {
  margin-block-end: var(--space-16);
}

/* --- Section Guides et combos --- */
.guides-combos {
  background-color: var(--color-fond-atelier);
}

.guides-combos .container-large {
  max-width: var(--container-grille);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.guides-combos h2 {
  margin-block-end: var(--space-32);
}

.guides-combos__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.guides-combos__carte {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.guides-combos__carte h3 {
  margin-block-end: 0;
}

.guides-combos__carte p {
  margin-block-end: 0;
  color: var(--color-texte-secondaire);
}

.guides-combos__icone {
  color: var(--color-laiton);
  flex: 0 0 auto;
}

.guides-combos__lien {
  margin-block-start: auto;
  align-self: flex-start;
}

/* --- Section Astuces pour gérer l'énergie --- */
.astuces-energie {
  background-color: var(--color-fond-nuit);
}

.astuces-energie__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

.astuces-energie__visuel {
  margin-block-end: 0;
}

.astuces-energie__visuel .capture-9-16 {
  aspect-ratio: 3 / 4;
}

.astuces-energie__texte {
  min-width: 0;
}

.astuces-energie__texte h2 {
  margin-block-end: var(--space-16);
}

.astuces-energie__separateur {
  margin-block: var(--space-32);
}

.astuces-energie__texte p {
  margin-block-end: var(--space-16);
}

.astuces-energie__liste {
  margin-block-start: var(--space-16);
}

/* --- Section Chaînes de fusion et objets rares --- */
.chaines-fusion {
  background-color: var(--color-fond-atelier);
  border-inline-start: 2px solid var(--color-laiton);
}

.chaines-fusion__contenu {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.chaines-fusion__contenu h2 {
  margin-block-end: var(--space-16);
}

.chaines-fusion__contenu p {
  margin-block-end: var(--space-16);
}

/* --- Section Décoration intérieure et styles --- */
.decoration-styles {
  background-color: var(--color-fond-nuit);
}

.decoration-styles__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

.decoration-styles__texte {
  min-width: 0;
}

.decoration-styles__texte h2 {
  margin-block-end: var(--space-16);
}

.decoration-styles__texte p {
  margin-block-end: var(--space-16);
}

.decoration-styles__liste {
  margin-block-start: var(--space-16);
}

.decoration-styles__visuel {
  margin-block-end: 0;
}

/* --- Section Progression et niveaux --- */
.progression-niveaux {
  background-color: var(--color-fond-atelier);
  border-inline-start: 2px solid var(--color-laiton);
}

.progression-niveaux__contenu {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.progression-niveaux__contenu h2 {
  margin-block-end: var(--space-16);
}

.progression-niveaux__contenu p {
  margin-block-end: var(--space-16);
}

/* --- Section Téléchargement final --- */
.telechargement-final {
  background-color: var(--color-fond-nuit);
}

.telechargement-final .container {
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

.telechargement-final__bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
  padding: var(--space-32);
}

.telechargement-final__bloc .surtitre {
  margin-block-end: 0;
}

.telechargement-final__bloc h2 {
  margin-block-end: 0;
}

.telechargement-final__texte {
  max-width: 520px;
  margin-inline: auto;
  margin-block-end: 0;
}

.telechargement-final__bloc .btn {
  flex: 0 0 auto;
}

.telechargement-final__bloc .mention {
  margin-block-start: 0;
}

/* --- Media queries --- */
@media (min-width: 768px) {
  .hero-accueil {
    padding-block: var(--space-128) var(--space-96);
  }

  .hero-accueil__contenu {
    padding-inline: var(--gutter-tablet);
  }

  .fusion-decoration__grille {
    grid-template-columns: 7fr 4fr;
    gap: var(--space-48);
  }

  .fusion-decoration__visuel .capture-9-16 {
    aspect-ratio: 9 / 16;
  }

  .projets-renovation__contenu {
    padding-inline: var(--gutter-tablet);
  }

  .guides-combos .container-large {
    padding-inline: var(--gutter-tablet);
  }

  .guides-combos__grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-24);
  }

  .astuces-energie__grille {
    grid-template-columns: 4fr 7fr;
    gap: var(--space-48);
  }

  .astuces-energie__visuel .capture-9-16 {
    aspect-ratio: 9 / 16;
  }

  .chaines-fusion__contenu {
    padding-inline: var(--gutter-tablet);
  }

  .decoration-styles__grille {
    grid-template-columns: 7fr 4fr;
    gap: var(--space-48);
  }

  .progression-niveaux__contenu {
    padding-inline: var(--gutter-tablet);
  }

  .telechargement-final .container {
    padding-inline: var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .hero-accueil__contenu {
    padding-inline: var(--gutter-desktop);
    padding-inline-start: calc(var(--gutter-desktop) + (100% - var(--container-editorial)) / 2);
    max-width: var(--container-editorial);
  }

  .fusion-decoration__grille {
    grid-template-columns: 7fr 4fr;
    gap: var(--space-64);
  }

  .fusion-decoration__texte {
    grid-column: 1 / 2;
  }

  .fusion-decoration__visuel {
    grid-column: 2 / 3;
  }

  .projets-renovation__contenu {
    padding-inline: var(--gutter-desktop);
    padding-inline-start: calc(var(--gutter-desktop) + (100% - var(--container-editorial)) / 2);
  }

  .guides-combos .container-large {
    padding-inline: var(--gutter-desktop);
  }

  .astuces-energie__grille {
    grid-template-columns: 4fr 7fr;
    gap: var(--space-64);
  }

  .astuces-energie__visuel {
    grid-column: 1 / 2;
  }

  .astuces-energie__texte {
    grid-column: 2 / 3;
  }

  .chaines-fusion__contenu {
    padding-inline: var(--gutter-desktop);
    padding-inline-start: calc(var(--gutter-desktop) + (100% - var(--container-editorial)) / 2);
  }

  .decoration-styles__grille {
    grid-template-columns: 7fr 4fr;
    gap: var(--space-64);
  }

  .decoration-styles__texte {
    grid-column: 1 / 2;
  }

  .decoration-styles__visuel {
    grid-column: 2 / 3;
  }

  .progression-niveaux__contenu {
    padding-inline: var(--gutter-desktop);
    padding-inline-start: calc(var(--gutter-desktop) + (100% - var(--container-editorial)) / 2);
  }

  .telechargement-final .container {
    padding-inline: var(--gutter-desktop);
  }
}

@media (max-width: 767px) {
  .hero-accueil h1 {
    font-size: 28px;
  }

  .hero-accueil__sous-titre {
    font-size: 16px;
  }

  .hero-accueil__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-accueil__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .fusion-decoration__grille,
  .astuces-energie__grille,
  .decoration-styles__grille {
    grid-template-columns: 1fr;
  }

  .guides-combos__grille {
    grid-template-columns: 1fr;
  }
}

/* ===== Page : Décoration Intérieure et Styles ===== */

/* Héro */
.hero-decoration {
  padding-block-start: var(--space-128);
  padding-block-end: var(--space-96);
  background: linear-gradient(180deg, var(--color-fond-nuit) 0%, var(--color-fond-nuit) 100%);
  border-block-end: 2px solid var(--color-laiton);
}

.hero-decoration__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
}

.hero-decoration .surtitre,
.hero-decoration h1,
.hero-decoration__intro {
  grid-column: 3 / span 8;
  min-width: 0;
}

.hero-decoration__intro {
  max-width: 65ch;
  margin-inline-start: 0;
}

/* Importance de la décoration */
.importance-decoration {
  background-color: var(--color-fond-nuit);
}

.importance-decoration__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
  border-inline-start: 2px solid var(--color-laiton);
  padding-inline-start: var(--space-24);
}

.importance-decoration h2 {
  grid-column: 3 / span 8;
  min-width: 0;
}

.importance-decoration__bloc {
  grid-column: 3 / span 8;
  min-width: 0;
}

.importance-decoration__bloc p {}

/* Styles de décoration */
.styles-decoration {
  background-color: var(--color-fond-atelier);
}

.styles-decoration__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
}

.styles-decoration h2 {
  grid-column: 1 / -1;
  min-width: 0;
}

.styles-decoration__grille {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
}

.style-carte {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.style-carte .badge {
  align-self: flex-start;
}

.style-carte__description {
  max-width: 45ch;
}

.style-carte .liste-contenu {
  margin-block-start: auto;
}

/* Fusion d'objets */
.fusion-objets {
  background-color: var(--color-fond-nuit);
  border-block-start: 2px solid var(--color-laiton);
}

.fusion-objets__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
}

.fusion-objets h2 {
  grid-column: 3 / span 8;
  min-width: 0;
}

.fusion-objets__bloc {
  grid-column: 3 / span 8;
  min-width: 0;
}

.fusion-objets__bloc p {}

.fusion-objets .liste-combinaisons {
  margin-block-start: var(--space-16);
}

/* Rénovation des pièces */
.renovation-etapes {
  background-color: var(--color-fond-atelier);
}

.renovation-etapes__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
  border-inline-start: 2px solid var(--color-laiton);
  padding-inline-start: var(--space-24);
}

.renovation-etapes h2 {
  grid-column: 3 / span 8;
  min-width: 0;
}

.renovation-etapes__bloc {
  grid-column: 3 / span 8;
  min-width: 0;
}

.renovation-etapes__bloc p {}

/* Conseils pour un intérieur harmonieux */
.conseils-harmonie {
  background-color: var(--color-fond-nuit);
  border-block-start: 2px solid var(--color-laiton);
}

.conseils-harmonie__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
}

.conseils-harmonie h2 {
  grid-column: 3 / span 8;
  min-width: 0;
}

.conseils-harmonie__bloc {
  grid-column: 3 / span 8;
  min-width: 0;
}

.conseils-harmonie__bloc p {}

/* Exemples de pièces rénovées */
.exemples-pieces {
  background-color: var(--color-fond-atelier);
}

.exemples-pieces__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
}

.exemples-pieces h2 {
  grid-column: 1 / -1;
  min-width: 0;
}

.exemples-pieces__grille {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.exemple-piece {
  min-width: 0;
}

.exemple-piece .capture-4-3 {
  width: 100%;
  max-width: 100%;
}

.exemple-piece figcaption {
  text-align: center;
}

.exemple-piece__description {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

/* Impact des styles sur le gameplay */
.impact-styles {
  background-color: var(--color-fond-nuit);
}

.impact-styles__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
  border-inline-start: 2px solid var(--color-laiton);
  padding-inline-start: var(--space-24);
}

.impact-styles h2 {
  grid-column: 3 / span 8;
  min-width: 0;
}

.impact-styles__bloc {
  grid-column: 3 / span 8;
  min-width: 0;
}

.impact-styles__bloc p {}

/* Astuces avancées */
.astuces-avancees {
  background-color: var(--color-fond-atelier);
}

.astuces-avancees__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
  border-inline-start: 2px solid var(--color-laiton);
  padding-inline-start: var(--space-24);
}

.astuces-avancees h2 {
  grid-column: 3 / span 8;
  min-width: 0;
}

.astuces-avancees__bloc {
  grid-column: 3 / span 8;
  min-width: 0;
}

.astuces-avancees__bloc p {}

/* Appel à l'action final */
.appel-action {
  background-color: var(--color-fond-nuit);
}

.appel-action__conteneur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
}

.appel-action__bloc {
  grid-column: 3 / span 8;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.appel-action__texte {
  max-width: 60ch;
  margin-inline: auto;
}

.appel-action .btn {
  align-self: center;
}

.appel-action .mention {
  text-align: center;
}

/* Responsive */
@media (max-width: 1023px) {
  .hero-decoration__conteneur,
  .importance-decoration__conteneur,
  .styles-decoration__conteneur,
  .fusion-objets__conteneur,
  .renovation-etapes__conteneur,
  .conseils-harmonie__conteneur,
  .exemples-pieces__conteneur,
  .impact-styles__conteneur,
  .astuces-avancees__conteneur,
  .appel-action__conteneur {
    grid-template-columns: 1fr;
  }

  .hero-decoration .surtitre,
  .hero-decoration h1,
  .hero-decoration__intro,
  .importance-decoration h2,
  .importance-decoration__bloc,
  .fusion-objets h2,
  .fusion-objets__bloc,
  .renovation-etapes h2,
  .renovation-etapes__bloc,
  .conseils-harmonie h2,
  .conseils-harmonie__bloc,
  .impact-styles h2,
  .impact-styles__bloc,
  .astuces-avancees h2,
  .astuces-avancees__bloc,
  .appel-action__bloc {
    grid-column: 1 / -1;
  }

  .styles-decoration__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exemples-pieces__grille {
    grid-template-columns: 1fr;
  }

  .appel-action__bloc {
    padding: var(--space-24);
  }
}

@media (max-width: 767px) {
  .hero-decoration {
    padding-block-start: var(--space-64);
    padding-block-end: var(--space-48);
  }

  .hero-decoration h1 {
    font-size: var(--text-h1-size);
  }

  .styles-decoration__grille {
    grid-template-columns: 1fr;
  }

  .exemples-pieces__grille {
    grid-template-columns: 1fr;
  }

  .appel-action__bloc {
    padding: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .hero-decoration__conteneur,
  .importance-decoration__conteneur,
  .styles-decoration__conteneur,
  .fusion-objets__conteneur,
  .renovation-etapes__conteneur,
  .conseils-harmonie__conteneur,
  .exemples-pieces__conteneur,
  .impact-styles__conteneur,
  .astuces-avancees__conteneur,
  .appel-action__conteneur {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@charset "UTF-8";

.thank-you-main {
  padding-block: var(--space-48);
}

.thank-you-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.thank-you-card {
  background-color: var(--color-fond-atelier);
  border: 1px solid var(--color-bordure-fine);
  border-radius: var(--radius-8);
  padding: var(--space-32);
  max-width: 640px;
  width: 100%;
  text-align: center;
}

.thank-you-card .surtitre {
  margin-block-end: var(--space-8);
}

.thank-you-card h1 {
  margin-block-end: var(--space-16);
}

.thank-you-message,
.thank-you-next {
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
}

.thank-you-message {
  margin-block-end: var(--space-16);
}

.thank-you-next {
  margin-block-end: var(--space-32);
}

.thank-you-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .thank-you-main {
    padding-block: var(--space-64);
  }

  .thank-you-card {
    padding: var(--space-48);
  }
}

@media (min-width: 1024px) {
  .thank-you-main {
    padding-block: var(--space-96);
  }
}
html, body {
  overflow-x: clip;
  max-width: 100%;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}