/* ==========================================================================
   Séverine Houcke — site éditorial
   Univers relié à Lyride (bleu profond, ivoire, touches dorées, Cormorant
   Garamond / DM Sans / DM Mono) mais plus clair, plus éditorial.
   Mobile-first. Breakpoints : 768px, 1100px (nav), 1200px.
   ========================================================================== */

:root {
  /* Couleurs */
  --color-primary:        #13223F;  /* bleu profond (proche navy Lyride) */
  --color-primary-deep:   #0C1730;
  --color-primary-soft:   #1D3157;
  --color-accent:         #B38A4E;  /* doré — filets, décor, grands textes */
  --color-accent-text:    #7F5A26;  /* doré foncé — petits textes sur ivoire (AA) */
  --color-accent-light:   #D9B77E;  /* doré clair — sur fond bleu */
  --color-blue:           #517FBB;  /* bleu papillon Lyride — détail discret */
  --color-bg:             #F7F3EC;  /* ivoire */
  --color-bg-alt:         #EEE7DA;  /* ivoire soutenu */
  --color-surface:        #FFFDF8;  /* blanc chaud */
  --color-text:           #16213A;
  --color-text-muted:     #4F5970;
  --color-border:         rgba(19, 34, 63, .14);
  --color-border-strong:  rgba(19, 34, 63, .28);
  --color-on-dark:        #F3ECE0;
  --color-on-dark-muted:  rgba(243, 236, 224, .74);
  --color-on-dark-border: rgba(243, 236, 224, .18);
  --color-error:          #A1321F;
  --color-success:        #2F6B45;

  /* Typographies */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:    "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Espacements */
  --space-2xs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);

  /* Rayons, ombres */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(12, 23, 48, .08);
  --shadow-md: 0 6px 20px rgba(12, 23, 48, .10);
  --shadow-lg: 0 18px 48px rgba(12, 23, 48, .14);

  --transition: 250ms cubic-bezier(.4, 0, .2, 1);
  --max-width: 1200px;
  --max-prose: 42rem;
  --header-h: 76px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  color: var(--color-primary);
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.9rem); font-weight: 300; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 300; }
h3 { font-size: clamp(1.45rem, 2.2vw, 1.75rem); font-weight: 500; }

h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--color-accent-text);
}

p + p { margin-top: 1em; }

strong { font-weight: 500; }

::selection {
  background: var(--color-accent-light);
  color: var(--color-primary-deep);
}

a:not([class]) {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:not([class]):hover {
  color: var(--color-accent-text);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.section--navy :focus-visible,
.site-footer :focus-visible,
.bridge :focus-visible {
  outline-color: var(--color-accent-light);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 200;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary);
  color: var(--color-on-dark);
  border-radius: var(--radius-sm);
  transition: top var(--transition);
}

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

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

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

.container--narrow {
  max-width: calc(var(--max-prose) + var(--gutter) * 2);
}

/* ==========================================================================
   Éléments typographiques récurrents
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--color-accent);
}

.section--navy .eyebrow,
.bridge .eyebrow {
  color: var(--color-accent-light);
}

.lead {
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head .lead {
  margin-top: 1.25rem;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.rule {
  display: block;
  width: 4.5rem;
  height: 1px;
  margin-block: 1.75rem;
  background: var(--color-accent);
}

.mono {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
}

.muted {
  color: var(--color-text-muted);
}

/* ==========================================================================
   Boutons & liens d'action
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .8rem 1.6rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform var(--transition);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.btn--primary:hover {
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn--ghost {
  border-color: var(--color-border-strong);
  color: var(--color-primary);
}

.btn--ghost:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.btn--gold {
  background: var(--color-accent-light);
  color: var(--color-primary-deep);
}

.btn--gold:hover {
  background: var(--color-on-dark);
  transform: translateY(-1px);
}

.btn--light {
  border-color: var(--color-on-dark-border);
  color: var(--color-on-dark);
}

.btn--light:hover {
  border-color: var(--color-on-dark);
  background: rgba(243, 236, 224, .06);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
  transition: color var(--transition), gap var(--transition);
}

.link-arrow:hover {
  color: var(--color-accent-text);
  gap: .75rem;
}

.link-arrow svg {
  width: .95rem;
  height: .95rem;
}

/* ==========================================================================
   En-tête & navigation
   ========================================================================== */

.header-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Le flou est porté par un pseudo-élément : un backdrop-filter sur l'en-tête
   lui-même deviendrait le bloc conteneur du menu mobile en position fixed. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 243, 236, .88);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 24px rgba(12, 23, 48, .05);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  color: var(--color-primary);
}

.site-header .brand {
  position: relative;
  z-index: 120;
}

/* Logo SH : image 128x81 a fond transparent. Version bleue sur fond clair,
   version doree sur fond sombre (pied de page). */
.brand-mark {
  width: auto;
  height: 2.5rem;
  flex: none;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1;
  white-space: nowrap;
}

.brand-name strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.brand-name span {
  margin-top: .3rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.nav-toggle {
  position: relative;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .5rem .25rem .5rem .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.nav-toggle-bars {
  position: relative;
  width: 1.5rem;
  height: 10px;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition), top var(--transition);
}

.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after  { top: 8px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 4px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: 4px;
  transform: rotate(-45deg);
}

/* Petits telephones : la marque et le bouton Menu doivent tenir dans la
   largeur, sinon tout le site defile horizontalement. En dessous de 420px on
   resserre la marque ; en dessous de 360px le mot « Menu » s'efface
   visuellement, le bouton gardant ses barres et son aria-label. */
@media (max-width: 420px) {
  .site-header .container {
    gap: var(--space-xs, .5rem);
  }

  .site-header .brand {
    gap: .7rem;
    min-width: 0;
  }

  .site-header .brand-mark {
    height: 2.1rem;
  }

  .site-header .brand-name strong {
    font-size: 1.2rem;
  }

  .site-header .brand-name span {
    margin-top: .25rem;
    font-size: .5rem;
    letter-spacing: .08em;
  }

  .nav-toggle {
    padding-left: .5rem;
  }
}

@media (max-width: 360px) {
  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav-toggle {
    gap: 0;
    padding-inline: .5rem;
  }
}

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  /* visibility ne doit pas etre interpolee : a l'ouverture elle bascule tout
     de suite, sinon le menu reste invisible pendant la moitie de la
     transition et main.js ne peut pas y placer le focus clavier. A la
     fermeture elle attend la fin du fondu. */
  transition: opacity var(--transition), visibility 0s linear 250ms;
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition), visibility 0s linear 0s;
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.nav-list a {
  display: inline-block;
  padding-block: .35rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 400;
  color: var(--color-primary);
  transition: color var(--transition);
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--color-accent-text);
}

.nav-cta {
  margin-top: 2rem;
  align-self: flex-start;
}

body.nav-open {
  overflow: hidden;
}

@media (min-width: 1100px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: row;
    gap: 1.6rem;
  }

  .nav-list a {
    position: relative;
    padding-block: .5rem;
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-text);
  }

  .nav-list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .15rem;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
  }

  .nav-list a:hover::after,
  .nav-list a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .nav-list a[aria-current="page"] {
    color: var(--color-primary);
  }

  .nav-cta {
    margin-top: 0;
    min-height: 2.6rem;
    padding: .6rem 1.25rem;
    font-size: .875rem;
  }
}

/* ==========================================================================
   Sections
   ========================================================================== */

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

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

.section--surface {
  background: var(--color-surface);
}

.section--navy {
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.section--navy h2,
.section--navy h3 {
  color: var(--color-on-dark);
}

.section--navy h2 em,
.section--navy h3 em {
  color: var(--color-accent-light);
}

.section--navy .lead,
.section--navy p {
  color: var(--color-on-dark-muted);
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* ==========================================================================
   Hero — accueil
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  margin-bottom: 1.75rem;
}

.hero .lead {
  max-width: 34rem;
}

.hero-signature {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: .9375rem;
  color: var(--color-text-muted);
}

.hero-signature strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  font-style: italic;
  color: var(--color-primary);
}

.hero-media {
  position: relative;
}

.frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-media .frame {
  aspect-ratio: 4 / 5;
}

.hero-media::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Légende de crédit photo (mécanique reprise du site Lyride) :
   bandeau bleu en pied d'image, filet doré, nom du photographe à gauche,
   mention "Photographe" à droite. Réservée aux photos réelles. */
.photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--color-primary);
  border-top: 2px solid var(--color-accent);
}

/* Sur une section bleue, la légende doit rester lisible comme bandeau */
.section--navy .photo-caption {
  background: var(--color-primary-deep);
}

.photo-caption p {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: var(--color-on-dark-muted);
}

.photo-caption a {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--transition);
}

.photo-caption a:hover {
  color: var(--color-on-dark);
}

/* Cadrage : garder le sujet quand l'image est plus large que son cadre */
.frame--focus-left img {
  object-position: left center;
}

/* Blocs de texte empilés dans une colonne de .split */
.stack > * + * {
  margin-top: 2.25rem;
}

.photo-caption span {
  flex: none;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.hero-quote {
  position: absolute;
  left: -1rem;
  bottom: 2rem;
  z-index: 3;
  max-width: 17rem;
  padding: 1.25rem 1.4rem;
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1.15fr .85fr;
  }

  .hero-quote {
    left: -3rem;
  }
}

@media (max-width: 767px) {
  .hero-media::before {
    inset: .75rem -.75rem -.75rem .75rem;
  }

  .hero-quote {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    margin-top: -2.5rem;
    margin-inline: 1rem;
  }
}

/* ==========================================================================
   Hero — pages intérieures
   ========================================================================== */

.page-hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--color-border);
}

.page-hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

/* En-tete reduit a son titre : le contenu de la page doit arriver vite. */
.page-hero--compact {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
}

.page-hero--compact .breadcrumb {
  margin-bottom: 1.5rem;
}

.page-hero--compact h1 {
  margin-bottom: 0;
}

/* Le contenu suit de pres l'en-tete reduit, sans trou au milieu. */
.page-hero--compact + .section {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.breadcrumb {
  margin-bottom: 2rem;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: .5rem;
  color: var(--color-accent);
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.page-hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  margin-bottom: 1.5rem;
}

.page-hero .lead {
  max-width: 36rem;
}

.page-hero-media .frame {
  aspect-ratio: 5 / 4;
}

@media (min-width: 768px) {
  .page-hero-grid {
    grid-template-columns: 1.1fr .9fr;
  }
}

/* ==========================================================================
   Grande question / citation
   ========================================================================== */

.big-question {
  position: relative;
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
}

.big-question blockquote,
.big-question .question {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  color: var(--color-on-dark);
}

.section--navy .big-question blockquote p {
  color: var(--color-on-dark);
}

.section:not(.section--navy) .big-question .question {
  color: var(--color-primary);
}

.big-question .mark {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: .6;
  color: var(--color-accent-light);
}

.big-question figcaption,
.big-question .question-caption {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.section:not(.section--navy) .big-question .question-caption {
  color: var(--color-accent-text);
}

.pullquote {
  margin-block: 2.5rem;
  padding: 1.75rem 0 1.75rem 1.75rem;
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-primary);
}

.pullquote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* ==========================================================================
   Split texte / image
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.split-media .frame {
  aspect-ratio: 4 / 5;
}

.split-media--wide .frame {
  aspect-ratio: 4 / 3;
}

.split-text > p {
  color: var(--color-text-muted);
}

.split-text h2 {
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse .split-media {
    order: 2;
  }
}

/* ==========================================================================
   Territoires (4 thèmes)
   ========================================================================== */

.territories {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.territory {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--color-surface);
  transition: background-color var(--transition), transform var(--transition);
}

.territory:hover {
  background: var(--color-bg);
}

.territory-num {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--color-accent-text);
}

.territory-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-primary);
  transition: transform var(--transition);
}

.territory:hover .territory-icon {
  transform: translateY(-4px);
}

.territory h3 {
  font-size: 1.55rem;
}

.territory p {
  font-size: .9688rem;
  color: var(--color-text-muted);
}

.territory .link-arrow {
  margin-top: auto;
  align-self: flex-start;
}

@media (min-width: 768px) {
  .territories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .territories {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Méthode — du symptôme au système
   ========================================================================== */

.steps {
  list-style: none;
  display: grid;
  gap: 2.25rem;
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-on-dark-border);
  counter-increment: step;
}

.section:not(.section--navy) .step {
  border-top-color: var(--color-border-strong);
}

.step::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent-light);
}

.section:not(.section--navy) .step::before {
  color: var(--color-accent);
}

.step h3 {
  margin-bottom: .6rem;
  font-size: 1.45rem;
}

.step p {
  font-size: .9688rem;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }
}

@media (min-width: 1200px) {
  .steps--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Cartes — Notes, épisodes, formats
   ========================================================================== */

.cards {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.card:hover .card-media img {
  transform: scale(1.04);
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .85rem;
  padding: 1.5rem 1.5rem 1.75rem;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.card h3 {
  font-size: 1.5rem;
}

.card h3 a::after {
  /* toute la carte devient cliquable */
  content: "";
  position: absolute;
  inset: 0;
}

.card p {
  font-size: .9375rem;
  color: var(--color-text-muted);
}

.card .link-arrow {
  margin-top: auto;
  align-self: flex-start;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text-muted);
}

.badge--gold {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.card--upcoming {
  background: transparent;
  border-style: dashed;
}

.card--upcoming:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border-strong);
}

/* Filtres */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}

.filter {
  min-height: 2.5rem;
  padding: .45rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  transition: all var(--transition);
}

.filter:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.filter[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-dark);
}

.filter-status {
  margin-bottom: 1.5rem;
  font-size: .875rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Formats d'intervention
   ========================================================================== */

.formats {
  display: grid;
  gap: 1.25rem;
}

.format {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.format:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.format-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-primary);
}

.format-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.format h3 {
  margin-bottom: .4rem;
  font-size: 1.45rem;
}

.format p {
  font-size: .9375rem;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .formats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Dans une colonne de .split, une seule colonne jusqu'au grand écran */
  .split .formats {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1200px) {
  .split .formats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Liens texte sur fonds sombres */
.section--navy a:not([class]),
.bridge a:not([class]) {
  color: var(--color-on-dark);
  text-decoration-color: var(--color-accent-light);
}

.section--navy a:not([class]):hover,
.bridge a:not([class]):hover {
  color: var(--color-accent-light);
}

.section--navy .format {
  background: rgba(243, 236, 224, .04);
  border-color: var(--color-on-dark-border);
}

.section--navy .format-icon {
  color: var(--color-accent-light);
  border-color: var(--color-accent-light);
}

.section--navy .format p {
  color: var(--color-on-dark-muted);
}

/* Liste de thèmes (puces dorées) */
.theme-list {
  list-style: none;
  display: grid;
  gap: .9rem;
}

.theme-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--color-text-muted);
}

.theme-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .9rem;
  height: 1px;
  background: var(--color-accent);
}

.theme-list strong {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .theme-list--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2.5rem;
  }
}

/* ==========================================================================
   Pont vers Lyride Conseil
   ========================================================================== */

.bridge {
  position: relative;
  background: var(--color-primary-deep);
  color: var(--color-on-dark);
  overflow: hidden;
}

.bridge::after {
  content: "";
  position: absolute;
  right: -8rem;
  top: 50%;
  width: 28rem;
  height: 28rem;
  border: 1px solid var(--color-on-dark-border);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.bridge-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.bridge h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--color-on-dark);
}

.bridge h2 em {
  color: var(--color-accent-light);
}

.bridge p {
  margin-top: 1rem;
  max-width: 38rem;
  color: var(--color-on-dark-muted);
}

@media (min-width: 768px) {
  .bridge-inner {
    grid-template-columns: 1fr auto;
  }
}

/* ==========================================================================
   Capital Dirigeant® — chaîne & définition
   ========================================================================== */

.definition {
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

.definition dt {
  margin-bottom: .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.definition dd {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  color: var(--color-primary);
}

.chain {
  list-style: none;
  display: grid;
  gap: .75rem;
  counter-reset: chain;
}

.chain li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: rgba(243, 236, 224, .05);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  counter-increment: chain;
  font-size: .9688rem;
  color: var(--color-on-dark);
}

.chain li::before {
  content: counter(chain);
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--color-primary-deep);
  background: var(--color-accent-light);
  border-radius: 50%;
}

.chain-loop {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-accent-light);
}

.chain-loop + .split {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-on-dark-border);
}

.chain-loop svg {
  width: 2rem;
  height: 2rem;
  flex: none;
}

@media (min-width: 1100px) {
  .chain {
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
  }

  .chain li {
    flex-direction: column;
    align-items: flex-start;
    min-height: 9.5rem;
    border-radius: 0;
    border-right-width: 0;
  }

  .chain li:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }

  .chain li:last-child {
    border-right-width: 1px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
}

.not-list {
  display: grid;
  gap: 1.25rem;
}

.not-item {
  padding: 1.5rem 1.75rem;
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface);
}

.not-item h3 {
  margin-bottom: .4rem;
  font-size: 1.35rem;
}

.not-item p {
  font-size: .9375rem;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .not-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   À propos — parcours, boussole
   ========================================================================== */

.timeline {
  list-style: none;
  position: relative;
  display: grid;
  gap: 2.25rem;
  padding-left: 2rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .5rem;
  bottom: .5rem;
  width: 1px;
  background: var(--color-border-strong);
}

.timeline li {
  position: relative;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: .45rem;
  width: .75rem;
  height: .75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
}

.timeline li:last-child::before {
  background: var(--color-accent);
}

.timeline-when {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.timeline h3 {
  margin-bottom: .35rem;
  font-size: 1.45rem;
}

.timeline p {
  font-size: .9688rem;
  color: var(--color-text-muted);
}

.credentials {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
}

.credentials li {
  padding: .45rem .9rem;
  font-size: .8125rem;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.compass {
  display: grid;
  gap: 1px;
  background: var(--color-on-dark-border);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.compass div {
  padding: 1.75rem;
  background: var(--color-primary);
}

.compass dt {
  margin-bottom: .6rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.compass dd {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--color-on-dark);
}

@media (min-width: 768px) {
  .compass {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .compass {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Article — Note de recherche
   ========================================================================== */

.article-hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) 2.5rem;
}

.article-hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  margin-bottom: 1.5rem;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.article-cover {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* La couverture d'une Note n'est pas recadree : elle est reduite et montree
   en entier, quel que soit son format. La hauteur est seulement bornee pour
   qu'un portrait ne remplisse pas tout l'ecran avant le texte.

   Deux structures coexistent : l'image est enfant direct de la figure sur les
   Notes issues de Sanity, et enveloppee dans un .frame sur la Note statique
   heritee. Les deux selecteurs couvrent ce cas. */
.article-cover .frame {
  background: none;
  border-radius: 0;
}

.article-cover .frame img,
.article-cover > img {
  display: block;
  width: auto;
  height: auto;
  /* Largeur alignee sur la colonne de texte : une couverture paysage ne
     s'etale pas sur toute la largeur de page alors que l'article est etroit. */
  max-width: min(100%, var(--max-prose));
  /* Hauteur volontairement contenue : la couverture introduit la Note, elle
     ne doit pas repousser le texte sous la ligne de flottaison. Le min() evite
     qu'elle devienne envahissante sur un ecran bas. */
  max-height: min(29rem, 60vh);
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.article-cover figcaption {
  margin-top: .75rem;
  font-size: .8125rem;
  color: var(--color-text-muted);
}

.prose {
  max-width: var(--max-prose);
  margin-inline: auto;
  font-size: 1.125rem;
  line-height: 1.8;
}

.prose > * + * {
  margin-top: 1.4em;
}

.prose h2 {
  margin-top: 2.4em;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 400;
}

.prose h3 {
  margin-top: 2em;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: .5em;
}

.prose li::marker {
  color: var(--color-accent);
}

.prose .pullquote {
  margin-block: 2.5rem;
}

.callout {
  padding: 1.5rem 1.75rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}

.callout-title {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.callout p {
  font-size: 1rem;
}

.article-footer {
  max-width: var(--max-prose);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-mark {
  width: auto;
  height: 2.75rem;
}

.author strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-primary);
}

.author span {
  font-size: .875rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Contact — coordonnées mises en avant (aucun formulaire sur le site)
   ========================================================================== */

.contact-cards {
  list-style: none;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 768px) {
  .contact-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.contact-card-icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: .75rem;
  color: var(--color-accent);
}

.contact-card-label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.contact-card-value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  color: var(--color-primary);
  overflow-wrap: break-word;
}

/* L'adresse e-mail est longue : taille réduite et césure après l'arobase
   (<wbr> dans le HTML) pour éviter une coupure au milieu du domaine. */
.contact-card-value--email {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.contact-card:hover .contact-card-value {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: .18em;
}

.contact-card-note {
  margin-top: auto;
  padding-top: .75rem;
  font-size: .875rem;
  color: var(--color-text-muted);
}

.contact-place {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Pages légales & 404
   ========================================================================== */

.legal h2 {
  margin-top: 2.5em;
  font-size: 1.9rem;
  font-weight: 400;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal h3 {
  margin-top: 1.8em;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-primary);
}

/* ==========================================================================
   Bandeau de consentement aux cookies de mesure d'audience
   ========================================================================== */

.cookie-banner {
  position: fixed;
  z-index: 200;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 18px 48px rgba(19, 34, 63, .18);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--transition), transform var(--transition);
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: none;
}

.cookie-banner-titre {
  margin-bottom: .6rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.cookie-banner-texte {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

/* Les deux reponses ont la meme surface : refuser doit etre aussi simple
   qu'accepter. */
.cookie-banner-actions .btn {
  flex: 1 1 8rem;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
    transform: none;
  }
}

/* Bouton « Gerer les cookies » du pied de page : meme rendu que les liens
   voisins, mais c'est un bouton car il n'ouvre aucune page. */
.footer-cookie-btn {
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Tableau des traceurs, dans la politique de confidentialite */
.legal-table {
  width: 100%;
  margin-block: 1.75em;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
}

.legal-table caption {
  margin-bottom: .9rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-accent-text);
}

.legal-table th,
.legal-table td {
  padding: .7rem .9rem .7rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.legal-table thead th {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom-color: var(--color-border-strong);
}

.legal-table code {
  font-family: var(--font-mono);
  font-size: .875em;
}

/* Sous 640px le tableau defile horizontalement plutot que d'ecraser ses
   colonnes ; l'enveloppe est posee par le navigateur via overflow. */
@media (max-width: 640px) {
  .legal-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .legal-table td,
  .legal-table th {
    white-space: normal;
    min-width: 8rem;
  }
}

/* Date de mise a jour, en tete des pages reglementaires */
.legal-updated {
  margin-bottom: 2.5em;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.legal .legal-updated + h2 {
  margin-top: 0;
}

.todo {
  padding: .05em .35em;
  background: rgba(179, 138, 78, .18);
  border-radius: 2px;
}

.error-page {
  display: grid;
  place-items: center;
  min-height: 70vh;
  text-align: center;
}

.error-code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 11rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent);
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.site-footer {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--color-primary);
  color: var(--color-on-dark-muted);
  font-size: .9375rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer-brand .brand {
  color: var(--color-on-dark);
}

.footer-brand .brand-name span {
  color: var(--color-accent-light);
}

.footer-brand p {
  max-width: 24rem;
  margin-top: 1.25rem;
}

.site-footer h2 {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.site-footer ul {
  list-style: none;
  display: grid;
  gap: .55rem;
}

.site-footer a {
  color: var(--color-on-dark-muted);
  transition: color var(--transition);
}

.site-footer a:hover {
  color: var(--color-on-dark);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}

.social-link svg {
  width: 1.1rem;
  height: 1.1rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--color-on-dark-border);
  font-size: .8125rem;
}

.footer-credit strong {
  color: var(--color-on-dark);
  font-weight: 500;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}

/* --- Partenaire institutionnel (pied de page) -------------------------- */
/* Le logo officiel Région Normandie est noir sur fond blanc : il est posé
   sur une pastille claire, sans modification de ses couleurs (charte). */
.footer-partner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--color-on-dark-border);
}

.footer-partner p {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.partner-logo {
  display: inline-flex;
  padding: .7rem 1rem;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.partner-logo img {
  width: auto;
  height: 2.25rem;
}

/* --- État vide (rubrique pas encore alimentée) ------------------------- */
.empty-state {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.empty-state-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.5rem;
  color: var(--color-accent);
}

.empty-state .eyebrow {
  justify-content: center;
}

.empty-state h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom: 1.25rem;
}

.empty-state p {
  color: var(--color-text-muted);
}

.empty-state .btn-row {
  justify-content: center;
}

/* --- États de chargement des Notes (contenu Sanity) -------------------- */
.notes-state {
  grid-column: 1 / -1;
  padding: 2.5rem 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* --- Lecture transversale sous les quatre axes ------------------------- */
.territories-note {
  max-width: 54rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Terrains d'observation et d'action (page d'accueil)
   ========================================================================== */

.grounds {
  display: grid;
  gap: 2.25rem;
}

.ground {
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border-strong);
}

.ground-label {
  margin-bottom: .9rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.ground h3 {
  margin-bottom: .7rem;
  font-size: 1.35rem;
}

.ground p {
  font-size: .9688rem;
}

.ground p + p {
  margin-top: .85rem;
}

/* Le quatrieme terrain — l'experience propre — se distingue des trois autres */
.ground--self {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-alt);
}

.ground--self h3 {
  font-size: clamp(1.4rem, 2vw, 1.65rem);
}

.ground--self .link-arrow {
  margin-top: 1.4rem;
}

@media (min-width: 900px) {
  .grounds {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2.25rem;
  }

  .ground--self {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .ground--self .ground-self-head {
    position: relative;
    padding-top: .35rem;
  }

  .ground--self .link-arrow {
    margin-top: 1.1rem;
  }
}

/* Respiration entre un titre et son premier paragraphe en colonne etroite */
.container--narrow > h2 + p,
.container--narrow > h2 + blockquote {
  margin-top: 1.5rem;
}

/* ==========================================================================
   Composition éditoriale — titres en regard du texte (page À propos)
   ========================================================================== */

.editorial {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 1000px) {
  .editorial {
    grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 6rem);
  }

  /* Le titre accompagne la lecture du bloc */
  .editorial-aside {
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
    align-self: start;
  }
}

.editorial-aside .eyebrow {
  margin-bottom: .9rem;
}

.editorial-aside h2 {
  font-size: clamp(1.8rem, 2.9vw, 2.5rem);
}

.editorial-body {
  max-width: 37rem;
}

.editorial-body > p {
  color: var(--color-text-muted);
}

.editorial-body > p + ul,
.editorial-body > ul + p {
  margin-top: 1.35em;
}

.editorial-body > p + p {
  margin-top: 1.35em;
}

.section--navy .editorial-body > p {
  color: var(--color-on-dark-muted);
}

/* Numéro de section */
.section-index {
  display: block;
  margin-bottom: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .22em;
  color: var(--color-accent-text);
}

.section--navy .section-index {
  border-bottom-color: var(--color-on-dark-border);
  color: var(--color-accent-light);
}

/* Chapô d'ouverture */
.chapo {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--color-primary);
}

.intro-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 900px) {
  .intro-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 3vw, 2.75rem);
  }
}

.intro-grid p {
  font-size: .9688rem;
  color: var(--color-text-muted);
}

/* La regle globale « p + p » decalerait la seconde colonne vers le bas : dans
   une grille, l'espacement vient du gap, jamais d'une marge de frere. */
.intro-grid > p + p {
  margin-top: 0;
}

/* Temps d'arrêt : la boussole */
.statement {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.statement .eyebrow {
  justify-content: center;
}

.statement-main {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.28;
  color: var(--color-primary);
}

.statement-main::before,
.statement-main::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: 0 auto 2rem;
  background: var(--color-accent);
}

.statement-main::after {
  margin: 2rem auto 0;
}

.statement-note {
  margin-top: 2rem;
  font-size: .9688rem;
  color: var(--color-text-muted);
}

/* Pas de double filet : le numero porte deja la ligne de separation */
.editorial-aside .eyebrow::before {
  display: none;
}

/* Identite rappelee dans la colonne de gauche du bloc d'ouverture */
.aside-identity {
  margin-top: 1.5rem;
}

.aside-identity strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  font-style: italic;
  color: var(--color-primary);
}

.aside-identity span {
  display: block;
  margin-top: .4rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Hero de l'accueil : le contenu doit tenir dans le premier ecran.
   Le texte etant plus long que la version initiale, le titre et les
   paragraphes sont reduits et les espacements resserres, afin que les
   boutons restent visibles sans defilement.
   ========================================================================== */

.hero {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}

.hero h1 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin-bottom: 1.25rem;
}

.hero .lead {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
  max-width: 36rem;
}

.hero .btn-row {
  margin-top: 1.5rem;
}

.hero-signature {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
}

.hero-signature strong {
  font-size: 1.2rem;
}

/* Precisions sous la grande question (accueil) */
.question-notes {
  max-width: 46rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
}

.question-notes p {
  color: var(--color-on-dark-muted);
}

.question-notes p + p {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-on-dark-border);
}

.section--navy .chapo {
  color: var(--color-on-dark);
}