/* ==========================================================================
   Les Clichés de Renaud & Les Visites de Renaud
   Reproduction fidèle des sites Gamma (Thèmes "Fluo" & "Icebreaker")
   ========================================================================== */

:root {
  /* Couleurs par défaut : Site "Les Clichés de Renaud" — Thème Fluo (Mode Sombre) */
  --page-bg: #010303;
  --card-bg: #212121;
  --card-color-mask: rgba(33, 33, 33, 0.85);
  --blue-card-bg: #3257b8;
  --solid-box-bg: #404040;
  --solid-box-border: #595959;
  --accent-color: #DCFF50;
  --accent-color-hover: #d2ff1d;
  --accent-contrast: #000000;
  --accent-ink: #DCFF50;
  --button-gradient: none;

  /* Texte */
  --heading-color: #FFFFFF;
  --heading-gradient: none;
  --shape-text-color: #FFFFFF;
  --body-color: #E5E0DF;
  --body-color-muted: rgba(229, 224, 223, 0.5);

  /* Badges / Labels */
  --label-bg: #404040;
  --label-text: #DCFF50;

  /* Callout Note / Info */
  --callout-note-bg: #668000;
  --callout-note-icon: #e0ff66;
  --callout-body: #FFFFFF;

  /* Typographie */
  --heading-font: 'Roboto Mono', monospace;
  --body-font: 'Roboto', system-ui, -apple-system, sans-serif;
  --heading-font-weight: 500;
  --body-font-weight: 400;
  --letter-spacing-heading: -0.03em;
  --letter-spacing-body: -0.01em;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;
  --paragraph-line-height: 1.6;

  /* Dimensions & Espacements Gamma */
  --viewport-scale-factor: 1.125;
  --font-size: calc(0.875 * 1rem * var(--viewport-scale-factor)); /* ~15.75px */
  --card-width: 73.7142857143em;
  --card-inner-padding-x: 4em;
  --card-inner-padding-y-default: 4.75em;
  --card-inner-padding-y-contained: 2.75em;
  --max-content-width: calc(var(--card-width) - 2 * var(--card-inner-padding-x));
  --block-margin: 1.125em;
  --heading-block-margin: 1.5em;
  --title-block-margin: 1.5em;
  --box-border-radius: 0.125em;
  --card-border-radius: 0.125em;
  --button-border-radius: 0.125em;
  --line-thickness: 1px;

  /* Animations */
  --animation-y-offset: 20px;
  --animation-duration: 1s;
  --animation-delay: 0.15s;
  --animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Site "Les Clichés de Renaud" — Thème Fluo Mode Clair */
[data-site="cliches"][data-theme="light"],
:root:not([data-site="visites"])[data-theme="light"] {
  --page-bg: #E8E6DF;
  --card-bg: #FAF9F5;
  --card-color-mask: rgba(250, 249, 245, 0.85);
  --blue-card-bg: #3257b8;
  --solid-box-bg: #EFECE6;
  --solid-box-border: #D2CEC4;
  --accent-color: #c8f028;
  --accent-color-hover: #b8e016;
  --accent-contrast: #111111;
  --accent-ink: #465900;
  --button-gradient: none;

  --heading-color: #141414;
  --heading-gradient: none;
  --shape-text-color: #141414;
  --body-color: #2B2A27;
  --body-color-muted: rgba(43, 42, 39, 0.6);

  --label-bg: #e8f5b8;
  --label-text: #1c2400;

  --callout-note-bg: #e8f5b8;
  --callout-note-icon: #465900;
  --callout-body: #1c2400;
}

/* ==========================================================================
   Site "Les Visites de Renaud" — Thème Gamma "Icebreaker" (Mode Clair par défaut)
   ========================================================================== */

[data-site="visites"] {
  --page-bg: #EDF1F8;
  --card-bg: #FBFCFE;
  --card-color-mask: rgba(251, 252, 254, 0.85);
  --blue-card-bg: #3257b8;
  --solid-box-bg: #E9ECF2;
  --solid-box-border: #CFD2D8;
  --accent-color: #3257b8;
  --accent-color-hover: #2546a3;
  --accent-contrast: #FFFFFF;
  --accent-ink: #3257b8;
  --button-gradient: linear-gradient(229deg, #476FD6 10%, #1C3F99 90%);

  --heading-color: #3257b8;
  --heading-gradient: linear-gradient(239deg, #476FD6 10%, #1C3F99 90%);
  --shape-text-color: #15213F;
  --body-color: #15213F;
  --body-color-muted: rgba(21, 33, 63, 0.5);

  --label-bg: linear-gradient(229deg, #d5def6 10%, #d4def7 90%);
  --label-text: #15213F;

  --callout-note-bg: #D7DFF4;
  --callout-note-icon: #213978;
  --callout-body: #000000;

  --heading-font: 'Roboto Slab', Georgia, serif;
  --body-font: 'Roboto', system-ui, -apple-system, sans-serif;
  --heading-font-weight: 400;
  --body-font-weight: 400;
  --letter-spacing-heading: -0.02em;
  --letter-spacing-body: 0em;
}

/* Site "Les Visites de Renaud" — Thème Icebreaker Mode Sombre */
[data-site="visites"][data-theme="dark"] {
  --page-bg: #0B1120;
  --card-bg: #131C31;
  --card-color-mask: rgba(19, 28, 49, 0.86);
  --blue-card-bg: #3257b8;
  --solid-box-bg: #1E2942;
  --solid-box-border: #2E3D5E;
  --accent-color: #476FD6;
  --accent-color-hover: #5b82e8;
  --accent-contrast: #FFFFFF;
  --accent-ink: #7BA2FF;
  --button-gradient: linear-gradient(229deg, #5B82E8 10%, #2B54B8 90%);

  --heading-color: #7BA2FF;
  --heading-gradient: linear-gradient(239deg, #8EB0FF 10%, #476FD6 90%);
  --shape-text-color: #F1F5F9;
  --body-color: #E2E8F0;
  --body-color-muted: rgba(226, 232, 240, 0.6);

  --label-bg: linear-gradient(229deg, #1e3264 10%, #172752 90%);
  --label-text: #BFD4FF;

  --callout-note-bg: #1A2B52;
  --callout-note-icon: #7BA2FF;
  --callout-body: #F1F5F9;
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
}

[hidden] {
  display: none !important;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  background-color: var(--page-bg);
}

body {
  min-height: 100vh;
  background-color: var(--page-bg);
  color: var(--body-color);
  font-family: var(--body-font);
  font-weight: var(--body-font-weight);
  font-size: var(--font-size);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  overflow-x: hidden;
  padding-top: 3.75rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}

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

a {
  color: inherit;
  text-decoration: none;
}

b,
strong {
  font-weight: 700;
}

/* ==========================================================================
   Barre supérieure fixe : Switch de Site (Clichés <-> Visites) & Thème
   ========================================================================== */

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.25rem;
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--solid-box-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.top-bar__spacer {
  flex: 1;
  min-width: 0;
}

/* Switch principal pour basculer entre Les Clichés de Renaud et Les Visites de Renaud */
.site-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--solid-box-bg);
  border: 1px solid var(--solid-box-border);
  border-radius: 9999px;
  position: relative;
}

.site-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 1rem;
  border-radius: 9999px;
  background: transparent;
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.site-switch__btn svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.site-switch__btn:hover:not(.is-active) {
  color: var(--heading-color);
}

.site-switch__btn.is-active {
  background-color: var(--accent-color);
  background-image: var(--button-gradient);
  color: var(--accent-contrast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Bouton toggle central visuel entre les deux options */
.site-switch__toggle-track {
  width: 2.2rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: var(--card-bg);
  border: 1px solid var(--solid-box-border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-switch__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 6px);
  height: calc(1.25rem - 6px);
  border-radius: 9999px;
  background-color: var(--accent-color);
  background-image: var(--button-gradient);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}

[data-site="visites"] .site-switch__toggle-thumb {
  transform: translateX(0.95rem);
}

/* Menu de sélection du thème (Mode Sombre / Mode Clair) */
.theme-menu {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.theme-menu__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.22rem;
  background-color: var(--solid-box-bg);
  border: 1px solid var(--solid-box-border);
  border-radius: 9999px;
}

.theme-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  background: transparent;
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.theme-menu__btn svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.theme-menu__btn:hover:not(.is-active) {
  color: var(--heading-color);
}

.theme-menu__btn.is-active {
  background-color: var(--accent-color);
  background-image: var(--button-gradient);
  color: var(--accent-contrast);
}

/* ==========================================================================
   En-tête Hero (Logo à côté du titre "Les Clichés de Renaud")
   ========================================================================== */

.hero-header {
  display: flex;
  align-items: center;
  gap: 1.25em;
  margin-bottom: var(--heading-block-margin);
}

.hero-header .heading-h1 {
  margin: 0;
}

.hero-logo {
  width: 5.5em;
  height: 5.5em;
  object-fit: contain;
  border-radius: var(--box-border-radius);
  flex-shrink: 0;
}

.hero-header + .paragraph {
  margin-top: var(--block-margin);
}

/* ==========================================================================
   Structure des Cartes / Sections (Default, Contained, Behind, Left, Right)
   ========================================================================== */

.site-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Carte pleine largeur ("cardSize": "default") */
.card-section {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--card-bg);
  color: var(--body-color);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.card-section .card-inner {
  position: relative;
  z-index: 1;
  width: var(--card-width);
  max-width: 100%;
  padding: var(--card-inner-padding-y-default) var(--card-inner-padding-x);
}

.card-section .card-content-flow {
  max-width: var(--max-content-width);
  margin: 0 auto;
  width: 100%;
}

/* Carte avec image d'arrière-plan et voile ("layout": "behind") */
.card-section--behind {
  min-height: 24em;
  overflow: hidden;
}

.card-section__behind-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.card-section__behind-mask {
  position: absolute;
  inset: 0;
  background-color: var(--card-color-mask);
  z-index: 0;
  transition: background-color 0.25s ease;
}

/* Carte contenue avec fond de page autour ("cardSize": "contained") */
.card-section--contained {
  background-color: var(--page-bg);
  padding: 2em;
}

.card-section--contained .card-box {
  width: var(--card-width);
  max-width: 100%;
  background-color: var(--card-bg);
  border-radius: var(--card-border-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: center;
}

.card-section--contained .card-inner {
  width: 100%;
  padding: var(--card-inner-padding-y-contained) var(--card-inner-padding-x);
}

/* ==========================================================================
   Typographie des Blocs (Titres, Labels, Paragraphes, Listes, Prix)
   ========================================================================== */

.text-center {
  text-align: center;
}

.heading-h1 {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  font-size: 2.5em;
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  margin-top: 0;
  margin-bottom: var(--heading-block-margin);
}

/* Dégradé sur les titres principaux du thème Icebreaker (Les Visites de Renaud) */
[data-site="visites"] .heading-h1,
[data-site="visites"] .heading-h4 {
  background-image: var(--heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
  max-width: 100%;
}

[data-site="visites"] .heading-h1.text-center,
[data-site="visites"] .solid-box--center .heading-h4,
[data-site="visites"] .outline-side-box--center .heading-h4 {
  margin-left: auto;
  margin-right: auto;
}

/* Dans les boîtes colorées, solid-box ou outline-box, pas de dégradé transparent */
[data-site="visites"] .solid-box .heading-h4,
[data-site="visites"] .outline-box .heading-h4,
[data-site="visites"] .outline-side-box .heading-h4,
[data-site="visites"] .grid-cell--blue .heading-h4 {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--shape-text-color);
}

[data-site="visites"] .grid-cell--blue .heading-h4 {
  color: #FFFFFF;
}

/* Quand h1 est immédiatement suivi d'un paragraphe ou d'un bloc */
.heading-h1 + .paragraph,
.heading-h1 + .grid-2col,
.heading-h1 + .grid-2col-55-45,
.heading-h1 + .smart-grid-3col,
.heading-h1 + .smart-grid-2col {
  margin-top: var(--block-margin);
}

.heading-h4 {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  font-size: 1.25em;
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  margin-top: var(--heading-block-margin);
  margin-bottom: 0.5em;
}

/* Badges / Labels ("Étapes 1 — 3", "Nos Réalisations") */
.label-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.45em;
}

.label-group--center {
  justify-content: center;
}

.label-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.65em;
  border-radius: var(--box-border-radius);
  background: var(--label-bg);
  color: var(--label-text);
  font-family: var(--body-font);
  font-size: 0.78em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.label-group + .heading-h1 {
  margin-top: 0.25em;
}

.first-block {
  margin-top: 0 !important;
}

.last-block {
  margin-bottom: 0 !important;
}

.price-title {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  font-size: 3.45em;
  line-height: 1.1;
  letter-spacing: var(--letter-spacing-heading);
  margin: 0.45em 0;
}

.paragraph {
  font-family: var(--body-font);
  font-weight: var(--body-font-weight);
  color: var(--body-color);
  line-height: var(--paragraph-line-height);
  letter-spacing: var(--letter-spacing-body);
  margin-top: var(--block-margin);
  margin-bottom: var(--block-margin);
}

/* Listes à puces dans les cartes */
.bullet-list {
  list-style-type: disc;
  padding-left: 1.35em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.bullet-list li {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
  line-height: var(--paragraph-line-height);
}

.inline-email-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.inline-email-link:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}

/* ==========================================================================
   Boutons (ButtonGroup)
   ========================================================================== */

.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--block-margin);
}

.button-group--center {
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 12em);
  min-height: 2.75em;
  padding: 0.5em 1.15em;
  font-family: var(--body-font);
  font-size: 1em;
  font-weight: 600;
  line-height: var(--line-height-body);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn--solid {
  background-color: var(--accent-color);
  background-image: var(--button-gradient);
  color: var(--accent-contrast);
}

.btn--solid:hover {
  background-color: var(--accent-color-hover);
  filter: brightness(1.05);
}

.btn--outline {
  background-color: var(--card-bg);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}

.btn--outline:hover {
  background-color: rgba(71, 111, 214, 0.08);
}

/* ==========================================================================
   Liens Réseaux Sociaux, Portfolio & Galerie (Début & Fin de page)
   ========================================================================== */

.external-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65em;
  margin-top: 1.25em;
}

.external-links--footer {
  margin-top: 0;
  justify-content: center;
}

.external-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 0.95em;
  background-color: var(--solid-box-bg);
  color: var(--body-color);
  border: 1px solid var(--solid-box-border);
  border-radius: var(--button-border-radius);
  font-family: var(--body-font);
  font-size: 0.92em;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.external-link-pill svg {
  width: 1.15em;
  height: 1.15em;
  color: var(--accent-ink);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.external-link-pill:hover {
  background-color: var(--accent-color);
  background-image: var(--button-gradient);
  color: var(--accent-contrast);
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

.external-link-pill:hover svg {
  color: var(--accent-contrast);
}

.site-footer {
  border-top: 1px solid var(--solid-box-border);
}

.site-footer .card-inner {
  padding-top: 2.5em;
  padding-bottom: 3em;
}

/* ==========================================================================
   Layouts Split (Image à droite 62.5%/37.5% & Image à gauche 37.5%/62.5%)
   ========================================================================== */

.card-split-right {
  width: var(--card-width);
  max-width: 100%;
  display: grid;
  grid-template-columns: 62.5% 37.5%;
  grid-template-rows: minmax(24em, auto);
  align-items: stretch;
}

.card-split-left {
  width: var(--card-width);
  max-width: 100%;
  display: grid;
  grid-template-columns: 37.5% 62.5%;
  grid-template-rows: minmax(24em, auto);
  align-items: stretch;
}

.card-split-right__body,
.card-split-left__body {
  padding: var(--card-inner-padding-y-default) var(--card-inner-padding-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-split-right__accent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em;
  overflow: hidden;
}

.card-split-left__accent {
  position: relative;
  margin: 1em 0;
  border-radius: var(--box-border-radius);
  overflow: hidden;
  min-height: 22em;
}

.card-split-left__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--box-border-radius);
}

.card-split-right__blur-bg {
  position: absolute;
  inset: 0;
  margin: 1em 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(28px) brightness(0.85);
  transform: scale(1.1);
  border-radius: var(--box-border-radius);
  z-index: 0;
}

.card-split-right__accent-inner {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 1em 0;
  border-radius: var(--box-border-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-split-right__img {
  position: relative;
  z-index: 1;
  max-height: 28em;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--box-border-radius);
}

/* ==========================================================================
   Grilles 2 Colonnes (50%/50% et 55%/45%) & Cellules Bleues (#3257b8)
   ========================================================================== */

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.22em;
  align-items: start;
  margin-top: var(--block-margin);
}

.grid-2col--center {
  align-items: center;
}

.grid-2col-55-45 {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 1.22em;
  align-items: start;
  margin-top: var(--block-margin);
}

.grid-cell--blue {
  background-color: var(--blue-card-bg);
  color: #FFFFFF;
  border-radius: var(--card-border-radius);
  padding: 1.25em 1.25em;
  margin: 0 0.25em;
}

.grid-cell--blue .heading-h4,
.grid-cell--blue .paragraph,
.grid-cell--blue .bullet-list {
  color: #FFFFFF;
}

.grid-cell--blue .heading-h4 {
  margin-top: 1.25em;
  margin-bottom: 0.35em;
}

.grid-cell--blue .paragraph {
  margin-top: 0.35em;
  margin-bottom: 0.75em;
}

.grid-cell--text .heading-h4 {
  margin-top: 1.25em;
  margin-bottom: 0.4em;
}

/* ==========================================================================
   SmartLayouts (3 Colonnes, 2 Colonnes, 2+1 Colonnes)
   ========================================================================== */

.smart-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1em;
  margin-top: var(--block-margin);
}

.smart-grid-3col--wide-gap {
  gap: 2em 1.25em;
}

.smart-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2em 1.25em;
  margin-top: var(--block-margin);
}

.smart-grid-2col--tight {
  gap: 1em;
}

.smart-span-2 {
  grid-column: span 2;
}

/* Variant 1: solidBoxes & solidBoxesWithIconsInside */
.solid-box {
  background-color: var(--solid-box-bg);
  color: var(--shape-text-color);
  border-radius: var(--box-border-radius);
  padding: 1.25em 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.solid-box--center {
  align-items: center;
  text-align: center;
}

.solid-box--left {
  align-items: flex-start;
  text-align: left;
}

.solid-box__icon-circle {
  width: 3em;
  height: 3em;
  border-radius: 9999px;
  background-color: var(--accent-color);
  background-image: var(--button-gradient);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.solid-box__icon-circle svg {
  width: 1.35em;
  height: 1.35em;
}

.solid-box__icon-circle svg g,
.solid-box__icon-circle svg path,
.solid-box__icon-circle svg circle {
  stroke: var(--accent-contrast);
}

.solid-box__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--box-border-radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.solid-box__image:hover {
  filter: brightness(0.95);
}

.solid-box__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.solid-box__body {
  width: 100%;
  flex: 1;
}

.solid-box__body .heading-h4 {
  margin-top: 0;
  margin-bottom: 0.4em;
}

.solid-box__body .paragraph {
  color: var(--shape-text-color);
  margin-top: 0.4em;
  margin-bottom: 0;
}

/* Variant 2: iconsText */
.icon-text-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1.25em;
}

.icon-text-cell__icon {
  width: 2.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-text-cell__icon svg {
  width: 100%;
  height: 100%;
}

.icon-text-cell__icon svg g,
.icon-text-cell__icon svg path,
.icon-text-cell__icon svg circle {
  stroke: var(--accent-ink);
}

.icon-text-cell__body .heading-h4 {
  margin-top: 0;
  margin-bottom: 0.6em;
}

.icon-text-cell__body .paragraph {
  margin-top: 0;
  margin-bottom: 0;
}

/* Variant 3: outlineBoxesWithSideLine */
.outline-side-box {
  position: relative;
  background-color: var(--card-bg);
  border: 1px solid var(--solid-box-border);
  border-radius: var(--box-border-radius);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 1.15em 1.15em 1.15em calc(4px + 1.15em);
  display: flex;
  flex-direction: column;
}

.outline-side-box::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 4px;
  background-color: var(--accent-color);
  background-image: var(--button-gradient);
  border-top-left-radius: var(--box-border-radius);
  border-bottom-left-radius: var(--box-border-radius);
}

.outline-side-box--left {
  text-align: left;
  align-items: flex-start;
}

.outline-side-box--center {
  text-align: center;
  align-items: center;
}

.outline-side-box .heading-h4 {
  color: var(--body-color);
  margin-top: 0;
  margin-bottom: 0.65em;
}

.outline-side-box .paragraph {
  margin-top: 0;
  margin-bottom: 0;
}

/* Variant 4: outlineBoxes (Card 9 de Les Visites de Renaud) */
.outline-box {
  background-color: var(--card-bg);
  border: 1px solid var(--solid-box-border);
  border-radius: var(--box-border-radius);
  padding: 1.15em;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.outline-box .heading-h4 {
  color: var(--body-color);
  margin-top: 0;
  margin-bottom: 0.55em;
}

.outline-box .paragraph {
  margin-top: 0;
  margin-bottom: 0;
}

/* Variant 5: bigBullets numérotés (Card 3 de Les Visites de Renaud) */
.big-bullet-cell {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1em;
}

.big-bullet-cell__number {
  width: 2.25em;
  height: 2.25em;
  border-radius: var(--box-border-radius);
  background-color: var(--solid-box-bg);
  color: var(--shape-text-color);
  font-family: var(--heading-font);
  font-size: 1.35em;
  font-weight: var(--heading-font-weight);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

.big-bullet-cell__body {
  flex: 1;
  min-width: 0;
  margin-top: 0.2em;
}

.big-bullet-cell__body .heading-h4 {
  margin-top: 0;
  margin-bottom: 0.5em;
}

.big-bullet-cell__body .paragraph {
  margin-top: 0;
  margin-bottom: 0;
}

/* Variant 6: imagesText (Card 10 Réalisations Zoo Art Show) */
.image-text-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25em;
}

.image-text-cell__media {
  width: 72%;
  aspect-ratio: 1 / 1;
  border-radius: var(--box-border-radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.image-text-cell__media:hover {
  filter: brightness(0.95);
}

.image-text-cell__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-text-cell__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.image-text-cell__body .heading-h4 {
  margin-top: 0;
  margin-bottom: 0.5em;
}

.image-text-cell__body .paragraph {
  margin-top: 0;
  margin-bottom: 1em;
}

.image-text-cell__body .button-group {
  margin-top: auto;
}

/* Infographie / Image pleine largeur (Card 8 de Les Visites de Renaud) */
.graphic-wrapper {
  width: 100%;
  margin-top: var(--block-margin);
  margin-bottom: var(--block-margin);
  border-radius: var(--box-border-radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: filter 0.2s ease;
}

.graphic-wrapper:hover {
  filter: brightness(0.97);
}

.graphic-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--box-border-radius);
}

/* ==========================================================================
   Galerie Photos ("La Magie du Noir et Blanc") & Image Studio
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(12em, 1fr));
  gap: 0.8em;
  margin-top: var(--block-margin);
}

.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--box-border-radius);
  cursor: zoom-in;
  transition: filter 0.2s ease;
}

.gallery-item:hover {
  filter: brightness(0.9);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.studio-illustration-wrapper {
  position: relative;
  width: 100%;
  border-radius: var(--box-border-radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: filter 0.2s ease;
}

.studio-illustration-wrapper:hover {
  filter: brightness(0.95);
}

.studio-illustration-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   Callout Note / Info
   ========================================================================== */

.callout-note {
  background-color: var(--callout-note-bg);
  color: var(--callout-body);
  border-radius: var(--box-border-radius);
  padding: 0.9em 1em;
  margin-top: var(--block-margin);
  display: flex;
  align-items: flex-start;
  gap: 1em;
}

.callout-note__icon {
  color: var(--callout-note-icon);
  flex-shrink: 0;
  margin-top: 0.2em;
  display: inline-flex;
}

.callout-note__icon svg {
  width: 1.25em;
  height: 1em;
  fill: currentColor;
}

.callout-note__body {
  flex: 1;
}

.callout-note__body .paragraph {
  color: var(--callout-body);
  margin: 0;
}

/* ==========================================================================
   Animations d'apparition au scroll (Fidèle à Gamma)
   ========================================================================== */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(var(--animation-y-offset));
  transition:
    opacity var(--animation-duration) var(--animation-easing),
    transform var(--animation-duration) var(--animation-easing);
  transition-delay: calc(var(--animation-delay) + var(--stagger-index, 0) * 0.1s);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Lightbox Modal (Zoom sur les images comme sur Gamma)
   ========================================================================== */

.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: rgba(1, 3, 3, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  cursor: zoom-out;
}

.lightbox-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-modal__img {
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--box-border-radius);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  transform: scale(0.96);
  transition: transform 0.25s var(--animation-easing);
  cursor: default;
}

.lightbox-modal.is-open .lightbox-modal__img {
  transform: scale(1);
}

.lightbox-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background-color: var(--card-bg);
  color: var(--heading-color);
  border: 1px solid var(--solid-box-border);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lightbox-modal__close:hover {
  background-color: var(--accent-color);
  color: var(--accent-contrast);
  border-color: var(--accent-color);
}

/* ==========================================================================
   Responsive Design (Tablettes & Mobiles)
   ========================================================================== */

@media screen and (max-width: 960px) {
  .top-bar__spacer {
    display: none;
  }

  .card-split-right,
  .card-split-left {
    grid-template-columns: 1fr;
  }

  .card-split-right__accent {
    order: -1;
    padding: 2em var(--card-inner-padding-x) 0;
  }

  .card-split-left__accent {
    margin: 2em var(--card-inner-padding-x) 0;
  }

  .smart-grid-3col,
  .smart-grid-2col,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .smart-span-2 {
    grid-column: span 1;
  }

  .grid-2col,
  .grid-2col-55-45 {
    grid-template-columns: 1fr;
  }

  .grid-cell--blue {
    margin: 0;
  }

  .image-text-cell__media {
    width: 100%;
  }
}

@media screen and (max-width: 680px) {
  :root {
    --card-inner-padding-x: 1.5em;
    --card-inner-padding-y-default: 3em;
    --card-inner-padding-y-contained: 2em;
  }

  body {
    padding-top: 6.5rem;
  }

  .top-bar {
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
  }

  .site-switch {
    width: 100%;
    justify-content: center;
  }

  .site-switch__btn {
    flex: 1;
    justify-content: center;
    padding: 0.38rem 0.5rem;
    font-size: 0.78rem;
  }

  .theme-menu {
    width: 100%;
    justify-content: center;
  }

  .card-section--contained {
    padding: 1em;
  }

  .heading-h1 {
    font-size: 2em;
  }

  .hero-header {
    gap: 0.85em;
  }

  .hero-logo {
    width: 4em;
    height: 4em;
  }

  .heading-h4 {
    font-size: 1.1em;
  }

  .price-title {
    font-size: 2.25em;
  }

  .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }
}