@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

/* --------------------------------------------------
   VARIABLES — Minimal Ivoire
   Crème, anthracite, un seul accent émeraude. --accent / --accent-dark /
   --accent-soft restent les trois noms que la personnalisation de marque
   (E36) réécrit à la volée.
-------------------------------------------------- */
:root {
  --bg: #f7f4ec;
  --bg-alt: #f0ebdd;
  --surface: #fbfaf5;
  --text: #2b2b28;
  --muted: #746f63;

  --accent: #1f8a5c;
  --accent-dark: #145c3d;
  --accent-soft: rgba(31, 138, 92, 0.1);

  --border: #e3ddcb;

  --radius: 0;
  --shadow: 0 20px 45px rgba(43, 43, 40, 0.08);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------
   RESET
-------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 0.7rem;
}

a {
  color: var(--accent-dark);
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

[id] { scroll-margin-top: 78px; }

/* --------------------------------------------------
   LAYOUT
-------------------------------------------------- */
.se-container {
  width: 90%;
  max-width: 1160px;
  margin: 0 auto;
}

.se-container--narrow {
  max-width: 720px;
}

.se-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

/* --------------------------------------------------
   EN-TÊTE — nav centrée (grille à 3 colonnes symétriques)
-------------------------------------------------- */
.se-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 244, 236, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.se-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.15rem 0;
  gap: 1rem;
}

.se-header__spacer {
  display: block;
}

.se-logo {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  text-decoration: none;
}

.se-logo__image {
  height: 34px;
  max-width: 160px;
  object-fit: contain;
}

.se-nav {
  justify-self: center;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.82rem;
}

.se-nav-toggle {
  display: none;
}

.se-nav-toggle__label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  justify-self: end;
}

.se-nav-toggle__label span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--text);
}

.se-nav__link {
  position: relative;
  padding: 0.5rem 0.8rem;
  letter-spacing: 0.03em;
  color: var(--text);
  transition: color 0.2s;
}

.se-nav__link::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.se-nav__link:hover {
  color: var(--accent-dark);
}

.se-nav__link:hover::after {
  transform: scaleX(1);
}

.btn-nav {
  border: 1px solid var(--text);
}

.se-nav__dropdown {
  position: relative;
}

.se-nav__dropdown > summary {
  cursor: pointer;
  padding: 0.5rem 0.8rem;
  list-style: none;
  color: var(--text);
}

.se-nav__dropdown > summary::-webkit-details-marker {
  display: none;
}

.se-nav__dropdown > summary::after {
  content: " \25BE";
  font-size: 0.75em;
}

.se-nav__dropdown-list {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0.5rem 0 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  min-width: 190px;
  max-width: 80vw;
  z-index: 20;
}

.se-nav__dropdown-list li a {
  display: block;
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.se-nav__dropdown-list li a:hover {
  background: var(--bg-alt);
  color: var(--accent-dark);
}

/* --------------------------------------------------
   HERO — texte centré très aéré, puis un bandeau photo plein largeur
-------------------------------------------------- */
.se-hero__text {
  text-align: center;
  padding: 5.5rem 5% 3.5rem;
}

.se-hero__text h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 1rem;
}

.se-hero__subtitle {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 auto 1.5rem;
  max-width: 34rem;
}

.se-hero__meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2rem;
}

.se-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  vertical-align: middle;
}

.se-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.se-hero__photo {
  width: 100%;
  height: 42vh;
  min-height: 260px;
  overflow: hidden;
}

.se-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------
   SECTIONS
-------------------------------------------------- */
.se-section {
  padding: 5rem 0;
}

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

.se-section h2 {
  font-size: 1.9rem;
  margin-bottom: 1.5rem;
}

.se-lede {
  font-size: 1.05rem;
  color: var(--text);
}

.se-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
}

.se-prose {
  color: var(--text);
}

.se-back-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.se-back-link:hover {
  color: var(--accent-dark);
}

/* --------------------------------------------------
   À PROPOS
-------------------------------------------------- */
.se-facts {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin: 1.75rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--border);
}

.se-facts dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.se-facts dd {
  margin: 0.25rem 0 0;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--text);
}

/* --------------------------------------------------
   CARTES — extrêmement sobres, un simple filet, pas d'ombre au repos
-------------------------------------------------- */
.se-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.se-card {
  padding: 0 0 0;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  transition: opacity 0.2s ease;
}

.se-card:hover {
  opacity: 0.75;
}

.se-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.se-card p {
  margin: 0;
  color: var(--muted);
}

.se-card__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.se-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.se-card__price {
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--text);
  margin: 0.4rem 0;
}

.se-card__date {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

/* --------------------------------------------------
   GRILLE (galerie / réalisations)
-------------------------------------------------- */
.se-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.se-grid__item {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.se-grid__item:hover {
  opacity: 0.8;
}

.se-grid__item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 0.6rem;
}

.se-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.se-lightbox:target {
  opacity: 1;
  visibility: visible;
}

.se-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 43, 40, 0.92);
}

.se-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  margin: 0;
}

.se-lightbox__content img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}

.se-lightbox__content figcaption {
  color: #ffffff;
  text-align: center;
  margin-top: 0.75rem;
  font-family: var(--font-display);
}

.se-lightbox__close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
}

/* --------------------------------------------------
   PAGES DE DÉTAIL
-------------------------------------------------- */
.se-detail__cover {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  margin-bottom: 1.25rem;
}

.se-detail__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.se-detail__gallery-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

/* --------------------------------------------------
   PUCES
-------------------------------------------------- */
.se-chip {
  display: inline-block;
  padding: 0.22rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.se-chip--muted {
  background: var(--bg-alt);
  color: var(--muted);
}

.se-chip--tag {
  margin: 0.15rem 0.3rem 0.15rem 0;
}

.se-chip--type {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

/* --------------------------------------------------
   CONTACT
-------------------------------------------------- */
.se-contact-info {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.se-contact-info a {
  color: var(--accent-dark);
}

.se-contact-info a:hover {
  text-decoration: underline;
}

.se-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.se-alert {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  border-left: 2px solid;
}

.se-alert--ok {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent);
}

.se-alert--error {
  background: rgba(168, 50, 50, 0.08);
  color: #a83232;
  border-color: #a83232;
}

.se-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
}

.se-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.se-social-link:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.se-map-embed {
  margin: 0 0 1.75rem;
}

.se-map-embed iframe {
  width: 100%;
  height: 280px;
  border: 1px solid var(--border);
  display: block;
}

.se-map-embed-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--accent-dark);
}

.se-map-embed-link:hover {
  text-decoration: underline;
}

.se-form {
  max-width: 480px;
}

.se-form h3 {
  font-size: 1.25rem;
}

.se-form > p {
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.se-form__row {
  margin-bottom: 1.25rem;
}

.se-form__row label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.se-form__row input,
.se-form__row textarea {
  width: 100%;
  padding: 0.6rem 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.se-form__row input:focus,
.se-form__row textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------
   BOUTONS — rectangulaires, capitales espacées
-------------------------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.btn-secondary:hover {
  background: var(--text);
  color: var(--bg);
}

/* --------------------------------------------------
   PIED DE PAGE
-------------------------------------------------- */
.se-footer {
  border-top: 1px solid var(--border);
  padding: 1.75rem 0;
  background: var(--bg);
  font-size: 0.82rem;
  color: var(--muted);
}

.se-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.se-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}

.se-footer__links a {
  color: var(--muted);
}

.se-footer__links a:hover {
  color: var(--accent-dark);
}

/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */
@media (max-width: 768px) {
  .se-header__inner {
    grid-template-columns: 1fr auto;
  }

  .se-header__spacer {
    display: none;
  }

  .se-nav-toggle__label {
    display: flex;
  }

  .se-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 5% 1rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .se-nav-toggle:checked ~ .se-nav {
    display: flex;
  }

  .se-nav__link,
  .se-nav__dropdown > summary {
    padding: 0.85rem 0.5rem;
    text-align: left;
  }

  .se-nav__link::after {
    display: none;
  }

  .se-nav__dropdown-list {
    position: static;
    max-width: none;
    transform: none;
    margin: 0 0 0 1rem;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--border);
  }

  .se-footer__inner {
    justify-content: center;
    text-align: center;
  }

  .se-footer__links {
    justify-content: center;
  }
}


/* ==================================================================
   CORRECTIONS HERITEES DE LA FEUILLE DE BASE
   Voir `correctionsHeritees()` dans bin/make-webbuilder-templates.php.
   ================================================================== */
/* L'en-tete de la feuille de base peint `rgba(247, 244, 236, 0.94)` — le
   creme de « Minimal Ivoire », ecrit en dur et non en jeton. Tout modele
   derive heritait donc d'une barre creme quelle que soit sa palette : sur
   « Onde », dont le fond est blanc, elle se voyait franchement.

   La translucidite est voulue (l'en-tete est `sticky` et le flou rend
   lisible ce qui passe dessous), d'ou `color-mix` plutot qu'un aplat. La
   premiere declaration est le repli : un navigateur qui ignore `color-mix`
   ne comprend pas la seconde et garde un fond opaque, ce qui est laid
   nulle part. */
.se-header {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

/* La pastille « compte verifie » : la base peint son glyphe en `#ffffff`
   ecrit en dur, ce qui ne tient que sous un accent fonce. Selon la palette
   le contraste tombait entre 3,07 et 3,64.

   Cette paire-ci tient dans les DEUX sens, ce qui est ce qu'il faut quand
   un theme peut retourner la page : sur une page sombre `--accent-dark`
   est la variante CLAIRE de l'accent et `--bg` est sombre, donc glyphe
   sombre sur pastille claire ; sur une page claire c'est l'inverse, terme
   pour terme. Une seule regle, valable sous tous les themes, la ou il en
   fallait une par modele. */
.se-badge {
  background: var(--accent-dark);
  color: var(--bg);
}

/* Le sur-titre est du petit texte en capitales peint avec `--accent`, une
   couleur choisie pour remplir des aplats, pas pour etre lue a 12px : sous
   les palettes claires le contraste tombait a 2,67. `--accent-dark` est
   precisement l'accent decale vers la lisibilite sur le fond courant, et il
   se decale dans le bon sens sur une page sombre comme sur une page claire. */
.se-eyebrow {
  color: var(--accent-dark);
}

@media (max-width: 768px) {
  /* Le panneau deroulant prend toute la largeur : sans cela l'alignement
     de boite l'emporte sur l'etirement et le reduit a son contenu. */
  .se-nav {
    justify-self: stretch;
  }
}

/* ==================================================================
   LES DEUX BOUTONS RONDS DE L EN-TETE  (fragment partage)
   ------------------------------------------------------------------
   Le disque et le lisere sont derives des jetons, si bien que le meme
   fragment tient sur une page sombre comme sur une page claire — et
   sur une photo quelconque, la ou un modele en pose une.
   ================================================================== */
.se-nav-toggle__label,
.se-header__home {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
  transition: background 0.2s, border-color 0.2s;
}

.se-nav-toggle__label:hover,
.se-header__home:hover {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-color: var(--accent);
}

.se-nav-toggle__label span {
  background: currentColor;
}

/* Sous 768px, le bouton d accueil disparait : la grille de la base n a
   que deux colonnes (logo, bascule) et il s y intercalerait. Rien n est
   perdu, le logo est deja un lien vers l accueil. */
@media (max-width: 768px) {
  .se-header__home {
    display: none;
  }
}

/* ==================================================================
   LE MENU REPLIE AU COIN  (fragment partage)
   Voir `fragmentsCss()` dans bin/make-webbuilder-templates.php.
   ------------------------------------------------------------------
   La feuille de base pilote deja son panneau mobile par une case a
   cocher, sous 768px seulement. Ce fragment etend le mecanisme au-dessus
   de ce seuil en lui donnant une autre forme : un panneau ancre sous son
   bouton plutot qu'un bandeau pleine largeur. Aucun JavaScript.

   Sous 768px, rien n'est touche : le menu classique du telephone reste
   celui de la base (decision PO) — ce qui est cache est moins clique, et
   un mini-site a un but commercial.
   ================================================================== */

@media (min-width: 769px) {
  .se-header__inner {
    grid-template-columns: auto 1fr auto;
    padding: 0.9rem 0;
    /* Le panneau se cale sur CE bloc et non sur l'en-tete, qui va d'un
       bord a l'autre de l'ecran : sans cela son `left: 0` le collait au
       bord du navigateur, a 260px du bouton qui l'ouvre. */
    position: relative;
  }

  /* Une seule rangee, dite explicitement. Sans cela le placement
     automatique renvoie a la ligne suivante tout element dont la colonne
     est ANTERIEURE a celle du precedent : le logo arrive en premier dans
     le document et occupe la colonne 2, si bien que la bascule, qui veut
     la colonne 1, descendait d'un rang. */
  .se-header__inner > * {
    grid-row: 1;
  }

  /* La bascule cesse d'etre reservee au telephone : c'est ici le seul
     acces au menu. */
  .se-nav-toggle__label {
    display: flex;
    grid-column: 1;
    justify-self: start;
  }

  .se-logo {
    grid-column: 2;
    justify-self: center;
  }

  .se-header__home {
    grid-column: 3;
    justify-self: end;
  }

  /* Le panneau, ancre sous son bouton plutot qu'etale sur la largeur :
     c'est ce qui distingue cette grammaire d'un simple menu masque. */
  .se-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    justify-self: start;
    width: min(360px, calc(100vw - 32px));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem 0.4rem 1rem;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .se-nav-toggle:checked ~ .se-nav {
    display: flex;
  }

  .se-nav__link,
  .se-nav__dropdown > summary {
    padding: 0.8rem 1rem;
    text-align: left;
  }

  /* Le soulignement anime de la base suppose une barre horizontale ; dans
     une colonne il trace un trait sous chaque ligne. */
  .se-nav__link::after {
    display: none;
  }

  /* Les sous-menus se deplient DANS le panneau, ils ne flottent plus a
     cote de lui. */
  .se-nav__dropdown-list {
    position: static;
    max-width: none;
    transform: none;
    margin: 0 0 0 1rem;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--border);
  }
}


/* ==================================================================
   SEUIL — identité
   Inspiration de mise en page : la bannière occupe le premier écran en
   entier, l'en-tête flotte par-dessus sans fond, et toute la navigation
   se replie derrière un bouton rond au coin.
   ------------------------------------------------------------------
   ## Ce qui n'est PAS repris de la référence

   Sa bannière est un `<canvas>` WebGL, précédé d'un écran de chargement.
   C'est ce qui lui donne son grain, et c'est exactement ce qu'il ne faut
   pas transposer : sur une audience à ~90% mobile, souvent en données
   mesurées, un rendu 3D et son attente se paient en secondes et en
   mégaoctets. Ici c'est l'image de l'entreprise, en `cover`, et rien de
   plus. Son bouton de droite est une bascule audio ; le nôtre ramène à
   l'accueil, ce qui a un sens sur un site d'entreprise.

   ## Le menu ne coûte aucun JavaScript

   La feuille de base pilote déjà son panneau mobile par une case à
   cocher (`.se-nav-toggle:checked ~ .se-nav`), sous 768px seulement. Ce
   modèle ne fait qu'étendre ce mécanisme au-dessus de ce seuil, en lui
   donnant une autre forme : un panneau ancré au coin plutôt qu'un
   bandeau pleine largeur.

   **Sous 768px, rien n'est touché.** Le menu classique du téléphone
   reste celui de la base (décision PO) : ce qui est caché est moins
   cliqué, et un mini-site a un but commercial — amener vers les offres,
   les formations, la boutique. On accepte ce coût sur grand écran, où
   l'effet de seuil vaut quelque chose, pas sur le trafic principal.
   ================================================================== */
:root {
  --bg: #17120e;
  --bg-alt: #1f1913;
  --surface: #241d16;
  --text: #f3f1ed;
  --muted: #a8998a;

  /* Un or ancien plutôt qu'un cuivre : « Axe Central » occupe déjà le
     brun chaud à accent orange, et deux modèles sombres qu'on confond
     dans une liste de quatorze ne valent qu'un seul choix. */
  --accent: #c0954e;
  --accent-dark: #d6b075;
  --accent-soft: rgba(192, 149, 78, 0.16);

  --border: #3a2f23;

  --radius: 2px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* Un serif classique, second point d'écart avec « Axe Central » et sa
     grotesque condensée. La pile est écrite pour son repli, aucune police
     web n'étant chargée : Georgia est partout et tient le rôle. */
  --font-display: "Bellefair", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* La hauteur que l'en-tête flottant recouvre. Un seul endroit : les
     pages sans bannière s'en servent pour se décaler d'autant. */
  --entete-h: 76px;
}

/* ------------------------------------------------------------------
   LA BANNIÈRE — le premier écran en entier
   ------------------------------------------------------------------
   `.se-hero` porte lui-même un dégradé, et ce n'est pas une décoration :
   c'est le repli quand l'entreprise n'a pas encore de bannière. Le PO l'a
   demandé explicitement — les utilisateurs essaient avant de téléverser,
   et un écran d'accueil vide serait lu comme une panne. Sans image, il
   reste un panneau dessiné ; avec, l'image le recouvre.

   `100svh` et non `100vh` : sur mobile, `vh` suit l'apparition de la
   barre d'adresse, et la bannière se redimensionnerait pendant qu'on
   fait défiler. `100vh` reste en première déclaration comme repli.
   ------------------------------------------------------------------ */
.se-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
}

.se-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  z-index: 0;
}

.se-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LE VOILE. Léger, mais pas uniforme : dense en bas, là où le texte se
   pose, et à peine marqué en haut pour que les deux boutons se détachent.
   Une photo téléversée par le client n'offre aucun contraste garanti —
   un ciel clair et le nom de l'entreprise disparaît. C'est le voile, et
   lui seul, qui rend la lisibilité indépendante de l'image. */
.se-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 34%, transparent) 0%,
    color-mix(in srgb, var(--bg) 10%, transparent) 24%,
    color-mix(in srgb, var(--bg) 66%, transparent) 50%,
    color-mix(in srgb, var(--bg) 88%, transparent) 74%,
    color-mix(in srgb, var(--bg) 95%, transparent) 100%
  );
}

.se-hero__text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: calc(var(--entete-h) + 3rem);
  padding-bottom: 4.5rem;
}

.se-hero__text h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
}

/* Dans la bannière, et là seulement, le sur-titre et le sous-titre prennent
   la couleur du texte principal. Ce n'est pas un goût, c'est un calcul : sur
   la PIRE photo possible — un blanc pur — il faut un voile de 62% pour que
   `--text` atteigne 4,5:1, mais 78% pour l'or du sur-titre et 86% pour le
   gris du sous-titre. Tenir ces deux-là reviendrait à peindre l'image en
   noir pour pouvoir écrire dessus, ce qui annule la bannière.

   On ne monte donc pas le voile, on monte le texte. L'or et le gris restent
   partout ailleurs sur la page, où le fond est maîtrisé. */
.se-hero__text .se-eyebrow,
.se-hero__subtitle {
  color: var(--text);
}

/* ------------------------------------------------------------------
   L'EN-TÊTE FLOTTANT
   ------------------------------------------------------------------
   Transparent SEULEMENT quand une bannière suit. Les pages de détail
   (une offre, un article) n'ont pas de hero : un en-tête transparent y
   poserait des boutons clairs sur un fond clair, donc invisibles. Le
   fond opaque hérité de `correctionsHeritees()` reste le défaut, et un
   navigateur sans `:has()` le garde partout — sobre, jamais cassé.
   ------------------------------------------------------------------ */
.se-header {
  position: fixed;
  /* `left` et `right` ne sont pas décoratifs. La base pose l'en-tête en
     `sticky`, qui reste dans le flux et occupe donc toute la largeur ;
     `fixed` l'en sort, et une boîte hors flux dont les deux décalages
     valent `auto` se réduit à son CONTENU. Sans ces deux lignes la grille
     à trois colonnes mesurait 195px, les trois éléments serrés à gauche. */
  left: 0;
  right: 0;
}

.se-header:has(+ .se-hero) {
  background: transparent;
  border-bottom-color: transparent;
}

/* Sans bannière, l'en-tête flottant recouvrirait le haut de la première
   zone : elle se décale d'autant. Un frère adjacent suffit, pas besoin
   de `:has()` ici. */
.se-header + .se-section {
  padding-top: calc(5rem + var(--entete-h));
}

.se-logo {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}