:root {
  /* Couleur principale de la marque. Nom volontairement neutre : la teinte a
     déjà changé plusieurs fois, un nom de couleur dans la variable devient faux
     au prochain changement. */
  --color-principale: #f47791;
  /* Variante foncée de la même teinte (1°), pour la profondeur : survols,
     aplats devant porter du texte clair. */
  --color-principale-fonce: #c2415f;
  --color-noir: #4a454a;
  --color-fond-clair: #fdf3f1;
  --color-blanc-creme: #fffefc;
  --color-blanc-pur: #fff;
  --color-cookie-fonce: #111;
  --color-bordure-claire: #ddd;
  --color-bordure-grise: #999;

  --color-nuance-pale: #fbdcd7;

  /* Touches dorées (accents décoratifs uniquement — jamais de texte dans
     --gold-mid / --gold-light, contraste insuffisant sur fond clair).
     --gold-deep est le seul ton d'or utilisé pour du texte : 4,9:1 sur
     --color-fond-clair, conforme AA. */
  --gold-deep: #8a651f;
  --gold-mid: #b8892f;
  --gold-light: #e3c793;

  --ombre-cookie: rgba(0, 0, 0, 0.08);
  --transition-fast: 0.2s ease;
  --transition-medium: 0.35s ease;
}

/* Typographie
   Titres : Cormorant Garamond 600 — romain à empattements, registre joaillerie.
   Texte  : Lato 400/700 — sans-serif lisible en petit corps.
   Cormorant est volontairement réservée aux gros titres : ses déliés sont trop
   fins pour les petites capitales (boutons, figcaption, nav), qui restent en Lato. */
:root {
  --font-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-texte: "Lato", "Helvetica Neue", Arial, sans-serif;
}

* {
  margin: 0;
  font-family: var(--font-texte);
}

/* iOS Safari : empêche l'agrandissement auto du texte en mode paysage
   (le texte grossi débordait des boutons et bandeaux à hauteur fixe) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1,
h2,
h3,
.nom,
/* un <a> dans un titre reçoit sa police du sélecteur `*`, qui l'emporte sur
   l'héritage : sans ces trois sélecteurs, les titres liés repassent en Lato */
h1 a,
h2 a,
h3 a {
  font-family: var(--font-titre);
  /* seule la graisse 600 est chargée : l'imposer évite un faux gras synthétisé */
  font-weight: 600;
}

/* Cormorant a une hauteur d'x faible : à taille égale elle paraît plus petite
   que l'ancienne police, d'où ces tailles explicites. */
h1 {
  font-size: 42px;
  line-height: 1.15;
}

h2 {
  font-size: 30px;
  line-height: 1.2;
}

h3 {
  font-size: 22px;
  line-height: 1.25;
}
img {
  object-fit: contain;
}
.c-principale {
  color: var(--color-principale);
}
.c-noir {
  color: var(--color-noir);
}

a,
button,
.button,
figure img {
  transition:
    transform var(--transition-fast),
    filter var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

.button:hover,
.rendez-vous:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

figure img:hover {
  transform: scale(1.04);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-principale);
  outline-offset: 3px;
}

/* Lien d'évitement : visible uniquement au focus clavier (accessibilité) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 18px;
  background-color: var(--color-principale);
  color: var(--color-blanc-creme);
  font-weight: bold;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

/* Respect de la préférence système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
button {
  border-style: none;
  font-weight: bold;
}
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2%;
  color: var(--color-principale);
  gap: 5px;
}
.nom {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.05em;
  width: max-content;
}
ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 75%;
  /* le padding-left par défaut du navigateur (40px) débordait de la nav sur mobile */
  padding: 0;
}
ul li {
  list-style: none;
}
a {
  text-decoration: none;
  color: var(--color-noir);
}
address {
  text-align: center;
  font-style: normal;
}
.menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  font-size: 15px;
  justify-content: space-evenly;
  width: 80%;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-principale);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.nav-top {
  display: contents;
}
.menu-toggle[aria-expanded="true"] {
  transform: rotate(90deg);
}
.rendez-vous {
  border-style: none;
  background-color: var(--color-principale);
  color: var(--color-blanc-creme);
  border-radius: 20px;
  width: 20%;
  height: 40px;
  padding: 1%;
  font-size: 10px;
}
.image-boutique {
  max-width: 720px;
  max-height: 426px;
}
.preface-bijoux {
  background-color: var(--color-fond-clair);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-evenly;
}
.texte-preface-bijoux {
  display: flex;
  width: 40%;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  padding: 5%;
  gap: 50px;
}
.button {
  width: 45%;
  height: 45px;
  padding: 2%;
  border-radius: 25px;
}
.button-span {
  width: 100%;
}
.bg-principale {
  background-color: var(--color-principale);
  color: var(--color-fond-clair);
}
.bg-blanc {
  background-color: var(--color-blanc-creme);
  border: var(--color-principale) 1px solid;
  color: var(--color-principale);
}
.savoir-faire {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 300px;
}
.details-savoir-faire {
  display: flex;
  width: 95%;
  align-items: flex-start;
  justify-content: space-evenly;
}
.details-savoir-faire span {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}
.details-savoir-faire p {
  padding: 10%;
  color: #282024;
}
/* « CONSEILS PERSONNALISÉS » tient sur deux lignes : réserver la hauteur de
   deux lignes à tous les titres garde les quatre paragraphes alignés. */
.details-savoir-faire h3 {
  min-height: 2.3em;
}
h3 {
  text-align: center;
}
.marque {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  background-color: var(--color-fond-clair);
}
.texte-marque {
      display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5%;
    gap: 50px;
    justify-content: center;
}
.image-marque {
  width: 720px;
  height: auto;
  min-height: 426px;
  object-fit: cover;
}
.texte-marque .button {
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.services {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin: 2%;
  margin-top: 10%;
  margin-bottom: 10%;
}
.texte-services {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 45%;
}
.texte-services .button {
  width: 70%;
}
.fig-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
figure {
  width: 20%;
  display: flex;
  align-items: center;
  color: var(--color-principale);
  font-weight: bold;
  flex-direction: column;
  gap: 25px;
}
figure img {
  width: 140px;
  height: 140px;
  border-radius: 10%;
}
figcaption {
  padding: 2%;
  /* Lato est plus large que l'ancienne police : certains libellés passent
     désormais sur deux lignes, à centrer sous la vignette. */
  text-align: center;
}
.boutique {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  background-color: var(--color-fond-clair);
}
.boutique img {
  width: 720px;
  height: 426px;
}
.boutique-bandeau {
  background-color: var(--color-nuance-pale);
  color: var(--color-noir);
  text-align: center;
  line-height: 1.6;
  padding: 25px 10%;
}
.span-info {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 30px;
}
.span-info-details {
  display: flex;
  width: 45%;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
.span-info-details button {
  width: 100%;
}
.texte-boutique {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2%;
  gap: 35px;
}
footer {
  background-color: var(--color-principale);
  color: var(--color-blanc-creme);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 3% 5%;
}
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.footer-logo .nom {
  font-size: 27px;
}
footer address {
  color: var(--color-blanc-creme);
}
footer nav ul {
  width: auto;
  gap: 30px;
}
footer a {
  color: var(--color-blanc-creme);
}
footer p {
  font-size: 12px;
}
.rs-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: 5% 2%;
}
.legal h1 {
  color: var(--color-principale);
  margin-bottom: 30px;
}
.legal section {
  margin-bottom: 30px;
}
.legal h2 {
  color: var(--color-principale);
  font-size: 20px;
  margin-bottom: 10px;
}
.legal p {
  color: var(--color-noir);
  line-height: 1.6;
}
.avis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 5%;
  margin-bottom: 5%;
  gap: 50px;
}
.avis-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  width: 90%;
}
.avis-item {
  display: block;
  width: 22%;
  min-width: 220px;
  padding: 20px;
  border: 1px solid var(--color-principale);
  border-radius: 10px;
  color: var(--color-noir);
  text-decoration: none;
  box-shadow: 0 2px 6px var(--ombre-cookie);
}
.avis-item:hover {
  box-shadow: 0 4px 14px var(--ombre-cookie);
  transform: translateY(-3px);
}
.avis-item p {
  font-style: italic;
  margin-bottom: 10px;
}
.avis-item span {
  font-weight: bold;
  color: var(--color-principale);
}
.avis .button {
  width: auto;
  padding: 12px 30px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .avis-item {
    width: 100%;
  }
}
[hidden] {
  display: none !important;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-blanc-pur);
  border-top: 1px solid var(--color-bordure-claire);
  padding: 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 -2px 8px var(--ombre-cookie);
}

.cookie-banner__text {
  margin: 0;
  flex: 1 1 300px;
  font-size: 0.9rem;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.9rem;
}

.cookie-btn--primary {
  background: var(--color-cookie-fonce);
  color: var(--color-blanc-pur);
}

.cookie-btn--secondary {
  background: transparent;
  border-color: var(--color-bordure-grise);
}

.cookie-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--color-blanc-pur);
  border-top: 1px solid var(--color-bordure-claire);
  padding: 1.5rem;
  box-shadow: 0 -2px 8px var(--ombre-cookie);
}

.cookie-toggle {
  display: block;
  margin: 0.75rem 0;
}
/* =========================================================RESPONSIVE DESIGN======================================================== */

/* ---------- Tablettes ---------- */

@media screen and (max-width: 1024px) {
  /* NAVIGATION */

  nav {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .nav-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .logo {
    padding: 10px;
  }

  .menu-toggle {
    display: block;
  }

  .menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    order: 3;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    gap: 15px;
    transition:
      max-height var(--transition-medium),
      opacity var(--transition-medium),
      margin-top var(--transition-medium);
  }

  .menu.menu-open {
    max-height: 600px;
    opacity: 1;
    margin-top: 15px;
  }

  ul {
    width: 100%;
    gap: 15px;
  }

  .rendez-vous {
    width: auto;
    min-width: 150px;
    padding: 10px 20px;
  }

  /* PREFACE BIJOUX */

  .preface-bijoux {
    flex-direction: column;
    align-items: center;
  }

  .image-boutique {
    width: 100%;
    max-width: 720px;
    height: auto;
  }

  .texte-preface-bijoux {
    width: 80%;
    padding: 8% 5%;
    gap: 30px;
  }

  .button {
    width: 60%;
  }

  /* SAVOIR-FAIRE */

  .savoir-faire {
    height: auto;
    padding: 60px 20px;
    gap: 40px;
  }

  .details-savoir-faire {
    width: 100%;
    flex-wrap: wrap;
    gap: 30px;
  }

  .details-savoir-faire span {
    width: 40%;
  }

  .details-savoir-faire p {
    padding: 5%;
  }

  /* MARQUE */

  .marque {
    flex-direction: column;
    align-items: center;
  }

  .image-marque {
    width: 100%;
    max-width: 720px;
    height: auto;
  }

  .texte-marque {
    width: 80%;
    padding: 8% 5%;
    gap: 30px;
  }

  .texte-marque .button {
    width: 60%;
  }

  /* SERVICES */

  .services {
    flex-direction: column;
    gap: 50px;
    margin-top: 8%;
    margin-bottom: 8%;
  }

  .texte-services {
    width: 80%;
  }

  .texte-services .button {
    width: 60%;
  }

  .fig-block {
    width: 90%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }

  figure {
    width: 40%;
  }

  /* BOUTIQUE */

  .boutique {
    flex-direction: column;
    align-items: center;
  }

  .boutique img {
    width: 100%;
    max-width: 720px;
    height: auto;
  }

  .texte-boutique {
    width: 90%;
    padding: 5%;
  }

  .span-info {
    height: auto;
    padding: 20px 0;
    gap: 30px;
  }
}

/* ---------- Tablette moyenne (entre tablette et mobile) ---------- */

@media screen and (max-width: 900px) and (min-width: 769px) {
  .details-savoir-faire span,
  figure {
    width: 45%;
  }
}

/* =========================================================MOBILE========================================================= */

@media screen and (max-width: 768px) {
  /* GLOBAL */

  body {
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  button,
  .btnrdv,
  a {
    min-height: 40px;
  }

  /* NAVIGATION */

  .nom {
    font-size: 24px;
  }

  .rendez-vous {
    width: auto;
    min-width: 180px;
    height: 42px;
    padding: 10px 20px;
    font-size: 12px;
  }

  /* PREFACE */

  .preface-bijoux {
    flex-direction: column;
  }

  .image-boutique {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
  }

  .texte-preface-bijoux {
    width: auto;
    padding: 50px 25px;
    gap: 25px;
    align-items: center;
    text-align: center;
  }

  .button {
    width: 100%;
    max-width: 300px;
    height: 45px;
  }

  /* SAVOIR-FAIRE */

  .savoir-faire {
    height: auto;
    padding: 60px 20px;
    gap: 40px;
    text-align: center;
  }

  .details-savoir-faire {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }

  .details-savoir-faire span {
    width: 90%;
  }

  .details-savoir-faire p {
    padding: 10px;
  }

  /* MARQUE */

  .marque {
    flex-direction: column;
  }

  .image-marque {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .texte-marque {
    width: auto;
    padding: 50px 25px;
    gap: 25px;
    align-items: center;
    text-align: center;
  }

  .texte-marque .button {
    width: 100%;
    max-width: 300px;
  }

  /* SERVICES */

  .services {
    flex-direction: column;
    margin: 60px 20px;
    gap: 50px;
  }

  .texte-services {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .texte-services .button {
    width: 100%;
    max-width: 300px;
  }

  .fig-block {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  figure {
    width: 80%;
  }

  figure img {
    width: 130px;
    height: 130px;
  }

  /* BOUTIQUE */

  .boutique {
    flex-direction: column;
  }

  .boutique img {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .texte-boutique {
    width: auto;
    padding: 40px 25px;
    gap: 25px;
    align-items: center;
    text-align: center;
  }

  .span-info {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .span-info-details {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .span-info-details button {
    width: 100%;
    max-width: 300px;
  }

  /* FOOTER */

  footer {
    padding: 40px 20px;
    text-align: center;
  }

  footer nav {
    width: 100%;
  }

  footer nav ul {
    width: 100%;
    gap: 15px;
  }

  .rs-footer {
    justify-content: center;
  }

  /* PAGES LEGALES */

  .legal {
    width: auto;
    padding: 40px 25px;
  }

  .legal h1 {
    font-size: 28px;
  }

  .legal h2 {
    font-size: 19px;
  }

  /* COOKIE */

  .cookie-banner {
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner__text {
    flex: none;
    font-size: 0.85rem;
  }

  .cookie-banner__actions {
    width: 100%;
    flex-direction: column;
  }

  .cookie-btn {
    width: 100%;
  }

  .cookie-panel {
    padding: 1rem;
  }
}

/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media screen and (max-width: 480px) {
  .nom {
    font-size: 21px;
  }

  .texte-preface-bijoux,
  .texte-marque,
  .texte-boutique {
    padding: 40px 20px;
  }

  .button {
    width: 100%;
  }

  .details-savoir-faire span {
    width: 100%;
  }

  figure {
    width: 90%;
  }

  .legal {
    padding: 30px 20px;
  }

  .legal h1 {
    font-size: 24px;
  }

  .cookie-banner {
    font-size: 14px;
  }
}

/* =========================================================PAGE LA MARQUE=========================================================
   Réutilise les patterns existants (.texte-marque, .image-marque, .fig-block,
   .texte-boutique, .span-info, .button) : seuls les conteneurs sont nouveaux,
   aucune règle existante n'est modifiée. */

.marque-hero,
.marque-passion,
.marque-reparation,
.marque-surmesure {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.marque-hero,
.marque-reparation,
.marque-inseparables {
  background-color: var(--color-fond-clair);
}

.marque-hero h1 {
  font-size: 40px;
}

/* Colonnes equilibrees : moitie texte, moitie image */
.marque-hero .texte-marque,
.marque-passion .texte-marque,
.marque-reparation .texte-marque,
.marque-surmesure .texte-marque {
  width: 50%;
  box-sizing: border-box;
}

.marque-hero .image-marque,
.marque-passion .image-marque,
.marque-reparation .image-marque,
.marque-surmesure .image-marque {
  width: 50%;
  max-width: 720px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
}

/* Les liens stylés en bouton doivent se comporter comme les <button> */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  width: 100%;
}

.marque-hero .button-span,
.marque-reparation .button-span,
.marque-surmesure .button-span,
.marque-inseparables .button-span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

/* Boutons de meme gabarit cote a cote (le .button global est en % + padding) */
.marque-hero .button-span .button,
.marque-reparation .button-span .button,
.marque-surmesure .button-span .button,
.marque-inseparables .button-span .button {
  width: auto;
  min-width: 235px;
  padding: 0 22px;
  box-sizing: border-box;
}

.marque-collections {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 5% 5% 6%;
}

.marque-intro {
  max-width: 800px;
  text-align: center;
  line-height: 1.6;
}

.marque-collections .fig-block {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px;
}

.marque-collections figure {
  width: 16%;
  min-width: 150px;
  text-align: center;
}

.marque-inseparables {
  display: flex;
  justify-content: center;
}

.marque-inseparables .texte-marque {
  max-width: 900px;
}

.marque-conclusion {
  display: flex;
  justify-content: center;
  padding: 3% 0 5%;
}

.marque-conclusion .texte-boutique {
  max-width: 900px;
  padding: 2% 5%;
}

.marque-h3 {
  text-align: left;
  margin-top: 10px;
}

.marque-hero p,
.marque-passion p,
.marque-reparation p,
.marque-surmesure p,
.marque-inseparables p,
.marque-conclusion p {
  line-height: 1.6;
}

@media screen and (max-width: 1024px) {
  .marque-hero,
  .marque-passion,
  .marque-reparation,
  .marque-surmesure {
    flex-direction: column;
    align-items: center;
  }

  .marque-hero h1 {
    font-size: 34px;
  }

  .marque-hero .texte-marque,
  .marque-passion .texte-marque,
  .marque-reparation .texte-marque,
  .marque-surmesure .texte-marque {
    width: 80%;
  }

  .marque-hero .image-marque,
  .marque-passion .image-marque,
  .marque-reparation .image-marque,
  .marque-surmesure .image-marque {
    width: 100%;
    max-width: 720px;
    max-height: 420px;
  }

  .marque-collections figure {
    width: 40%;
  }
}

@media screen and (max-width: 768px) {
  .marque-hero h1 {
    font-size: 29px;
    text-align: center;
  }

  .marque-hero .texte-marque,
  .marque-passion .texte-marque,
  .marque-reparation .texte-marque,
  .marque-surmesure .texte-marque {
    width: auto;
  }

  .marque-hero .image-marque,
  .marque-passion .image-marque,
  .marque-reparation .image-marque,
  .marque-surmesure .image-marque {
    max-width: none;
    max-height: 300px;
  }

  .marque-collections {
    padding: 50px 20px;
    gap: 30px;
  }

  .marque-collections .fig-block {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .marque-collections figure {
    width: 70%;
  }

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

  .marque-hero .button-span,
  .marque-reparation .button-span,
  .marque-surmesure .button-span,
  .marque-inseparables .button-span {
    flex-direction: column;
    align-items: center;
  }

  a.button {
    width: 100%;
    max-width: 300px;
  }

  .marque-conclusion .texte-boutique {
    padding: 40px 20px;
  }
}

@media screen and (max-width: 480px) {
  .marque-collections figure {
    width: 100%;
  }
}

/* Le panneau cookies est un dialogue, pas une section de la page :
   son titre ne doit pas entrer dans la hiérarchie H1/H2 du document. */
.cookie-panel__title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

/* =========================================================TYPOGRAPHIE RESPONSIVE=========================================================
   Tailles de titres recalibrées pour Cormorant Garamond (hauteur d'x faible).
   Placé en fin de fichier pour passer après les blocs média existants ;
   les règles plus spécifiques (.marque-hero h1, .legal h2) restent prioritaires. */

@media screen and (max-width: 1024px) {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 27px;
  }
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 31px;
  }

  h2 {
    font-size: 25px;
  }

  h3 {
    font-size: 20px;
  }

  .nom {
    font-size: 27px;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 27px;
  }

  h2 {
    font-size: 23px;
  }

  .nom {
    font-size: 23px;
  }
}

/* =========================================================ACCENTS DE COULEUR=========================================================
   Démonstration des variables de couleur. Chaque bloc est indépendant :
   supprimer celui qui ne convient pas suffit à revenir en arrière. */

/* Survol des liens du contenu : variante foncée de la couleur principale ;
   la couleur n'est jamais le seul indice, ces liens sont déjà en gras. */
main p a:hover,
main p a:focus-visible,
main h2 a:hover,
main h2 a:focus-visible,
main h3 a:hover,
main h3 a:focus-visible,
.savoir-faire h3 a:hover,
.savoir-faire h3 a:focus-visible {
  color: var(--color-principale-fonce);
}

/* Filet décoratif doré sous les titres de section centrés.
   Aucun texte dessus : simple ornement. */
.marque-collections h2::after,
.marque-conclusion h2::after,
.savoir-faire h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(
    90deg,
    var(--gold-mid),
    var(--gold-light),
    var(--gold-mid)
  );
}

.marque-conclusion h2::after {
  margin-left: 0;
}

/* =========================================================PAGE CRÉATION (SUR-MESURE)=========================================================
   Réutilise les patterns existants (.texte-marque, .image-marque, .button,
   .button-span, .span-info, .texte-boutique) : seuls les conteneurs sont
   nouveaux, aucune règle existante n'est modifiée. Calqué sur le bloc
   « PAGE LA MARQUE » ci-dessus. */

.surmesure-hero,
.surmesure-matieres,
.surmesure-etapes,
.surmesure-famille,
.surmesure-gravure,
.surmesure-fantaisie {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.surmesure-hero,
.surmesure-etapes,
.surmesure-fantaisie {
  background-color: var(--color-fond-clair);
}

.surmesure-hero h1 {
  font-size: 40px;
}

/* Colonnes équilibrées : moitié texte, moitié image */
.surmesure-hero .texte-marque,
.surmesure-matieres .texte-marque,
.surmesure-etapes .texte-marque,
.surmesure-famille .texte-marque,
.surmesure-gravure .texte-marque,
.surmesure-fantaisie .texte-marque {
  width: 50%;
  box-sizing: border-box;
}

.surmesure-hero .image-marque,
.surmesure-matieres .image-marque,
.surmesure-etapes .image-marque,
.surmesure-famille .image-marque,
.surmesure-gravure .image-marque,
.surmesure-fantaisie .image-marque {
  width: 50%;
  max-width: 720px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
}

.surmesure-hero .button-span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.surmesure-hero .button-span .button {
  width: auto;
  min-width: 235px;
  padding: 0 22px;
  box-sizing: border-box;
}

/* Étapes du déroulé : liste numérotée, espacement lisible */
.surmesure-etapes ol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  padding-left: 0;
  counter-reset: etape;
}

.surmesure-etapes li {
  position: relative;
  padding-left: 44px;
  line-height: 1.6;
}

.surmesure-etapes li::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold-mid);
  color: var(--gold-deep);
  font-weight: bold;
  font-size: 12px;
}

.surmesure-conclusion {
  display: flex;
  justify-content: center;
  padding: 3% 0 5%;
}

.surmesure-conclusion .texte-boutique {
  max-width: 900px;
  padding: 2% 5%;
}

.surmesure-hero p,
.surmesure-matieres p,
.surmesure-etapes p,
.surmesure-famille p,
.surmesure-gravure p,
.surmesure-fantaisie p,
.surmesure-conclusion p {
  line-height: 1.6;
}

@media screen and (max-width: 1024px) {
  .surmesure-hero,
  .surmesure-matieres,
  .surmesure-etapes,
  .surmesure-famille,
  .surmesure-gravure,
  .surmesure-fantaisie {
    flex-direction: column;
    align-items: center;
  }

  .surmesure-hero h1 {
    font-size: 34px;
  }

  .surmesure-hero .texte-marque,
  .surmesure-matieres .texte-marque,
  .surmesure-etapes .texte-marque,
  .surmesure-famille .texte-marque,
  .surmesure-gravure .texte-marque,
  .surmesure-fantaisie .texte-marque {
    width: 80%;
  }

  .surmesure-hero .image-marque,
  .surmesure-matieres .image-marque,
  .surmesure-etapes .image-marque,
  .surmesure-famille .image-marque,
  .surmesure-gravure .image-marque,
  .surmesure-fantaisie .image-marque {
    width: 100%;
    max-width: 720px;
    max-height: 420px;
  }
}

@media screen and (max-width: 768px) {
  .surmesure-hero h1 {
    font-size: 29px;
    text-align: center;
  }

  .surmesure-hero .texte-marque,
  .surmesure-matieres .texte-marque,
  .surmesure-etapes .texte-marque,
  .surmesure-famille .texte-marque,
  .surmesure-gravure .texte-marque,
  .surmesure-fantaisie .texte-marque {
    width: auto;
  }

  .surmesure-hero .image-marque,
  .surmesure-matieres .image-marque,
  .surmesure-etapes .image-marque,
  .surmesure-famille .image-marque,
  .surmesure-gravure .image-marque,
  .surmesure-fantaisie .image-marque {
    max-width: none;
    max-height: 300px;
  }

  .surmesure-hero .button-span {
    flex-direction: column;
    align-items: center;
  }

  .surmesure-conclusion .texte-boutique {
    padding: 40px 20px;
  }
}

/* Filet décoratif sous le titre de la section rendez-vous, comme sur la page Marque */
.surmesure-conclusion h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 14px 0 0;
  background: linear-gradient(
    90deg,
    var(--gold-mid),
    var(--gold-light),
    var(--gold-mid)
  );
}

/* =========================================================ACCENTS OR=========================================================
   Touches dorées ajoutées le 15/09/2026, validées sur maquette avant
   généralisation. Chaque règle est indépendante et n'affecte que les
   éléments qui portent la classe/le sélecteur concerné : rien n'est modifié
   ailleurs. Rappel contraste : --gold-mid et --gold-light ne portent jamais
   de texte, seul --gold-deep (4,9:1 sur --color-fond-clair) le peut. */

/* Eyebrow doré au-dessus du H1 des pages héros (accueil, marque, création) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: -32px;
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.eyebrow::after {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-mid), transparent);
}

/* Reflet doré au survol des boutons principaux (CTA rendez-vous) */
.button.bg-principale,
.rendez-vous {
  position: relative;
  overflow: hidden;
}

.button.bg-principale::after,
.rendez-vous::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(227, 199, 147, 0.85),
    transparent
  );
  transform: skewX(-20deg);
  transition: left var(--transition-medium);
}

.button.bg-principale:hover::after,
.rendez-vous:hover::after {
  left: 130%;
}

/* (Les badges numérotés de « Notre savoir-faire » ont été remplacés le
   15/09/2026 par des illustrations au trait : voir « ACCUEIL — BANDEAUX ».) */

/* CAPITALES VISUELLES — le HTML garde la casse normale (lecteurs d'écran, extraits Google) */
.maj {
  text-transform: uppercase;
}

/* PAGE CGV */
.legal p + p {
  margin-top: 10px;
}
.legal .legal-maj {
  margin: -20px 0 30px;
  font-style: italic;
}
.legal p a {
  font-weight: bold;
}
.legal h3 {
  margin: 20px 0 8px;
  font-size: 18px;
  text-align: left;
}
.legal .legal-liste {
  display: block;
  width: auto;
  margin: 10px 0;
  padding-left: 20px;
}
.legal .legal-liste li {
  list-style: disc;
  color: var(--color-noir);
  font-size: inherit;
  line-height: 1.6;
}
.legal .legal-liste li + li {
  margin-top: 6px;
}
/* Encadré légal obligatoire (garantie de conformité, art. D.211-2) */
.legal .encadre-legal {
  margin: 15px 0;
  padding: 20px;
  border: 1px solid var(--color-principale);
  border-radius: 8px;
  background-color: var(--color-blanc-pur);
  font-size: 14px;
}
.legal .encadre-legal p + p {
  margin-top: 8px;
}

/* Lien « Gérer les cookies » du pied de page (bouton stylé en lien) */
footer .lien-cookies {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-blanc-creme);
  font: inherit;
  cursor: pointer;
}
footer .lien-cookies:focus-visible {
  outline-color: var(--color-blanc-creme);
}

/* =========================================================PAGE RÉPARATION=========================================================
   Calqué sur le bloc « PAGE CRÉATION (SUR-MESURE) » : mêmes patterns
   (.texte-marque, .image-marque, .texte-boutique, .span-info), nouveaux
   conteneurs .reparation-* uniquement. */

.reparation-hero,
.reparation-matieres,
.reparation-courantes,
.reparation-etapes {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.reparation-hero,
.reparation-courantes,
.reparation-etapes {
  background-color: var(--color-fond-clair);
}

.reparation-hero h1 {
  font-size: 40px;
}

.reparation-hero .texte-marque,
.reparation-matieres .texte-marque,
.reparation-courantes .texte-marque,
.reparation-etapes .texte-marque {
  width: 50%;
  box-sizing: border-box;
}

.reparation-hero .image-marque,
.reparation-matieres .image-marque,
.reparation-courantes .image-marque,
.reparation-etapes .image-marque {
  width: 50%;
  max-width: 720px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
}

.reparation-hero .button-span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.reparation-hero .button-span .button {
  width: auto;
  min-width: 235px;
  padding: 0 22px;
  box-sizing: border-box;
}

.reparation-hero p,
.reparation-matieres p,
.reparation-courantes p,
.reparation-etapes p,
.reparation-tarifs p,
.reparation-conclusion p {
  line-height: 1.6;
}

/* Réparations courantes : liste à puces dorées (décor, jamais de texte) */
.reparation-courantes ul {
  display: flex;
  flex-direction: column;
  /* annule le ul global (menu) : centrage et largeur 75 % */
  align-items: stretch;
  width: 100%;
  text-align: left;
  gap: 12px;
  list-style: none;
  padding-left: 0;
}

.reparation-courantes li {
  position: relative;
  padding-left: 22px;
  line-height: 1.6;
}

.reparation-courantes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gold-mid);
}

/* Déroulé : mêmes badges numérotés que la page Création */
.reparation-etapes ol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  padding-left: 0;
  counter-reset: etape;
}

.reparation-etapes li {
  position: relative;
  padding-left: 44px;
  line-height: 1.6;
}

.reparation-etapes li::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold-mid);
  color: var(--gold-deep);
  font-weight: bold;
  font-size: 12px;
}

/* Tarifs */
.reparation-tarifs,
.reparation-conclusion {
  display: flex;
  justify-content: center;
  padding: 3% 0 5%;
}

.reparation-tarifs .texte-boutique,
.reparation-conclusion .texte-boutique {
  width: 100%;
  max-width: 900px;
  padding: 2% 5%;
  box-sizing: border-box;
}

.reparation-tarifs h2::after,
.reparation-conclusion h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 14px 0 0;
  background: linear-gradient(
    90deg,
    var(--gold-mid),
    var(--gold-light),
    var(--gold-mid)
  );
}

.tableau-tarifs {
  overflow-x: auto;
  margin-top: 24px;
}

.tableau-tarifs table {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-noir);
}

.tableau-tarifs th,
.tableau-tarifs td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--gold-light);
  text-align: left;
  line-height: 1.4;
}

.tableau-tarifs thead th {
  border-bottom: 2px solid var(--gold-mid);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tableau-tarifs tbody th {
  font-weight: normal;
}

.tableau-tarifs td {
  text-align: right;
  white-space: nowrap;
  font-weight: bold;
}

.tableau-tarifs thead th:last-child {
  text-align: right;
}

.note-tarifs {
  margin-top: 16px;
  font-size: 14px;
  font-style: italic;
}

/* Masqué à l'écran, lu par les lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media screen and (max-width: 1024px) {
  .reparation-hero,
  .reparation-matieres,
  .reparation-courantes,
  .reparation-etapes {
    flex-direction: column;
    align-items: center;
  }

  .reparation-hero h1 {
    font-size: 34px;
  }

  .reparation-hero .texte-marque,
  .reparation-matieres .texte-marque,
  .reparation-courantes .texte-marque,
  .reparation-etapes .texte-marque {
    width: 80%;
  }

  .reparation-hero .image-marque,
  .reparation-matieres .image-marque,
  .reparation-courantes .image-marque,
  .reparation-etapes .image-marque {
    width: 100%;
    max-width: 720px;
    max-height: 420px;
  }
}

@media screen and (max-width: 768px) {
  .reparation-hero h1 {
    font-size: 29px;
    text-align: center;
  }

  .reparation-hero .texte-marque,
  .reparation-matieres .texte-marque,
  .reparation-courantes .texte-marque,
  .reparation-etapes .texte-marque {
    width: auto;
  }

  .reparation-hero .image-marque,
  .reparation-matieres .image-marque,
  .reparation-courantes .image-marque,
  .reparation-etapes .image-marque {
    max-width: none;
    max-height: 300px;
  }

  .reparation-hero .button-span {
    flex-direction: column;
    align-items: center;
  }

  .reparation-tarifs .texte-boutique,
  .reparation-conclusion .texte-boutique {
    padding: 40px 20px;
  }
}

/* =========================================================PAGE ATELIERS BIJOUX=========================================================
   Calqué sur « PAGE RÉPARATION » (conteneurs .atelier-*), avec en plus une
   rangée de 3 cartes « Pour qui ? ». Rappel : les listes de contenu doivent
   annuler la règle globale `ul` pensée pour le menu. */

.atelier-hero,
.atelier-creations,
.atelier-etapes {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.atelier-hero,
.atelier-etapes,
.atelier-reserver {
  background-color: var(--color-fond-clair);
}

.atelier-hero h1 {
  font-size: 40px;
}

.atelier-hero .texte-marque,
.atelier-creations .texte-marque,
.atelier-etapes .texte-marque {
  width: 50%;
  box-sizing: border-box;
}

.atelier-hero .image-marque,
.atelier-creations .image-marque,
.atelier-etapes .image-marque {
  width: 50%;
  max-width: 720px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
}

.atelier-hero .button-span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.atelier-hero .button-span .button {
  width: auto;
  min-width: 235px;
  padding: 0 22px;
  box-sizing: border-box;
}

.atelier-hero p,
.atelier-publics p,
.atelier-creations p,
.atelier-etapes p,
.atelier-lieu p,
.atelier-reserver p {
  line-height: 1.6;
}

/* Sections centrées : pour qui, lieu, réservation */
.atelier-publics,
.atelier-lieu,
.atelier-reserver {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3% 0 5%;
}

.atelier-publics .texte-boutique,
.atelier-lieu .texte-boutique,
.atelier-reserver .texte-boutique {
  width: 100%;
  max-width: 900px;
  padding: 2% 5%;
  box-sizing: border-box;
}

.atelier-publics h2::after,
.atelier-lieu h2::after,
.atelier-reserver h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 14px 0 0;
  background: linear-gradient(
    90deg,
    var(--gold-mid),
    var(--gold-light),
    var(--gold-mid)
  );
}

/* Cartes « Pour qui ? » */
.atelier-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1100px;
  padding: 0 5%;
  box-sizing: border-box;
  align-items: stretch;
}

.atelier-carte {
  padding: 28px 24px;
  background-color: var(--color-fond-clair);
  border-top: 2px solid var(--gold-mid);
  text-align: left;
}

.atelier-carte h3 {
  margin-bottom: 10px;
}

/* Listes à puces dorées (créations, lieux) */
.atelier-creations ul,
.atelier-lieux {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  text-align: left;
  gap: 12px;
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
}

.atelier-creations li,
.atelier-lieux li {
  position: relative;
  padding-left: 22px;
  line-height: 1.6;
}

.atelier-creations li::before,
.atelier-lieux li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gold-mid);
}

/* Déroulé : mêmes badges numérotés que les pages Création et Réparation */
.atelier-etapes ol {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  padding-left: 0;
  counter-reset: etape;
}

.atelier-etapes li {
  position: relative;
  padding-left: 44px;
  line-height: 1.6;
}

.atelier-etapes li::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold-mid);
  color: var(--gold-deep);
  font-weight: bold;
  font-size: 12px;
}

.atelier-contact {
  margin: 18px 0;
  font-size: 18px;
}

.atelier-contact span {
  margin: 0 10px;
}

@media screen and (max-width: 1024px) {
  .atelier-hero,
  .atelier-creations,
  .atelier-etapes {
    flex-direction: column;
    align-items: center;
  }

  .atelier-hero h1 {
    font-size: 34px;
  }

  .atelier-hero .texte-marque,
  .atelier-creations .texte-marque,
  .atelier-etapes .texte-marque {
    width: 80%;
  }

  .atelier-hero .image-marque,
  .atelier-creations .image-marque,
  .atelier-etapes .image-marque {
    width: 100%;
    max-width: 720px;
    max-height: 420px;
  }

  .atelier-cartes {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
}

@media screen and (max-width: 768px) {
  .atelier-hero h1 {
    font-size: 29px;
    text-align: center;
  }

  .atelier-hero .texte-marque,
  .atelier-creations .texte-marque,
  .atelier-etapes .texte-marque {
    width: auto;
  }

  .atelier-hero .image-marque,
  .atelier-creations .image-marque,
  .atelier-etapes .image-marque {
    max-width: none;
    max-height: 300px;
  }

  .atelier-hero .button-span {
    flex-direction: column;
    align-items: center;
  }

  .atelier-publics .texte-boutique,
  .atelier-lieu .texte-boutique,
  .atelier-reserver .texte-boutique {
    padding: 40px 20px;
  }

  .atelier-contact span {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

/* =========================================================ACCUEIL — BANDEAUX & ILLUSTRATIONS=========================================================
   Ajouté le 15/09/2026 après maquette validée (Claude outputs/maquette-accueil.html) :
   bandeau de confiance sous le hero, illustrations SVG au trait dans
   « Notre savoir-faire », bandeau photo pleine largeur avant « Votre boutique ». */

/* 1. Bandeau de confiance (annule la règle globale `ul` du menu) */
.bandeau-confiance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 34px;
  width: 100%;
  margin: 0;
  padding: 18px 5%;
  box-sizing: border-box;
  list-style: none;
  background-color: var(--color-blanc-creme);
  border-top: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-light);
}

.bandeau-confiance li {
  position: relative;
  color: var(--color-noir);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* losange doré entre deux engagements (décor, jamais de texte) */
.bandeau-confiance li + li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 6px;
  height: 6px;
  background-color: var(--gold-mid);
  transform: translateY(-50%) rotate(45deg);
}

/* 2. Illustrations au trait de « Notre savoir-faire » */
.icone-savoir {
  display: block;
  margin: 0 auto 12px;
  color: var(--gold-deep);
}

@media screen and (min-width: 1025px) {
  .savoir-faire {
    height: auto;
    padding: 40px 0 10px;
  }
}

/* 3. Bandeau photo pleine largeur */
.bandeau-photo {
  position: relative;
  height: 380px;
  overflow: hidden;
}

.bandeau-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* voile sombre : garantit le contraste du texte blanc quelle que soit la photo */
.bandeau-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(40, 32, 36, 0.72),
    rgba(40, 32, 36, 0.35)
  );
}

/* 18/09/2026 — bandeau "Création sur-mesure" (marque.html) : nouvelle photo
   (main + trois bracelets) trop resserrée par le recadrage plein cadre
   standard et voile jugé trop sombre par Equi. Réglage propre à ce bandeau
   uniquement (les autres gardent le voile et le cadrage par défaut).
   Scopé via la classe .bandeau-photo--sur-mesure (Equi ayant retiré
   l'aria-label du HTML, qui créait un landmark inutile pour les lecteurs
   d'écran sur une section purement illustrative).
   Voile totalement retiré (demande d'Equi : photo sans filtre) ; lisibilité
   du texte assurée par une ombre portée plutôt qu'un voile. Un léger
   assombrissement local a ensuite été redemandé, uniquement côté texte.
   Recadrage source retiré le 18/09/2026 (demande "dézoomer un maximum") :
   la photo complète 2400×1920 est utilisée telle quelle (object-fit: cover
   ne montre de toute façon que ~475 px de hauteur dans ce bandeau
   1920×380, quel que soit le pré-recadrage — la photo entière donne juste
   plus de marge à object-position et évite toute perte de données
   inutile). */
.bandeau-photo--sur-mesure img {
  object-position: center 35%;
}

.bandeau-photo--sur-mesure::after {
  background: linear-gradient(
    90deg,
    rgba(40, 32, 36, 0.45),
    rgba(40, 32, 36, 0) 42%
  );
}

.bandeau-photo--sur-mesure .bandeau-photo__citation,
.bandeau-photo--sur-mesure .bandeau-photo__lieu {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* 18/09/2026 — bandeau "sertissage" (accueil) : le voile ne doit assombrir
   que le côté gauche, sous le texte. Fondu long en 6 paliers pour qu'aucune
   limite ne se voie et que la bague, les diamants et la main droite restent
   en pleine lumière. Les autres bandeaux gardent le voile par défaut. */
.bandeau-photo--sertissage::after {
  background: linear-gradient(
    90deg,
    rgba(40, 32, 36, 0.56) 0%,
    rgba(40, 32, 36, 0.48) 20%,
    rgba(40, 32, 36, 0.31) 40%,
    rgba(40, 32, 36, 0.14) 56%,
    rgba(40, 32, 36, 0.04) 70%,
    rgba(40, 32, 36, 0) 80%
  );
}

/* voile éclairci : l'ombre portée prend le relais pour la lisibilité
   (même principe que le bandeau sur-mesure) */
.bandeau-photo--sertissage .bandeau-photo__citation,
.bandeau-photo--sertissage .bandeau-photo__lieu {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* mobile : le texte du bandeau est centré, le voile redevient uniforme */
@media screen and (max-width: 768px) {
  .bandeau-photo--sertissage::after {
    background: rgba(40, 32, 36, 0.46);
  }
}

.bandeau-photo__texte {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 0 8%;
}

.bandeau-photo__citation {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  color: var(--color-blanc-pur);
}

.bandeau-photo__lieu {
  color: var(--gold-light);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.bandeau-photo .button {
  width: auto;
  margin-top: 10px;
  padding: 0 26px;
}

/* dès que la ligne se replie, les losanges tomberaient en début de ligne */
@media screen and (max-width: 1024px) {
  .bandeau-confiance li + li::before {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .bandeau-confiance {
    flex-direction: column;
    gap: 8px;
  }

  .bandeau-confiance li {
    text-align: center;
  }

  .bandeau-photo {
    height: 320px;
  }

  .bandeau-photo__texte {
    align-items: center;
    text-align: center;
  }

  .bandeau-photo__citation {
    font-size: 32px;
  }
}

/* (15/09/2026) Ces composants sont aussi utilisés sur marque, surmesure,
   reparation et atelierbijoux, sans règle supplémentaire. */

/* =========================================================HERO DEVANTURE=========================================================
   15/09/2026 — 1) le hero de l'accueil devient une photo pleine largeur de la
   devanture, texte posé sur un voile sombre (même principe que .bandeau-photo).
   (Le fondu des photos de sections, essayé le même jour, a été retiré.) */

/* 1. Hero devanture (accueil) */
.preface-bijoux.hero-devanture {
  position: relative;
  flex-direction: row;
  /* 18/09/2026 : le bloc texte descend pour se poser sur la vitre,
     sous l'enseigne PREFACE. */
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 640px;
  overflow: hidden;
  background-color: #282024;
}

.hero-devanture .image-boutique {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  /* 18/09/2026 : cadrage remonté — on voit plus le haut (arche fleurie,
     enseigne) et moins le bas (trottoir / table de présentation). */
  object-position: center top;
  /* Photo éclaircie (15/09/2026, jugée trop sombre) */
  filter: brightness(1.15) saturate(1.05);
}

/* 18/09/2026 : le voile ne couvre plus toute la photo, il est limité au bloc
   de texte (pseudo-élément ci-dessous) pour laisser la devanture visible. */

.hero-devanture .texte-preface-bijoux {
  position: relative;
  z-index: 1;
  width: 46%;
  max-width: 640px;
  padding: 40px 5% 52px;
  gap: 26px;
  /* 18/09/2026 : le bloc est décalé vers la droite pour se poser dans la
     vitrine plutôt que sur le mur / les fleurs du bord gauche. */
  margin-left: 16%;
}

/* Voile sombre uniquement derrière le texte : bords fondus pour qu'aucun
   rectangle ne se dessine sur la photo. */
.hero-devanture .texte-preface-bijoux::before {
  content: "";
  position: absolute;
  top: -80px;
  bottom: -80px;
  left: -280px;
  right: -280px;
  z-index: -1;
  /* 18/09/2026 : fondu allongé des deux côtés (le voile déborde beaucoup plus
     du bloc) pour qu'il se dilue dans la vitrine au lieu de s'arrêter net. */
  background: linear-gradient(
    90deg,
    rgba(40, 32, 36, 0) 0%,
    rgba(40, 32, 36, 0.36) 140px,
    rgba(40, 32, 36, 0.7) 310px,
    rgba(40, 32, 36, 0.7) calc(100% - 330px),
    rgba(40, 32, 36, 0.34) calc(100% - 150px),
    rgba(40, 32, 36, 0) 100%
  );
  /* fondu haut/bas allongé : aucun bord net sur la photo */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 28%,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 28%,
    #000 72%,
    transparent 100%
  );
}

.hero-devanture h1 {
  color: var(--color-blanc-pur);
}

/* Ombre légère : garde le texte blanc lisible sur le voile plus clair */
.hero-devanture h1,
.hero-devanture .texte-preface-bijoux p {
  text-shadow:
    0 1px 3px rgba(40, 32, 36, 0.6),
    0 2px 16px rgba(40, 32, 36, 0.6);
}

.hero-devanture .texte-preface-bijoux p,
.hero-devanture .texte-preface-bijoux p a {
  color: var(--color-blanc-creme);
}

.hero-devanture .eyebrow {
  margin-bottom: -14px;
  color: var(--gold-light);
}

.hero-devanture .eyebrow::after {
  background: linear-gradient(90deg, var(--gold-light), transparent);
}

@media screen and (max-width: 1024px) {
  .preface-bijoux.hero-devanture {
    min-height: 560px;
  }

  .hero-devanture .texte-preface-bijoux {
    width: 72%;
    margin-left: 8%;
  }
}

@media screen and (max-width: 768px) {
  .preface-bijoux.hero-devanture {
    flex-direction: column;
    min-height: 0;
  }

  .hero-devanture::after {
    background: rgba(40, 32, 36, 0.64);
  }

  .hero-devanture .texte-preface-bijoux {
    width: auto;
    padding: 64px 20px;
    align-items: center;
    text-align: center;
  }
}

/* LOGO IMAGE DANS LA NAV (15/09/2026) — remplace le texte « PREFACE BIJOUX »
   de la nav (le pied de page garde le texte). SVG vectoriel, contre-formes
   transparentes : lisible sur n'importe quel fond. */
.logo-img {
  display: block;
  width: 180px;
  height: auto;
}

@media screen and (max-width: 480px) {
  .logo-img {
    width: 150px;
  }
}

/* OFFRES : POP-UP & BANDEAU SOLDES (15/09/2026) — éléments créés par
   js/offres.js à partir de data/offres.json. */
.bandeau-soldes {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 56px;
  background: var(--color-principale);
  color: var(--color-blanc-creme);
  border-bottom: 1px solid var(--gold-light);
}

.bandeau-soldes__texte {
  margin: 0;
  font-family: var(--font-texte);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.bandeau-soldes__fermer,
.offres-modale__fermer {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--transition-fast);
}

.bandeau-soldes__fermer:hover,
.bandeau-soldes__fermer:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.bandeau-soldes__fermer:focus-visible,
.offres-modale__fermer:focus-visible,
.offres-modale__cta:focus-visible {
  outline: 2px solid var(--gold-mid);
  outline-offset: 2px;
}

.offres-modale {
  width: calc(100% - 32px);
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  margin: auto;
  padding: 40px 32px 32px;
  border: none;
  border-top: 3px solid var(--gold-mid);
  border-radius: 4px;
  background: var(--color-blanc-creme);
  color: var(--color-noir);
  box-shadow: 0 18px 48px rgba(40, 32, 36, 0.25);
  text-align: center;
  animation: offres-apparition var(--transition-medium);
}

.offres-modale::backdrop {
  background: rgba(40, 32, 36, 0.55);
}

.offres-modale__fermer {
  top: 8px;
  right: 8px;
  transform: none;
  color: var(--color-noir);
}

.offres-modale__fermer:hover {
  background: var(--color-fond-clair);
}

.offres-modale__titre {
  margin: 0 0 20px;
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--color-noir);
}

/* Liste de contenu : neutralise la règle globale des ul du menu. */
.offres-modale__liste {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  text-align: center;
}

.offres-modale__offre {
  padding: 16px 18px;
  background: var(--color-fond-clair);
  border: 1px solid var(--gold-light);
  border-radius: 4px;
}

.offres-modale__offre p {
  margin: 0;
}

.offres-modale__nom {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--color-principale-fonce);
}

.offres-modale__desc {
  margin-top: 6px !important;
  font-size: 0.95rem;
}

.offres-modale__conditions {
  margin-top: 6px !important;
  font-size: 0.8rem;
  color: var(--color-noir);
  opacity: 0.85;
}

.offres-modale__date {
  margin-top: 8px !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
}

.offres-modale__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 28px;
  background: var(--color-principale-fonce);
  color: var(--color-blanc-pur);
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background var(--transition-fast);
}

.offres-modale__cta:hover {
  background: var(--color-noir);
}

@keyframes offres-apparition {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Mobile : carte non modale en bas d'écran (la page reste visible). */
.offres-modale--carte {
  position: fixed;
  inset: auto 16px 16px 16px;
  width: auto;
  max-width: none;
  max-height: 60vh;
  margin: 0;
  padding: 32px 16px 16px;
  z-index: 999;
}

.offres-modale--carte .offres-modale__titre {
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.offres-modale--carte .offres-modale__liste {
  margin-bottom: 16px;
  gap: 8px;
}

.offres-modale--carte .offres-modale__offre {
  padding: 12px 14px;
}

@media screen and (max-width: 480px) {
  .bandeau-soldes {
    padding: 10px 48px 10px 16px;
  }

  .bandeau-soldes__texte {
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offres-modale {
    animation: none;
  }
}

/* TEXTE COURANT EN NOIR SUR FOND CLAIR (15/09/2026) — les paragraphes
   héritaient du corail de leur bloc (.c-principale) ; titres inchangés. */
.texte-services p,
.span-info-details p,
.logo p,
.logo address {
  color: var(--color-noir);
}

/* BOUTONS CORAIL UNIFORMES (15/09/2026) — même fond (#f47791) partout ;
   on aligne aussi la teinte du texte (crème, comme .rendez-vous) et la
   taille du texte des <button> (13,33 px par défaut contre 13 px pour les <a>). */
.bg-principale {
  color: var(--color-blanc-creme);
}

button.button {
  font-size: 13px;
}

/* LIENS-BOUTONS DE L'ACCUEIL (15/09/2026) — « Découvrir Preface »,
   « Découvrir notre univers » et « Voir tous nos services » étaient des
   <button> sans action : devenus des <a> vers marque.html. On garde le
   gabarit d'origine (a.button impose sinon width: 100%). */
.hero-devanture a.button {
  width: 45%;
}

@media screen and (max-width: 1024px) {
  .hero-devanture a.button {
    width: 100%;
    max-width: 384px;
  }
}

@media screen and (max-width: 768px) {
  .hero-devanture a.button {
    max-width: 300px;
  }
}

/* ATELIERS — HERO PHOTO PLEINE LARGEUR (15/09/2026) — même principe que le
   hero devanture de l'accueil : illustration du groupe en fond, voile sombre
   à gauche, texte clair posé dessus. */
.atelier-hero.atelier-hero--photo {
  position: relative;
  justify-content: flex-start;
  min-height: 600px;
  overflow: hidden;
  background-color: #282024;
}

.atelier-hero.atelier-hero--photo .image-marque {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center 40%;
}

.atelier-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(40, 32, 36, 0.86) 0%,
    rgba(40, 32, 36, 0.7) 45%,
    rgba(40, 32, 36, 0.1) 80%
  );
}

.atelier-hero.atelier-hero--photo .texte-marque {
  position: relative;
  z-index: 1;
  width: 50%;
  max-width: 660px;
  padding: 70px 5%;
}

.atelier-hero--photo h1,
.atelier-hero--photo .texte-marque p strong {
  color: var(--color-blanc-pur);
}

.atelier-hero--photo .texte-marque p {
  color: var(--color-blanc-creme);
}

.atelier-hero--photo .texte-marque .eyebrow {
  color: var(--gold-light);
}

.atelier-hero--photo .eyebrow::after {
  background: linear-gradient(90deg, var(--gold-light), transparent);
}

@media screen and (max-width: 1024px) {
  .atelier-hero.atelier-hero--photo {
    align-items: flex-start;
    justify-content: center;
    min-height: 540px;
  }

  .atelier-hero.atelier-hero--photo .texte-marque {
    width: 72%;
  }

  .atelier-hero.atelier-hero--photo .image-marque {
    max-width: none;
    max-height: none;
  }
}

@media screen and (max-width: 768px) {
  .atelier-hero.atelier-hero--photo {
    min-height: 0;
  }

  .atelier-hero--photo::after {
    background: rgba(40, 32, 36, 0.72);
  }

  .atelier-hero.atelier-hero--photo .texte-marque {
    width: auto;
    padding: 56px 20px;
    text-align: center;
    align-items: center;
  }
}

/* =========================================================
   ALLÈGEMENT DES PAGES CRÉATION / RÉPARATION / ATELIER
   Casse l'alternance texte-image : séparations photo,
   blocs de texte centrés et cartes. Nouvelles classes uniquement.
   ========================================================= */

/* Séparation photo : rangée de 4 photos pleine largeur, sans texte */
.galerie-bandeau {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 50px 5%;
  box-sizing: border-box;
  background-color: var(--color-blanc-creme);
  border-top: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-light);
}

.galerie-bandeau li {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 10px;
  /* rend visibles les coins arrondis des photos sur fond blanc */
  box-shadow: 0 2px 12px rgba(74, 69, 74, 0.08);
}

.galerie-bandeau img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.galerie-bandeau li:hover img {
  transform: scale(1.04);
}

/* Bloc de texte seul, centré : respiration entre deux photos */
.bloc-centre {
  display: flex;
  justify-content: center;
  padding: 80px 5% 80px;
  background-color: var(--color-fond-clair);
}

.bloc-centre__texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 760px;
  text-align: center;
}

.bloc-centre__texte p {
  line-height: 1.7;
}

.bloc-centre h2::after,
.cartes-section > h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(
    90deg,
    var(--gold-mid),
    var(--gold-light),
    var(--gold-mid)
  );
}

/* Deux cartes côte à côte (Création : gravure + fantaisie) */
.duo-cartes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 5%;
}

.duo-carte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 32px;
  background-color: var(--color-fond-clair);
  border-top: 2px solid var(--gold-mid);
}

.duo-carte p {
  line-height: 1.7;
}

/* Grille de cartes (Réparation : réparations courantes) */
.cartes-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 70px 5% 80px;
  background-color: var(--color-fond-clair);
  text-align: center;
}

.cartes-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
}

.carte-simple {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background-color: var(--color-blanc-pur);
  border-top: 2px solid var(--gold-mid);
}

.carte-simple h3,
.carte-simple p {
  text-align: center;
}

.carte-simple p {
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .galerie-bandeau img {
    transition: none;
  }

  .galerie-bandeau li:hover img {
    transform: none;
  }
}

@media screen and (max-width: 1024px) {
  .galerie-bandeau li {
    height: 220px;
  }

  .cartes-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .galerie-bandeau {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 32px 20px;
  }

  .galerie-bandeau li {
    height: 140px;
  }

  .tarifs-image {
    display: none;
  }

  .bloc-centre {
    padding: 50px 20px 44px;
  }

  .duo-cartes {
    grid-template-columns: 1fr;
    padding: 44px 20px;
  }

  .duo-carte {
    padding: 28px 22px;
  }

  .cartes-section {
    padding: 44px 20px 50px;
  }

  .cartes-grille {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .carte-simple {
    padding: 22px 20px;
  }
}

/* Tarifs (Réparation) : photo à gauche du tableau, masquée sur mobile */
.reparation-tarifs {
  align-items: center;
  gap: 40px;
  padding-left: 5%;
  padding-right: 5%;
}

.reparation-tarifs .tarifs-image {
  width: 38%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.reparation-tarifs .texte-boutique {
  flex: 1;
  align-items: center;
}

.reparation-tarifs h2 {
  text-align: center;
}

.reparation-tarifs h2::after {
  margin: 14px auto 0;
}

/* Vignettes « Nos services » cliquables : le lien reprend la mise en page
   et la couleur corail de la figure */
.fig-block figure a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  color: inherit;
}

/* ESPACEMENT ENTRE LES BLOCS — une respiration blanche entre deux blocs
   dès que l'un des deux a une photo collée à son bord (blocs texte/photo,
   bandeau photo). :where() garde une spécificité nulle : les marges déjà
   définies sur une classe (.services, .avis…) restent prioritaires.
   Exclusions : le bandeau de confiance reste collé au hero, et les blocs
   qui ont déjà un grand padding blanc ne sont pas doublés. */
:root {
  --espace-blocs: 64px;
}

main
  > :where(:has(> .image-marque), .bandeau-photo)
  + :where(
    :not(
      .bandeau-confiance,
      .duo-cartes,
      .marque-collections,
      .marque-conclusion,
      .surmesure-conclusion,
      .reparation-conclusion,
      .atelier-lieu
    )
  ),
main
  > :where(:not(.reparation-tarifs, .marque-collections, .services, .duo-cartes))
  + :where(:has(> .image-marque), .bandeau-photo) {
  margin-top: var(--espace-blocs);
}

@media screen and (max-width: 768px) {
  :root {
    --espace-blocs: 40px;
  }
}

/* Mobile : le gap des blocs texte passe à 25px, la marge négative
   de l'eyebrow (-32px) faisait chevaucher le H1 */
@media screen and (max-width: 768px) {
  .texte-marque > .eyebrow {
    margin-bottom: -12px;
  }
}

/* Tablette / iPad (≤ 1024px) : blocs image + texte empilés → tout centré.
   align-self: stretch + max-width collait l'image à gauche. */
@media screen and (max-width: 1024px) {
  main [class] > .image-marque {
    align-self: center;
  }

  main [class]:not(.atelier-hero--photo) > .texte-marque {
    align-items: center;
    text-align: center;
  }

  main [class]:not(.atelier-hero--photo) > .texte-marque .button-span {
    justify-content: center;
  }
}

/* Atelier — mobile : la photo passe au-dessus du texte (plus de voile
   sombre), pour qu'elle soit bien visible ; texte sur fond clair. */
@media screen and (max-width: 768px) {
  .atelier-hero.atelier-hero--photo {
    flex-direction: column;
    background-color: var(--color-fond-clair);
  }

  .atelier-hero--photo::after {
    content: none;
  }

  .atelier-hero.atelier-hero--photo .image-marque {
    position: static;
    width: 100%;
    height: 280px;
    object-position: center 40%;
  }

  .atelier-hero.atelier-hero--photo .texte-marque {
    padding: 36px 20px 50px;
  }

  .atelier-hero--photo h1 {
    color: var(--color-principale);
  }

  .atelier-hero--photo .texte-marque p,
  .atelier-hero--photo .texte-marque p strong {
    color: var(--color-noir);
  }
}

/* Accueil — mobile : même principe que l'atelier, la photo de la
   devanture passe au-dessus du texte, sans voile sombre. */
@media screen and (max-width: 768px) {
  .preface-bijoux.hero-devanture {
    background-color: var(--color-fond-clair);
    align-items: center;
  }

  .hero-devanture .texte-preface-bijoux::before {
    content: none;
  }

  .hero-devanture .image-boutique {
    position: static;
    width: 100%;
    height: 340px;
    object-position: center top;
  }

  .hero-devanture .texte-preface-bijoux {
    padding: 36px 20px 50px;
    margin-left: 0;
  }

  .hero-devanture h1 {
    color: var(--color-principale);
  }

  .hero-devanture h1,
  .hero-devanture .texte-preface-bijoux p {
    text-shadow: none;
  }

  .hero-devanture .texte-preface-bijoux p,
  .hero-devanture .texte-preface-bijoux p a {
    color: var(--color-noir);
  }

  /* doré foncé : le doré clair n'est pas lisible sur fond clair */
  .hero-devanture .texte-preface-bijoux .eyebrow {
    color: var(--gold-deep);
  }

  .hero-devanture .eyebrow::after {
    background: linear-gradient(90deg, var(--gold-mid), transparent);
  }
}

/* Accueil — mobile : espace entre les deux boutons du hero */
@media screen and (max-width: 768px) {
  .hero-devanture .button-span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
}

/* =========================================================
   FOOTER MODERNISÉ (17/09/2026) — rubriques façon Pandora.
   Ordinateur : colonnes ouvertes. Mobile : rubriques repliables (+).
   Remplace visuellement les anciennes règles « footer ».
   ========================================================= */
footer.pied {
  display: block;
  padding: 56px 5% 28px;
  background-color: var(--color-principale);
  color: var(--color-blanc-creme);
  text-align: left;
}

.pied__haut {
  display: grid;
  grid-template-columns: 1.3fr 3fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.pied__marque {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pied__marque .nom {
  width: auto;
  font-size: 26px;
}

footer.pied address {
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
}

footer.pied ul {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* Icônes rondes */
footer.pied .pied__reseaux {
  flex-direction: row;
  gap: 10px;
  margin-top: 6px;
}

.pied__rond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 0;
  border: 1px solid rgba(255, 254, 252, 0.7);
  border-radius: 50%;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

footer.pied .pied__rond:hover,
footer.pied .pied__rond:focus-visible {
  background-color: var(--color-blanc-creme);
  color: var(--color-principale);
}

/* Colonnes de liens */
footer.pied nav.pied__colonnes {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  align-items: start;
  gap: 32px;
  width: auto;
  padding: 0;
}

.pied__rubrique summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  color: var(--color-blanc-pur);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  list-style: none;
  pointer-events: none;
}

.pied__rubrique summary::-webkit-details-marker {
  display: none;
}

footer.pied .pied__rubrique a,
footer.pied .lien-cookies {
  display: inline-block;
  min-height: 0;
  color: var(--color-blanc-creme);
  font-size: 15px;
  text-align: left;
}

footer.pied .pied__rubrique a:hover,
footer.pied .lien-cookies:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer.pied .pied__copyright {
  max-width: 1200px;
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(227, 199, 147, 0.6);
  font-size: 13px;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .pied__haut {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  footer.pied nav.pied__colonnes {
    grid-template-columns: repeat(2, 1fr);
    justify-content: stretch;
  }
}

/* Mobile : rubriques repliables */
@media screen and (max-width: 768px) {
  footer.pied {
    padding: 44px 24px 24px;
  }

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

  footer.pied address {
    text-align: center;
  }

  footer.pied nav.pied__colonnes {
    display: block;
    border-top: 1px solid rgba(227, 199, 147, 0.6);
  }

  .pied__rubrique {
    border-bottom: 1px solid rgba(227, 199, 147, 0.6);
  }

  .pied__rubrique summary {
    margin: 0;
    padding: 20px 4px;
    pointer-events: auto;
    cursor: pointer;
  }

  .pied__rubrique summary::after {
    content: "+";
    font-size: 22px;
    font-weight: normal;
    line-height: 1;
    transition: transform var(--transition-fast);
  }

  .pied__rubrique[open] summary::after {
    transform: rotate(45deg);
  }

  footer.pied .pied__rubrique ul {
    padding: 0 4px 22px;
  }

  footer.pied .pied__copyright {
    margin-top: 28px;
    padding-top: 0;
    border-top: none;
  }
}

/* Atelier — photo du hero éclaircie comme celle de l'accueil (17/09/2026) */
.atelier-hero.atelier-hero--photo .image-marque {
  filter: brightness(1.15) saturate(1.05);
}

.atelier-hero--photo::after {
  background: linear-gradient(
    90deg,
    rgba(40, 32, 36, 0.5) 0%,
    rgba(40, 32, 36, 0.34) 45%,
    rgba(40, 32, 36, 0) 78%
  );
}

/* même ombre légère que l'accueil pour garder le texte blanc lisible */
.atelier-hero--photo h1,
.atelier-hero--photo .texte-marque p {
  text-shadow:
    0 1px 3px rgba(40, 32, 36, 0.6),
    0 2px 16px rgba(40, 32, 36, 0.6);
}

@media screen and (max-width: 768px) {
  .atelier-hero--photo h1,
  .atelier-hero--photo .texte-marque p {
    text-shadow: none;
  }
}

/* ============================================================
   SUR-MESURE — « Le déroulé d'une création » : photo au format
   portrait. On privilégie la largeur (toute la scène visible de
   gauche à droite), le recadrage se fait en hauteur.
   ============================================================ */

.surmesure-etapes .image-marque {
  width: 50%;
  max-width: 720px;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 1024px) {
  .surmesure-etapes .image-marque {
    width: 100%;
    max-width: 720px;
    max-height: 420px;
  }
}

@media screen and (max-width: 768px) {
  .surmesure-etapes .image-marque {
    max-width: none;
    max-height: 300px;
  }
}

/* ============================================================
   SUR-MESURE — « Bijoux de famille » : photo portrait (visage +
   médaille). Sur tablette/mobile, on affiche toute la photo au lieu
   de la rogner à 420 px de haut, sinon le bijou disparaît.
   ============================================================ */

.surmesure-famille .image-marque {
  object-position: center 40%;
}

@media screen and (max-width: 1024px) {
  .surmesure-famille .image-marque {
    width: 100%;
    max-width: 460px;
    max-height: none;
    aspect-ratio: 1024 / 1090;
    object-fit: cover;
  }
}

@media screen and (max-width: 768px) {
  .surmesure-famille .image-marque {
    max-width: 340px;
    max-height: none;
  }
}

/* 19/09/2026 — bandeau bas de surmesure.html (bracelets personnalisés) :
   voile éclairci sur le même principe que .bandeau-photo--sertissage —
   fondu long côté gauche sous le texte, poignet et bijoux en pleine
   lumière. L'ombre portée assure la lisibilité du texte blanc. */
.bandeau-photo--bracelets img {
  /* cadrage descendu pour garder la bague solitaire (main droite, bas de
     l'image) dans le bandeau */
  object-position: center 62%;
}

.bandeau-photo--bracelets::after {
  background: linear-gradient(
    90deg,
    rgba(40, 32, 36, 0.56) 0%,
    rgba(40, 32, 36, 0.48) 20%,
    rgba(40, 32, 36, 0.31) 40%,
    rgba(40, 32, 36, 0.14) 56%,
    rgba(40, 32, 36, 0.04) 70%,
    rgba(40, 32, 36, 0) 80%
  );
}

.bandeau-photo--bracelets .bandeau-photo__citation,
.bandeau-photo--bracelets .bandeau-photo__lieu {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6);
}

@media screen and (max-width: 768px) {
  .bandeau-photo--bracelets::after {
    background: rgba(40, 32, 36, 0.46);
  }
}

/* Bandeau bracelets : photo moins zoomée — le bandeau est un peu plus haut
   (380 → 460 px), donc son cadre se rapproche du format de la photo
   (1983 × 793) et object-fit: cover rogne beaucoup moins. */
.bandeau-photo--bracelets {
  height: 460px;
}

@media screen and (max-width: 768px) {
  .bandeau-photo--bracelets {
    height: 360px;
  }
}

/* Bandeau bracelets : bouton en haut, texte en bas (l'ordre du HTML reste
   citation → sous-titre → bouton pour la lecture et les lecteurs d'écran). */
.bandeau-photo--bracelets .bandeau-photo__texte {
  justify-content: center;
  gap: 18px;
  /* groupe descendu pour ne pas venir toucher les bracelets */
  padding-top: 70px;
}

.bandeau-photo--bracelets .bandeau-photo__citation {
  order: 2;
}

.bandeau-photo--bracelets .bandeau-photo__lieu {
  order: 3;
}

.bandeau-photo--bracelets .button {
  order: 1;
  margin-top: 0;
}

/* 19/09/2026 — bandeau bas de atelierbijoux.html : voile éclairci, même
   principe que les bandeaux sertissage et bracelets (fondu long côté
   gauche sous le texte, participantes et bijoux en pleine lumière). */
.bandeau-photo--atelier-groupe::after {
  background: linear-gradient(
    90deg,
    rgba(40, 32, 36, 0.56) 0%,
    rgba(40, 32, 36, 0.48) 20%,
    rgba(40, 32, 36, 0.31) 40%,
    rgba(40, 32, 36, 0.14) 56%,
    rgba(40, 32, 36, 0.04) 70%,
    rgba(40, 32, 36, 0) 80%
  );
}

.bandeau-photo--atelier-groupe .bandeau-photo__citation,
.bandeau-photo--atelier-groupe .bandeau-photo__lieu {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6);
}

@media screen and (max-width: 768px) {
  .bandeau-photo--atelier-groupe::after {
    background: rgba(40, 32, 36, 0.46);
  }
}

/* ===========================================================
   BLOG — fil d'Ariane, corps d'article, cartes
   Classes préfixées (.fil-ariane, .article-*, .blog-*) :
   aucun sélecteur ne touche le reste du site.
   =========================================================== */

.fil-ariane {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 5% 0;
  box-sizing: border-box;
  font-size: 13px;
  color: var(--color-noir);
  display: block;
  text-align: left;
}
.fil-ariane a {
  color: var(--gold-deep);
  font-weight: 700;
}
.fil-ariane span[aria-hidden] {
  color: var(--gold-mid);
  margin: 0 4px;
}

.article-corps {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 5% 48px;
  box-sizing: border-box;
  text-align: left;
}
.article-corps h1 {
  margin: 8px 0 24px;
}
.article-corps h1:has(+ .article-date) {
  margin-bottom: 8px;
}
.article-corps .article-date {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--color-noir);
  opacity: 0.7;
}
.article-corps h2 {
  margin: 40px 0 12px;
}
.article-corps p {
  color: var(--color-noir);
  line-height: 1.75;
  margin: 0 0 16px;
}
.article-corps a {
  color: var(--color-principale-fonce);
}
.article-corps a:hover {
  color: var(--gold-deep);
}
.article-image {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
  margin-bottom: 28px;
}
.article-chapo {
  font-size: 18px;
  line-height: 1.7 !important;
  border-left: 2px solid var(--gold-mid);
  padding-left: 16px;
}

.article-cta {
  margin-top: 40px;
  padding: 28px 24px;
  background-color: var(--color-nuance-pale);
  text-align: center;
}
.article-cta p {
  margin-bottom: 20px;
}

.blog-suite {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5% 64px;
  box-sizing: border-box;
}
.blog-suite h2 {
  text-align: center;
  margin-bottom: 24px;
}
.blog-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  padding: 0;
  align-items: stretch;
  justify-content: initial;
  text-align: left;
}
.blog-suite .blog-grille {
  grid-template-columns: repeat(2, 1fr);
}
.blog-carte {
  background-color: var(--color-fond-clair);
  border-top: 2px solid var(--gold-mid);
  padding: 24px 20px;
  text-align: left;
  display: block;
  width: auto;
}
.blog-carte img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  margin-bottom: 14px;
}
.blog-carte h3 {
  margin: 0 0 8px;
  font-size: 20px;
}
.blog-carte h3 a {
  color: var(--color-principale);
}
.blog-carte h3 a:hover {
  color: var(--gold-deep);
}
.blog-carte p {
  color: var(--color-noir);
  line-height: 1.6;
  margin: 0;
  font-size: 15px;
}

@media screen and (max-width: 1024px) {
  .blog-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .blog-grille,
  .blog-suite .blog-grille {
    grid-template-columns: 1fr;
  }
  .article-chapo {
    font-size: 17px;
  }
  .article-image {
    max-height: 260px;
  }
}

.blog-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 5% 8px;
  box-sizing: border-box;
  text-align: left;
}
.blog-intro h1 {
  margin: 8px 0 16px;
}
.blog-intro p {
  color: var(--color-noir);
  line-height: 1.75;
}
.blog-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 5% 8px;
  box-sizing: border-box;
}
.blog-section h2 {
  margin-bottom: 20px;
}
.blog-section:last-of-type {
  padding-bottom: 56px;
}

/* Corrections BLOG :
   - .eyebrow porte un margin-bottom négatif (-32px) pensé pour les héros dont
     le H1 a une grande marge haute. Dans le corps d'article et l'intro du blog,
     le H1 est collé en haut : on neutralise.
   - les H3 héritent du centrage global des titres ; dans une carte, le titre
     doit s'aligner sur le texte. */
.blog-intro .eyebrow,
.article-corps .eyebrow {
  margin-bottom: 8px;
}
.blog-carte h3,
.blog-carte h3 a {
  text-align: left;
}
.blog-section h2,
.blog-suite h2 {
  text-align: left;
}

.blog-suite__tous {
  margin-top: 20px;
  text-align: left;
}
.blog-suite__tous a {
  color: var(--color-principale-fonce);
}