/* Identité Méridien, version claire : beaucoup de blanc et de crème, encre presque noire, or en accent.
   San Francisco (la police système d'Apple, Inter en secours) pour tout, Instrument Serif italique pour les accents.
   Coins arrondis, ombres douces, apparitions au défilement. Le noir est réservé à quelques blocs (scène 3D, appel final).
   Un revendeur en marque blanche ne change que --marque-primaire (sa couleur) ; le reste demeure. */

/* La typographie est celle d'Apple : San Francisco, la police du système sur Mac, iPhone et iPad.
   Ailleurs, Inter, dessinée sur le même modèle, est servie depuis le site. */
@font-face {
  font-family: "Inter";
  src: url("/public/polices/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/public/polices/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --marque-primaire: #c4a35a;
  --marque-sur-primaire: #14120f;
  /* L'or sert aux aplats ; pour du texte sur fond clair, on prend sa version foncée, lisible. */
  --accent: var(--marque-primaire);
  --sur-accent: var(--marque-sur-primaire);
  --accent-texte: #7d6125;
  --encre: #14120f;
  --fond: #faf8f3;
  --fond-2: #ffffff;
  --fond-3: #f3efe6;
  --texte: #14120f;
  --texte-secondaire: rgba(20, 18, 15, 0.72);
  --texte-discret: rgba(20, 18, 15, 0.64);
  --filet: rgba(20, 18, 15, 0.09);
  --filet-fort: rgba(20, 18, 15, 0.2);
  --succes: #1e7a46;
  --alerte: #8a5a00;
  --erreur: #b3261e;
  --papier: #ffffff;
  --rayon: 20px;
  --rayon-petit: 12px;
  --ombre: 0 18px 50px rgba(20, 18, 15, 0.07);
  --ombre-forte: 0 30px 80px rgba(20, 18, 15, 0.16);
  --police-titres: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-accent: "Instrument Serif", Georgia, serif;
  --police-texte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --largeur: 1200px;
  --gouttiere: clamp(20px, 5vw, 64px);
}

/* En marque blanche, la couleur du revendeur sert aussi au texte d'accent : elle doit donc être assez foncée. */
.marque-blanche {
  --accent-texte: var(--marque-primaire);
}

/* Bloc sombre : mêmes composants, couleurs inversées. */
.sombre {
  --fond-2: #14120f;
  --texte: #f3eee2;
  --texte-secondaire: rgba(243, 238, 226, 0.74);
  --texte-discret: rgba(243, 238, 226, 0.56);
  --filet: rgba(255, 255, 255, 0.1);
  --filet-fort: rgba(255, 255, 255, 0.2);
  --accent-texte: #ddb96e;
  color: var(--texte);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--police-titres);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 18px;
  text-wrap: balance;
}

h1 {
  font-size: clamp(26px, 3vw, 36px);
}

h2 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h3 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

h1 em,
h2 em {
  font-family: var(--police-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent-texte);
  font-size: 1.1em;
}

p {
  margin: 0 0 16px;
}

strong {
  font-weight: 600;
}

a {
  color: var(--accent-texte);
  text-underline-offset: 3px;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
  color: var(--texte);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

.evitement {
  position: absolute;
  left: -9999px;
}

.evitement:focus {
  left: 16px;
  top: 16px;
  background: var(--encre);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: var(--rayon-petit);
  z-index: 400;
}

/* --- En-tête --- */

.entete {
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(250, 248, 243, 0.86);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--filet);
}

.entete-interieur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 14px var(--gouttiere);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
}

.entete-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--texte);
}

.logo-embleme {
  display: block;
  width: 36px;
  height: 36px;
}

.logo-mot {
  font-family: var(--police-titres);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.logo-produit {
  font-family: var(--police-accent);
  font-style: italic;
  font-size: 23px;
  line-height: 1;
  color: var(--accent-texte);
}

.logo-image {
  display: block;
  max-height: 36px;
  width: auto;
}

.entete-compte {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.entete-compte .bouton {
  padding: 11px 20px;
  min-height: 0;
}

.navigation {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 26px;
  margin: 0;
  padding: 0;
}

.navigation a {
  display: block;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texte-secondaire);
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}

.navigation a:hover {
  color: var(--texte);
}

.navigation a[aria-current="page"] {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

.bandeau-intervention {
  background: var(--encre);
  color: #f3eee2;
  padding: 8px 16px;
  text-align: center;
}

/* Le bouton « Quitter cet espace » doit rester lisible sur le bandeau sombre. */
.bandeau-intervention .bouton.bouton-discret {
  color: #ddb96e;
  text-decoration: underline;
  min-height: 0;
  padding: 0 0 0 12px;
}

.en-ligne {
  display: inline;
}

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 48px var(--gouttiere) 80px;
}

.contenu.etroit {
  max-width: 620px;
}

.pied {
  border-top: 1px solid var(--filet);
  padding: 36px var(--gouttiere);
  text-align: center;
  color: var(--texte-discret);
  font-size: 13px;
}

.pied a {
  color: var(--texte-secondaire);
  text-decoration: none;
}

.pied a:hover {
  color: var(--texte);
  text-decoration: underline;
}

.pied-interieur {
  max-width: var(--largeur);
  margin: 0 auto;
  display: grid;
  gap: 28px 40px;
  text-align: left;
}

@media (min-width: 760px) {
  .pied-interieur {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .pied-interieur {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  }
}

.pied-interieur p {
  margin: 0 0 8px;
  max-width: 26em;
}

.pied-interieur ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied-interieur li {
  padding: 4px 0;
}

.pied-titre {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte);
}

/* Champ piège du formulaire de contact : hors de l'écran, ignoré des lecteurs d'écran. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Parcours guidé de l'accueil : quatre étapes numérotées. */
.parcours {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}

.parcours li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  counter-increment: etape;
  margin-bottom: 16px;
}

.parcours li > div {
  flex: 1 1 320px;
}

.parcours h2 {
  margin-bottom: 6px;
}

.parcours h2::before {
  content: counter(etape) ". ";
  color: var(--accent-texte);
}

.parcours p {
  color: var(--texte-secondaire);
  margin: 0;
}

.parcours li.faite {
  box-shadow: none;
  background: var(--fond-3);
}

.vignette-logo {
  display: block;
  max-width: 180px;
  max-height: 80px;
}

.vignette-photo {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.apercu-banniere {
  padding: 14px 18px 18px;
  box-shadow: none;
}

.champ input[type="file"] {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--filet-fort);
  border-radius: var(--rayon-petit);
  background: var(--fond-3);
  font-family: var(--police-texte);
  font-size: 14px;
}

.encart {
  margin-top: 28px;
  background: var(--fond-3);
  box-shadow: none;
}

/* Questions fréquentes et textes légaux. */
.questions {
  display: grid;
  gap: 12px;
  max-width: 860px;
}

.question {
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: 18px;
  padding: 0 24px;
  box-shadow: var(--ombre);
}

.question summary {
  cursor: pointer;
  padding: 20px 0;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

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

.question summary::after {
  content: "+";
  font-family: var(--police-titres);
  font-size: 20px;
  line-height: 1.2;
  color: var(--accent-texte);
  transition: transform 0.25s ease;
}

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

.question p {
  color: var(--texte-secondaire);
  margin: 0 0 20px;
  max-width: 44em;
}

.texte-legal {
  max-width: 820px;
}

.texte-legal h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 36px 0 12px;
}

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

.texte-legal p,
.texte-legal li {
  color: var(--texte-secondaire);
}

.texte-legal li {
  margin-bottom: 6px;
}

.a-completer {
  background: #fff3c4;
  color: #5a4300;
  padding: 0 4px;
  border-radius: 4px;
}

/* Chiffres clés. */
.chiffres {
  display: grid;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .chiffres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.chiffres li {
  border-top: 2px solid var(--accent);
  padding-top: 20px;
}

.chiffres .chiffre {
  display: block;
  font-size: clamp(40px, 5vw, 60px);
  margin-bottom: 10px;
}

.chiffres p {
  color: var(--texte-secondaire);
  margin: 0 0 6px;
}

.chiffres cite {
  font-style: normal;
  font-size: 13px;
  color: var(--texte-discret);
}

/* Deux portes d'entrée sous le hero : essayer sans compte, ou se faire conseiller. */
.portes {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) {
  .portes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.porte {
  display: block;
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--ombre);
  text-decoration: none;
  color: var(--texte);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.porte:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--ombre-forte);
}

.porte h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.porte p {
  color: var(--texte-secondaire);
  margin: 0 0 16px;
}

.porte span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-texte);
}

/* --- Composants --- */

.carte {
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: 24px;
  box-shadow: var(--ombre);
}

.carte > :last-child {
  margin-bottom: 0;
}

.grille-deux {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .grille-deux {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Bouton principal : encre sur le site Méridien, couleur du revendeur en marque blanche. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 26px;
  border: 1px solid var(--encre);
  border-radius: 999px;
  background: var(--encre);
  color: #f7f3ea;
  font-family: var(--police-texte);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s, color 0.2s, border-color 0.2s;
}

.bouton:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(20, 18, 15, 0.22);
}

.marque-blanche .bouton {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}

/* Bouton doré : l'appel principal des pages publiques. */
.bouton-or {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}

.bouton-or:hover {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Bouton « Continuer avec Google » : blanc, logo en couleurs, libellé en casse normale (règles de marque de Google). */
.bouton.bouton-fournisseur {
  width: 100%;
  gap: 12px;
  background: #fff;
  color: #1f1f1f;
  border-color: var(--filet-fort);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.bouton.bouton-fournisseur:hover {
  border-color: var(--texte);
  box-shadow: 0 8px 20px rgba(20, 18, 15, 0.1);
}

.logo-fournisseur {
  flex: none;
}

.bouton-fournisseur + .aide {
  display: block;
  margin: 12px 0 0;
  color: var(--texte-discret);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.separateur {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 18px;
  color: var(--texte-discret, #6b655b);
  font-size: 13px;
}

.separateur::before,
.separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--filet-fort);
}

.bouton.bouton-secondaire {
  background: transparent;
  color: var(--texte);
  border-color: var(--filet-fort);
}

.bouton.bouton-secondaire:hover {
  border-color: var(--texte);
  box-shadow: none;
}

.bouton.bouton-discret {
  background: transparent;
  color: var(--texte-secondaire);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.bouton.bouton-discret:hover {
  color: var(--texte);
  transform: none;
  box-shadow: none;
}

.bouton.bouton-danger {
  background: transparent;
  color: var(--erreur);
  border-color: var(--erreur);
}

.bouton.bouton-danger:hover {
  box-shadow: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 20px;
}

.champ {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

fieldset.champ legend {
  padding: 0;
}

fieldset.champ input + label {
  margin-top: 14px;
}

.champ label,
.champ .libelle {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin-bottom: 8px;
}

.champ .aide {
  display: block;
  color: var(--texte-discret);
  font-size: 14px;
  margin-bottom: 8px;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="url"],
.champ input[type="tel"],
.champ input[type="date"],
.champ input[type="number"],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-petit);
  background: #ffffff;
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  font-weight: 400;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.champ input::placeholder {
  color: var(--texte-discret);
}

.champ input:focus,
.champ select:focus {
  border-color: var(--encre);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
  outline: none;
}

.champ input[type="color"] {
  width: 68px;
  height: 48px;
  padding: 4px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-petit);
  background: #ffffff;
}

.champ label.case,
.case {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte);
  margin-bottom: 0;
}

.case input {
  width: 18px;
  height: 18px;
  accent-color: var(--encre);
  flex: none;
}

.message {
  border: 1px solid;
  border-radius: var(--rayon-petit);
  padding: 14px 18px;
  background: var(--fond-2);
  font-weight: 500;
}

.message-succes {
  border-color: var(--succes);
  color: var(--succes);
}

.message-erreur {
  border-color: var(--erreur);
  color: var(--erreur);
}

.etat {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.etat-succes {
  color: var(--succes);
}

.etat-alerte {
  color: var(--alerte);
}

.etat-erreur {
  color: var(--erreur);
}

.etat-neutre {
  color: var(--texte-discret);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
}

.tableau th,
.tableau td {
  text-align: left;
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: middle;
}

.tableau th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-discret);
}

.tableau tbody tr:last-child td {
  border-bottom: 0;
}

.tableau .bouton {
  padding: 9px 16px;
  min-height: 0;
}

.defilement {
  overflow-x: auto;
}

.discret {
  color: var(--texte-discret);
  font-size: 14px;
}

.chiffre {
  font-family: var(--police-titres);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-texte);
}

.liste-simple {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.liste-simple li {
  padding: 12px 0;
  border-bottom: 1px solid var(--filet);
}

.liste-simple li:last-child {
  border-bottom: 0;
}

.etapes {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--texte-secondaire);
}

.etapes li {
  margin-bottom: 8px;
}

.etapes li::marker {
  color: var(--accent-texte);
  font-weight: 600;
}

.texte-mail {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Aperçu d'un mail : la signature y garde les couleurs du client. */
.faux-mail {
  background: var(--papier);
  color: #222222;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 26px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: auto;
  box-shadow: var(--ombre);
}

.faux-mail a {
  color: inherit;
}

.faux-mail .faux-mail-texte {
  color: #555555;
  margin: 0 0 16px;
}

/* Apparition au défilement. Sans script ou avec animations réduites, tout reste visible. */
.js .apparait {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--retard, 0s);
}

.js .apparait.visible {
  opacity: 1;
  transform: none;
}

/* --- Page d'accueil --- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 88% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--fond) 100%);
}

.hero-interieur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 84px) var(--gouttiere) clamp(56px, 7vw, 96px);
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 1040px) {
  .hero-interieur {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-bottom: 24px;
}

.surtitre::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent);
}

.hero h1 {
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}

.hero-accroche {
  font-family: var(--police-accent);
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.5;
  color: var(--texte-secondaire);
  max-width: 27em;
  margin-bottom: 32px;
}

.hero-preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--texte-secondaire);
}

.hero-preuves li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.hero-preuves li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Visuel du hero : la vidéo dans un cadre arrondi, la fenêtre de messagerie posée dessus. */
.hero-visuel {
  position: relative;
  padding: 0 0 clamp(36px, 5vw, 64px) clamp(0px, 5vw, 64px);
}

.hero-media {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 28px;
  overflow: hidden;
  background: #1b1915 url("/public/video/hero-poster.jpg") center / cover no-repeat;
  box-shadow: var(--ombre-forte);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(20, 18, 15, 0) 30%, rgba(20, 18, 15, 0.45) 100%);
}

/* Fenêtre de rédaction, comme dans une vraie messagerie. */
.courrier {
  position: relative;
  margin: -34% 0 0 calc(clamp(0px, 5vw, 64px) * -1);
  width: min(100%, 540px);
  background: #ffffff;
  color: #26241f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(20, 18, 15, 0.28), 0 0 0 1px rgba(20, 18, 15, 0.06);
}

.courrier a {
  color: inherit;
}

.courrier-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  background: #2a2823;
  color: #f3eee2;
  font-size: 13px;
  font-weight: 700;
}

.courrier-barre span:last-child {
  display: flex;
  gap: 6px;
}

.courrier-barre i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.courrier-ligne {
  display: flex;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid #eeebe3;
  color: #8a867a;
}

.courrier-ligne strong {
  color: #26241f;
  font-weight: 400;
}

.courrier-ligne .pastille {
  padding: 1px 10px;
  border-radius: 999px;
  background: #f1eee6;
  color: #26241f;
}

.courrier-corps {
  padding: 16px 18px 4px;
}

.courrier-corps p {
  margin: 0 0 10px;
}

.courrier-signature {
  padding: 8px 18px 18px;
}

.courrier-signature > table {
  max-width: 100%;
}

/* Bannières de démonstration : de vraies images, un titre et un bouton, comme celles que préparent les clients.
   Elles glissent l'une après l'autre ; jamais deux textes ne se superposent. */
.bannieres-exemple {
  position: relative;
  height: 128px;
  margin-top: 14px;
  border-radius: 10px;
  overflow: hidden;
}

.banniere-exemple {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 22px;
  color: #ffffff;
  background-size: cover;
  background-position: center;
  transform: translateY(100%);
  animation: glisse 15s infinite cubic-bezier(0.7, 0, 0.2, 1);
}

.banniere-exemple::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 28, 44, 0.92) 0%, rgba(18, 28, 44, 0.72) 48%, rgba(18, 28, 44, 0.1) 100%);
}

.banniere-exemple > * {
  position: relative;
}

.banniere-exemple small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.banniere-exemple strong {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  margin: 2px 0 8px;
}

.banniere-exemple span {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 999px;
  background: #ffffff;
  color: #14233a;
  font-size: 11.5px;
  font-weight: 700;
}

.banniere-cuisine {
  background-image: url("/public/vitrine/banniere-cuisine.jpg");
}

.banniere-atelier {
  background-image: url("/public/vitrine/banniere-atelier.jpg");
  animation-delay: 5s;
}

.banniere-bois {
  background-image: url("/public/vitrine/banniere-bois.jpg");
  animation-delay: 10s;
}

/* Chaque bannière monte, reste un tiers du cycle, puis sort par le haut pendant que la suivante monte. */
@keyframes glisse {
  0% {
    transform: translateY(100%);
  }

  4%,
  33.3% {
    transform: translateY(0);
  }

  37.3%,
  100% {
    transform: translateY(-100%);
  }
}

.section {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 128px) var(--gouttiere) 0;
}

.section > h2,
.section-tete h2,
.univers h2 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.03;
  margin-bottom: 18px;
}

.section-chapeau {
  font-family: var(--police-accent);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--texte-secondaire);
  max-width: 34em;
  margin-bottom: 44px;
}

/* Simulateur : deux curseurs, un grand chiffre. */
.simulateur {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: 28px;
  padding: clamp(26px, 4vw, 56px);
  box-shadow: var(--ombre);
}

@media (min-width: 900px) {
  .simulateur {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.simulateur .champ {
  margin-bottom: 30px;
}

.simulateur .champ:last-child {
  margin-bottom: 0;
}

.simulateur label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.simulateur output {
  font-family: var(--police-titres);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--texte);
}

.simulateur input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
}

.simulateur-resultat {
  margin: 0;
}

.simulateur-resultat .chiffre {
  display: block;
  font-size: clamp(54px, 9vw, 112px);
  font-variant-numeric: tabular-nums;
}

.simulateur-resultat .legende {
  display: block;
  font-family: var(--police-accent);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
  color: var(--texte);
  margin: 10px 0 16px;
}

.simulateur-resultat .question {
  display: block;
  color: var(--texte-secondaire);
  max-width: 28em;
}

/* Avant / après. */
.comparaison {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) {
  .comparaison {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.comparaison-volet {
  background: var(--fond-3);
  border: 1px solid var(--filet);
  border-radius: 24px;
  padding: clamp(22px, 3vw, 36px);
  transition: transform 0.4s ease;
}

.comparaison-volet:hover {
  transform: translateY(-6px);
}

.comparaison-volet.apres {
  background: var(--fond-2);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--accent) 20%, transparent);
}

.comparaison-volet h3 {
  font-family: var(--police-texte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-discret);
  margin-bottom: 20px;
}

.comparaison-volet.apres h3 {
  color: var(--accent-texte);
}

.pile-signatures {
  display: grid;
  gap: 12px;
}

.signature-brute {
  background: #ffffff;
  color: #333333;
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 400;
  line-height: 1.45;
}

.signature-brute.a {
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 15px;
  color: #1b3fa0;
}

.signature-brute.b {
  font-family: "Times New Roman", Times, serif;
  font-size: 13px;
}

.signature-brute.c {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: #666666;
}

.signature-propre {
  background: #ffffff;
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 16px 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: #333333;
  overflow-x: auto;
}

/* Section 3D. */
.univers {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 1000px) {
  .univers {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.scene {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #2a2418, #14120f 72%);
  box-shadow: var(--ombre-forte);
  cursor: grab;
  --accent: #c4a35a;
}

.scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scene-repli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene.active .scene-repli {
  display: none;
}

.liste-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liste-points li {
  position: relative;
  padding: 16px 0 16px 34px;
  border-top: 1px solid var(--filet);
  color: var(--texte-secondaire);
}

.liste-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 28px;
  width: 14px;
  height: 2px;
  background: var(--accent);
}

.liste-points strong {
  display: block;
  color: var(--texte);
  margin-bottom: 2px;
}

/* Carrousel des usages. */
.carrousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px var(--gouttiere) 32px;
  margin: 0 calc(var(--gouttiere) * -1);
  scrollbar-width: none;
}

.carrousel::-webkit-scrollbar {
  display: none;
}

.usage {
  flex: 0 0 min(84vw, 420px);
  scroll-snap-align: center;
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--ombre);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.usage:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--ombre-forte);
}

.usage-banniere {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 118px;
  border-radius: 12px;
  padding: 0 22px;
  margin-bottom: 20px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  overflow: hidden;
}

.usage-banniere strong {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.usage-banniere span {
  font-size: 13px;
  opacity: 0.9;
}

.teinte-bleu {
  background: linear-gradient(120deg, #1f3a5f, #2c5586);
}

.teinte-brique {
  background: linear-gradient(120deg, #7a3b1d, #a9582f);
}

.teinte-vert {
  background: linear-gradient(120deg, #2f5d3a, #44834f);
}

.teinte-prune {
  background: linear-gradient(120deg, #4a2a55, #6f447c);
}

.teinte-ardoise {
  background: linear-gradient(120deg, #2b3440, #47566a);
}

.teinte-ocre {
  background: linear-gradient(120deg, #8a6a1f, #b48f35);
}

.usage h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.usage p {
  color: var(--texte-secondaire);
  margin: 0;
}

.trois-temps {
  display: grid;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: temps;
}

@media (min-width: 900px) {
  .trois-temps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.trois-temps li {
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 40px);
  counter-increment: temps;
  box-shadow: var(--ombre);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.trois-temps li:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-forte);
}

.trois-temps li::before {
  content: counter(temps);
  display: block;
  font-family: var(--police-titres);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 22px;
}

.trois-temps h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.trois-temps p {
  color: var(--texte-secondaire);
  margin: 0;
}

.tarifs {
  display: grid;
  gap: 24px;
  margin-bottom: 36px;
}

@media (min-width: 900px) {
  .tarifs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tarif {
  background: var(--fond-2);
  border: 1px solid var(--filet);
  border-radius: 24px;
  padding: clamp(26px, 3vw, 44px);
  box-shadow: var(--ombre);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.tarif:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--accent) 24%, transparent);
}

.tarif h3 {
  font-family: var(--police-texte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  margin-bottom: 22px;
}

.prix {
  display: block;
  font-family: var(--police-titres);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--texte);
}

.prix-periode {
  display: block;
  font-family: var(--police-accent);
  font-style: italic;
  font-size: 19px;
  color: var(--accent-texte);
  margin: 6px 0 20px;
}

.tarif p:last-child {
  color: var(--texte-secondaire);
  font-size: 15px;
  margin: 0;
}

.engagements {
  display: grid;
  gap: 20px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--texte-secondaire);
}

@media (min-width: 900px) {
  .engagements {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.engagements li {
  border-top: 2px solid var(--accent);
  padding-top: 18px;
}

.engagements strong {
  display: block;
  color: var(--texte);
  margin-bottom: 4px;
}

/* Appel final : le seul grand bloc sombre de la page. */
.appel {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: clamp(72px, 9vw, 128px) var(--gouttiere) clamp(48px, 6vw, 80px);
  padding: clamp(56px, 8vw, 104px) var(--gouttiere);
  border-radius: 32px;
  background: radial-gradient(ellipse 80% 120% at 50% 0%, #3a2f18, #14120f 70%);
}

@media (min-width: 1328px) {
  .appel {
    max-width: calc(var(--largeur) - 2 * var(--gouttiere));
    margin-left: auto;
    margin-right: auto;
  }
}

.appel h2 {
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 15em;
  margin: 0 auto 16px;
}

.appel p {
  font-family: var(--police-accent);
  font-style: italic;
  font-size: 21px;
  color: var(--texte-secondaire);
  margin-bottom: 32px;
}

@media (min-width: 901px) and (max-width: 1100px) {
  .entete-interieur {
    gap: 8px 14px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .entete-logo {
    gap: 8px;
  }

  .navigation {
    gap: 2px 12px;
  }

  .navigation a {
    letter-spacing: 0.06em;
  }

  .entete-compte {
    gap: 6px;
  }

  .entete-compte .bouton {
    padding-left: 14px;
    padding-right: 14px;
    letter-spacing: 0.08em;
  }
}

.menu-bouton {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--filet-fort);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}

.menu-bouton span:not(.visuellement-cache) {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--texte);
  transition: transform 0.25s, opacity 0.25s;
}

.entete.est-ouverte .menu-bouton span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.entete.est-ouverte .menu-bouton span:nth-child(2) {
  opacity: 0;
}

.entete.est-ouverte .menu-bouton span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 900px) {
  .entete {
    position: relative;
  }

  .menu-bouton {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }

  .entete-interieur > .entete-compte {
    order: 3;
    flex-basis: 100%;
  }

  .navigation-publique {
    display: none;
  }

  .entete.est-ouverte .navigation-publique {
    display: block;
    flex-basis: 100%;
    order: 4;
    padding: 6px 0 4px;
    border-top: 1px solid var(--filet);
  }

  .entete.est-ouverte .navigation-publique .navigation {
    flex-direction: column;
    gap: 0;
  }

  .entete.est-ouverte .navigation-publique .navigation a {
    padding: 10px 0;
  }
}

@media (max-width: 720px) {
  .entete-interieur {
    gap: 6px 18px;
  }

  .hero-visuel {
    padding: 0 0 24px;
  }

  .courrier {
    margin: -22% auto 0;
    width: 94%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-video {
    display: none;
  }

  .banniere-exemple {
    animation: none;
  }

  .banniere-exemple:first-child {
    transform: none;
  }

  .js .apparait {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bouton,
  .tarif,
  .usage,
  .trois-temps li,
  .comparaison-volet {
    transition: none;
  }
}

/* --- Page personnelle : lien à transmettre, étapes par messagerie --- */

.lien-personnel {
  padding: 12px 16px;
  border: 1px dashed var(--filet-fort);
  border-radius: var(--rayon-petit);
  background: var(--fond-3);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.messagerie {
  border-top: 1px solid var(--filet);
}

.messagerie summary {
  padding: 14px 0;
  font-weight: 600;
  cursor: pointer;
}

.messagerie .etapes {
  margin-top: 0;
}

/* Dans l'espace connecté, le pied de page se fait discret : une ligne, pas de liens commerciaux. */
.pied.pied-espace {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 20px var(--gouttiere);
  font-size: 13px;
}

.pied-espace p {
  margin: 0;
}

.pied-espace ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Équipe : une ligne par personne, formulaires d'ajout repliés --- */

.equipe {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.equipe li {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 8px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
}

.equipe-personne {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--texte);
  text-decoration: none;
}

.equipe-personne > span {
  display: grid;
  min-width: 0;
}

.equipe-personne .discret {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.equipe-photo {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.equipe-initiales {
  display: grid;
  place-items: center;
  background: var(--fond-3);
  color: var(--texte-secondaire);
  font-size: 13px;
  font-weight: 600;
}

.equipe-signature {
  font-size: 13.5px;
}

.equipe-etat {
  display: grid;
  gap: 4px;
  justify-items: start;
  font-size: 12.5px;
}

.repliable > summary {
  cursor: pointer;
  list-style: none;
}

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

.repliable > summary h2 {
  display: inline;
  margin: 0;
}

.repliable > summary::after {
  content: "+";
  float: right;
  font-size: 24px;
  line-height: 1;
  color: var(--texte-discret);
}

.repliable[open] > summary::after {
  content: "–";
}

.repliable[open] > summary {
  margin-bottom: 20px;
}

details.champ > summary {
  cursor: pointer;
  color: var(--texte-secondaire);
  font-size: 14px;
}

fieldset details > summary {
  margin: 10px 0;
  cursor: pointer;
  font-weight: 500;
}

@media (max-width: 760px) {
  .equipe li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .equipe-signature,
  .equipe-etat {
    grid-column: 1 / -1;
    padding-left: 56px;
  }

  .equipe li > a:last-child {
    grid-row: 1;
    grid-column: 2;
  }
}

/* --- Connexion de la messagerie --- */

.connexion-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.connexion-entete h2 {
  margin: 0;
}

.connexion .actions {
  align-items: center;
}

.chiffre-petit {
  font-family: var(--police-titres);
  font-size: 22px;
}

.message.message-info {
  border-color: var(--filet-fort);
  background: var(--fond-3);
  color: var(--texte-secondaire);
}

.parcours-connexion {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 28px 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: etape;
  font-size: 14px;
  color: var(--texte-discret);
}

.parcours-connexion li {
  display: flex;
  align-items: center;
  gap: 10px;
  counter-increment: etape;
}

.parcours-connexion li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
  font-weight: 600;
}

.parcours-connexion li.en-cours {
  color: var(--texte);
  font-weight: 600;
}

.parcours-connexion li.en-cours::before {
  border-color: var(--encre);
  background: var(--encre);
  color: #f7f3ea;
}

.parcours-connexion li.faite::before {
  content: "✓";
  border-color: var(--succes);
  color: var(--succes);
}

.tuiles-messagerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.tuiles-messagerie a {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-petit);
  background: var(--papier);
  color: var(--texte);
  text-decoration: none;
}

.tuiles-messagerie a:hover {
  border-color: var(--encre);
}

.tuiles-messagerie a[aria-current="true"] {
  border-color: var(--encre);
  box-shadow: 0 0 0 2px var(--encre);
}

.tuiles-messagerie .discret {
  font-size: 13.5px;
}

/* Page Connexion : le bouton qui relance tout de suite l'annuaire et les signatures. */
.synchronisation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--rayon-petit);
  background: var(--fond-3);
}

.synchronisation .discret {
  flex: 1 1 260px;
  font-size: 14px;
}

/* --- Chiffres clés : tableau de bord et statistiques --- */

.indicateurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin: 20px 0;
}

.indicateur {
  display: grid;
  gap: 2px;
  align-content: start;
  margin: 0;
  padding: 22px 24px;
  color: inherit;
  text-decoration: none;
}

a.indicateur:hover {
  box-shadow: var(--ombre-forte);
}

.indicateur-valeur {
  font: 600 40px/1.05 var(--police-titres);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.indicateur-valeur small {
  font-size: 20px;
  color: var(--texte-discret);
}

.indicateur-valeur.texte {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0;
}

.indicateur-libelle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.indicateur p {
  margin: 8px 0 0;
  font-size: 13.5px;
}

.indicateur-principal {
  background: var(--encre);
  color: #f7f3ea;
}

.indicateur-principal .indicateur-libelle,
.indicateur-principal .discret {
  color: rgba(247, 243, 234, 0.72);
}

.indicateur-principal .tendance.hausse {
  color: #7fd6a2;
}

.indicateur-principal .tendance.baisse {
  color: #f0a39b;
}

/* Répartition des boîtes : signées, à signer, en erreur. */
.repartition {
  display: flex;
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--fond-3);
}

.repartition i {
  display: block;
  height: 100%;
}

.repartition .posees {
  background: var(--succes);
}

.repartition .erreurs {
  background: var(--erreur);
}

.derniers-clics {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.derniers-clics li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--filet);
  font-size: 14.5px;
}

.derniers-clics li:first-child {
  border-top: 0;
}

/* Un titre et, en face, son action : présent ici aussi pour le tableau de bord. */
.titre-et-action {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}

.titre-et-action h1,
.titre-et-action h2 {
  margin: 0;
}

/* --- Sous-navigation : Bibliothèque / Éléments de marque, Composer / Attribuer, Personnes / Groupes --- */

.sous-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin: 22px 0 28px;
  border-bottom: 1px solid var(--filet);
}

.sous-navigation a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--texte-secondaire);
  font-weight: 500;
  text-decoration: none;
}

.sous-navigation a:hover {
  color: var(--texte);
}

.sous-navigation a[aria-current="page"] {
  color: var(--texte);
  border-bottom-color: var(--accent);
}

/* --- Icônes --- */

.icone {
  flex: none;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
}

.titre-section {
  margin: 0 0 16px;
}

/* --- En haut à droite : l'aide et le menu du compte --- */

.entete-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--texte-secondaire);
  transition: background 0.2s, color 0.2s;
}

.entete-icone:hover {
  background: var(--fond-3);
  color: var(--texte);
}

.entete-icone .icone {
  width: 21px;
  height: 21px;
}

.entete-compte:has(.menu-compte) {
  gap: 8px;
}

.menu-compte {
  position: relative;
}

.menu-compte > summary {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px 8px 3px 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--texte-secondaire);
  list-style: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.menu-compte > summary::-webkit-details-marker {
  display: none;
}

.menu-compte > summary:hover,
.menu-compte[open] > summary,
.menu-compte > summary.actif {
  border-color: var(--filet-fort);
  background: var(--fond-2);
}

.menu-compte[open] > summary .icone {
  transform: rotate(180deg);
}

.pastille-compte {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--encre);
  color: #f3eee2;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.menu-compte-panneau {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 500;
  width: min(300px, calc(100vw - 32px));
  padding: 8px 0;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-petit);
  background: var(--fond-2);
  box-shadow: var(--ombre-forte);
}

.menu-compte-email {
  margin: 0;
  padding: 10px 20px 12px;
  overflow: hidden;
  color: var(--texte-discret);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-compte-section {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--filet);
}

.menu-compte-titre {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 4px 20px 6px;
  color: var(--texte-discret);
  font-size: 13.5px;
}

.menu-compte-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-compte-section a,
.menu-compte-sortie {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 20px;
  border: 0;
  background: none;
  color: var(--texte);
  font: inherit;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-compte-section a:hover,
.menu-compte-sortie:hover {
  background: var(--fond-3);
}

.menu-compte-section a[aria-current="page"] {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Sur un petit écran, l'aide et le compte restent sur la ligne du logo ; les onglets passent dessous. */
@media (max-width: 899px) {
  .entete-compte:has(.menu-compte) {
    order: 2;
  }

  /* Le panneau du compte s'ancre à l'écran, pas au bouton : il ne sort plus par la gauche. */
  .menu-compte-panneau {
    position: fixed;
    top: 64px;
    left: 16px;
    right: 16px;
    width: auto;
    max-height: calc(100vh - 80px);
    overflow: auto;
  }

  .entete-interieur:has(.menu-compte) > nav {
    order: 3;
    width: 100%;
  }
}

/* --- Espace connecté : des écrans de travail, un peu plus larges que le site public, avec les mêmes marges --- */

.application {
  --largeur: 1400px;
}

/* Les textes d'explication gardent une longueur de ligne confortable, même sur un grand écran. */
.application .contenu > p:not(.message),
.application .carte > p:not(.message) {
  max-width: 92ch;
}

.application .navigation {
  gap: 2px clamp(18px, 2.2vw, 30px);
}

.application .navigation a {
  font-size: 12.5px;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .application .navigation {
    flex-wrap: nowrap;
  }
}

/* Le logo à gauche, les onglets au centre, l'aide et le compte à droite. */
@media (min-width: 900px) {
  .entete-interieur:has(.menu-compte) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .entete-interieur:has(.menu-compte) > .entete-logo {
    grid-column: 1;
    justify-self: start;
  }

  .entete-interieur:has(.menu-compte) > nav {
    grid-column: 2;
    justify-self: center;
  }

  .entete-interieur:has(.menu-compte) > .entete-compte {
    grid-column: 3;
    justify-self: end;
    margin: 0;
  }
}

@media (max-width: 520px) {
  .application .navigation {
    gap: 0 16px;
  }

  .application .navigation a {
    padding: 8px 0;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}

/* --- Les quatre tailles d'abonnement : page Tarifs et page Abonnement de l'espace --- */

.tarifs-bascule {
  display: inline-flex;
  margin: 0 0 28px;
  padding: 4px;
  border-radius: 999px;
  background: var(--fond-3, #efebe2);
}

.tarifs-bascule button {
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 15px var(--police-texte);
  color: var(--texte-secondaire);
  cursor: pointer;
}

.tarifs-bascule button span {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #7a5e22;
}

.tarifs-bascule button[aria-pressed="true"] {
  background: var(--fond-2, #fff);
  color: var(--texte);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.tailles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 24px;
}

.taille {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 22px 20px 20px;
  border: 1px solid var(--filet);
  border-radius: 16px;
  background: var(--fond-2, #fff);
}

.taille.est-conseillee {
  border-color: #c4a35a;
  box-shadow: 0 18px 40px -28px rgba(40, 32, 12, 0.45);
}

.taille.est-conseillee::before {
  content: "La plus choisie";
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #c4a35a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #14120f;
}

.taille-entreprise {
  background: #14120f;
  border-color: #14120f;
  color: #f4f0e6;
}

.taille-nom {
  margin: 0;
  font: 700 26px/1 var(--police-titres);
  letter-spacing: -0.02em;
}

.taille-boites {
  margin: 0;
  font-size: 14px;
  color: var(--texte-secondaire);
}

.taille-entreprise .taille-boites {
  color: rgba(244, 240, 230, 0.7);
}

.taille-prix {
  margin: 10px 0 6px;
}

.taille-prix b {
  display: block;
  font: 700 32px/1 var(--police-titres);
  letter-spacing: -0.03em;
}

.taille-prix span,
.taille-prix i {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-style: normal;
  color: var(--texte-secondaire);
}

.taille-entreprise .taille-prix span {
  color: rgba(244, 240, 230, 0.7);
}

.taille ul {
  margin: 4px 0 16px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
}

.taille ul li {
  position: relative;
  padding-left: 18px;
  margin-top: 6px;
}

.taille ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c4a35a;
}

.taille .bouton {
  margin-top: auto;
  justify-content: center;
}

/* Dans l'espace : la taille en cours, le compteur, et le choix en cartes plus compactes. */
.taille-actuelle {
  margin: 12px 0 20px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--fond-3, #efebe2);
}

.taille-actuelle-nom {
  margin: 0 0 4px;
  font-size: 15px;
}

.taille-actuelle-nom b {
  font: 700 22px/1 var(--police-titres);
  letter-spacing: -0.02em;
}

.taille-compteur {
  margin: 0 0 10px;
  font-size: 15px;
}

.taille-compteur b {
  font-size: 22px;
}

.taille-jauge {
  height: 8px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: rgba(20, 18, 15, 0.1);
  overflow: hidden;
}

.taille-jauge span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #c4a35a;
  transition: width 0.4s;
}

.taille-actuelle > p:last-child {
  margin: 0;
}

.message-attention {
  border-color: #c4a35a;
  background: rgba(196, 163, 90, 0.12);
  color: #6b5320;
}

.tailles-periodicite {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.tailles-periodicite legend {
  width: 100%;
  margin-bottom: 6px;
  font-weight: 600;
}

.tailles-periodicite label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tailles-compactes .taille {
  cursor: pointer;
  padding: 16px 16px 14px;
}

.tailles-compactes .taille input {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
}

.tailles-compactes .taille-nom {
  font-size: 22px;
}

.tailles-compactes .taille-prix {
  margin: 6px 0 2px;
  font-weight: 600;
  font-size: 14px;
}

.tailles-compactes .taille-ajoute {
  font-size: 13px;
  color: var(--texte-secondaire);
}

.tailles-compactes .taille.est-courante {
  border-color: #c4a35a;
}

.tailles-compactes .taille.est-trop-petite {
  opacity: 0.7;
}

.taille-alerte {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #8a2e2e;
}

.tailles-compactes .taille-entreprise .taille-ajoute {
  color: rgba(244, 240, 230, 0.7);
}

.tailles-compactes .taille-entreprise .bouton {
  margin-top: 10px;
  color: #f4f0e6;
  border-color: rgba(244, 240, 230, 0.4);
}

@media (max-width: 1100px) {
  .tailles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .tailles {
    grid-template-columns: minmax(0, 1fr);
  }

  .tarifs-bascule {
    display: flex;
  }

  .tarifs-bascule button {
    flex: 1;
  }
}

/* La carte Entreprise est sombre : tout son texte passe en clair, quel que soit le gabarit de la page. */
.taille-entreprise,
.taille-entreprise p,
.taille-entreprise li,
.taille-entreprise b,
.taille-entreprise .taille-nom {
  color: #f4f0e6;
}

.taille-entreprise .bouton-secondaire,
.taille-entreprise .bouton-discret {
  color: #f4f0e6;
  border-color: rgba(244, 240, 230, 0.45);
}

.edito-texte .taille-entreprise ul li,
.taille.taille-entreprise ul li {
  color: #f4f0e6;
}

.tarifs-bascule button span {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .tarifs-bascule button {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* --- Équipe : les personnes trouvées sur le site --- */

.equipe-site {
  display: grid;
  gap: 12px;
}

.equipe-site h2,
.equipe-site p {
  margin: 0;
}

.equipe-site-liste {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.equipe-site-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
  gap: 8px 16px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--filet);
}

.equipe-site-personne {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}

.equipe-site-liste input[type="email"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-petit);
  background: #ffffff;
  font: inherit;
}

@media (max-width: 560px) {
  .equipe-site-liste li {
    grid-template-columns: minmax(0, 1fr);
  }
}