/* ============================================================
   CLÉ — FEUILLE DE STYLE
   ============================================================
   Ce fichier applique la charte graphique officielle du CLÉ :
   les cinq couleurs de la palette et les deux typographies
   retenues. Rien n'est inventé ici — tout vient de la charte.
   ============================================================ */

:root {
  /* ---- La palette officielle ---------------------------- */
  --vert:       #1C3730;   /* Vert profond — confiance, engagement, durabilité */
  --terracotta: #B15939;   /* Terracotta  — chaleur, proximité, humain */
  --ecru:       #EAE2D5;   /* Écru        — simplicité, élégance, authenticité */
  --anthracite: #3E3E3C;   /* Anthracite  — professionnalisme, exigence, qualité */
  --or:         #D2AE7A;   /* Or doux     — valeurs, excellence, long terme */

  /* ---- Déclinaisons utiles ------------------------------ */
  --ivoire:     #FCF9F0;   /* le fond des documents de la charte */
  --ecru-clair: #F4EFE6;
  --vert-clair: #2B5449;   /* pour les encarts sur fond vert */
  --vert-vif:   #4A7D6E;   /* liens sur fond sombre */
  --gris:       #6B6B67;   /* texte secondaire sur fond clair */
  --gris-clair: #BDB6A9;   /* texte secondaire sur fond vert */
  --trait:      #D9D0C0;
  --trait-fin:  #E6DFD3;
  --trait-sombre: #2F4F45;

  /* ---- Les deux typographies de la charte --------------- */
  --titre: "Playfair Display", Georgia, serif;   /* titres, identité */
  --texte: "Montserrat", Helvetica, Arial, sans-serif; /* textes courants */

  --pas: 1.5rem;
}

/* ------------------------------------------------------------
   RÉGLAGES GÉNÉRAUX
   ------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ivoire);
  color: var(--anthracite);
  font-family: var(--texte);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.contenu { max-width: 70rem; margin: 0 auto; padding: 0 var(--pas); }

/* Playfair a beaucoup de caractère : on lui laisse de l'air
   et on ne l'utilise que pour les titres. */
h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--vert);
}

p + p { margin-top: 0.9rem; }

a { color: var(--terracotta); text-underline-offset: 3px; }
a:hover { color: var(--vert); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 1px;
}
::selection { background: var(--vert); color: var(--ivoire); }

/* ------------------------------------------------------------
   LE FILET TRICOLORE
   ------------------------------------------------------------
   Repris de la charte : le petit trait terracotta sous les
   titres. Ici on l'étend aux trois couleurs d'accent, comme
   une signature discrète. Trois ou quatre fois par page.
   ------------------------------------------------------------ */
.spectre {
  display: block;
  width: 4.5rem; height: 2px;
  margin-bottom: 1.5rem;
  background: linear-gradient(to right,
    var(--terracotta) 0 55%,
    var(--or) 55% 100%);
}
.hero .spectre, .projet-entete .spectre { background: linear-gradient(to right,
    var(--terracotta) 0 55%, var(--or) 55% 100%); }

/* Les intertitres en petites capitales espacées, comme la charte */
.surtitre, .accroche-haut {
  font-family: var(--texte);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* ------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(252, 249, 240, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--trait-fin);
}
.nav-interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pas);
  padding: 0.7rem var(--pas);
  max-width: 70rem; margin: 0 auto;
}
.logo { display: block; line-height: 0; }
.logo img { height: 2.6rem; width: auto; display: block; }

.nav-liens { display: flex; gap: 1.45rem; list-style: none; }
.nav-liens a {
  font-family: var(--texte);
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--vert);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}
.nav-liens a:hover { border-bottom-color: var(--terracotta); color: var(--terracotta); }

.bouton-menu {
  display: none;
  background: none; border: 1px solid var(--trait);
  border-radius: 2px; padding: 0.45rem 0.8rem;
  font-family: var(--texte); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; color: var(--vert);
}

/* ------------------------------------------------------------
   LE HERO
   ------------------------------------------------------------ */
.hero { background: var(--vert); color: var(--ecru); padding: 5.5rem 0 5rem; }
.hero-interieur {
  max-width: 70rem; margin: 0 auto; padding: 0 var(--pas);
  display: grid; grid-template-columns: 1fr 1.5fr;
  align-items: center; gap: 3rem;
}
.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  max-width: 14ch; color: var(--ivoire);
  font-weight: 700;
}
.hero p { margin-top: 1.75rem; max-width: 46ch; font-size: 1.12rem; color: var(--gris-clair); }
.hero .spectre { margin-bottom: 1.75rem; }
.hero-schema { width: 100%; height: auto; overflow: visible; }

.mise-au-point { animation: nettete 1.5s cubic-bezier(.2,.7,.3,1) both; }
.hero-schema   { animation: nettete 1.6s cubic-bezier(.2,.7,.3,1) .3s both; }
@keyframes nettete {
  from { filter: blur(18px); opacity: 0; }
  to   { filter: blur(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mise-au-point, .hero-schema { animation: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   LES SECTIONS
   ------------------------------------------------------------ */
section { padding: 5rem 0; }
section + section { border-top: 1px solid var(--trait-fin); }

.titre-section { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 1.4rem; max-width: 22ch; }
.intro { max-width: 58ch; margin-bottom: 3rem; color: var(--gris); font-size: 1.06rem; }

.teinte { background: var(--ecru); border-top: none !important; }

/* Philosophie */
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.colonne h3 { font-size: 1.25rem; margin-bottom: 1rem; padding-bottom: 0.65rem; border-bottom: 2px solid var(--terracotta); }
.colonne.refus h3 { border-bottom-color: var(--trait); color: var(--gris); }
.colonne ul { list-style: none; }
.colonne li { padding: 0.7rem 0; border-bottom: 1px solid var(--trait-fin); font-size: 0.98rem; }
.colonne.refus li {
  color: var(--gris); text-decoration: line-through;
  text-decoration-color: var(--trait); text-decoration-thickness: 1px;
}

/* Le récit en trois temps */
.recit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.recit-temps { border-top: 2px solid; padding-top: 1.15rem; }
.recit-temps:nth-child(1) { border-color: var(--vert); }
.recit-temps:nth-child(2) { border-color: var(--terracotta); }
.recit-temps:nth-child(3) { border-color: var(--or); }
.recit-temps h3 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.recit-temps p { font-size: 0.97rem; color: var(--gris); }

.citation {
  margin-top: 4rem; padding: 0 0 0 2rem;
  border-left: 2px solid var(--terracotta);
  font-family: var(--titre);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.4; max-width: 30ch;
  font-style: italic; color: var(--vert);
}

/* Les projets */
.projet {
  display: grid; grid-template-columns: 12rem 1fr; gap: 3rem;
  padding: 2.25rem 0 2.25rem 1.75rem;
  border-left: 2px solid; margin-bottom: 1.5rem;
}
.projet:nth-of-type(1) { border-color: var(--vert); }
.projet:nth-of-type(2) { border-color: var(--terracotta); }
.projet:nth-of-type(3) { border-color: var(--or); }
.projet-etiquette {
  font-family: var(--texte); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gris); line-height: 1.7;
}
.projet h3 { font-size: 1.6rem; margin-bottom: 0.7rem; }
.projet p { max-width: 56ch; color: var(--gris); font-size: 0.99rem; }
.projet a {
  display: inline-block; margin-top: 1rem;
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ------------------------------------------------------------
   LES FICHES MARQUES — la balise <details>, sans JavaScript
   ------------------------------------------------------------ */
.marques-liste { border-top: 1px solid var(--trait); }
.marque-fiche  { border-bottom: 1px solid var(--trait); }

.marque-fiche summary {
  display: grid; grid-template-columns: 1fr auto 1.5rem;
  align-items: baseline; gap: 1.5rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
}
.marque-fiche summary::-webkit-details-marker { display: none; }
.marque-fiche summary h3 { font-size: 1.45rem; transition: color .15s; }
.marque-fiche summary:hover h3 { color: var(--terracotta); }
.marque-fiche .accroche {
  font-family: var(--texte); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gris); text-align: right;
}
.marque-fiche summary::after {
  content: "+"; font-family: var(--texte); font-weight: 400; font-size: 1.4rem;
  color: var(--terracotta); line-height: 1; justify-self: end;
}
.marque-fiche[open] summary::after { content: "\2212"; }
.marque-fiche[open] summary h3 { color: var(--terracotta); }
.marque-fiche .description { padding: 0.25rem 0 2.25rem; max-width: 60ch; }
.marque-fiche .description p { color: var(--gris); font-size: 0.99rem; }
.marque-fiche .description p:first-child { color: var(--anthracite); }

/* ------------------------------------------------------------
   LES BLOCS VERT PROFOND
   ------------------------------------------------------------ */
.association, .conclusion { background: var(--vert); color: var(--ecru); border-top: none !important; }
.association .titre-section, .association h3, .conclusion h2 { color: var(--ivoire); }
.association .intro, .association p, .conclusion p { color: var(--gris-clair); }
.association a { color: var(--or); }
.association a:hover { color: var(--ivoire); }

.blocs { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; }
.blocs div { border-top: 2px solid var(--or); padding-top: 1.1rem; }
.blocs div:nth-child(2) { border-top-color: var(--terracotta); }
.blocs h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }

.caritatif {
  border: 1px solid var(--trait-sombre);
  border-left: 2px solid var(--terracotta);
  padding: 2.5rem; background: var(--vert-clair);
}
.caritatif .a-venir {
  display: inline-block;
  font-family: var(--texte); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivoire); background: var(--terracotta);
  border-radius: 2px; padding: 0.35rem 0.85rem; margin-bottom: 1.1rem;
}
.caritatif h3 { font-size: 1.5rem; margin-bottom: 0.85rem; }
.caritatif p { max-width: 60ch; }
.coordonnees { margin-top: 3rem; font-size: 0.9rem; }

/* Les personnes */
.personnes {
  margin-top: 4rem; padding-top: 2.25rem; border-top: 1px solid var(--trait);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 2.5rem;
}
.personne strong {
  font-family: var(--titre); font-weight: 700; font-size: 1.1rem;
  color: var(--vert); display: block; margin-bottom: 0.1rem;
}
.personne span { font-size: 0.9rem; color: var(--gris); }

/* ------------------------------------------------------------
   BOUTONS ET FORMULAIRE
   ------------------------------------------------------------ */
.bouton {
  display: inline-block; background: var(--terracotta); color: var(--ivoire);
  font-family: var(--texte); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 0.95rem 1.8rem;
  border: none; border-radius: 2px; cursor: pointer; transition: background .15s;
}
.bouton:hover { background: var(--vert); color: var(--ivoire); }

form { max-width: 33rem; }
label {
  display: block; font-family: var(--texte); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vert); margin: 1.3rem 0 0.45rem;
}
input, textarea {
  width: 100%; font-family: var(--texte); font-size: 0.98rem;
  padding: 0.75rem 0.85rem; border: 1px solid var(--trait);
  border-radius: 2px; background: #fff; color: var(--anthracite);
}
input:hover, textarea:hover { border-color: var(--terracotta); }
textarea { min-height: 8rem; resize: vertical; }
form .bouton { margin-top: 1.6rem; }
.confirmation { display: none; margin-top: 1rem; color: var(--terracotta); font-weight: 500; }

/* ------------------------------------------------------------
   PIED DE PAGE — le logo en cercle y trouve sa place
   ------------------------------------------------------------ */
footer { background: var(--ecru); color: var(--gris); padding: 3.5rem 0; font-size: 0.88rem; }
.pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
}
.pied-logo { width: 8.5rem; height: auto; flex-shrink: 0; }
.pied a { color: var(--vert); }
.pied a:hover { color: var(--terracotta); }
.pied .devise {
  font-family: var(--titre); font-style: italic;
  font-size: 1.05rem; color: var(--vert);
}

/* ------------------------------------------------------------
   PAGE MANIFESTE
   ------------------------------------------------------------ */
.manifeste-intro { max-width: 52ch; font-size: 1.12rem; color: var(--gris-clair); }

.engagement {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 2.5rem;
  padding: 2.75rem 0; border-top: 1px solid var(--trait-fin);
}
.engagement .numero {
  font-family: var(--titre); font-weight: 700; font-size: 1.15rem;
  color: var(--terracotta); padding-top: 0.25rem;
}
.engagement h2 { font-size: 1.5rem; margin-bottom: 1rem; max-width: 26ch; }
.engagement p { max-width: 58ch; color: var(--gris); font-size: 0.99rem; }
.engagement p:first-of-type { color: var(--anthracite); }
.engagement ul { list-style: none; max-width: 56ch; margin-top: 0.9rem; }
.engagement li { padding: 0.4rem 0 0.4rem 1.4rem; position: relative; color: var(--gris); font-size: 0.97rem; }
.engagement li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 0.6rem; height: 1px; background: var(--terracotta);
}

.conclusion { padding: 4.5rem 0; margin-top: 3rem; }
.conclusion h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); max-width: 20ch; margin-bottom: 1.5rem; }
.conclusion p { max-width: 52ch; font-size: 1.05rem; }
.conclusion .signature {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait-sombre);
  font-family: var(--titre); font-style: italic; font-weight: 400;
  color: var(--or); font-size: 1.2rem;
}
.retour {
  display: inline-block; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ------------------------------------------------------------
   PAGES PROJET
   ------------------------------------------------------------ */
.projet-entete { background: var(--vert); color: var(--ecru); padding: 4.5rem 0 4rem; }
.projet-entete .surtitre { display: block; color: var(--or); margin-bottom: 1.1rem; }
.projet-entete h1 { font-size: clamp(2rem, 4.8vw, 3.4rem); max-width: 18ch; color: var(--ivoire); }
.projet-entete .chapeau { margin-top: 1.5rem; max-width: 50ch; font-size: 1.12rem; color: var(--gris-clair); }

.fiche { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--trait); margin: 3rem 0 3.5rem; }
.fiche div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: 1rem 2rem 1rem 0; border-bottom: 1px solid var(--trait-fin); }
.fiche .terme {
  font-family: var(--texte); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris);
}
.fiche .valeur { font-size: 0.98rem; }

.photo-a-venir {
  position: relative;
  background: repeating-linear-gradient(-45deg,
    var(--ecru) 0 14px, var(--ecru-clair) 14px 28px);
  border: 1px solid var(--trait);
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
  font-family: var(--texte); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris);
  margin: 0 0 3rem;
}
.photo-a-venir span { background: var(--ivoire); border: 1px solid var(--trait); border-radius: 2px; padding: 0.6rem 1.1rem; line-height: 1.7; }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.galerie .photo-a-venir { margin: 0; aspect-ratio: 4 / 3; }

.corps { max-width: 60ch; }
.corps h2 { font-size: 1.45rem; margin: 2.75rem 0 1rem; }
.corps p { color: var(--gris); font-size: 0.99rem; }
.corps > p:first-child { color: var(--anthracite); font-size: 1.06rem; }

.sous-titre { font-family: var(--titre); font-size: 1.45rem; color: var(--vert); margin: 4rem 0 1.5rem; }

.acteurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem; }
.acteur { border-top: 2px solid var(--vert); padding-top: 1rem; }
.acteur:nth-child(2) { border-top-color: var(--terracotta); }
.acteur:nth-child(3) { border-top-color: var(--or); }
.acteur:nth-child(4) { border-top-color: var(--anthracite); }
.acteur h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.acteur p { font-size: 0.92rem; color: var(--gris); }

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero-interieur { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero { padding: 3.5rem 0; }
  .hero-schema { max-width: 26rem; }
  .recit, .personnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .bouton-menu { display: block; }
  .logo img { height: 2.2rem; }
  .nav-liens {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--ivoire);
    border-bottom: 1px solid var(--trait);
    padding: 0.5rem var(--pas) 1.25rem;
  }
  .nav-liens.ouvert { display: flex; }
  .nav-liens li { padding: 0.75rem 0; border-bottom: 1px solid var(--trait-fin); }

  section { padding: 3.5rem 0; }
  .deux-colonnes, .blocs, .recit, .personnes, .acteurs, .fiche, .galerie { grid-template-columns: 1fr; gap: 2rem; }
  .fiche { gap: 0; }
  .fiche div { grid-template-columns: 8.5rem 1fr; padding-right: 0; }
  .projet { grid-template-columns: 1fr; gap: 0.6rem; padding-left: 1.25rem; }
  .caritatif { padding: 1.5rem; }
  .citation { padding-left: 1.25rem; margin-top: 2.5rem; }
  .engagement { grid-template-columns: 1fr; gap: 0.75rem; padding: 2rem 0; }
  .engagement .numero { padding-top: 0; }
  .marque-fiche summary { grid-template-columns: 1fr 1.5rem; row-gap: 0.4rem; }
  .marque-fiche .accroche { grid-column: 1 / 2; text-align: left; }
  .pied { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}

/* ------------------------------------------------------------
   LES VRAIES PHOTOS
   ------------------------------------------------------------
   Une image doit toujours porter un attribut alt : c'est ce que
   lisent les moteurs de recherche et les lecteurs d'écran.
   ------------------------------------------------------------ */
.photo { margin: 0 0 1rem; }
.photo img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--trait);
}
.photo figcaption {
  margin-top: 0.75rem;
  font-size: 0.82rem; color: var(--gris);
  letter-spacing: 0.04em;
}
.photo + .fiche { margin-top: 2.5rem; }

/* La distinction, mise en avant dans l'en-tête du projet */
.distinction-silmo {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  border: 1px solid var(--or); border-radius: 2px;
  padding: 0.5rem 1rem; margin-top: 1.75rem;
  font-family: var(--texte); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--or);
}

/* Sous 760 px, les intitulés du schéma passent sous les 8 px :
   on préfère le masquer plutôt que d'afficher une bouillie. */
@media (max-width: 760px) {
  .hero-schema { display: none; }
}

/* ------------------------------------------------------------
   LES TABLEAUX
   ------------------------------------------------------------
   Un tableau reste le bon outil quand l'information se lit
   en croisant deux colonnes. Sur téléphone, il défile
   horizontalement dans son cadre plutôt que de déborder.
   ------------------------------------------------------------ */
.cadre-tableau { overflow-x: auto; margin: 2rem 0 3rem; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; }
thead th {
  font-family: var(--texte); font-weight: 500;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ivoire); background: var(--vert);
  text-align: left; padding: 0.85rem 1rem;
}
thead th:last-child { text-align: right; }
tbody td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--trait-fin); font-size: 0.97rem; vertical-align: top; }
tbody tr:nth-child(odd) td { background: var(--ecru); }
tbody td:last-child {
  text-align: right; white-space: nowrap;
  font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.qui-opticien { color: var(--terracotta); }
.qui-ophtalmo { color: var(--vert); }

.alerte {
  border-left: 3px solid var(--terracotta);
  background: var(--ecru);
  padding: 1.5rem 1.75rem; margin: 2.5rem 0;
}
.alerte p { color: var(--anthracite); }
.alerte p + p { margin-top: 0.6rem; }

.regle {
  background: var(--vert); color: var(--ecru);
  padding: 2.5rem; margin: 3rem 0 1rem;
}
.regle h3 { color: var(--ivoire); font-size: 1.35rem; margin-bottom: 1.25rem; }
.regle div { padding: 0.8rem 0; border-top: 1px solid var(--trait-sombre); }
.regle strong { color: var(--or); font-weight: 600; }

/* ------------------------------------------------------------
   NAVIGATION — le lien vers la page opticiens se distingue
   ------------------------------------------------------------ */
.nav-liens { gap: 1.2rem; align-items: center; }
.nav-liens a.nav-cta {
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
  padding: 0.5rem 0.9rem; border-radius: 2px;
}
.nav-liens a.nav-cta:hover { background: var(--terracotta); color: var(--ivoire); border-bottom-color: var(--terracotta); }

/* Le menu passe en mode « hamburger » plus tôt : la liste est
   longue et déborderait sur un écran de portable. */
@media (max-width: 1080px) {
  .bouton-menu { display: block; }
  .nav-liens {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivoire); border-bottom: 1px solid var(--trait);
    padding: 0.5rem var(--pas) 1.25rem;
  }
  .nav-liens.ouvert { display: flex; }
  .nav-liens li { padding: 0.75rem 0; border-bottom: 1px solid var(--trait-fin); }
  .nav-liens a.nav-cta { display: inline-block; margin-top: 0.4rem; }
}

/* Le bouton d'action dans le haut de page */
.hero .bouton { margin-top: 2.25rem; }
.hero .bouton:hover { background: var(--or); color: var(--vert); }

/* ------------------------------------------------------------
   LA CARTE DES OPTICIENS
   ------------------------------------------------------------ */
.carte-grille {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem; align-items: start;
}
.carte-svg { width: 100%; height: auto; display: block; }
.carte-svg .pays { fill: var(--vert); stroke: var(--or); stroke-width: 1.5; stroke-linejoin: round; }

.carte-svg .point circle.halo { fill: var(--terracotta); opacity: 0.22; transition: opacity .2s, r .2s; }
.carte-svg .point circle.coeur { fill: var(--terracotta); stroke: var(--ivoire); stroke-width: 2.5; }
.carte-svg .point text {
  font-family: var(--texte); font-size: 15px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ivoire);
}
.carte-svg .point:hover circle.halo,
.carte-svg .point:focus circle.halo { opacity: 0.5; }
.carte-svg .point { cursor: pointer; }

.opticiens-liste { display: grid; gap: 1rem; }
.opticien-fiche {
  background: var(--ivoire);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--terracotta);
  padding: 1.35rem 1.5rem;
  scroll-margin-top: 6rem;
  transition: box-shadow .2s, border-color .2s;
}
/* La fiche ciblée par un clic sur la carte s'éclaire */
.opticien-fiche:target { border-color: var(--or); border-left-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(210,174,122,0.35); }
.opticien-fiche .ville {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--terracotta);
}
.opticien-fiche h3 { font-size: 1.25rem; margin: 0.25rem 0 0.4rem; }
.opticien-fiche p { font-size: 0.93rem; color: var(--gris); }
.opticien-fiche a {
  display: inline-block; margin-top: 0.6rem;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}

.reseau-grandit {
  margin-top: 1.5rem; padding: 1.35rem 1.5rem;
  border: 1px dashed var(--or); background: transparent;
}
.reseau-grandit h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.reseau-grandit p { font-size: 0.93rem; color: var(--gris); }

/* ------------------------------------------------------------
   PAGE « VOUS ÊTES OPTICIEN ? »
   ------------------------------------------------------------ */
.apports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2.5rem; }
.apport { border-top: 2px solid var(--terracotta); padding-top: 1.1rem; }
.apport:nth-child(3n+2) { border-top-color: var(--or); }
.apport:nth-child(3n)   { border-top-color: var(--vert); }
.apport h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.apport p { font-size: 0.95rem; color: var(--gris); }

.adhesion-bloc {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 3rem;
  background: var(--vert); color: var(--ecru);
  padding: 2.75rem 3rem; margin-top: 1rem;
}
.adhesion-bloc .prix {
  font-family: var(--titre); font-weight: 700; font-size: 3.4rem;
  color: var(--ivoire); line-height: 1;
}
.adhesion-bloc .prix small {
  display: block; margin-top: 0.6rem;
  font-family: var(--texte); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--or);
}
.adhesion-bloc p { color: var(--gris-clair); max-width: 58ch; font-size: 1.02rem; }
.adhesion-bloc .bouton:hover { background: var(--or); color: var(--vert); }

@media (max-width: 900px) {
  .carte-grille { grid-template-columns: 1fr; gap: 2.5rem; }
  .apports { grid-template-columns: 1fr 1fr; }
  .adhesion-bloc { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; }
}
@media (max-width: 760px) {
  .apports { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCUEIL — VERSION 2
   ------------------------------------------------------------
   Logique de la page, de haut en bas :
   comprendre le CLÉ → pourquoi cela me concerne → ses
   engagements → ce qu'il fait → qui le compose → participer
   ============================================================ */

/* ---- 1. Premier écran : pleine page verte ------------------- */
.accueil {
  background: var(--vert); color: var(--ecru);
  min-height: calc(100vh - 4.2rem);
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 0 2rem; position: relative;
}
.accueil-grille {
  max-width: 70rem; margin: 0 auto; padding: 0 var(--pas); width: 100%;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center;
}
.accueil .sigle {
  font-family: var(--titre); font-weight: 700;
  font-size: clamp(3.6rem, 9vw, 7rem); line-height: 0.95;
  color: var(--ivoire); letter-spacing: 0.02em;
}
.accueil .sigle span { color: var(--terracotta); }
.accueil .definition {
  font-family: var(--titre); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem); line-height: 1.3;
  color: var(--or); margin-top: 1.1rem; max-width: 24ch;
}
.accueil .explication { margin-top: 1.75rem; max-width: 46ch; color: var(--gris-clair); font-size: 1.05rem; }
.accueil .valeurs-ligne {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; list-style: none;
}
.accueil .valeurs-ligne li {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ecru); border: 1px solid var(--trait-sombre); border-radius: 2px;
  padding: 0.35rem 0.7rem;
}
.accueil .actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.25rem; }
.accueil .bouton:hover { background: var(--or); color: var(--vert); }

.bouton-contour {
  display: inline-block; background: transparent; color: var(--ivoire);
  font-family: var(--texte); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.9rem 1.7rem; border: 1px solid var(--or); border-radius: 2px;
  transition: background .15s, color .15s;
}
.bouton-contour:hover { background: var(--or); color: var(--vert); }

/* La carte au trait */
.accueil-carte { position: relative; }
.carte-trait { width: 100%; height: auto; display: block; max-height: 68vh; }
.carte-trait .pays { fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linejoin: round; opacity: 0.85; }
.carte-trait .point circle.halo { fill: var(--terracotta); opacity: 0.25; transition: opacity .2s; }
.carte-trait .point circle.coeur { fill: var(--terracotta); stroke: var(--vert); stroke-width: 3; }
.carte-trait .point text {
  font-family: var(--texte); font-size: 17px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ivoire);
}
.carte-trait .point:hover circle.halo, .carte-trait .point:focus circle.halo { opacity: 0.6; }
.carte-legende {
  margin-top: 0.75rem; text-align: center;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gris-clair);
}
.carte-legende a { color: var(--or); }

/* La flèche vers la suite */
.vers-la-suite {
  display: block; width: max-content; margin: 2.5rem auto 0;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ecru); text-decoration: none; text-align: center; opacity: 0.8;
}
.vers-la-suite::before {
  content: "\2193"; display: block; font-size: 1.4rem; margin-bottom: 0.3rem; color: var(--or);
}
.vers-la-suite:hover { opacity: 1; color: var(--ivoire); }

/* ---- 2. « Savez-vous d'où viennent vos lunettes ? » ---------- */
.origine-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.origine h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.75rem; max-width: 16ch; }
.origine p { color: var(--gris); }
.origine p:first-of-type { color: var(--anthracite); font-size: 1.1rem; }
.origine .fanion {
  margin-top: 1.75rem; padding: 1.1rem 1.25rem;
  border-left: 2px solid var(--terracotta); background: var(--ecru);
  color: var(--vert); font-weight: 500; font-size: 0.97rem;
}
.origine .photo-a-venir { margin: 0; aspect-ratio: 4 / 5; }

/* ---- 3. « Pourquoi cela vous concerne » ---------------------- */
.question-centrale {
  font-family: var(--titre); font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.35;
  color: var(--vert); max-width: 32ch; margin-bottom: 3rem;
}
.benefices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.benefice { border-top: 2px solid var(--terracotta); padding-top: 1.1rem; }
.benefice:nth-child(2) { border-top-color: var(--or); }
.benefice:nth-child(3) { border-top-color: var(--vert); }
.benefice:nth-child(4) { border-top-color: var(--anthracite); }
.benefice h3 { font-size: 1.2rem; margin-bottom: 0.55rem; }
.benefice p { font-size: 0.95rem; color: var(--gris); }

/* ---- 4. La promesse : défendons / refusons ------------------- */
.promesse { padding-bottom: 0; }
.promesse-grille { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1rem; }
.promesse-cote { padding: 2.75rem 2.75rem 3rem; }
.promesse-cote.oui { background: var(--ecru); }
.promesse-cote.non { background: var(--vert); }
.promesse-cote .etiquette {
  display: inline-block; font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.5rem;
  padding-bottom: 0.4rem; border-bottom: 2px solid;
}
.promesse-cote.oui .etiquette { color: var(--vert); border-color: var(--terracotta); }
.promesse-cote.non .etiquette { color: var(--or); border-color: var(--or); }
.promesse-cote ul { list-style: none; }
.promesse-cote li {
  font-family: var(--titre); font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.3;
  padding: 0.7rem 0 0.7rem 2.1rem; position: relative;
}
.promesse-cote.oui li { color: var(--vert); border-bottom: 1px solid var(--trait); }
.promesse-cote.non li { color: var(--gris-clair); border-bottom: 1px solid var(--trait-sombre); }
.promesse-cote li::before {
  position: absolute; left: 0; top: 0.72rem;
  font-family: var(--texte); font-weight: 400; font-size: 1.2rem;
}
.promesse-cote.oui li::before { content: "+"; color: var(--terracotta); }
.promesse-cote.non li::before { content: "\2212"; color: var(--or); }
.promesse-pied { padding: 2.5rem 0 5rem; }

/* ---- 5. Marques : un visuel dans chaque fiche ---------------- */
.marque-fiche .description { display: grid; grid-template-columns: 1fr 15rem; gap: 2.5rem; max-width: none; }
.marque-fiche .description .texte { max-width: 60ch; }
.marque-fiche .visuel-marque { margin: 0; }
.marque-fiche .visuel-marque img { width: 100%; height: auto; display: block; border: 1px solid var(--trait); }
.marque-fiche .visuel-marque .photo-a-venir { margin: 0; aspect-ratio: 1 / 1; font-size: 0.68rem; }

/* ---- 6. Les opticiens : portraits ---------------------------- */
.portraits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.portrait {
  background: var(--ivoire); border: 1px solid var(--trait);
  scroll-margin-top: 6rem; transition: box-shadow .2s, border-color .2s;
}
.portrait:target { border-color: var(--or); box-shadow: 0 0 0 3px rgba(210,174,122,0.4); }
.portrait .photo-a-venir { margin: 0; aspect-ratio: 4 / 3; border: none; border-bottom: 1px solid var(--trait); font-size: 0.68rem; }
.portrait .texte { padding: 1.4rem 1.5rem 1.6rem; }
.portrait .ville { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); }
.portrait h3 { font-size: 1.25rem; margin: 0.3rem 0 0.5rem; }
.portrait p { font-size: 0.92rem; color: var(--gris); }
.portrait a { display: inline-block; margin-top: 0.7rem; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.portrait.a-venir {
  background: transparent; border: 1px dashed var(--or);
  display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.6rem;
}
.portrait.a-venir h3 { margin-top: 0; }

/* ---- 7. Les trois portes d'entrée ---------------------------- */
.portes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.porte {
  display: flex; flex-direction: column;
  border: 1px solid var(--trait); background: var(--ivoire);
  padding: 2rem 1.75rem; text-decoration: none; color: var(--anthracite);
  transition: border-color .15s, transform .15s;
}
.porte:hover { border-color: var(--terracotta); transform: translateY(-2px); color: var(--anthracite); }
.porte .qui { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.8rem; }
.porte h3 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.porte p { font-size: 0.95rem; color: var(--gris); flex: 1; }
.porte .suite { margin-top: 1.25rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vert); }
.porte:hover .suite { color: var(--terracotta); }

.contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 4.5rem; padding-top: 3.5rem; border-top: 1px solid var(--trait); }
.contact-grille .personnes { margin-top: 0; padding-top: 0; border-top: none; grid-template-columns: 1fr 1fr; }

/* ---- Adaptation aux écrans ---------------------------------- */
@media (max-width: 1000px) {
  .benefices { grid-template-columns: 1fr 1fr; }
  .portraits, .portes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .accueil { min-height: 0; padding: 3.5rem 0 2rem; }
  .accueil-grille, .origine-grille, .promesse-grille, .contact-grille { grid-template-columns: 1fr; gap: 2.5rem; }
  .accueil-carte { max-width: 26rem; }
  .marque-fiche .description { grid-template-columns: 1fr; gap: 1.25rem; }
  .marque-fiche .visuel-marque { max-width: 18rem; }
  .origine .photo-a-venir { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .benefices, .portraits, .portes, .contact-grille .personnes { grid-template-columns: 1fr; }
  .promesse-cote { padding: 2rem 1.5rem; }
}

/* ---- Corrections après relecture visuelle ------------------ */

/* Une section qui porte aussi la classe .contenu perdait ses
   marges verticales : .contenu (une classe) l'emportait sur
   section (une balise). On rétablit l'espacement. */
section.contenu { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 760px) { section.contenu { padding-top: 3.5rem; padding-bottom: 3.5rem; } }

.accueil .definition { max-width: 30ch; }
.carte-legende a { display: inline-block; }

/* La carte « Le réseau grandit » occupe toute la largeur */
.portrait.a-venir {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: 2rem; padding: 1.5rem 1.75rem;
}
.portrait.a-venir .ville { flex-shrink: 0; }
.portrait.a-venir h3 { margin: 0; flex-shrink: 0; }
.portrait.a-venir p { margin: 0; }
@media (max-width: 760px) { .portrait.a-venir { flex-direction: column; align-items: flex-start; gap: 0.5rem; } }

/* ------------------------------------------------------------
   LA CARTE — les points qui regroupent plusieurs magasins
   ------------------------------------------------------------ */
.carte-trait .point text.nombre {
  font-family: var(--texte); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none; fill: var(--ivoire);
}

/* ------------------------------------------------------------
   LES OPTICIENS, CLASSÉS PAR RÉGION
   ------------------------------------------------------------ */
.regions { display: grid; gap: 2.75rem; margin-bottom: 2rem; }
.region { scroll-margin-top: 6rem; padding: 0.5rem; margin: -0.5rem; transition: background .3s; border-radius: 2px; }
.region:target { background: rgba(210,174,122,0.18); }
.region-titre {
  display: flex; align-items: baseline; gap: 1rem;
  font-size: 1.35rem; padding-bottom: 0.75rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--trait);
}
.region-titre span {
  font-family: var(--texte); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta);
}
.magasins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.magasin {
  background: var(--ivoire); border: 1px solid var(--trait);
  border-top: 2px solid var(--terracotta); padding: 1.25rem 1.35rem 1.35rem;
}
.magasin .lieu { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.magasin h4 { font-family: var(--titre); font-size: 1.15rem; font-weight: 700; color: var(--vert); line-height: 1.25; margin: 0.35rem 0 0.4rem; }
.magasin p { font-size: 0.9rem; color: var(--gris); }
.magasin > a { display: inline-block; margin-top: 0.6rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.magasin .villes { line-height: 1.9; }
.magasin .villes a { white-space: nowrap; }

@media (max-width: 900px) { .magasins { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .magasins { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   FICHES PRATIQUES DES MAGASINS
   ------------------------------------------------------------ */
.magasin { display: flex; flex-direction: column; }
.magasin .adresse { font-size: 0.9rem; color: var(--anthracite); margin: 0.1rem 0 0.7rem; line-height: 1.55; }
.coordonnees-magasin { list-style: none; font-size: 0.88rem; margin-bottom: 0.9rem; }
.coordonnees-magasin li { padding: 0.1rem 0; }
.coordonnees-magasin a { color: var(--vert); text-decoration: none; border-bottom: 1px solid var(--trait); }
.coordonnees-magasin a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.magasin .itineraire {
  margin-top: auto; align-self: flex-start;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.enseigne { margin: 2rem 0 1rem; }
.enseigne h4 { font-family: var(--titre); font-size: 1.15rem; font-weight: 700; color: var(--vert); }
.enseigne h4 span { display: block; font-family: var(--texte); font-size: 0.82rem; font-weight: 400; color: var(--gris); margin-top: 0.2rem; }

/* La photo de boutique, en portrait */
.photo-boutique { margin: 0; }
.photo-boutique img { width: 100%; height: auto; display: block; border: 1px solid var(--trait); }

/* Le lien vers le site officiel d'une marque */
.site-marque { margin-top: 1.1rem; }
.site-marque a {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}


/* ============================================================
   LE FOND : DES LIGNES QUI DEVIENNENT DES LUNETTES
   ------------------------------------------------------------
   Un motif dessiné au trait, dans les couleurs de la charte.
   Huit paires de lunettes, toutes différentes, posées sur des
   courbes qui s'entrelacent. Le dessin est vectoriel : il reste
   net sur tous les écrans et ne pèse que quelques kilo-octets.
   ============================================================ */
:root {
  --motif-clair:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221500%22 height=%221000%22 viewBox=%220 0 1500 1000%22%3E%3Cg stroke-linecap=%22round%22 opacity=%220.42%22%3E%3Cpath d=%22M0.0 211.6 Q0.0 211.6 17.0 218.7 Q34.1 225.9 51.1 232.4 Q68.2 238.9 85.2 244.7 Q102.3 250.5 119.3 255.5 Q136.4 260.5 153.4 264.5 Q170.5 268.5 187.5 271.5 Q204.5 274.5 221.6 276.4 Q238.6 278.4 255.7 279.2 Q272.7 280.0 289.8 279.6 Q306.8 279.3 323.9 277.8 Q340.9 276.3 358.0 273.7 Q375.0 271.2 392.0 267.5 Q409.1 263.9 426.1 259.3 Q443.2 254.7 460.2 249.2 Q477.3 243.7 494.3 237.5 Q511.4 231.2 528.4 224.3 Q545.5 217.4 562.5 210.0 Q579.5 202.6 596.6 194.8 Q613.6 187.1 630.7 179.1 Q647.7 171.2 664.8 163.2 Q681.8 155.2 698.9 147.4 Q715.9 139.5 733.0 131.9 Q750.0 124.4 767.0 117.3 Q784.1 110.1 801.1 103.6 Q818.2 97.1 835.2 91.3 Q852.3 85.5 869.3 80.5 Q886.4 75.5 903.4 71.5 Q920.5 67.5 937.5 64.5 Q954.5 61.5 971.6 59.6 Q988.6 57.6 1005.7 56.8 Q1022.7 56.0 1039.8 56.4 Q1056.8 56.7 1073.9 58.2 Q1090.9 59.7 1108.0 62.3 Q1125.0 64.8 1142.0 68.5 Q1159.1 72.1 1176.1 76.7 Q1193.2 81.3 1210.2 86.8 Q1227.3 92.3 1244.3 98.5 Q1261.4 104.8 1278.4 111.7 Q1295.5 118.6 1312.5 126.0 Q1329.5 133.4 1346.6 141.2 Q1363.6 148.9 1380.7 156.9 Q1397.7 164.8 1414.8 172.8 Q1431.8 180.8 1448.9 188.6 Q1465.9 196.5 1483.0 204.1%22 stroke=%22%233E3E3C%22 stroke-width=%221.6%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 300.4 Q0.0 300.4 17.0 288.8 Q34.1 277.3 51.1 264.8 Q68.2 252.4 85.2 240.1 Q102.3 227.7 119.3 216.5 Q136.4 205.3 153.4 196.0 Q170.5 186.8 187.5 180.4 Q204.5 173.9 221.6 170.7 Q238.6 167.6 255.7 167.9 Q272.7 168.3 289.8 172.2 Q306.8 176.1 323.9 183.1 Q340.9 190.2 358.0 199.9 Q375.0 209.6 392.0 221.2 Q409.1 232.7 426.1 245.2 Q443.2 257.6 460.2 269.9 Q477.3 282.3 494.3 293.5 Q511.4 304.7 528.4 314.0 Q545.5 323.2 562.5 329.6 Q579.5 336.1 596.6 339.3 Q613.6 342.4 630.7 342.1 Q647.7 341.7 664.8 337.8 Q681.8 333.9 698.9 326.9 Q715.9 319.8 733.0 310.1 Q750.0 300.4 767.0 288.8 Q784.1 277.3 801.1 264.8 Q818.2 252.4 835.2 240.1 Q852.3 227.7 869.3 216.5 Q886.4 205.3 903.4 196.0 Q920.5 186.8 937.5 180.4 Q954.5 173.9 971.6 170.7 Q988.6 167.6 1005.7 167.9 Q1022.7 168.3 1039.8 172.2 Q1056.8 176.1 1073.9 183.1 Q1090.9 190.2 1108.0 199.9 Q1125.0 209.6 1142.0 221.2 Q1159.1 232.7 1176.1 245.2 Q1193.2 257.6 1210.2 269.9 Q1227.3 282.3 1244.3 293.5 Q1261.4 304.7 1278.4 314.0 Q1295.5 323.2 1312.5 329.6 Q1329.5 336.1 1346.6 339.3 Q1363.6 342.4 1380.7 342.1 Q1397.7 341.7 1414.8 337.8 Q1431.8 333.9 1448.9 326.9 Q1465.9 319.8 1483.0 310.1%22 stroke=%22%23C19A66%22 stroke-width=%221.3%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 469.6 Q0.0 469.6 17.0 473.3 Q34.1 477.0 51.1 479.4 Q68.2 481.7 85.2 482.8 Q102.3 483.9 119.3 483.6 Q136.4 483.3 153.4 481.7 Q170.5 480.1 187.5 477.2 Q204.5 474.3 221.6 470.1 Q238.6 466.0 255.7 460.7 Q272.7 455.3 289.8 449.0 Q306.8 442.6 323.9 435.3 Q340.9 428.0 358.0 419.9 Q375.0 411.9 392.0 403.2 Q409.1 394.5 426.1 385.4 Q443.2 376.3 460.2 367.0 Q477.3 357.6 494.3 348.2 Q511.4 338.8 528.4 329.5 Q545.5 320.2 562.5 311.3 Q579.5 302.3 596.6 293.9 Q613.6 285.4 630.7 277.6 Q647.7 269.9 664.8 262.9 Q681.8 256.0 698.9 250.0 Q715.9 244.1 733.0 239.2 Q750.0 234.4 767.0 230.7 Q784.1 227.0 801.1 224.6 Q818.2 222.3 835.2 221.2 Q852.3 220.1 869.3 220.4 Q886.4 220.7 903.4 222.3 Q920.5 223.9 937.5 226.8 Q954.5 229.7 971.6 233.9 Q988.6 238.0 1005.7 243.3 Q1022.7 248.7 1039.8 255.0 Q1056.8 261.4 1073.9 268.7 Q1090.9 276.0 1108.0 284.1 Q1125.0 292.1 1142.0 300.8 Q1159.1 309.5 1176.1 318.6 Q1193.2 327.7 1210.2 337.0 Q1227.3 346.4 1244.3 355.8 Q1261.4 365.2 1278.4 374.5 Q1295.5 383.8 1312.5 392.7 Q1329.5 401.7 1346.6 410.1 Q1363.6 418.6 1380.7 426.4 Q1397.7 434.1 1414.8 441.1 Q1431.8 448.0 1448.9 454.0 Q1465.9 459.9 1483.0 464.8%22 stroke=%22%233E3E3C%22 stroke-width=%221.2%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 348.0 Q0.0 348.0 17.0 345.8 Q34.1 343.5 51.1 342.1 Q68.2 340.8 85.2 340.4 Q102.3 340.0 119.3 340.6 Q136.4 341.2 153.4 342.8 Q170.5 344.3 187.5 346.8 Q204.5 349.3 221.6 352.7 Q238.6 356.1 255.7 360.3 Q272.7 364.5 289.8 369.4 Q306.8 374.3 323.9 379.9 Q340.9 385.4 358.0 391.5 Q375.0 397.5 392.0 404.0 Q409.1 410.4 426.1 417.1 Q443.2 423.9 460.2 430.7 Q477.3 437.5 494.3 444.4 Q511.4 451.2 528.4 457.8 Q545.5 464.5 562.5 470.9 Q579.5 477.3 596.6 483.2 Q613.6 489.2 630.7 494.6 Q647.7 500.0 664.8 504.8 Q681.8 509.5 698.9 513.6 Q715.9 517.6 733.0 520.8 Q750.0 524.0 767.0 526.2 Q784.1 528.5 801.1 529.9 Q818.2 531.2 835.2 531.6 Q852.3 532.0 869.3 531.4 Q886.4 530.8 903.4 529.2 Q920.5 527.7 937.5 525.2 Q954.5 522.7 971.6 519.3 Q988.6 515.9 1005.7 511.7 Q1022.7 507.5 1039.8 502.6 Q1056.8 497.7 1073.9 492.1 Q1090.9 486.6 1108.0 480.5 Q1125.0 474.5 1142.0 468.0 Q1159.1 461.6 1176.1 454.9 Q1193.2 448.1 1210.2 441.3 Q1227.3 434.5 1244.3 427.6 Q1261.4 420.8 1278.4 414.2 Q1295.5 407.5 1312.5 401.1 Q1329.5 394.7 1346.6 388.8 Q1363.6 382.8 1380.7 377.4 Q1397.7 372.0 1414.8 367.2 Q1431.8 362.5 1448.9 358.4 Q1465.9 354.4 1483.0 351.2%22 stroke=%22%23B15939%22 stroke-width=%221.5%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 460.5 Q0.0 460.5 17.0 474.7 Q34.1 488.8 51.1 505.4 Q68.2 521.9 85.2 539.5 Q102.3 557.1 119.3 574.4 Q136.4 591.6 153.4 607.1 Q170.5 622.5 187.5 635.0 Q204.5 647.4 221.6 655.9 Q238.6 664.3 255.7 668.0 Q272.7 671.7 289.8 670.4 Q306.8 669.1 323.9 662.9 Q340.9 656.7 358.0 646.1 Q375.0 635.5 392.0 621.3 Q409.1 607.2 426.1 590.6 Q443.2 574.1 460.2 556.5 Q477.3 538.9 494.3 521.6 Q511.4 504.4 528.4 488.9 Q545.5 473.5 562.5 461.0 Q579.5 448.6 596.6 440.1 Q613.6 431.7 630.7 428.0 Q647.7 424.3 664.8 425.6 Q681.8 426.9 698.9 433.1 Q715.9 439.3 733.0 449.9 Q750.0 460.5 767.0 474.7 Q784.1 488.8 801.1 505.4 Q818.2 521.9 835.2 539.5 Q852.3 557.1 869.3 574.4 Q886.4 591.6 903.4 607.1 Q920.5 622.5 937.5 635.0 Q954.5 647.4 971.6 655.9 Q988.6 664.3 1005.7 668.0 Q1022.7 671.7 1039.8 670.4 Q1056.8 669.1 1073.9 662.9 Q1090.9 656.7 1108.0 646.1 Q1125.0 635.5 1142.0 621.3 Q1159.1 607.2 1176.1 590.6 Q1193.2 574.1 1210.2 556.5 Q1227.3 538.9 1244.3 521.6 Q1261.4 504.4 1278.4 488.9 Q1295.5 473.5 1312.5 461.0 Q1329.5 448.6 1346.6 440.1 Q1363.6 431.7 1380.7 428.0 Q1397.7 424.3 1414.8 425.6 Q1431.8 426.9 1448.9 433.1 Q1465.9 439.3 1483.0 449.9%22 stroke=%22%233E3E3C%22 stroke-width=%221.6%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 719.5 Q0.0 719.5 17.0 717.2 Q34.1 714.8 51.1 711.7 Q68.2 708.6 85.2 704.8 Q102.3 701.0 119.3 696.6 Q136.4 692.2 153.4 687.2 Q170.5 682.3 187.5 676.9 Q204.5 671.5 221.6 665.8 Q238.6 660.1 255.7 654.2 Q272.7 648.3 289.8 642.3 Q306.8 636.3 323.9 630.4 Q340.9 624.4 358.0 618.6 Q375.0 612.8 392.0 607.3 Q409.1 601.8 426.1 596.7 Q443.2 591.5 460.2 586.9 Q477.3 582.3 494.3 578.2 Q511.4 574.2 528.4 570.8 Q545.5 567.4 562.5 564.8 Q579.5 562.1 596.6 560.3 Q613.6 558.4 630.7 557.4 Q647.7 556.4 664.8 556.2 Q681.8 556.1 698.9 556.8 Q715.9 557.5 733.0 559.0 Q750.0 560.5 767.0 562.8 Q784.1 565.2 801.1 568.3 Q818.2 571.4 835.2 575.2 Q852.3 579.0 869.3 583.4 Q886.4 587.8 903.4 592.8 Q920.5 597.7 937.5 603.1 Q954.5 608.5 971.6 614.2 Q988.6 619.9 1005.7 625.8 Q1022.7 631.7 1039.8 637.7 Q1056.8 643.7 1073.9 649.6 Q1090.9 655.6 1108.0 661.4 Q1125.0 667.2 1142.0 672.7 Q1159.1 678.2 1176.1 683.3 Q1193.2 688.5 1210.2 693.1 Q1227.3 697.7 1244.3 701.8 Q1261.4 705.8 1278.4 709.2 Q1295.5 712.6 1312.5 715.2 Q1329.5 717.9 1346.6 719.7 Q1363.6 721.6 1380.7 722.6 Q1397.7 723.6 1414.8 723.8 Q1431.8 723.9 1448.9 723.2 Q1465.9 722.5 1483.0 721.0%22 stroke=%22%23C19A66%22 stroke-width=%221.3%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 704.8 Q0.0 704.8 17.0 696.9 Q34.1 688.9 51.1 681.4 Q68.2 673.9 85.2 667.1 Q102.3 660.2 119.3 654.1 Q136.4 648.0 153.4 642.7 Q170.5 637.5 187.5 633.3 Q204.5 629.0 221.6 625.9 Q238.6 622.7 255.7 620.7 Q272.7 618.7 289.8 617.9 Q306.8 617.0 323.9 617.4 Q340.9 617.8 358.0 619.4 Q375.0 620.9 392.0 623.6 Q409.1 626.4 426.1 630.2 Q443.2 634.0 460.2 638.9 Q477.3 643.8 494.3 649.5 Q511.4 655.3 528.4 661.9 Q545.5 668.5 562.5 675.8 Q579.5 683.1 596.6 690.9 Q613.6 698.7 630.7 706.9 Q647.7 715.0 664.8 723.4 Q681.8 731.8 698.9 740.2 Q715.9 748.6 733.0 756.9 Q750.0 765.2 767.0 773.1 Q784.1 781.1 801.1 788.6 Q818.2 796.1 835.2 802.9 Q852.3 809.8 869.3 815.9 Q886.4 822.0 903.4 827.3 Q920.5 832.5 937.5 836.7 Q954.5 841.0 971.6 844.1 Q988.6 847.3 1005.7 849.3 Q1022.7 851.3 1039.8 852.1 Q1056.8 853.0 1073.9 852.6 Q1090.9 852.2 1108.0 850.6 Q1125.0 849.1 1142.0 846.4 Q1159.1 843.6 1176.1 839.8 Q1193.2 836.0 1210.2 831.1 Q1227.3 826.2 1244.3 820.5 Q1261.4 814.7 1278.4 808.1 Q1295.5 801.5 1312.5 794.2 Q1329.5 786.9 1346.6 779.1 Q1363.6 771.3 1380.7 763.1 Q1397.7 755.0 1414.8 746.6 Q1431.8 738.2 1448.9 729.8 Q1465.9 721.4 1483.0 713.1%22 stroke=%22%233E3E3C%22 stroke-width=%221.2%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 910.1 Q0.0 910.1 17.0 916.7 Q34.1 923.3 51.1 926.4 Q68.2 929.5 85.2 929.0 Q102.3 928.4 119.3 924.2 Q136.4 920.0 153.4 912.4 Q170.5 904.9 187.5 894.6 Q204.5 884.3 221.6 872.2 Q238.6 860.1 255.7 847.1 Q272.7 834.0 289.8 821.2 Q306.8 808.3 323.9 796.6 Q340.9 785.0 358.0 775.4 Q375.0 765.9 392.0 759.3 Q409.1 752.7 426.1 749.6 Q443.2 746.5 460.2 747.0 Q477.3 747.6 494.3 751.8 Q511.4 756.0 528.4 763.6 Q545.5 771.1 562.5 781.4 Q579.5 791.7 596.6 803.8 Q613.6 815.9 630.7 828.9 Q647.7 842.0 664.8 854.8 Q681.8 867.7 698.9 879.4 Q715.9 891.0 733.0 900.6 Q750.0 910.1 767.0 916.7 Q784.1 923.3 801.1 926.4 Q818.2 929.5 835.2 929.0 Q852.3 928.4 869.3 924.2 Q886.4 920.0 903.4 912.4 Q920.5 904.9 937.5 894.6 Q954.5 884.3 971.6 872.2 Q988.6 860.1 1005.7 847.1 Q1022.7 834.0 1039.8 821.2 Q1056.8 808.3 1073.9 796.6 Q1090.9 785.0 1108.0 775.4 Q1125.0 765.9 1142.0 759.3 Q1159.1 752.7 1176.1 749.6 Q1193.2 746.5 1210.2 747.0 Q1227.3 747.6 1244.3 751.8 Q1261.4 756.0 1278.4 763.6 Q1295.5 771.1 1312.5 781.4 Q1329.5 791.7 1346.6 803.8 Q1363.6 815.9 1380.7 828.9 Q1397.7 842.0 1414.8 854.8 Q1431.8 867.7 1448.9 879.4 Q1465.9 891.0 1483.0 900.6%22 stroke=%22%23B15939%22 stroke-width=%221.4%22 fill=%22none%22/%3E%3Cg stroke=%22%233E3E3C%22 stroke-width=%221.85%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(285.0,280.0) rotate(-0.6)%22%3E%3Cpath d=%22M-56.0 0 C-56.0 -60.4 56.0 -60.4 56.0 0 C56.0 60.4 -56.0 60.4 -56.0 0 Z%22 transform=%22translate(-75.8,0)%22/%3E%3Cpath d=%22M-56.0 0 C-56.0 -60.4 56.0 -60.4 56.0 0 C56.0 60.4 -56.0 60.4 -56.0 0 Z%22 transform=%22translate(75.8,0)%22/%3E%3Cpath d=%22M-19.8 -10.5 Q0 -26.3 19.8 -10.5%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23C19A66%22 stroke-width=%221.55%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(1080.0,185.1) rotate(24.1)%22%3E%3Cpath d=%22M-44.0 -10.0 Q-24.2 -44.2 19.8 -48.2 Q44.0 -49.2 44.0 -14.1 Q44.0 38.1 0.0 40.1 Q-41.8 38.1 -44.0 -10.0 Z%22 transform=%22translate(-58.7,0) scale(-1,1)%22/%3E%3Cpath d=%22M-44.0 -10.0 Q-24.2 -44.2 19.8 -48.2 Q44.0 -49.2 44.0 -14.1 Q44.0 38.1 0.0 40.1 Q-41.8 38.1 -44.0 -10.0 Z%22 transform=%22translate(58.7,0)%22/%3E%3Cpath d=%22M-14.7 -8.0 Q0 -20.1 14.7 -8.0%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23B15939%22 stroke-width=%221.75%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(660.0,503.6) rotate(15.9)%22%3E%3Cpath d=%22M-32.2 -39.6 L32.2 -39.6 Q52.0 -39.6 52.0 -19.9 L52.0 19.9 Q52.0 39.6 32.2 39.6 L-32.2 39.6 Q-52.0 39.6 -52.0 19.9 L-52.0 -19.9 Q-52.0 -39.6 -32.2 -39.6 Z%22 transform=%22translate(-67.9,0)%22/%3E%3Cpath d=%22M-32.2 -39.6 L32.2 -39.6 Q52.0 -39.6 52.0 -19.9 L52.0 19.9 Q52.0 39.6 32.2 39.6 L-32.2 39.6 Q-52.0 39.6 -52.0 19.9 L-52.0 -19.9 Q-52.0 -39.6 -32.2 -39.6 Z%22 transform=%22translate(67.9,0)%22/%3E%3Cpath d=%22M-15.9 -7.9 Q0 -19.8 15.9 -7.9%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%233E3E3C%22 stroke-width=%221.45%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(1320.0,396.8) rotate(27.5)%22%3E%3Cpath d=%22M-47.0 -18.6 Q-42.3 -41.3 0.0 -41.3 Q42.3 -41.3 47.0 -18.6 Q47.9 22.7 0.0 41.3 Q-47.9 22.7 -47.0 -18.6 Z%22 transform=%22translate(-63.4,0)%22/%3E%3Cpath d=%22M-47.0 -18.6 Q-42.3 -41.3 0.0 -41.3 Q42.3 -41.3 47.0 -18.6 Q47.9 22.7 0.0 41.3 Q-47.9 22.7 -47.0 -18.6 Z%22 transform=%22translate(63.4,0)%22/%3E%3Cpath d=%22M-16.4 -8.3 Q0 -20.6 16.4 -8.3%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23C19A66%22 stroke-width=%221.55%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(180.0,679.4) rotate(-17.3)%22%3E%3Cpath d=%22M-50.0 0 C-50.0 -50.6 50.0 -50.6 50.0 0 C50.0 50.6 -50.0 50.6 -50.0 0 Z%22 transform=%22translate(-70.5,0)%22/%3E%3Cpath d=%22M-50.0 0 C-50.0 -50.6 50.0 -50.6 50.0 0 C50.0 50.6 -50.0 50.6 -50.0 0 Z%22 transform=%22translate(70.5,0)%22/%3E%3Cpath d=%22M-20.5 -7.8 Q0 -19.5 20.5 -7.8%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%233E3E3C%22 stroke-width=%221.45%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(915.0,831.0) rotate(16.1)%22%3E%3Cpath d=%22M-58.0 -15.4 L-30.2 -51.4 L30.2 -51.4 L58.0 -15.4 L29.0 51.4 L-29.0 51.4 Z%22 transform=%22translate(-78.3,0)%22/%3E%3Cpath d=%22M-58.0 -15.4 L-30.2 -51.4 L30.2 -51.4 L58.0 -15.4 L29.0 51.4 L-29.0 51.4 Z%22 transform=%22translate(78.3,0)%22/%3E%3Cpath d=%22M-20.3 -10.3 Q0 -25.7 20.3 -10.3%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23B15939%22 stroke-width=%221.65%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(525.0,761.3) rotate(23.1)%22%3E%3Cpath d=%22M-45.0 0 C-45.0 -40.0 45.0 -40.0 45.0 0 C45.0 40.0 -45.0 40.0 -45.0 0 Z%22 transform=%22translate(-60.2,0)%22/%3E%3Cpath d=%22M-45.0 0 C-45.0 -40.0 45.0 -40.0 45.0 0 C45.0 40.0 -45.0 40.0 -45.0 0 Z%22 transform=%22translate(60.2,0)%22/%3E%3Cpath d=%22M-15.2 -6.9 Q0 -17.4 15.2 -6.9%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%233E3E3C%22 stroke-width=%221.85%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(450.0,567.1) rotate(-45.7)%22%3E%3Cpath d=%22M-41.0 -15.3 Q-36.9 -34.0 0.0 -34.0 Q36.9 -34.0 41.0 -15.3 Q41.8 18.7 0.0 34.0 Q-41.8 18.7 -41.0 -15.3 Z%22 transform=%22translate(-53.6,0)%22/%3E%3Cpath d=%22M-41.0 -15.3 Q-36.9 -34.0 0.0 -34.0 Q36.9 -34.0 41.0 -15.3 Q41.8 18.7 0.0 34.0 Q-41.8 18.7 -41.0 -15.3 Z%22 transform=%22translate(53.6,0)%22/%3E%3Cpath d=%22M-12.6 -6.8 Q0 -17.0 12.6 -6.8%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --motif-sombre:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221500%22 height=%221000%22 viewBox=%220 0 1500 1000%22%3E%3Cg stroke-linecap=%22round%22 opacity=%220.20%22%3E%3Cpath d=%22M0.0 234.9 Q0.0 234.9 17.0 226.4 Q34.1 217.9 51.1 206.7 Q68.2 195.5 85.2 182.6 Q102.3 169.6 119.3 156.0 Q136.4 142.3 153.4 129.1 Q170.5 115.8 187.5 104.0 Q204.5 92.2 221.6 82.9 Q238.6 73.5 255.7 67.3 Q272.7 61.1 289.8 58.6 Q306.8 56.1 323.9 57.5 Q340.9 58.8 358.0 64.0 Q375.0 69.1 392.0 77.6 Q409.1 86.1 426.1 97.3 Q443.2 108.5 460.2 121.4 Q477.3 134.4 494.3 148.0 Q511.4 161.7 528.4 174.9 Q545.5 188.2 562.5 200.0 Q579.5 211.8 596.6 221.1 Q613.6 230.5 630.7 236.7 Q647.7 242.9 664.8 245.4 Q681.8 247.9 698.9 246.5 Q715.9 245.2 733.0 240.0 Q750.0 234.9 767.0 226.4 Q784.1 217.9 801.1 206.7 Q818.2 195.5 835.2 182.6 Q852.3 169.6 869.3 156.0 Q886.4 142.3 903.4 129.1 Q920.5 115.8 937.5 104.0 Q954.5 92.2 971.6 82.9 Q988.6 73.5 1005.7 67.3 Q1022.7 61.1 1039.8 58.6 Q1056.8 56.1 1073.9 57.5 Q1090.9 58.8 1108.0 64.0 Q1125.0 69.1 1142.0 77.6 Q1159.1 86.1 1176.1 97.3 Q1193.2 108.5 1210.2 121.4 Q1227.3 134.4 1244.3 148.0 Q1261.4 161.7 1278.4 174.9 Q1295.5 188.2 1312.5 200.0 Q1329.5 211.8 1346.6 221.1 Q1363.6 230.5 1380.7 236.7 Q1397.7 242.9 1414.8 245.4 Q1431.8 247.9 1448.9 246.5 Q1465.9 245.2 1483.0 240.0%22 stroke=%22%23EAE2D5%22 stroke-width=%221.5%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 122.5 Q0.0 122.5 17.0 123.9 Q34.1 125.3 51.1 128.0 Q68.2 130.7 85.2 134.5 Q102.3 138.4 119.3 143.4 Q136.4 148.4 153.4 154.4 Q170.5 160.4 187.5 167.2 Q204.5 174.1 221.6 181.8 Q238.6 189.4 255.7 197.7 Q272.7 205.9 289.8 214.6 Q306.8 223.2 323.9 232.1 Q340.9 241.0 358.0 250.0 Q375.0 259.0 392.0 267.9 Q409.1 276.8 426.1 285.4 Q443.2 293.9 460.2 302.1 Q477.3 310.2 494.3 317.7 Q511.4 325.1 528.4 331.8 Q545.5 338.5 562.5 344.3 Q579.5 350.1 596.6 354.8 Q613.6 359.6 630.7 363.2 Q647.7 366.8 664.8 369.1 Q681.8 371.5 698.9 372.7 Q715.9 373.8 733.0 373.7 Q750.0 373.5 767.0 372.1 Q784.1 370.7 801.1 368.0 Q818.2 365.3 835.2 361.5 Q852.3 357.6 869.3 352.6 Q886.4 347.6 903.4 341.6 Q920.5 335.6 937.5 328.8 Q954.5 321.9 971.6 314.2 Q988.6 306.6 1005.7 298.3 Q1022.7 290.1 1039.8 281.4 Q1056.8 272.8 1073.9 263.9 Q1090.9 255.0 1108.0 246.0 Q1125.0 237.0 1142.0 228.1 Q1159.1 219.2 1176.1 210.6 Q1193.2 202.1 1210.2 193.9 Q1227.3 185.8 1244.3 178.3 Q1261.4 170.9 1278.4 164.2 Q1295.5 157.5 1312.5 151.7 Q1329.5 145.9 1346.6 141.2 Q1363.6 136.4 1380.7 132.8 Q1397.7 129.2 1414.8 126.9 Q1431.8 124.5 1448.9 123.3 Q1465.9 122.2 1483.0 122.3%22 stroke=%22%23D2AE7A%22 stroke-width=%221.4%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 412.3 Q0.0 412.3 17.0 416.9 Q34.1 421.5 51.1 425.5 Q68.2 429.5 85.2 432.9 Q102.3 436.2 119.3 438.9 Q136.4 441.5 153.4 443.4 Q170.5 445.3 187.5 446.4 Q204.5 447.5 221.6 447.7 Q238.6 448.0 255.7 447.4 Q272.7 446.8 289.8 445.4 Q306.8 444.0 323.9 441.8 Q340.9 439.6 358.0 436.6 Q375.0 433.7 392.0 430.0 Q409.1 426.4 426.1 422.1 Q443.2 417.9 460.2 413.1 Q477.3 408.3 494.3 403.1 Q511.4 397.9 528.4 392.4 Q545.5 386.8 562.5 381.1 Q579.5 375.3 596.6 369.5 Q613.6 363.6 630.7 357.8 Q647.7 352.0 664.8 346.3 Q681.8 340.6 698.9 335.2 Q715.9 329.8 733.0 324.8 Q750.0 319.7 767.0 315.1 Q784.1 310.5 801.1 306.5 Q818.2 302.5 835.2 299.1 Q852.3 295.8 869.3 293.1 Q886.4 290.5 903.4 288.6 Q920.5 286.7 937.5 285.6 Q954.5 284.5 971.6 284.3 Q988.6 284.0 1005.7 284.6 Q1022.7 285.2 1039.8 286.6 Q1056.8 288.0 1073.9 290.2 Q1090.9 292.4 1108.0 295.4 Q1125.0 298.3 1142.0 302.0 Q1159.1 305.6 1176.1 309.9 Q1193.2 314.1 1210.2 318.9 Q1227.3 323.7 1244.3 328.9 Q1261.4 334.1 1278.4 339.6 Q1295.5 345.2 1312.5 350.9 Q1329.5 356.7 1346.6 362.5 Q1363.6 368.4 1380.7 374.2 Q1397.7 380.0 1414.8 385.7 Q1431.8 391.4 1448.9 396.8 Q1465.9 402.2 1483.0 407.2%22 stroke=%22%23EAE2D5%22 stroke-width=%221.2%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 446.9 Q0.0 446.9 17.0 427.7 Q34.1 408.5 51.1 391.1 Q68.2 373.7 85.2 359.7 Q102.3 345.6 119.3 336.0 Q136.4 326.3 153.4 321.9 Q170.5 317.5 187.5 318.6 Q204.5 319.8 221.6 326.4 Q238.6 333.0 255.7 344.6 Q272.7 356.2 289.8 371.7 Q306.8 387.3 323.9 405.6 Q340.9 423.9 358.0 443.5 Q375.0 463.1 392.0 482.3 Q409.1 501.5 426.1 518.9 Q443.2 536.3 460.2 550.3 Q477.3 564.4 494.3 574.0 Q511.4 583.7 528.4 588.1 Q545.5 592.5 562.5 591.4 Q579.5 590.2 596.6 583.6 Q613.6 577.0 630.7 565.4 Q647.7 553.8 664.8 538.3 Q681.8 522.7 698.9 504.4 Q715.9 486.1 733.0 466.5 Q750.0 446.9 767.0 427.7 Q784.1 408.5 801.1 391.1 Q818.2 373.7 835.2 359.7 Q852.3 345.6 869.3 336.0 Q886.4 326.3 903.4 321.9 Q920.5 317.5 937.5 318.6 Q954.5 319.8 971.6 326.4 Q988.6 333.0 1005.7 344.6 Q1022.7 356.2 1039.8 371.7 Q1056.8 387.3 1073.9 405.6 Q1090.9 423.9 1108.0 443.5 Q1125.0 463.1 1142.0 482.3 Q1159.1 501.5 1176.1 518.9 Q1193.2 536.3 1210.2 550.3 Q1227.3 564.4 1244.3 574.0 Q1261.4 583.7 1278.4 588.1 Q1295.5 592.5 1312.5 591.4 Q1329.5 590.2 1346.6 583.6 Q1363.6 577.0 1380.7 565.4 Q1397.7 553.8 1414.8 538.3 Q1431.8 522.7 1448.9 504.4 Q1465.9 486.1 1483.0 466.5%22 stroke=%22%23C4714F%22 stroke-width=%221.3%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 526.9 Q0.0 526.9 17.0 533.2 Q34.1 539.6 51.1 546.2 Q68.2 552.8 85.2 559.5 Q102.3 566.2 119.3 572.9 Q136.4 579.6 153.4 586.1 Q170.5 592.5 187.5 598.7 Q204.5 604.9 221.6 610.6 Q238.6 616.3 255.7 621.5 Q272.7 626.7 289.8 631.2 Q306.8 635.8 323.9 639.5 Q340.9 643.3 358.0 646.2 Q375.0 649.2 392.0 651.2 Q409.1 653.3 426.1 654.4 Q443.2 655.6 460.2 655.7 Q477.3 655.9 494.3 655.1 Q511.4 654.3 528.4 652.6 Q545.5 650.9 562.5 648.3 Q579.5 645.7 596.6 642.2 Q613.6 638.7 630.7 634.4 Q647.7 630.2 664.8 625.2 Q681.8 620.3 698.9 614.7 Q715.9 609.2 733.0 603.2 Q750.0 597.1 767.0 590.8 Q784.1 584.4 801.1 577.8 Q818.2 571.2 835.2 564.5 Q852.3 557.8 869.3 551.1 Q886.4 544.4 903.4 537.9 Q920.5 531.5 937.5 525.3 Q954.5 519.1 971.6 513.4 Q988.6 507.7 1005.7 502.5 Q1022.7 497.3 1039.8 492.8 Q1056.8 488.2 1073.9 484.5 Q1090.9 480.7 1108.0 477.8 Q1125.0 474.8 1142.0 472.8 Q1159.1 470.7 1176.1 469.6 Q1193.2 468.4 1210.2 468.3 Q1227.3 468.1 1244.3 468.9 Q1261.4 469.7 1278.4 471.4 Q1295.5 473.1 1312.5 475.7 Q1329.5 478.3 1346.6 481.8 Q1363.6 485.3 1380.7 489.6 Q1397.7 493.8 1414.8 498.8 Q1431.8 503.7 1448.9 509.3 Q1465.9 514.8 1483.0 520.8%22 stroke=%22%23EAE2D5%22 stroke-width=%221.5%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 786.3 Q0.0 786.3 17.0 786.7 Q34.1 787.2 51.1 782.9 Q68.2 778.5 85.2 769.7 Q102.3 760.9 119.3 748.3 Q136.4 735.7 153.4 720.3 Q170.5 705.0 187.5 688.2 Q204.5 671.4 221.6 654.4 Q238.6 637.4 255.7 621.7 Q272.7 606.0 289.8 592.8 Q306.8 579.5 323.9 569.9 Q340.9 560.3 358.0 555.0 Q375.0 549.7 392.0 549.3 Q409.1 548.8 426.1 553.1 Q443.2 557.5 460.2 566.3 Q477.3 575.1 494.3 587.7 Q511.4 600.3 528.4 615.7 Q545.5 631.0 562.5 647.8 Q579.5 664.6 596.6 681.6 Q613.6 698.6 630.7 714.3 Q647.7 730.0 664.8 743.2 Q681.8 756.5 698.9 766.1 Q715.9 775.7 733.0 781.0 Q750.0 786.3 767.0 786.7 Q784.1 787.2 801.1 782.9 Q818.2 778.5 835.2 769.7 Q852.3 760.9 869.3 748.3 Q886.4 735.7 903.4 720.3 Q920.5 705.0 937.5 688.2 Q954.5 671.4 971.6 654.4 Q988.6 637.4 1005.7 621.7 Q1022.7 606.0 1039.8 592.8 Q1056.8 579.5 1073.9 569.9 Q1090.9 560.3 1108.0 555.0 Q1125.0 549.7 1142.0 549.3 Q1159.1 548.8 1176.1 553.1 Q1193.2 557.5 1210.2 566.3 Q1227.3 575.1 1244.3 587.7 Q1261.4 600.3 1278.4 615.7 Q1295.5 631.0 1312.5 647.8 Q1329.5 664.6 1346.6 681.6 Q1363.6 698.6 1380.7 714.3 Q1397.7 730.0 1414.8 743.2 Q1431.8 756.5 1448.9 766.1 Q1465.9 775.7 1483.0 781.0%22 stroke=%22%23D2AE7A%22 stroke-width=%221.2%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 697.5 Q0.0 697.5 17.0 693.2 Q34.1 689.0 51.1 685.5 Q68.2 681.9 85.2 679.2 Q102.3 676.4 119.3 674.5 Q136.4 672.5 153.4 671.5 Q170.5 670.4 187.5 670.3 Q204.5 670.1 221.6 670.8 Q238.6 671.5 255.7 673.1 Q272.7 674.7 289.8 677.2 Q306.8 679.7 323.9 682.9 Q340.9 686.2 358.0 690.1 Q375.0 694.1 392.0 698.7 Q409.1 703.4 426.1 708.6 Q443.2 713.8 460.2 719.4 Q477.3 725.0 494.3 731.0 Q511.4 737.0 528.4 743.2 Q545.5 749.4 562.5 755.6 Q579.5 761.9 596.6 768.1 Q613.6 774.4 630.7 780.4 Q647.7 786.5 664.8 792.3 Q681.8 798.1 698.9 803.4 Q715.9 808.8 733.0 813.7 Q750.0 818.5 767.0 822.8 Q784.1 827.0 801.1 830.5 Q818.2 834.1 835.2 836.8 Q852.3 839.6 869.3 841.5 Q886.4 843.5 903.4 844.5 Q920.5 845.6 937.5 845.7 Q954.5 845.9 971.6 845.2 Q988.6 844.5 1005.7 842.9 Q1022.7 841.3 1039.8 838.8 Q1056.8 836.3 1073.9 833.1 Q1090.9 829.8 1108.0 825.9 Q1125.0 821.9 1142.0 817.3 Q1159.1 812.6 1176.1 807.4 Q1193.2 802.2 1210.2 796.6 Q1227.3 791.0 1244.3 785.0 Q1261.4 779.0 1278.4 772.8 Q1295.5 766.6 1312.5 760.4 Q1329.5 754.1 1346.6 747.9 Q1363.6 741.6 1380.7 735.6 Q1397.7 729.5 1414.8 723.7 Q1431.8 717.9 1448.9 712.6 Q1465.9 707.2 1483.0 702.3%22 stroke=%22%23EAE2D5%22 stroke-width=%221.4%22 fill=%22none%22/%3E%3Cpath d=%22M0.0 883.9 Q0.0 883.9 17.0 891.1 Q34.1 898.3 51.1 905.0 Q68.2 911.7 85.2 917.8 Q102.3 923.9 119.3 929.3 Q136.4 934.6 153.4 939.2 Q170.5 943.7 187.5 947.3 Q204.5 950.9 221.6 953.5 Q238.6 956.1 255.7 957.6 Q272.7 959.1 289.8 959.5 Q306.8 960.0 323.9 959.3 Q340.9 958.7 358.0 956.9 Q375.0 955.2 392.0 952.4 Q409.1 949.6 426.1 945.8 Q443.2 942.0 460.2 937.3 Q477.3 932.6 494.3 927.1 Q511.4 921.5 528.4 915.3 Q545.5 909.1 562.5 902.3 Q579.5 895.4 596.6 888.2 Q613.6 880.9 630.7 873.4 Q647.7 865.8 664.8 858.1 Q681.8 850.4 698.9 842.8 Q715.9 835.1 733.0 827.6 Q750.0 820.1 767.0 812.9 Q784.1 805.7 801.1 799.0 Q818.2 792.3 835.2 786.2 Q852.3 780.1 869.3 774.7 Q886.4 769.4 903.4 764.8 Q920.5 760.3 937.5 756.7 Q954.5 753.1 971.6 750.5 Q988.6 747.9 1005.7 746.4 Q1022.7 744.9 1039.8 744.5 Q1056.8 744.0 1073.9 744.7 Q1090.9 745.3 1108.0 747.1 Q1125.0 748.8 1142.0 751.6 Q1159.1 754.4 1176.1 758.2 Q1193.2 762.0 1210.2 766.7 Q1227.3 771.4 1244.3 776.9 Q1261.4 782.5 1278.4 788.7 Q1295.5 794.9 1312.5 801.7 Q1329.5 808.6 1346.6 815.8 Q1363.6 823.1 1380.7 830.6 Q1397.7 838.2 1414.8 845.9 Q1431.8 853.6 1448.9 861.2 Q1465.9 868.9 1483.0 876.4%22 stroke=%22%23C4714F%22 stroke-width=%221.3%22 fill=%22none%22/%3E%3Cg stroke=%22%23EAE2D5%22 stroke-width=%221.75%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(945.0,98.4) rotate(-33.7)%22%3E%3Cpath d=%22M-50.0 -20.1 Q-45.0 -44.7 0.0 -44.7 Q45.0 -44.7 50.0 -20.1 Q51.0 24.6 0.0 44.7 Q-51.0 24.6 -50.0 -20.1 Z%22 transform=%22translate(-66.4,0)%22/%3E%3Cpath d=%22M-50.0 -20.1 Q-45.0 -44.7 0.0 -44.7 Q45.0 -44.7 50.0 -20.1 Q51.0 24.6 0.0 44.7 Q-51.0 24.6 -50.0 -20.1 Z%22 transform=%22translate(66.4,0)%22/%3E%3Cpath d=%22M-16.4 -8.9 Q0 -22.4 16.4 -8.9%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23D2AE7A%22 stroke-width=%221.65%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(255.0,197.2) rotate(25.8)%22%3E%3Cpath d=%22M-57.0 -15.9 L-29.6 -52.9 L29.6 -52.9 L57.0 -15.9 L28.5 52.9 L-28.5 52.9 Z%22 transform=%22translate(-80.0,0)%22/%3E%3Cpath d=%22M-57.0 -15.9 L-29.6 -52.9 L29.6 -52.9 L57.0 -15.9 L28.5 52.9 L-28.5 52.9 Z%22 transform=%22translate(80.0,0)%22/%3E%3Cpath d=%22M-23.0 -10.6 Q0 -26.4 23.0 -10.6%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23EAE2D5%22 stroke-width=%221.45%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(615.0,363.2) rotate(-18.9)%22%3E%3Cpath d=%22M-43.0 0 C-43.0 -39.3 43.0 -39.3 43.0 0 C43.0 39.3 -43.0 39.3 -43.0 0 Z%22 transform=%22translate(-58.9,0)%22/%3E%3Cpath d=%22M-43.0 0 C-43.0 -39.3 43.0 -39.3 43.0 0 C43.0 39.3 -43.0 39.3 -43.0 0 Z%22 transform=%22translate(58.9,0)%22/%3E%3Cpath d=%22M-15.9 -6.8 Q0 -17.1 15.9 -6.8%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23C4714F%22 stroke-width=%221.55%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(1185.0,528.4) rotate(44.4)%22%3E%3Cpath d=%22M-54.0 -12.6 Q-29.7 -55.6 24.3 -60.6 Q54.0 -61.9 54.0 -17.7 Q54.0 48.0 0.0 50.5 Q-51.3 48.0 -54.0 -12.6 Z%22 transform=%22translate(-68.3,0) scale(-1,1)%22/%3E%3Cpath d=%22M-54.0 -12.6 Q-29.7 -55.6 24.3 -60.6 Q54.0 -61.9 54.0 -17.7 Q54.0 48.0 0.0 50.5 Q-51.3 48.0 -54.0 -12.6 Z%22 transform=%22translate(68.3,0)%22/%3E%3Cpath d=%22M-14.3 -10.1 Q0 -25.3 14.3 -10.1%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23D2AE7A%22 stroke-width=%221.45%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(495.0,587.4) rotate(36.7)%22%3E%3Cpath d=%22M-28.5 -36.9 L28.5 -36.9 Q46.0 -36.9 46.0 -19.4 L46.0 19.4 Q46.0 36.9 28.5 36.9 L-28.5 36.9 Q-46.0 36.9 -46.0 19.4 L-46.0 -19.4 Q-46.0 -36.9 -28.5 -36.9 Z%22 transform=%22translate(-58.1,0)%22/%3E%3Cpath d=%22M-28.5 -36.9 L28.5 -36.9 Q46.0 -36.9 46.0 -19.4 L46.0 19.4 Q46.0 36.9 28.5 36.9 L-28.5 36.9 Q-46.0 36.9 -46.0 19.4 L-46.0 -19.4 Q-46.0 -36.9 -28.5 -36.9 Z%22 transform=%22translate(58.1,0)%22/%3E%3Cpath d=%22M-12.1 -7.4 Q0 -18.5 12.1 -7.4%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23EAE2D5%22 stroke-width=%221.65%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(1320.0,757.6) rotate(-20.2)%22%3E%3Cpath d=%22M-52.0 0 C-52.0 -56.9 52.0 -56.9 52.0 0 C52.0 56.9 -52.0 56.9 -52.0 0 Z%22 transform=%22translate(-69.3,0)%22/%3E%3Cpath d=%22M-52.0 0 C-52.0 -56.9 52.0 -56.9 52.0 0 C52.0 56.9 -52.0 56.9 -52.0 0 Z%22 transform=%22translate(69.3,0)%22/%3E%3Cpath d=%22M-17.3 -8.8 Q0 -21.9 17.3 -8.8%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23C4714F%22 stroke-width=%221.55%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(825.0,789.8) rotate(-20.3)%22%3E%3Cpath d=%22M-48.0 -17.3 Q-43.2 -38.5 0.0 -38.5 Q43.2 -38.5 48.0 -17.3 Q49.0 21.2 0.0 38.5 Q-49.0 21.2 -48.0 -17.3 Z%22 transform=%22translate(-61.3,0)%22/%3E%3Cpath d=%22M-48.0 -17.3 Q-43.2 -38.5 0.0 -38.5 Q43.2 -38.5 48.0 -17.3 Q49.0 21.2 0.0 38.5 Q-49.0 21.2 -48.0 -17.3 Z%22 transform=%22translate(61.3,0)%22/%3E%3Cpath d=%22M-13.3 -7.7 Q0 -19.3 13.3 -7.7%22/%3E%3C/g%3E%3C/g%3E%3Cg stroke=%22%23EAE2D5%22 stroke-width=%221.75%22 fill=%22none%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(120.0,573.2) rotate(21.4)%22%3E%3Cpath d=%22M-42.0 0 C-42.0 -37.9 42.0 -37.9 42.0 0 C42.0 37.9 -42.0 37.9 -42.0 0 Z%22 transform=%22translate(-54.0,0)%22/%3E%3Cpath d=%22M-42.0 0 C-42.0 -37.9 42.0 -37.9 42.0 0 C42.0 37.9 -42.0 37.9 -42.0 0 Z%22 transform=%22translate(54.0,0)%22/%3E%3Cpath d=%22M-12.0 -6.6 Q0 -16.5 12.0 -6.6%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.motif-lunettes {
  background-image: var(--motif-clair);
  background-repeat: repeat;
  background-size: 760px auto;
  background-position: center top;
}

/* Sur fond écru, le motif se lit sans gêner le texte */
.teinte.motif-lunettes { background-color: var(--ecru); }

/* ------------------------------------------------------------
   LA VIDÉO
   ------------------------------------------------------------ */
.video-amorce {
  display: flex; align-items: center; gap: 1.1rem;
  margin-top: 2.25rem; padding: 0.55rem 1.1rem 0.55rem 0.55rem;
  background: transparent; cursor: pointer; text-align: left;
  border: 1px solid var(--trait-sombre); border-radius: 3px;
  transition: border-color .15s, background .15s;
}
.video-amorce:hover { border-color: var(--or); background: rgba(210,174,122,0.07); }

.video-vignette {
  width: 72px; height: 128px; object-fit: cover; display: block;
  border-radius: 2px; background: var(--vert-clair); flex-shrink: 0;
}
.video-texte { display: block; }
.video-titre {
  display: block; font-family: var(--titre); font-weight: 700;
  font-size: 1.05rem; color: var(--ivoire); line-height: 1.25;
}
.video-action {
  display: block; margin-top: 0.4rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--or);
}
.video-action::before { content: "\25B6"; margin-right: 0.45rem; font-size: 0.65rem; }

.video-fenetre {
  border: none; padding: 0; background: transparent;
  max-width: 94vw; max-height: 94vh; overflow: visible;
}
.video-fenetre::backdrop { background: rgba(14,28,26,0.92); }
.video-fenetre video {
  display: block; max-width: 94vw; max-height: 88vh;
  width: auto; height: 80vh; background: #000; border-radius: 3px;
}
.video-fermer {
  position: absolute; top: -2.6rem; right: 0;
  background: transparent; border: none; cursor: pointer;
  font-size: 2.2rem; line-height: 1; color: var(--ecru); padding: 0 .3rem;
}
.video-fermer:hover { color: var(--or); }

/* ------------------------------------------------------------
   LE BANDEAU DES MARQUES PARTENAIRES
   ------------------------------------------------------------ */
.partenaires { background-color: var(--ecru); padding: 3.25rem 0; border-top: none !important; }
.partenaires-titre {
  text-align: center; margin-bottom: 1.75rem;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gris);
}
.logos-marques {
  list-style: none; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 2rem 2.6rem;
  max-width: 64rem; margin: 0 auto;   /* deux lignes équilibrées */
}
.logo-marque { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.logo-marque a { text-decoration: none; }

/* Le lieu de fabrication, sous chaque logo */
.logo-fabrication {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gris);
  text-align: center; line-height: 1.45; max-width: 9.5rem;
}
/* Les logos n'ont pas tous les mêmes proportions. Un mot long
   et un logo carré ne peuvent pas avoir la même hauteur sans
   déséquilibrer la ligne : d'où deux familles de tailles. */
.logo-marque img {
  width: auto; display: block;
  opacity: 0.82; transition: opacity .18s;
  filter: saturate(0);
}
.logo-marque.large  img { height: 1.8rem; max-width: 12rem; }
.logo-marque.empile img { height: 3.9rem; max-width: 8rem; }
.logo-marque a:hover img { opacity: 1; }

@media (max-width: 760px) {
  .logos-marques { gap: 0.9rem 1.75rem; }
  .logo-nom { font-size: 1.1rem; }
  .video-fenetre video { height: auto; max-height: 82vh; }
}


/* ============================================================
   LE MOTIF SUR LES FONDS VERT PROFOND
   ------------------------------------------------------------
   Même principe que le motif clair, mais dessiné en écru et en
   or : huit autres paires de lunettes, une autre composition.
   Très discret — il donne de la matière au fond sans jamais
   disputer la lecture du texte.
   ============================================================ */
.motif-vert {
  background-image: var(--motif-sombre);
  background-repeat: repeat;
  background-size: 820px auto;
}
.accueil.motif-vert { background-color: var(--vert); }
.association.motif-vert,
.projet-entete.motif-vert,
.conclusion.motif-vert,
.hero.motif-vert { background-color: var(--vert); }

/* ============================================================
   LES POINTS DE LA CARTE QUI SCINTILLENT
   ------------------------------------------------------------
   Le halo respire doucement, en décalé d'un point à l'autre :
   la carte paraît vivante sans jamais clignoter.
   ============================================================ */
.carte-trait .point circle.halo {
  animation: scintille 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.carte-trait .point:nth-of-type(1) circle.halo { animation-delay: 0s; }
.carte-trait .point:nth-of-type(2) circle.halo { animation-delay: .45s; }
.carte-trait .point:nth-of-type(3) circle.halo { animation-delay: .9s; }
.carte-trait .point:nth-of-type(4) circle.halo { animation-delay: 1.35s; }
.carte-trait .point:nth-of-type(5) circle.halo { animation-delay: 1.8s; }
.carte-trait .point:nth-of-type(6) circle.halo { animation-delay: 2.25s; }
.carte-trait .point:nth-of-type(7) circle.halo { animation-delay: 2.7s; }
.carte-trait .point:nth-of-type(8) circle.halo { animation-delay: 3.15s; }
.carte-trait .point:nth-of-type(9) circle.halo { animation-delay: .25s; }

@keyframes scintille {
  0%, 100% { opacity: 0.18; transform: scale(0.82); }
  50%      { opacity: 0.55; transform: scale(1.12); }
}

/* Le cœur du point pulse très légèrement, en phase */
.carte-trait .point circle.coeur { animation: coeur 3.4s ease-in-out infinite; }
.carte-trait .point:nth-of-type(2) circle.coeur { animation-delay: .45s; }
.carte-trait .point:nth-of-type(3) circle.coeur { animation-delay: .9s; }
.carte-trait .point:nth-of-type(4) circle.coeur { animation-delay: 1.35s; }
.carte-trait .point:nth-of-type(5) circle.coeur { animation-delay: 1.8s; }
.carte-trait .point:nth-of-type(6) circle.coeur { animation-delay: 2.25s; }
.carte-trait .point:nth-of-type(7) circle.coeur { animation-delay: 2.7s; }
.carte-trait .point:nth-of-type(8) circle.coeur { animation-delay: 3.15s; }
@keyframes coeur {
  0%, 100% { fill: var(--terracotta); }
  50%      { fill: #D06B45; }
}
/* Au survol, l'animation s'arrête : le point répond à la souris */
.carte-trait .point:hover circle.halo,
.carte-trait .point:focus circle.halo { animation-play-state: paused; opacity: 0.6; }

/* ------------------------------------------------------------
   Respect du réglage « animations réduites » du système.
   Qui l'a activé ne voit ni scintillement ni mise au point.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .carte-trait .point circle.halo,
  .carte-trait .point circle.coeur { animation: none; }
  .carte-trait .point circle.halo { opacity: 0.3; }
}

/* ============================================================
   LE FOND QUI RESPIRE
   ------------------------------------------------------------
   Jusqu'ici le motif de lunettes était une image collée : jolie,
   mais parfaitement immobile. Trois gestes le mettent en
   mouvement. Tous sont très lents — à cette vitesse l'œil ne
   suit pas le déplacement, il perçoit seulement que la page
   est vivante.
   ============================================================ */

/* ------------------------------------------------------------
   1. LA DÉRIVE
   ------------------------------------------------------------
   Le motif a été dessiné pour se raccorder à lui-même : la
   hauteur des courbes est identique à gauche et à droite de la
   tuile. En déplaçant le fond d'exactement une largeur de
   tuile, on retombe sur une image identique — la boucle est
   donc invisible, sans saut ni couture.
   ------------------------------------------------------------ */
@keyframes derive-sombre { from { background-position: 0 0; } to { background-position: -820px 0; } }
@keyframes derive-claire { from { background-position: 0 0; } to { background-position: -760px 0; } }

.motif-vert     { animation: derive-sombre 200s linear infinite; }
.motif-lunettes { animation: derive-claire 240s linear infinite; }

/* ------------------------------------------------------------
   2. LA PROFONDEUR
   ------------------------------------------------------------
   Une seconde nappe de lunettes, plus grande et plus pâle,
   glisse en sens inverse derrière la première. Les deux ne se
   croisent jamais au même rythme : l'œil y lit un relief, comme
   deux vitres superposées qui ne bougent pas ensemble.
   ------------------------------------------------------------ */
.accueil::after,
.association.motif-vert::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;                 /* la nappe ne doit rien intercepter */
  background-image: var(--motif-sombre);
  background-repeat: repeat;
  background-size: 1320px auto;         /* plus grande = perçue plus loin */
  opacity: 0.55;
  animation: derive-lointaine 320s linear infinite;
}
@keyframes derive-lointaine { from { background-position: 0 0; } to { background-position: 1320px 0; } }

/* Trois plans, du fond vers l'avant : la nappe lointaine (0), le
   calque d'étoiles (1), puis le contenu (2), qui passe devant tout. */
.motif-vert { position: relative; }
.motif-vert > *:not(.etoiles) { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   3. L'ARRIVÉE DES SECTIONS
   ------------------------------------------------------------
   Rien ne bouge tant qu'on ne descend pas : chaque bloc monte
   de quelques pixels en apparaissant, au moment où il entre
   dans l'écran. C'est le JavaScript en bas de page qui pose la
   classe « vue » ; le CSS ne fait que décrire les deux états.
   ------------------------------------------------------------ */
.apparait {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.apparait.vue { opacity: 1; transform: none; }

/* Quand plusieurs cartes arrivent ensemble, on les décale
   légèrement l'une après l'autre : l'œil les lit en rafale
   plutôt qu'en bloc. */
.apparait:nth-child(2) { transition-delay: 0.08s; }
.apparait:nth-child(3) { transition-delay: 0.16s; }
.apparait:nth-child(4) { transition-delay: 0.24s; }
.apparait:nth-child(5) { transition-delay: 0.32s; }
.apparait:nth-child(6) { transition-delay: 0.40s; }

/* ------------------------------------------------------------
   4. LA CARTE QUI SE DESSINE
   ------------------------------------------------------------
   pathLength="1" dit au navigateur de compter le tracé de 0 à 1,
   quelle que soit sa vraie longueur. On peut alors le masquer
   entièrement (dashoffset: 1) puis le découvrir (0) sans avoir
   à mesurer quoi que ce soit.
   ------------------------------------------------------------ */
.carte-trait.anime .pays { stroke-dasharray: 1; stroke-dashoffset: 1; }
.carte-trait.vue .pays { animation: trace 2.8s ease-in-out forwards; }
.carte-trait.vue .pays:nth-of-type(2) { animation-delay: 1.6s; }   /* la Corse ensuite */
@keyframes trace { to { stroke-dashoffset: 0; } }

/* Les villes s'allument l'une après l'autre, une fois le trait posé. */
.carte-trait.anime .point { opacity: 0; }
.carte-trait.vue .point { animation: allume 0.7s ease-out forwards; }
.carte-trait.vue .point:nth-of-type(1)  { animation-delay: 2.2s; }
.carte-trait.vue .point:nth-of-type(2)  { animation-delay: 2.3s; }
.carte-trait.vue .point:nth-of-type(3)  { animation-delay: 2.4s; }
.carte-trait.vue .point:nth-of-type(4)  { animation-delay: 2.5s; }
.carte-trait.vue .point:nth-of-type(5)  { animation-delay: 2.6s; }
.carte-trait.vue .point:nth-of-type(6)  { animation-delay: 2.7s; }
.carte-trait.vue .point:nth-of-type(7)  { animation-delay: 2.8s; }
.carte-trait.vue .point:nth-of-type(8)  { animation-delay: 2.9s; }
.carte-trait.vue .point:nth-of-type(9)  { animation-delay: 3.0s; }
.carte-trait.vue .point:nth-of-type(10) { animation-delay: 3.1s; }
.carte-trait.vue .point:nth-of-type(11) { animation-delay: 3.2s; }
.carte-trait.vue .point:nth-of-type(12) { animation-delay: 3.3s; }
.carte-trait.vue .point:nth-of-type(13) { animation-delay: 3.4s; }
.carte-trait.vue .point:nth-of-type(14) { animation-delay: 3.5s; }
.carte-trait.vue .point:nth-of-type(15) { animation-delay: 3.6s; }
.carte-trait.vue .point:nth-of-type(16) { animation-delay: 3.7s; }
.carte-trait.vue .point:nth-of-type(17) { animation-delay: 3.8s; }
@keyframes allume { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------
   ET POUR QUI NE VEUT PAS DE MOUVEMENT
   ------------------------------------------------------------
   Certaines personnes règlent leur système pour supprimer les
   animations — mal des transports, troubles vestibulaires,
   simple préférence. Le navigateur nous le dit, et nous
   l'écoutons : tout se fige, tout reste visible.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .motif-vert, .motif-lunettes,
  .accueil::after, .association.motif-vert::after { animation: none; }
  .apparait { opacity: 1; transform: none; transition: none; }
  .carte-trait.anime .pays  { stroke-dasharray: none; stroke-dashoffset: 0; }
  .carte-trait.anime .point { opacity: 1; animation: none; }
}

/* ============================================================
   LES ÉTOILES QUI COURENT SUR LES LIGNES
   ------------------------------------------------------------
   Le motif de fond est une image : impossible d'y accrocher
   quoi que ce soit. On superpose donc un calque en SVG qui
   porte ses propres courbes — mêmes sinusoïdes, mêmes couleurs,
   si bien qu'elles se confondent avec le motif — et quelques
   points lumineux qui les parcourent.

   Courbes et points vivant dans le même calque, l'alignement
   est exact par construction : rien ne peut se décaler.
   ============================================================ */
.etoiles {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;        /* le calque ne doit rien intercepter */
}

/* ------------------------------------------------------------
   LE CIEL
   ------------------------------------------------------------
   Derrière les voyageuses, un semis d'étoiles fixes. Chacune
   passe l'essentiel de son temps en veilleuse et ne s'illumine
   qu'un bref instant — c'est ce qui donne le scintillement
   dispersé d'un vrai ciel, plutôt qu'un clignotement de guirlande.

   Une seule règle suffit pour les soixante-dix-huit : chaque
   astre porte son propre éclat de repos (--repos), son rythme et
   son décalage, posés dans le SVG. Le pic occupe toujours la même
   fraction du cycle, mais comme les rythmes diffèrent, aucune ne
   s'allume en même temps qu'une autre.
   ------------------------------------------------------------ */
.astre {
  opacity: var(--repos, 0.12);
  animation-name: astre-scintille;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes astre-scintille {
   0%  { opacity: var(--repos, 0.12); }
   5%  { opacity: 0.9; }
  11%  { opacity: var(--repos, 0.12); }
 100%  { opacity: var(--repos, 0.12); }
}

/* Le scintillement dure exactement le temps du trajet (la durée
   est posée sur chaque étoile) : chacune s'allume en partant et
   s'éteint en arrivant. On ne la voit donc jamais sauter quand
   elle revient à son point de départ. */
.etoile {
  opacity: 0;
  animation-name: etoile-vit;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  filter: drop-shadow(0 0 5px rgba(210, 174, 122, 0.9));
}
@keyframes etoile-vit {
   0%  { opacity: 0;    }
  12%  { opacity: 0.95; }
  38%  { opacity: 0.28; }
  62%  { opacity: 0.95; }
  88%  { opacity: 0.30; }
 100%  { opacity: 0;    }
}

@media (prefers-reduced-motion: reduce) {
  .etoiles { display: none; }
}

/* ============================================================
   LES PAGES DE MARQUE
   ------------------------------------------------------------
   Un gabarit : la présentation de l'atelier, puis la collection
   modèle par modèle. Takaori l'inaugure, les autres marques
   suivront la même structure.
   ============================================================ */
.marque-presentation {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 3rem; align-items: start;
}
.marque-photo { margin: 0; }
.marque-photo img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--trait-fin);
}
.marque-photo figcaption {
  margin-top: 0.7rem; font-size: 0.82rem; color: var(--gris);
  font-style: italic;
}

/* Le sommaire : onze modèles, on doit pouvoir sauter au bon. */
.sommaire-modeles { margin: 2rem 0 3.5rem; }
.sommaire-modeles ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.sommaire-modeles a {
  display: block; padding: 0.42rem 0.9rem;
  border: 1px solid var(--trait-fin); border-radius: 2px;
  font-size: 0.73rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--anthracite); text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.sommaire-modeles a:hover, .sommaire-modeles a:focus-visible {
  background: var(--vert); border-color: var(--vert); color: var(--ivoire);
}

/* ------------------------------------------------------------
   UN MODÈLE ET SES COLORIS
   ------------------------------------------------------------ */
.modele { margin-bottom: 3.5rem; scroll-margin-top: 6rem; }
.modele-titre {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.6rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--trait-fin);
}
.modele-titre h3 {
  margin: 0; font-family: var(--titre); font-size: 1.5rem;
  font-weight: 500; color: var(--vert);
}
.modele-titre span {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gris);
}

.coloris {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
}
/* Les photos arrivent sur fond ivoire, exactement la teinte de la
   carte : la monture semble posée sur la page, sans cadre blanc. */
.monture {
  position: relative; display: block;
  background: var(--ivoire); border: 1px solid var(--trait-fin);
  text-decoration: none; overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.monture img { width: 100%; height: auto; display: block; }
.monture .repere {
  position: absolute; left: 0.55rem; bottom: 0.45rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--gris); opacity: 0.75;
}
.monture:hover, .monture:focus-visible {
  border-color: var(--terracotta);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(28, 55, 48, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .monture, .monture:hover, .monture:focus-visible { transform: none; transition: none; }
}

/* ------------------------------------------------------------
   LA VISIONNEUSE
   ------------------------------------------------------------
   <dialog> apporte gratuitement ce qu'on coderait sinon à la
   main : la touche Échap, le fond assombri, le piège à clavier
   et le retour du curseur à son point de départ.
   ------------------------------------------------------------ */
.visionneuse {
  width: min(1000px, 94vw); max-height: 92vh;
  /* Le navigateur centre un <dialog> grâce à « margin: auto ». La
     remise à zéro des marges, en haut de cette feuille, le prive de
     ce réglage : il faut donc le lui redonner. */
  margin: auto;
  padding: 0; border: none; background: var(--ivoire);
  color: var(--anthracite);
  display: flex; flex-direction: column;
}
/* Un <dialog> fermé est invisible par défaut… mais la ligne
   « display: flex » ci-dessus écrase ce réglage du navigateur : la
   fenêtre restait donc affichée en bas de page tant qu'on ne
   l'avait pas ouverte. On rétablit la règle à la main. */
.visionneuse:not([open]) { display: none; }
.visionneuse::backdrop { background: rgba(28, 55, 48, 0.88); }
.visionneuse-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--trait-fin);
}
.visionneuse-tete h2 {
  margin: 0; font-family: var(--titre); font-size: 1.15rem;
  font-weight: 500; color: var(--vert);
}
.visionneuse-fermer {
  flex: none; width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--trait-fin); background: none;
  font-size: 1.3rem; line-height: 1; color: var(--anthracite);
  cursor: pointer; transition: background .2s, color .2s;
}
.visionneuse-fermer:hover { background: var(--vert); color: var(--ivoire); }
.visionneuse-scene { margin: 0; padding: 1.1rem 1.3rem; min-height: 0; }
.visionneuse-scene img { width: 100%; height: auto; max-height: 58vh; object-fit: contain; display: block; }
.visionneuse-vues {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  padding: 0 1.3rem 1.2rem;
}
.visionneuse-vues button {
  flex: 0 0 96px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--trait-fin);
  transition: border-color .2s, opacity .2s;
  opacity: 0.55;
}
.visionneuse-vues button img { width: 100%; height: auto; display: block; }
.visionneuse-vues button:hover { opacity: 0.85; }
.visionneuse-vues button[aria-current="true"] {
  border-color: var(--terracotta); opacity: 1;
}

.appel-opticien {
  text-align: center; padding: 2.6rem 1.5rem;
  border: 1px solid var(--trait-fin); background: var(--ivoire);
}
.appel-opticien h2 {
  margin: 0 0 0.7rem; font-family: var(--titre);
  font-size: 1.5rem; font-weight: 500; color: var(--vert);
}
.appel-opticien p { margin: 0 auto 1.4rem; max-width: 34rem; }

@media (max-width: 760px) {
  .marque-presentation { grid-template-columns: 1fr; gap: 2rem; }
  .coloris { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0.7rem; }
  .visionneuse { width: 96vw; }
}

/* Le lien vers la page d'une marque, depuis sa fiche sur l'accueil. */
.voir-collection { margin: 1.2rem 0 0.4rem; }
.voir-collection a {
  display: inline-block; padding: 0.5rem 1.05rem;
  background: var(--vert); color: var(--ivoire);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  transition: background .2s;
}
.voir-collection a:hover, .voir-collection a:focus-visible { background: var(--terracotta); }

/* L'appel vers une collection complète, depuis la page d'un projet. */
.appel-collection {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 2.2rem; align-items: center;
  padding: 2rem; margin-top: 1rem;
  background: var(--ivoire); border: 1px solid var(--trait-fin);
}
.appel-collection img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 6px 20px rgba(28, 55, 48, 0.14);
}
.appel-collection h2 {
  margin: 0 0 0.6rem; font-family: var(--titre);
  font-size: 1.5rem; font-weight: 500; color: var(--vert);
}
.appel-collection p { margin: 0 0 1.4rem; }
@media (max-width: 700px) {
  .appel-collection { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.3rem; }
  .appel-collection img { max-width: 220px; margin: 0 auto; }
}

/* ============================================================
   LA VITRINE DES COLLECTIONS
   ------------------------------------------------------------
   Deux cartes, deux portes d'entrée. La photo occupe le haut,
   le texte le bas : au survol, l'image avance légèrement, ce qui
   suffit à signaler que la carte entière est cliquable.
   ============================================================ */
.collections {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.8rem; margin-top: 2.2rem;
}
.collection {
  display: flex; flex-direction: column;
  background: var(--ivoire); border: 1px solid var(--trait-fin);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.collection img {
  width: 100%; height: auto; display: block;
  transition: transform .5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.collection-texte { padding: 1.4rem 1.5rem 1.6rem; }
.collection-etiquette {
  display: block; margin-bottom: 0.5rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--terracotta);
}
.collection h3 {
  margin: 0 0 0.6rem; font-family: var(--titre);
  font-size: 1.45rem; font-weight: 500; color: var(--vert);
}
.collection p { margin: 0 0 1rem; font-size: 0.93rem; }
.collection-lien {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--terracotta);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.collection:hover, .collection:focus-visible {
  border-color: var(--terracotta);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(28, 55, 48, 0.12);
}
.collection:hover img, .collection:focus-visible img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .collection, .collection img,
  .collection:hover, .collection:hover img { transform: none; transition: none; }
}

/* Un bloc qui signale une information encore manquante. Il se voit
   assez pour qu'on ne l'oublie pas avant la mise en ligne. */
.a-completer {
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--terracotta);
  background: rgba(177, 89, 57, 0.07);
  font-style: italic;
}
/* Le tableau des mentions légales n'a pas la même forme que ceux des
   pages de conseil : pas d'en-tête de colonnes, mais un intitulé par
   ligne. Les valeurs doivent donc se lire juste à côté de leur
   intitulé, et non repoussées au bord droit. */
.cadre-tableau th {
  text-align: left; white-space: nowrap; vertical-align: top;
  width: 15rem; color: var(--vert);
}
.cadre-tableau tbody td:last-child {
  text-align: left; text-transform: none; letter-spacing: normal;
  font-weight: 400; font-size: 0.97rem; color: var(--anthracite);
}

/* ------------------------------------------------------------
   UNE GALERIE DE CLICHÉS
   ------------------------------------------------------------
   Takaori montre des coloris, W-eye montre des gestes : chaque
   photo porte donc une légende, et non un simple numéro.
   ------------------------------------------------------------ */
.cliches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.3rem; margin-top: 2rem;
}
.cliche {
  display: flex; flex-direction: column;
  background: var(--ivoire); border: 1px solid var(--trait-fin);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.cliche img { width: 100%; height: auto; display: block; }
.cliche-legende {
  padding: 0.85rem 1rem 1rem;
  font-size: 0.86rem; line-height: 1.55; color: var(--gris);
}
.cliche:hover, .cliche:focus-visible {
  border-color: var(--terracotta);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(28, 55, 48, 0.1);
}
.visionneuse-scene figcaption {
  margin-top: 0.8rem; font-size: 0.88rem; color: var(--gris);
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .cliche, .cliche:hover { transform: none; transition: none; }
}

/* ------------------------------------------------------------
   LE BOOK D'UNE MARQUE
   ------------------------------------------------------------
   Les pages de marque montraient jusqu'ici des vignettes dans
   des cadres, alignées comme dans un catalogue. C'est pratique,
   mais ça n'inspire rien : une monture d'auteur présentée dans
   une petite case ressemble à un article de supermarché.

   Ici, on change de registre. Le principe est celui d'un book
   de photographe, ou d'un portfolio posé sur une table :

     — aucun cadre, aucune ombre, aucun bouton : la photo est
       posée sur la page, rien ne la décore ;
     — beaucoup de vide autour, parce que le vide est ce qui
       donne de la valeur à ce qu'il entoure ;
     — des tailles qui changent d'une planche à l'autre, pour
       que l'œil ne s'endorme pas ;
     — des légendes minuscules, en capitales espacées, comme
       les cartels d'une exposition ;
     — une salle sombre au milieu du parcours, pour les photos
       qui ont été faites dans le noir.

   Un mot de vocabulaire : une « planche », c'est une page du
   book. Elle contient une photo, ou deux, ou trois.
   ------------------------------------------------------------ */

.book {
  /* Les planches sont centrées sur une colonne un peu plus
     large que le texte : on respire. */
  --colonne: 64rem;
  margin: 0;
}

/* ---- L'OUVERTURE ----------------------------------------
   Une double page : le nom de la marque à gauche, la photo
   la plus forte à droite. C'est la première chose qu'on voit,
   et c'est elle qui doit donner envie de faire défiler.       */
.book-ouverture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 33rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: var(--colonne, 64rem);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) var(--pas) clamp(2rem, 5vw, 4rem);
}
.book-ouverture .mot { max-width: 30rem; }
.book-ouverture .lieu {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terracotta); display: block; margin-bottom: 1.1rem;
}
.book-ouverture h1 {
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 1.4rem;
}
.book-ouverture .phrase {
  font-family: var(--titre); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.5; color: var(--anthracite);
}
.book-ouverture figure { margin: 0; }
.book-ouverture img { width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  .book-ouverture { grid-template-columns: 1fr; }
  /* Sur un téléphone, la photo passe en premier : c'est elle
     qui doit accueillir, pas un bloc de texte. */
  .book-ouverture .mot { order: 2; }
  .book-ouverture figure { order: 1; }
}

/* ---- UNE PLANCHE ----------------------------------------
   Par défaut : une photo seule, centrée, jamais agrandie
   au-delà de sa taille réelle. La variable --large porte la
   largeur en pixels de la photo d'origine ; la planche ne la
   dépassera pas, pour ne jamais afficher une image molle.     */
.planche {
  margin: clamp(3.5rem, 8vw, 7.5rem) auto 0;
  padding: 0 var(--pas);
  max-width: var(--colonne, 64rem);
}
.planche > a, .planche > figure { display: block; margin: 0; }
.planche img, .book-ouverture img {
  /* « height: auto » n'est pas décoratif : sans lui, les attributs
     width et height écrits dans la balise <img> imposent une
     hauteur fixe, et le cadre commun ci-dessous est ignoré. */
  width: 100%; height: auto; display: block;
  background: var(--ecru-clair);   /* le temps que la photo arrive */

  /* Le point le plus important de la mise en page : toutes les
     photos d'un même book occupent EXACTEMENT le même rectangle,
     quelles que soient les dimensions du fichier d'origine. Le
     format est donné une fois pour toutes en haut de la page
     (--format), et chaque image vient s'y loger.

     Deux manières de l'y loger :

       « cover »   — l'image remplit le cadre et déborde un peu.
                     C'est ce qu'il faut pour des photos de mode :
                     on garde le visage et on rogne les marges.
                     D'où le 32 % : le regard est dans le tiers
                     haut d'un portrait, jamais au milieu.

       « contain » — l'image entre entière dans le cadre, le
                     reste est du papier. C'est ce qu'il faut pour
                     des montures détourées : rien n'est coupé, et
                     comme leur fond est déjà l'ivoire du site, le
                     cadre ne se voit pas. (classe « pose ») */
  aspect-ratio: var(--format, auto);
  object-fit: cover;
  object-position: 50% 50%;
}
.book.pose .planche img, .book.pose .book-ouverture img {
  object-fit: contain;
  background: none;
}

/* Deux ou trois photos sur la même planche. Elles sont alignées
   par le haut et séparées d'un vrai intervalle : on ne colle
   jamais deux images l'une contre l'autre. */
.planche.duo, .planche.trio {
  display: grid; gap: clamp(1rem, 2.5vw, 2.2rem);
  max-width: var(--colonne, 64rem);
  /* Toutes les cases ont désormais la même hauteur : les légendes
     tombent d'elles-mêmes sur la même ligne. */
  align-items: start;
}
.planche.duo  { grid-template-columns: repeat(2, 1fr); }
.planche.trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 680px) {
  .planche.trio { grid-template-columns: repeat(2, 1fr); }
  .planche.trio > *:last-child { grid-column: span 2; max-width: 22rem; margin: 0 auto; }
}
@media (max-width: 430px) {
  .planche.duo, .planche.trio { grid-template-columns: 1fr; }
  .planche.trio > *:last-child { grid-column: auto; }
}

/* ---- LE CARTEL ------------------------------------------
   Comme dans un musée : un numéro, un trait, deux mots. Il est
   discret par construction — si on le remarque avant la photo,
   c'est raté.                                                 */
.cartel {
  display: flex; align-items: baseline; gap: 0.7rem;
  margin-top: 0.85rem;
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gris); line-height: 1.6;
}
.cartel b {
  font-weight: 600; color: var(--or);
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
  flex: none;
}
.cartel b::after {
  content: ""; display: inline-block; width: 1.6rem; height: 1px;
  background: var(--trait); margin: 0 0 0.25em 0.6rem;
}

/* Un lien-photo ne doit ressembler à rien d'autre qu'à une
   photo. Au survol, elle avance d'un cheveu : assez pour qu'on
   comprenne qu'on peut cliquer, trop peu pour que ça s'agite. */
.planche a { text-decoration: none; color: inherit; }
.planche a img { transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .7s; }
.planche a:hover img, .planche a:focus-visible img {
  transform: scale(1.012); filter: brightness(1.03);
}

/* ---- LA SALLE SOMBRE ------------------------------------
   Les photos faites sur fond noir ne supportent pas le papier
   ivoire : le contraste les écrase. On leur donne donc leur
   propre salle, et le texte s'y inverse.                      */
.salle-sombre {
  background: #14231F;          /* le vert de la charte, poussé au noir */
  color: var(--ecru);
  margin-top: clamp(4rem, 9vw, 9rem);
  padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem);
}
.salle-sombre h2, .salle-sombre h3 { color: var(--ecru); }
.salle-sombre .cartel { color: var(--gris-clair); }
.salle-sombre .cartel b::after { background: rgba(234, 226, 213, 0.25); }
.salle-sombre .planche img { background: #1B2D28; }
.salle-sombre .intro { color: var(--gris-clair); }
.salle-sombre .planche:first-of-type { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---- LE TITRE D'UN CHAPITRE -----------------------------
   Pas une barre de section : juste un mot, petit, en capitales,
   et le titre en dessous. On est dans un livre.               */
.chapitre {
  max-width: var(--colonne, 64rem); margin: clamp(4rem, 9vw, 8rem) auto 0;
  padding: 0 var(--pas);
}
.chapitre .numero {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--terracotta); display: block; margin-bottom: 0.8rem;
}
.salle-sombre .chapitre .numero { color: var(--or); }
.chapitre h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15;
  margin-bottom: 0.9rem;
}
.chapitre p {
  max-width: 42rem; color: var(--gris); font-size: 1.02rem;
}
.salle-sombre .chapitre p { color: var(--gris-clair); }
.salle-sombre .chapitre h2 { color: var(--ecru); }

/* ---- LA CITATION ----------------------------------------
   Entre deux séries de photos, une phrase seule au milieu du
   vide. C'est le moment où le lecteur reprend son souffle.    */
.respiration {
  max-width: 44rem; margin: clamp(4rem, 9vw, 8rem) auto 0;
  padding: 0 var(--pas); text-align: center;
}
.respiration p {
  font-family: var(--titre); font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 2.05rem);
  line-height: 1.4; color: var(--vert);
}
.salle-sombre .respiration p { color: var(--ecru); }
.respiration cite {
  display: block; margin-top: 1.2rem; font-style: normal;
  font-family: var(--texte); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gris);
}
.salle-sombre .respiration cite { color: var(--or); }

/* ---- LA FIN DU BOOK -------------------------------------
   Un book ne se termine pas sur une photo : il se termine sur
   ce qu'on peut en faire. Deux portes, côte à côte — celle du
   porteur et celle de l'opticien.                             */
.deux-portes {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  max-width: var(--colonne, 64rem); margin: clamp(4rem, 9vw, 8rem) auto 0;
  padding: 0 var(--pas);
}
.porte {
  background: var(--ecru-clair); padding: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 2px solid var(--terracotta);
  display: flex; flex-direction: column;
}
.porte:last-child { border-top-color: var(--vert); }
.porte .a-qui {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 0.9rem;
}
.porte:last-child .a-qui { color: var(--vert); }
.porte h2 { font-size: 1.45rem; margin-bottom: 0.7rem; }
.porte p { color: var(--gris); font-size: 0.97rem; flex: 1; }
.porte .bouton { margin-top: 1.4rem; align-self: flex-start; }
@media (max-width: 680px) { .deux-portes { grid-template-columns: 1fr; } }

/* ---- L'ARRIVÉE DES PLANCHES -----------------------------
   Chaque planche monte doucement quand elle entre dans l'écran.
   C'est le même mécanisme que le reste du site (.apparait),
   mais plus lent : on tourne une page, on ne clique pas.

   À noter : c'est le JavaScript qui pose la classe. Sans lui,
   tout est visible d'emblée — une animation ne doit jamais
   pouvoir cacher le contenu.                                  */
.planche.apparait, .respiration.apparait, .chapitre.apparait {
  opacity: 0; transform: translateY(26px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.2,.7,.3,1);
}
.planche.apparait.vue, .respiration.apparait.vue,
.chapitre.apparait.vue { opacity: 1; transform: none; }

/* Sur une planche à deux ou trois photos, elles arrivent l'une
   après l'autre, à un dixième de seconde d'intervalle. */
.planche.duo.apparait  > *:nth-child(2) { transition-delay: .12s; }
.planche.trio.apparait > *:nth-child(2) { transition-delay: .12s; }
.planche.trio.apparait > *:nth-child(3) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .planche.apparait, .respiration.apparait, .chapitre.apparait {
    opacity: 1; transform: none; transition: none;
  }
  .planche a:hover img { transform: none; }
}

/* Le texte de présentation, à l'intérieur d'un chapitre : il
   garde la couleur du texte courant, alors que les chapeaux de
   chapitre, eux, sont en gris. */
.chapitre .corps { margin-top: 0.4rem; }
.chapitre .corps p { color: var(--anthracite); max-width: 42rem; }
.salle-sombre .chapitre .corps p { color: var(--ecru); }

/* Quand la photo de présentation est déjà passée dans l'ouverture
   du book, le bloc de texte reste seul : il reprend toute la
   largeur plutôt que de laisser une colonne vide à sa droite. */
.marque-presentation.seule { grid-template-columns: 1fr; }
.marque-presentation.seule .corps { max-width: 44rem; }

/* Une photo d'ouverture peut être plus petite que sa colonne :
   on lui donne alors sa largeur réelle (par un style posé dans la
   page) plutôt que de l'étirer, ce qui la rendrait floue. */
.book-ouverture figure { margin-left: 0; }

/* ------------------------------------------------------------
   LA PLAQUE DE MARQUE
   ------------------------------------------------------------
   Quatre marques n'ont pas encore de photo. À la place du
   rectangle « visuel à venir », leur logo est posé sur une
   plaque ivoire, et la plaque mène à leur site.

   Elle ne doit pas se faire passer pour une photo : d'où le
   fin liseré, l'adresse écrite dessous en petites capitales,
   et le fait que le survol change la couleur du cadre plutôt
   que de zoomer dans l'image.
   ------------------------------------------------------------ */
.plaque-marque {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--trait-fin);
  transition: border-color .25s, box-shadow .25s;
}
.plaque-marque img { width: 100%; height: auto; display: block; }
.plaque-marque span {
  display: block; padding: 0.6rem 0.8rem 0.7rem;
  border-top: 1px solid var(--trait-fin);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gris); text-align: center;
  transition: color .25s;
}
.plaque-marque:hover, .plaque-marque:focus-visible {
  border-color: var(--terracotta);
  box-shadow: 0 6px 18px rgba(28, 55, 48, 0.09);
}
.plaque-marque:hover span, .plaque-marque:focus-visible span { color: var(--terracotta); }

/* ------------------------------------------------------------
   ROBIN DES YEUX
   ------------------------------------------------------------
   La pastille en bas à droite, et le panneau qui s'ouvre.

   Rien de tout cela n'est écrit dans les pages : c'est le
   JavaScript qui le fabrique. Ces règles ne servent donc que
   si Robin existe, et un visiteur sans JavaScript ne voit pas
   un bouton mort dans un coin — il ne voit rien.
   ------------------------------------------------------------ */
/* Robin se tient debout dans la page, en entier — pas enfermé
   dans une pastille ronde qui lui couperait le chapeau et les
   épaules. Le bouton n'a donc ni fond, ni bord, ni découpe : il
   n'y a que le personnage, avec son ombre portée. */
.robin-pastille {
  position: fixed; right: 1.25rem; bottom: 1rem; z-index: 60;
  width: 82px; height: auto; border: none; background: none;
  cursor: pointer; padding: 0; display: block;
  filter: drop-shadow(0 8px 14px rgba(28, 55, 48, 0.3));
  transition: transform .3s cubic-bezier(.2,.7,.3,1), filter .3s;
}
.robin-pastille img { width: 100%; height: auto; display: block; }
.robin-pastille:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 14px 20px rgba(28, 55, 48, 0.36));
}
.robin-pastille:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28,55,48,.34); }
.robin-pastille.ouverte { transform: scale(0.92); }

.robin-panneau {
  position: fixed; right: 1.5rem; bottom: calc(1.5rem + 62px + 0.9rem);
  z-index: 60; width: min(23.5rem, calc(100vw - 3rem));
  max-height: min(34rem, calc(100vh - 8rem));
  background: var(--ivoire); border: 1px solid var(--trait);
  box-shadow: 0 18px 50px rgba(28, 55, 48, 0.2);
  display: flex; flex-direction: column; overflow: hidden;
}
.robin-panneau[hidden] { display: none; }

.robin-tete {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.85rem 1rem; background: var(--vert); color: var(--ecru);
}
/* Dans le bandeau de la fenêtre, il est en entier lui aussi :
   un peu plus haut que la barre, il dépasse légèrement vers le
   haut, ce qui lui donne l'air de se pencher dans la
   conversation. */
.robin-figure {
  width: 44px; flex: none; align-self: flex-end;
  margin-bottom: -4px; background: none;
}
.robin-figure img { width: 100%; height: auto; display: block; }
.robin-nom { flex: 1; line-height: 1.3; }
.robin-nom b { display: block; font-family: var(--titre); font-size: 1.02rem; color: var(--ecru); }
.robin-nom span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-clair); }
.robin-fermer {
  flex: none; width: 1.9rem; height: 1.9rem; border: none; background: none;
  color: var(--ecru); font-size: 1.4rem; line-height: 1; cursor: pointer;
  border-radius: 50%; transition: background .2s;
}
.robin-fermer:hover { background: rgba(234, 226, 213, 0.16); }

.robin-fil {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  font-size: 0.93rem; line-height: 1.62;
}
.robin-bulle { max-width: 92%; padding: 0.75rem 0.95rem; }
.robin-bulle p + p { margin-top: 0.55rem; }
.robin-bulle.robin {
  background: var(--ecru-clair); border-radius: 2px 14px 14px 14px;
  align-self: flex-start;
}
.robin-bulle.visiteur {
  background: var(--vert); color: var(--ecru);
  border-radius: 14px 2px 14px 14px; align-self: flex-end;
}
.robin-bulle b {
  display: block; font-family: var(--titre); font-size: 1rem;
  color: var(--vert); margin-bottom: 0.25rem;
}
.robin-chapeau {
  display: block; font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.45rem;
}

/* la fiche d'un magasin, dans une bulle */
.robin-magasin {
  margin-top: 0.7rem; padding-top: 0.7rem;
  border-top: 1px solid var(--trait-fin);
}
.robin-magasin .robin-lieu {
  display: block; font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gris);
}
.robin-magasin b { margin: 0.15rem 0 0.2rem; font-size: 0.97rem; }
.robin-magasin p { font-size: 0.88rem; color: var(--gris); }
.robin-liens-magasin a, .robin-liens a {
  display: inline-block; margin: 0.4rem 0.9rem 0 0;
  font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--terracotta); text-decoration: underline;
}
.robin-liens { margin-top: 0.6rem; }

.robin-pistes {
  display: flex; gap: 0.45rem; overflow-x: auto; flex: none;
  padding: 0.7rem 1rem; border-top: 1px solid var(--trait-fin);
}
.robin-pistes button {
  flex: none; background: none; cursor: pointer;
  border: 1px solid var(--trait); border-radius: 999px;
  padding: 0.38rem 0.85rem; font: inherit; font-size: 0.78rem;
  color: var(--anthracite); white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.robin-pistes button:hover { border-color: var(--terracotta); color: var(--terracotta); }

.robin-saisie {
  display: flex; gap: 0.5rem; flex: none;
  padding: 0.7rem 1rem 0.9rem; border-top: 1px solid var(--trait-fin);
}
.robin-saisie input {
  /* 16 px : c'est le seuil en dessous duquel Safari zoome sur le
     champ dès qu'on le touche. Robin se pose au-dessus de la
     page, un zoom intempestif le ferait sortir de l'écran. */
  flex: 1; min-width: 0; font: inherit; font-size: 16px;
  padding: 0.55rem 0.75rem; border: 1px solid var(--trait);
  background: #fff; color: var(--anthracite);
}
.robin-saisie button {
  flex: none; font: inherit; font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer;
  padding: 0.55rem 0.9rem; border: none;
  background: var(--terracotta); color: var(--ivoire);
  transition: background .2s;
}
.robin-saisie button:hover { background: var(--vert); }

@media (max-width: 520px) {
  .robin-pastille { right: 1rem; bottom: 1rem; width: 54px; height: 54px; }
  .robin-panneau {
    right: 1rem; left: 1rem; width: auto;
    bottom: calc(1rem + 54px + 0.7rem);
    max-height: calc(100vh - 7rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .robin-pastille, .robin-pastille:hover { transition: none; transform: none; }
}

/* ------------------------------------------------------------
   LE LIEN D'ÉVITEMENT
   ------------------------------------------------------------
   Invisible à la souris, c'est la première chose qu'atteint
   quelqu'un qui navigue au clavier : il permet de sauter le
   menu et d'arriver directement au contenu. Il n'apparaît
   qu'au moment où il reçoit le focus.
   ------------------------------------------------------------ */
.saut-contenu {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  background: var(--vert); color: var(--ivoire);
  padding: 0.7rem 1.1rem; text-decoration: none;
  font-size: 0.85rem; letter-spacing: 0.06em;
  transition: top .2s;
}
.saut-contenu:focus { top: 0.5rem; color: var(--ivoire); }

/* ------------------------------------------------------------
   LA PLANCHE DE MODÈLES
   ------------------------------------------------------------
   Les rendus de montures vus de face, chacun sur sa plaque.

   Deux par rangée plutôt qu'un seul en pleine largeur : le
   dessin est plus petit, mais il devient un objet posé sur un
   fond, avec de l'air autour, plutôt qu'une bannière qui
   traverse l'écran. C'est ce qui fait la différence entre un
   catalogue et une vitrine.

   Sous chaque monture, la notation que lit un opticien :
   largeur de verre, pont, longueur de branche.
   ------------------------------------------------------------ */
.planche-modeles {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.1rem, 2.6vw, 2rem);
  max-width: var(--colonne, 64rem);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  padding: 0 var(--pas);
}
.modele-plaque {
  margin: 0; background: var(--ecru-clair);
  border: 1px solid var(--trait-fin);
  padding: clamp(1.3rem, 3vw, 2.1rem) clamp(1.1rem, 2.6vw, 1.8rem) 1.15rem;
  transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.modele-plaque a { display: block; text-decoration: none; }
.modele-plaque img { width: 100%; height: auto; display: block; }
.modele-plaque figcaption { margin-top: 1rem; text-align: center; }
.modele-plaque b {
  display: block; font-family: var(--titre); font-weight: 700;
  font-size: 1.12rem; color: var(--vert); line-height: 1.2;
}
.modele-plaque .cotes {
  display: block; margin-top: 0.3rem;
  font-size: 0.76rem; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; color: var(--anthracite);
}
.modele-plaque .matiere {
  display: block; margin-top: 0.35rem;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris);
}
.modele-plaque:hover, .modele-plaque:focus-within {
  border-color: var(--terracotta);
  box-shadow: 0 10px 26px rgba(28, 55, 48, 0.09);
  transform: translateY(-3px);
}
@media (max-width: 620px) { .planche-modeles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .modele-plaque, .modele-plaque:hover { transform: none; transition: none; }
}

/* ------------------------------------------------------------
   LE DÉFILÉ DES MAISONS
   ------------------------------------------------------------
   Une bande pleine largeur en haut de l'accueil, où les maisons
   passent l'une après l'autre. Les photos sont superposées au
   même endroit : seule celle qui porte la classe « active » est
   visible. Changer de maison revient donc à déplacer une classe.

   L'image avance très lentement pendant qu'elle est à l'écran.
   On ne le remarque pas consciemment, mais c'est ce qui empêche
   la page d'avoir l'air figée.
   ------------------------------------------------------------ */
.defile {
  position: relative; height: clamp(24rem, 74vh, 42rem);
  overflow: hidden; background: var(--vert);
}
.defile .vue {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 1.1s ease;
}
.defile .vue.active { opacity: 1; }
/* ------------------------------------------------------------
   POURQUOI LA PHOTO N'EST PLUS ROGNÉE
   ------------------------------------------------------------
   Le bandeau est large et la plupart de ces photos sont
   verticales. En « cover », le navigateur agrandit l'image
   jusqu'à remplir la bande : sur un portrait, cela revient à
   zoomer à 250 % et à ne garder qu'une tranche — les lunettes se
   retrouvaient coupées en deux.

   On passe donc en « contain » : la photo entre ENTIÈRE, rien
   n'est jamais coupé. Reste à remplir les côtés. Plutôt qu'une
   bande de couleur, on y met la photo elle-même, agrandie et
   très floue : les couleurs se prolongent naturellement d'un
   bord à l'autre, et l'œil ne voit qu'une image posée dans son
   propre halo. C'est le procédé des magazines.
   ------------------------------------------------------------ */
.defile .vue::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--fond);
  background-size: cover; background-position: center;
  filter: blur(34px) saturate(1.1) brightness(0.62);
  transform: scale(1.18);   /* pour que le flou ne laisse pas voir ses bords */
}
.defile img {
  position: relative;       /* au-dessus du fond flou */
  width: 100%; height: 100%; object-fit: contain; display: block;
  object-position: 50% 50%;
  transform: scale(1.03); transition: transform 8s linear;
}
.defile .vue.active img { transform: scale(1); }
.defile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 4vw, 2.8rem);
  /* le dégradé monte assez haut pour que le lieu, écrit en or
     tout en haut du bloc, reste lisible sur une photo claire */
  background: linear-gradient(to top, rgba(20,35,31,.92) 20%, rgba(20,35,31,.55) 60%, rgba(20,35,31,0));
  padding-top: clamp(3rem, 8vw, 5rem);
  color: var(--ecru);
}
.defile .lieu {
  display: block; font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--or); margin-bottom: 0.35rem;
}
.defile figcaption b {
  display: block; font-family: var(--titre);
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.05; color: var(--ecru);
}
.defile .quoi { display: block; font-size: 0.95rem; color: var(--gris-clair); }
.defile figcaption a {
  display: inline-block; margin-top: 0.7rem;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ecru); border-bottom: 1px solid var(--or);
  text-decoration: none; padding-bottom: 2px;
}
.defile figcaption a:hover { color: var(--or); }
.defile-points {
  position: absolute; right: clamp(1.2rem, 3vw, 2.2rem);
  bottom: clamp(1.5rem, 4vw, 2.8rem); display: flex; gap: 0.5rem; z-index: 2;
}
.defile-points button {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--ecru); background: none; transition: background .25s;
}
.defile-points button[aria-current="true"] { background: var(--or); border-color: var(--or); }

/* ------------------------------------------------------------
   LA LOUPE
   ------------------------------------------------------------
   Elle suit le curseur sur les photos des books. Elle est posée
   une seule fois dans la page et déplacée : créer un élément à
   chaque mouvement de souris coûterait cher pour rien.
   ------------------------------------------------------------ */
.loupe {
  position: absolute; width: 190px; height: 190px; border-radius: 50%;
  pointer-events: none; opacity: 0; z-index: 50;
  border: 3px solid var(--ecru); background-repeat: no-repeat;
  box-shadow: 0 12px 34px rgba(28,55,48,.4), inset 0 0 0 1px rgba(28,55,48,.25);
  transition: opacity .2s;
}
.loupe.visible { opacity: 1; }
.planche a[data-vue], .modele-plaque a[data-vue] { cursor: zoom-in; }

/* ------------------------------------------------------------
   LES CHIFFRES
   ------------------------------------------------------------
   Trois nombres qui disent la taille du réseau, et un zéro qui
   dit ce que le Cercle n'a pas.
   ------------------------------------------------------------ */
.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.4rem, 4vw, 3rem); text-align: center;
  margin: clamp(2rem, 5vw, 3.2rem) 0 clamp(2.5rem, 6vw, 3.5rem);
}
.chiffre b {
  display: block; font-family: var(--titre); color: var(--vert);
  font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre span {
  display: block; margin-top: 0.5rem; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris);
}

/* ------------------------------------------------------------
   LE CRÉPUSCULE
   ------------------------------------------------------------
   La section passe du papier ivoire au vert profond quand on la
   traverse, et le texte s'inverse avec elle.
   ------------------------------------------------------------ */
.crepuscule {
  padding: clamp(4rem, 11vw, 8rem) 0;
  background: var(--ivoire); color: var(--anthracite);
  transition: background-color 1.3s linear;
}
.crepuscule.nuit { background: #14231F; }
.crepuscule h2 {
  font-family: var(--titre); font-size: clamp(1.7rem, 4.2vw, 2.7rem);
  color: var(--vert); margin-bottom: 1rem; max-width: 34rem;
  transition: color 1.3s linear;
}
.crepuscule p { max-width: 38rem; color: var(--gris); transition: color 1.3s linear; }
.crepuscule.nuit h2 { color: var(--ecru); }
.crepuscule.nuit p { color: var(--gris-clair); }
.crepuscule .lien-crepuscule { margin-top: 1.2rem; }
.crepuscule.nuit a { color: var(--or); }

@media (prefers-reduced-motion: reduce) {
  .defile .vue, .defile img, .crepuscule, .crepuscule h2, .crepuscule p {
    transition: none;
  }
  .defile img { transform: none; }
}

/* ------------------------------------------------------------
   LA PAGE « NOTRE PROMESSE »
   ------------------------------------------------------------ */

/* La règle des trois temps. C'est la phrase qui tient toute la
   page : on lui donne la place d'une affiche, pas d'un
   paragraphe. */
.regle-ordre {
  max-width: 44rem; margin: clamp(1rem, 3vw, 2rem) 0 0;
  border-left: 3px solid var(--terracotta); padding-left: clamp(1.2rem, 3vw, 2.2rem);
}
.regle-ordre p { font-family: var(--titre); line-height: 1.15; color: var(--vert); }
.regle-ordre .avant { font-size: clamp(1.8rem, 4.6vw, 2.9rem); }
.regle-ordre .puis  { font-size: clamp(1.5rem, 3.8vw, 2.4rem); color: var(--vert-clair); margin-top: 0.2rem; }
.regle-ordre .enfin { font-size: clamp(1.25rem, 3.2vw, 2rem); color: var(--gris); margin-top: 0.2rem; }
.regle-ordre .explique {
  font-family: var(--texte); font-size: 1.02rem; line-height: 1.75;
  color: var(--anthracite); margin-top: 1.4rem;
}

/* Les neuf moments du parcours en magasin. Le numéro est posé
   à gauche, en chiffres tabulaires pour que la colonne reste
   d'aplomb. */
.moments { list-style: none; margin: 2rem 0 0; padding: 0; }
.moment {
  display: grid; grid-template-columns: 3.4rem 1fr;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--trait-fin);
}
.moment:first-child { border-top: none; padding-top: 0; }
.moment .rang {
  font-family: var(--titre); font-size: 1.5rem; color: var(--or);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.moment h3 { font-size: 1.22rem; margin-bottom: 0.4rem; }
.moment p { color: var(--gris); max-width: 40rem; }
@media (max-width: 520px) {
  .moment { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Les engagements de durée, et les quatre piliers : deux
   grilles de blocs courts, même principe, tons différents. */
.garanties-grille, .piliers {
  /* Deux colonnes fixes, et non « autant que ça rentre » : avec
     quatre blocs, une grille automatique en plaçait trois sur la
     première ligne et laissait le quatrième seul et rétréci. Un
     carré de deux sur deux se lit mieux. */
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem); margin-top: 2rem;
}
@media (max-width: 640px) {
  .garanties-grille, .piliers { grid-template-columns: 1fr; }
}
.garantie, .pilier {
  background: var(--ecru-clair); padding: clamp(1.4rem, 3vw, 1.9rem);
  border-top: 2px solid var(--or);
}
.pilier { border-top-color: var(--vert); }
.garantie h3, .pilier h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.garantie p, .pilier p { color: var(--gris); font-size: 0.97rem; }

/* La section sur le remboursement reste en texte courant : le
   sujet est délicat, il se lit mieux en prose qu'en cases. */
#remboursement .corps strong { color: var(--vert); font-weight: 600; }

/* La phrase qui clôt la section sur le remboursement. Elle est
   posée seule, au centre, parce qu'elle se retient : c'est une
   formule, pas un paragraphe. */
.deux-metiers {
  /* alignée à gauche, comme le texte qu'elle conclut : centrée,
     elle flottait au milieu d'une colonne beaucoup plus large
     que la prose et paraissait posée là par erreur */
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; max-width: 34rem;
  font-family: var(--titre); font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  line-height: 1.35; color: var(--vert);
}
.deux-metiers::before {
  content: ""; display: block; width: 3rem; height: 2px;
  background: var(--terracotta); margin: 0 0 1.3rem;
}

/* ------------------------------------------------------------
   JE VOUS EXPLIQUE VOTRE CORRECTION
   ------------------------------------------------------------
   Le module de lecture d'ordonnance, sur la page Conseils.
   ------------------------------------------------------------ */

/* Les quatre colonnes d'une ordonnance, expliquées une à une. */
.colonnes-ordonnance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem); margin: 2rem 0;
}
.colonne-def {
  background: var(--ecru-clair); padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border-top: 2px solid var(--or);
}
.colonne-def b {
  display: block; font-family: var(--titre); font-size: 1.5rem;
  color: var(--vert); line-height: 1;
}
.colonne-def span {
  display: block; margin: 0.25rem 0 0.7rem;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terracotta);
}
.colonne-def p { font-size: 0.93rem; color: var(--gris); }
.colonne-def strong { color: var(--anthracite); font-weight: 600; }

/* Le formulaire. Les champs sont en « text » et non en
   « number » : les pavés numériques des téléphones envoient une
   virgule, que le type number refuse en silence. On accepte donc
   les deux et on convertit nous-mêmes. */
.ordonnance-forme {
  background: var(--ivoire); border: 1px solid var(--trait);
  padding: clamp(1.3rem, 3vw, 2rem); margin-top: 2rem;
  /* Une règle générale plus haut limite tous les formulaires du
     site à 33 rem — la bonne largeur pour un formulaire de
     contact, beaucoup trop étroite pour une grille d'ordonnance
     à quatre colonnes. Celui-ci prend toute la place. */
  max-width: none;
}
.ordonnance-forme .consigne {
  font-size: 0.9rem; color: var(--gris); margin-bottom: 1.3rem; max-width: 42rem;
}
/* « table-layout: fixed » : sans cette ligne, le navigateur
   donne à chaque colonne la largeur par défaut d'un champ de
   saisie — environ 128 pixels — et la grille déborde de l'écran
   d'un téléphone. Avec elle, les quatre colonnes se partagent
   simplement la place disponible. */
.grille-ordonnance {
  width: 100%; max-width: 46rem; table-layout: fixed;
  border-collapse: separate; border-spacing: 0.45rem 0.3rem;
  /* Une règle générale impose 34 rem minimum à tous les tableaux
     du site, pour que les tableaux de comparaison défilent plutôt
     que de se tasser. Cette grille-ci n'est pas un tableau de
     données : elle doit au contraire se tasser pour tenir dans
     un téléphone. */
  min-width: 0;
}
.grille-ordonnance thead th:first-child,
.grille-ordonnance tbody th { width: 6rem; }
.grille-ordonnance th:first-child, .grille-ordonnance tbody th { padding-left: 0; }
.grille-ordonnance th, .grille-ordonnance td { padding: 0; }
.grille-ordonnance thead, .grille-ordonnance thead th {
  /* les tableaux de comparaison de cette page ont un bandeau vert
     en en-tête ; celui-ci n'en veut pas, il n'est pas de la même
     nature — ce sont des étiquettes de champs, pas des colonnes
     de données */
  background: none;
}
.grille-ordonnance thead th {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris); text-align: left; font-weight: 600;
  border: none; padding-bottom: 0.2rem;
}
.grille-ordonnance tbody th {
  text-align: left; font-weight: 500; font-size: 0.92rem;
  color: var(--anthracite); white-space: nowrap; padding-right: 1rem;
}
.grille-ordonnance input {
  /* 6,5 rem : la largeur d'un « -12,75 » écrit en toutes lettres,
     plus l'air qu'il faut autour. En dessous, le chiffre touchait
     les bords et on ne voyait plus la fin. */
  width: 100%; min-width: 6.5rem; font: inherit; font-size: 1rem;
  padding: 0.6rem 0.75rem; border: 1px solid var(--trait);
  background: #fff; color: var(--anthracite);
  text-align: center; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s, box-shadow .18s;
}
.grille-ordonnance input:focus {
  outline: none; border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(177, 89, 57, 0.14);
}
.aide-ordonnance {
  margin-top: 0.9rem; font-size: 0.82rem; color: var(--gris); max-width: 42rem;
}
.champ-add { margin-top: 1.2rem; max-width: 34rem; }
.champ-add label {
  display: block; font-size: 0.85rem; color: var(--gris); margin-bottom: 0.4rem;
}
.champ-add input { max-width: 10rem; }
.boutons-ordonnance { margin-top: 1.5rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.bouton-efface {
  font: inherit; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: none; cursor: pointer; color: var(--gris);
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.bouton-efface:hover { color: var(--terracotta); }
.lu { position: absolute; left: -9999px; }

/* La réponse. */
.ordonnance-reponse {
  margin-top: 2rem; background: var(--ecru-clair);
  padding: clamp(1.4rem, 3vw, 2.2rem); border-left: 3px solid var(--terracotta);
}
.ordonnance-reponse[hidden] { display: none; }
.ordonnance-reponse h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.ordonnance-reponse .oeil { margin-bottom: 0.5rem; }
.ordonnance-reponse .oeil b { color: var(--vert); }
.ordonnance-reponse .explique {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--trait);
}
.ordonnance-reponse h4 {
  font-family: var(--titre); font-size: 1.1rem; color: var(--vert);
  margin-bottom: 0.4rem;
}
.ordonnance-reponse .explique p { color: var(--gris); }
.ordonnance-reponse .note-transposition {
  margin-top: 1rem; font-size: 0.9rem; color: var(--gris);
  border-left: 2px solid var(--or); padding-left: 0.9rem;
}
.ordonnance-reponse .rappel {
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--trait);
  font-size: 0.88rem; color: var(--gris); font-style: italic;
}

/* ------------------------------------------------------------
   L'ATELIER EN IMAGES
   ------------------------------------------------------------
   La galerie de la page Laboratoire Vecteur. Le principe est
   celui des books de marque : un cadre unique pour toutes les
   photos, quel que soit le format du fichier d'origine.

   Tout tient dans les deux lignes « aspect-ratio » et
   « object-fit » ci-dessous. La première impose le cadre — le
   rapport 3/2, déclaré dans la page elle-même. La seconde
   demande à la photo de le remplir entièrement, quitte à se
   laisser rogner sur les bords, plutôt que de se déformer.

   « height: auto » n'est pas décoratif : sans cette ligne, la
   hauteur écrite dans la balise <img> l'emporte et le cadre est
   ignoré.
   ------------------------------------------------------------ */
.atelier { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.atelier-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

.atelier figure { margin: 0; }
.atelier a { display: block; overflow: hidden; background: var(--ecru); }

.atelier img {
  width: 100%; height: auto; display: block;
  aspect-ratio: var(--format, 3 / 2);
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* La photo avance très légèrement au survol. Trois pour cent :
   assez pour que le geste se sente, pas assez pour qu'il se
   remarque. */
.atelier a:hover img, .atelier a:focus-visible img { transform: scale(1.03); }

/* Le cartel, sous la photo : même traitement que dans les books
   — petites capitales, gris, un filet de couleur à gauche. */
.atelier figcaption {
  font-family: var(--texte); font-size: 0.78rem; line-height: 1.6;
  color: var(--gris); padding: 0.6rem 0 0 0.7rem;
  border-left: 2px solid var(--terracotta);
  margin-top: 0.55rem;
}

.atelier-note {
  font-family: var(--texte); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gris); margin: 0 0 1rem;
}

/* Quelqu'un qui a demandé à son système de limiter les
   animations ne verra pas la photo bouger. */
@media (prefers-reduced-motion: reduce) {
  .atelier img { transition: none; }
  .atelier a:hover img, .atelier a:focus-visible img { transform: none; }
}

@media (max-width: 720px) {
  .atelier-grille { grid-template-columns: 1fr; }
}

/* La photo d'ouverture d'une page projet : elle occupe toute la
   largeur du texte, au format paysage, et remplace le rectangle
   hachuré qui tenait sa place tant qu'on n'avait pas d'image. */
.ouverture-projet { margin: 0 0 3rem; }
.ouverture-projet img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* ------------------------------------------------------------
   LE BOUTON « COMMANDE VECTEUR »
   ------------------------------------------------------------
   Discret, petit, dans une autre couleur que le reste du site —
   le bleu du Laboratoire Vecteur — et traversé d'un reflet qui
   passe toutes les six secondes.

   Le reflet est un simple dégradé blanc très transparent, large
   et incliné, qu'on fait glisser de la gauche vers la droite. Il
   est posé en « ::after » et masqué par « overflow: hidden », si
   bien qu'il n'existe que le temps de traverser le bouton.
   ------------------------------------------------------------ */
.ligne-commande { display: flex; justify-content: flex-end; margin: 1.6rem 0 0; }

.bouton-commande {
  position: relative; overflow: hidden;
  display: inline-block; text-decoration: none;
  padding: 0.5rem 1.05rem;
  background: linear-gradient(135deg, #40646E 0%, #7FADB9 100%);
  color: #F4F7F7;
  font-family: var(--texte);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(64, 100, 110, 0.28);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.bouton-commande span { position: relative; z-index: 1; }

.bouton-commande::after {
  content: ""; position: absolute; top: -60%; bottom: -60%;
  left: -40%; width: 40%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: reflet-commande 6s ease-in-out infinite;
}
@keyframes reflet-commande {
  0%, 62% { left: -40%; }
  86%     { left: 118%; }
  100%    { left: 118%; }
}

.bouton-commande:hover, .bouton-commande:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(64, 100, 110, 0.38);
}

/* Le reflet est un agrément, pas une information : quelqu'un qui
   a demandé à son système de limiter les animations garde le
   bouton, sans le reflet. */
@media (prefers-reduced-motion: reduce) {
  .bouton-commande::after { animation: none; display: none; }
  .bouton-commande, .bouton-commande:hover { transform: none; transition: none; }
}

/* ------------------------------------------------------------
   LES DEUX ÉCRITURES DE LA CORRECTION
   ------------------------------------------------------------
   Deux encadrés côte à côte : l'ordonnance telle qu'elle est
   écrite, et la même correction en cylindre positif — celle qui
   part en commande au laboratoire. Les mettre côte à côte est le
   plus sûr moyen de faire comprendre, sans l'expliquer, que ce
   sont deux écritures d'une seule et même chose.
   ------------------------------------------------------------ */
.deux-ecritures {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem; margin: 1.8rem 0 0.5rem;
}
.encadre-correction {
  background: var(--ivoire);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--vert);
  padding: 1.1rem 1.2rem 1.2rem;
}
.encadre-correction:nth-child(2) { border-top-color: var(--terracotta); }
.encadre-correction h4 {
  font-family: var(--titre); font-size: 1.02rem; color: var(--vert);
  margin: 0 0 0.85rem; line-height: 1.25;
}
.encadre-correction:nth-child(2) h4 { color: var(--terracotta); }
.encadre-correction > p {
  margin: 0.85rem 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--gris);
}

/* Le tableau de chiffres. « tabular-nums » aligne les colonnes
   de décimales à la verticale, comme sur une vraie ordonnance. */
table.correction { width: 100%; border-collapse: collapse; }
table.correction thead th {
  font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gris); font-weight: 600; text-align: center;
  padding: 0 0 0.45rem; background: none; border: none;
}
table.correction tbody th {
  text-align: left; font-weight: 500; font-size: 0.82rem;
  color: var(--anthracite); white-space: nowrap;
  padding: 0.42rem 0.7rem 0.42rem 0; border: none;
}
table.correction td {
  text-align: center; font-size: 0.97rem; color: var(--anthracite);
  font-variant-numeric: tabular-nums; padding: 0.42rem 0.2rem;
  border: none; border-top: 1px solid var(--trait-fin);
}

@media (max-width: 760px) {
  .deux-ecritures { grid-template-columns: 1fr; }
}
/* Par défaut on écrit « Œil droit » en toutes lettres ; la
   version courte n'apparaît que sur les petits écrans. */
.grille-ordonnance tbody th .court { display: none; }

/* Sur un téléphone, les quatre colonnes doivent rester sur une
   seule ligne — c'est ainsi qu'on lit une ordonnance. On ne les
   empile donc pas : on resserre les cases et on abrège le nom de
   l'œil en OD / OG, comme sur le papier. */
@media (max-width: 620px) {
  .grille-ordonnance { border-spacing: 0.3rem 0.25rem; }
  .grille-ordonnance input {
    /* 16 px et pas moins : en dessous, Safari zoome sur le champ
       dès qu'on le touche et la page saute. */
    min-width: 0; font-size: 16px; padding: 0.55rem 0.2rem;
  }
  .grille-ordonnance thead th:first-child,
  .grille-ordonnance tbody th { width: 2.4rem; font-size: 0.8rem; padding-right: 0.3rem; }
  .grille-ordonnance tbody th .long { display: none; }
  .grille-ordonnance tbody th .court { display: inline; }
}

/* Les tableaux de comparaison de cette page ont une ligne sur
   deux en gris. Celui-ci n'en veut pas : il n'a que deux lignes,
   et la bande grise sur la première faisait croire qu'elle était
   plus importante que l'autre. */
table.correction tbody tr:nth-child(odd) td { background: none; }

/* L'étiquette qui signale, des deux tableaux, celui qui reprend
   exactement les chiffres tapés par le visiteur. */
.encadre-correction h4 .tel-quel {
  display: inline-block; vertical-align: middle;
  margin-left: 0.4rem;
  font-family: var(--texte); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gris); background: var(--ecru);
  border: 1px solid var(--trait-fin); border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

/* Le même bouton, en plus petit et calé à gauche, pour la fiche
   du laboratoire sur la page d'accueil : il y suit le texte au
   lieu de flotter au bout d'une ligne vide. */
.ligne-commande.gauche { justify-content: flex-start; margin-top: 1.1rem; }
.bouton-commande.petit {
  padding: 0.4rem 0.85rem; font-size: 0.66rem; letter-spacing: 0.14em;
}

/* ------------------------------------------------------------
   LA PAGE DE CONFIDENTIALITÉ
   ------------------------------------------------------------
   Un traitement de données se décrit toujours par les mêmes
   quatre questions : quoi, pourquoi, sur quelle base, combien de
   temps. On les pose donc dans le même ordre à chaque fois, sous
   forme de liste de définitions — c'est la structure HTML faite
   pour les couples terme/explication.
   ------------------------------------------------------------ */
.traitements { display: grid; gap: 1.1rem; margin: 1.8rem 0 2rem; max-width: 52rem; }
.traitement {
  background: var(--ivoire); border: 1px solid var(--trait);
  border-left: 3px solid var(--vert);
  padding: 1.2rem 1.4rem 1.3rem;
}
.traitement h3 {
  font-family: var(--titre); font-size: 1.12rem; color: var(--vert);
  margin: 0 0 0.9rem;
}
.traitement dl, .droits dl { margin: 0; }
.traitement dl > div, .droits dl > div {
  display: grid; grid-template-columns: 12rem 1fr; gap: 0.3rem 1.2rem;
  padding: 0.5rem 0; border-top: 1px solid var(--trait-fin);
}
.traitement dl > div:first-child, .droits dl > div:first-child { border-top: none; }
.traitement dt, .droits dt {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gris); font-weight: 600; padding-top: 0.15rem;
}
.traitement dd, .droits dd {
  margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--anthracite);
}
.droits { max-width: 52rem; margin: 1.5rem 0 2rem; }

/* L'encadré des données de santé. Il est le seul de la page à
   porter la couleur d'alerte du site — non pour inquiéter, mais
   parce que c'est le point qui mérite d'être lu. */
.cadre-sensible {
  background: var(--ecru-clair); border: 1px solid var(--trait);
  border-top: 3px solid var(--terracotta);
  padding: 1.4rem 1.5rem; margin: 1.8rem 0 2rem; max-width: 52rem;
}
.cadre-sensible h3 {
  font-family: var(--titre); font-size: 1.2rem; color: var(--terracotta);
  margin: 0 0 0.8rem;
}
.cadre-sensible p { color: var(--gris); font-size: 0.97rem; line-height: 1.7; }
.cadre-sensible p + p { margin-top: 0.8rem; }

@media (max-width: 640px) {
  .traitement dl > div, .droits dl > div { grid-template-columns: 1fr; }
}

/* L'information RGPD au pied du formulaire de contact : discrète,
   mais là où elle doit être — au moment où l'on saisit, pas dans
   une page que personne n'ouvre. */
.mention-donnees {
  margin-top: 1.1rem; font-size: 0.78rem; line-height: 1.65;
  color: var(--gris); max-width: 34rem;
}
.mention-donnees a { color: var(--gris); text-underline-offset: 3px; }
.mention-donnees a:hover { color: var(--terracotta); }

/* ============================================================
   LE TÉLÉPHONE
   ------------------------------------------------------------
   Trois corrections qui ne se voient pas sur un écran
   d'ordinateur, et qui changent tout sur un téléphone.
   ============================================================ */

/* 1. LES CHAMPS DE SAISIE
      ------------------------------------------------------
      Safari sur iPhone zoome automatiquement sur tout champ
      dont le texte fait moins de 16 pixels — la page saute,
      se recentre, et il faut repincer pour en sortir. Ce
      n'est pas un réglage qu'on peut désactiver : la seule
      parade est d'écrire à 16 pixels au moins. On le fait
      pour tous les champs du site d'un coup. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
}

/* 2. LA TAILLE DES CIBLES
      ------------------------------------------------------
      Un doigt, ce n'est pas une souris : il couvre une zone
      d'environ un centimètre. En dessous de 44 pixels, on
      vise à côté — et c'est encore plus vrai pour quelqu'un
      qui ne voit pas bien, c'est-à-dire la plupart des
      visiteurs de ce site. */
@media (max-width: 860px) {
  .bouton-menu { min-height: 44px; padding: 0.7rem 1rem; }
  .pied a, footer a {
    display: inline-block; padding: 0.42rem 0; /* la zone touchable
       grandit sans que le texte bouge d'un pixel */
  }
  .bouton-efface { padding: 0.6rem 0; }
  .boutons-ordonnance .bouton, .boutons-ordonnance .bouton-efface { min-height: 44px; }
}

/* 3. ROBIN, SUR UN PETIT ÉCRAN
      ------------------------------------------------------
      Sa pastille ne doit pas recouvrir un bouton de la page,
      et son panneau doit tenir dans l'écran sans que le
      clavier logiciel le pousse dehors. */
@media (max-width: 640px) {
  .robin-pastille { right: 0.75rem; bottom: 0.6rem; width: 70px; }
  .robin-panneau {
    right: 0.6rem; left: 0.6rem; bottom: 0.6rem;
    width: auto; max-height: 78vh;
  }
}

/* Les suggestions de Robin défilent horizontalement quand elles
   ne tiennent pas — c'est voulu. Sur téléphone on les grandit
   pour qu'un doigt les atteigne, et on laisse dépasser la
   suivante : c'est ce qui fait comprendre qu'on peut glisser. */
@media (max-width: 640px) {
  .robin-pistes { padding: 0.8rem 1rem; scroll-padding-left: 1rem; }
  .robin-pistes button { padding: 0.6rem 0.95rem; font-size: 0.8rem; }
}

/* Le chapeau de la page « promesse » tient maintenant en trois
   paragraphes : le premier donne le ton, les suivants précisent.
   Ils sont un peu plus discrets, pour que l'œil garde la
   hiérarchie. */
.chapeau-suite {
  max-width: 46rem; margin-top: 0.85rem;
  font-size: 1rem; line-height: 1.7; color: var(--gris-clair);
}
.regle-ordre .explique + .explique { margin-top: 0.8rem; }
/* Un moment du parcours peut tenir en deux paragraphes. */
.moment p + p { margin-top: 0.7rem; }

/* ------------------------------------------------------------
   NOUS TROUVER
   ------------------------------------------------------------
   Trois cartes au-dessus du formulaire. La première est deux
   fois plus large que les autres, parce que c'est ce que neuf
   visiteurs sur dix viennent chercher : un opticien près de
   chez eux. Les deux autres servent ceux qui veulent nous
   joindre directement.
   ------------------------------------------------------------ */
.trouver {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: 1.1rem; margin-bottom: 3rem;
}
.trouver-carte {
  background: var(--ivoire); border: 1px solid var(--trait);
  border-top: 3px solid var(--trait);
  padding: 1.4rem 1.5rem 1.5rem;
  text-decoration: none; display: flex; flex-direction: column;
}
.trouver-carte h3 {
  font-family: var(--titre); font-size: 1.22rem; color: var(--vert);
  margin: 0 0 0.6rem; line-height: 1.25;
}
.trouver-carte p {
  margin: 0; font-size: 0.93rem; line-height: 1.65; color: var(--gris);
}
.trouver-carte p + p { margin-top: 0.8rem; }

/* La carte principale : couleur pleine, et elle se soulève au
   survol pour qu'on comprenne qu'elle se clique en entier. */
a.trouver-carte.principale {
  border-top-color: var(--terracotta);
  transition: border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.2,.7,.3,1);
}
a.trouver-carte.principale:hover, a.trouver-carte.principale:focus-visible {
  border-color: var(--terracotta); transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(28, 55, 48, 0.09);
}
.trouver-carte .etiquette {
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 600; margin-bottom: 0.5rem;
}
.trouver-carte .suite {
  margin-top: auto; padding-top: 1.1rem;
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--terracotta);
}
.trouver-carte .suite::after { content: " →"; }

/* Une adresse ou un e-mail se lit mieux détaché du texte. */
.trouver-carte .coordonnee {
  margin-top: 0.9rem; font-size: 1rem; line-height: 1.5;
  color: var(--anthracite); font-weight: 500;
}
.trouver-carte .coordonnee a { color: var(--terracotta); }
.trouver-carte .petit-lien { margin-top: auto; padding-top: 1rem; font-size: 0.8rem; }

/* Une ancre invisible, posée un peu au-dessus de sa cible, pour
   que le titre ne se retrouve pas collé sous la barre de
   navigation quand on saute jusqu'au formulaire. */
.ancre-douce { display: block; position: relative; top: -6rem; }

@media (max-width: 900px) {
  .trouver { grid-template-columns: 1fr 1fr; }
  a.trouver-carte.principale { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .trouver { grid-template-columns: 1fr; gap: 0.9rem; margin-bottom: 2.2rem; }
}

/* ------------------------------------------------------------
   RESPIRER, DANS LA RUBRIQUE CONTACT
   ------------------------------------------------------------
   Les trois portes et les trois cartes « nous trouver » se
   touchaient : six cases alignées, l'œil ne voyait plus qu'une
   grille dense et ne comprenait plus qu'il s'agissait de deux
   propositions différentes. On écarte, et on respire.
   ------------------------------------------------------------ */
.portes { gap: 1.8rem; margin-bottom: 1rem; }

.trouver {
  margin-top: 1.6rem;
  gap: 1.5rem;
}
/* Le titre qui sépare les deux groupes : il prend de la place en
   haut, parce que c'est précisément son rôle. */
.titre-section#contact {
  /* « max-width: 22ch » s'applique à tous les titres de section :
     il tient les titres longs sur deux lignes. Mais le filet de
     séparation suivait cette largeur et s'arrêtait au milieu de
     la page. On lui rend toute la largeur, et on contient le
     texte autrement. */
  max-width: none;
  margin-top: 5rem; padding-top: 3.5rem;
  border-top: 1px solid var(--trait);
  scroll-margin-top: 6rem;
}

.trouver-carte { padding: 1.7rem 1.8rem 1.8rem; }
.trouver-carte .suite { padding-top: 1.5rem; }

/* La carte « nous écrire » est maintenant cliquable en entier,
   comme la première : même réaction au survol. */
a.trouver-carte.lien-carte {
  transition: border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.2,.7,.3,1);
}
a.trouver-carte.lien-carte:hover, a.trouver-carte.lien-carte:focus-visible {
  border-color: var(--terracotta); transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(28, 55, 48, 0.09);
}
a.trouver-carte.lien-carte .suite { color: var(--terracotta); }

/* Le formulaire et la liste du collectif, en dessous : eux aussi
   avaient besoin d'air. */
.contact-grille { margin-top: 4rem; padding-top: 3.5rem; gap: 4.5rem; }
.forme-contact label:first-of-type { margin-top: 0; }

@media (max-width: 860px) {
  .titre-section#contact { margin-top: 3.2rem; padding-top: 2.4rem; }
  .contact-grille { margin-top: 2.6rem; padding-top: 2.4rem; gap: 3rem; }
  .portes { gap: 1.2rem; }
}

/* ------------------------------------------------------------
   LE SECOURS DU FORMULAIRE DE CONTACT
   ------------------------------------------------------------
   Il apparaît après l'envoi, parce qu'on ne peut jamais savoir
   si la messagerie du visiteur s'est réellement ouverte. Mieux
   vaut lui tendre la perche que lui affirmer que tout va bien.
   ------------------------------------------------------------ */
.secours-contact {
  margin-top: 1.2rem; padding: 1.1rem 1.2rem;
  background: var(--ecru-clair); border: 1px solid var(--trait);
  border-left: 3px solid var(--or);
}
.secours-contact[hidden] { display: none; }
.secours-contact > p {
  margin: 0 0 0.85rem; font-size: 0.88rem; line-height: 1.6; color: var(--gris);
}
.secours-contact .adresse-secours {
  color: var(--terracotta); font-weight: 600; white-space: nowrap;
}
.secours-contact textarea {
  width: 100%; font: inherit; font-size: 0.88rem; line-height: 1.55;
  padding: 0.7rem 0.8rem; border: 1px solid var(--trait);
  background: #fff; color: var(--anthracite); resize: vertical;
  min-height: 0;
}
.boutons-secours {
  margin: 0.8rem 0 0; display: flex; align-items: center; gap: 0.9rem;
}
.copie-faite {
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vert); font-weight: 600;
}
.copie-faite[hidden] { display: none; }

/* Les deux états de la confirmation : réussite en vert du
   Cercle, échec en terracotta. Sans classe, c'est le message
   neutre d'origine. */
.confirmation.reussi { color: var(--vert); font-weight: 600; }
.confirmation.echoue { color: var(--terracotta); }

/* Le piège à robots : hors de l'écran plutôt que « display:none »,
   parce que certains robots ignorent les champs masqués de cette
   façon — et tombent donc dans le piège. */
.piege-robots {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}