/*
 * Feuille de style du site M comme Mutuelle.
 *
 * Écrite à la main, sans préprocesseur ni outil de construction : le fichier
 * est servi tel quel. Les couleurs de marque sont regroupées en variables au
 * début, une modification de charte se fait donc ici et nulle part ailleurs.
 *
 * Plan : polices, jetons, base, utilitaires, animations, navigation, hero,
 * sections, cartes, blocs illustrés, pied de page, page d'accès, adaptation
 * aux petits écrans.
 */

/* ---------------------------------------------------------------- polices */

/*
 * Asap est servie depuis le site : aucune requête vers un tiers, ce qui évite
 * la question du transfert d'adresses IP vers un service extérieur. Ce sont
 * des polices variables, d'où la plage de graisses sur une seule fonte.
 */
@font-face {
  font-family: "Asap";
  src: url("../polices/asap.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Asap";
  src: url("../polices/asap-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ----------------------------------------------------------------- jetons */

/*
 * Chaque couleur qui change de thème est écrite avec light-dark() : une seule
 * déclaration porte les deux valeurs, et c'est color-scheme qui tranche. Le
 * violet de marque, lui, reste fixe : il sert d'aplat (hero, appel, pied) avec
 * du texte blanc dessus, un aplat qui se tient aussi bien sur fond sombre.
 * Pour le texte, c'est --titre qui prend le relais, éclairci en mode sombre.
 */
:root {
  color-scheme: light dark;

  /*
   * Chaque jeton est déclaré deux fois : la valeur claire seule, puis la
   * paire light-dark(). Un navigateur qui ne connaît pas la fonction écarte
   * la seconde déclaration et garde la première, le site reste donc juste
   * en clair au lieu de perdre ses couleurs.
   */

  --violet: #522053;
  --titre: #522053;
  --titre: light-dark(#522053, #e9d7eb);
  --violet-moyen: #733075;
  --violet-moyen: light-dark(#733075, #c9a3cb);
  --violet-clair: #f3ecf3;
  --violet-clair: light-dark(#f3ecf3, #2a1f2e);
  --violet-trait: #e2d7e2;
  --violet-trait: light-dark(#e2d7e2, #3a2c3e);
  --orange: #ef7d1f;
  --orange-survol: #d3660c;
  --orange-survol: light-dark(#d3660c, #f79445);
  --orange-clair: #fdf2e7;
  --orange-clair: light-dark(#fdf2e7, #3b2517);
  --menthe: #e8f3ef;
  --menthe: light-dark(#e8f3ef, #1a2422);
  --menthe-douce: #f2f8f6;
  --menthe-douce: light-dark(#f2f8f6, #18201f);
  --menthe-trait: #cfe4dc;
  --menthe-trait: light-dark(#cfe4dc, #2b3a36);
  --turquoise: #0f8c84;
  --turquoise: light-dark(#0f8c84, #3fbfb4);
  --surface: #ffffff;
  --surface: light-dark(#ffffff, #211826);
  --surface-douce: #f7f6f9;
  --surface-douce: light-dark(#f7f6f9, #1b1420);
  --bord: #e8e2e8;
  --bord: light-dark(#e8e2e8, #33263a);
  --texte: #2e1730;
  --texte: light-dark(#2e1730, #f2ecf3);
  --texte-doux: #6d5f6e;
  --texte-doux: light-dark(#6d5f6e, #b6a8b8);

  /* Verre de la barre flottante et du menu mobile. */
  --verre: rgba(255, 255, 255, 0.8);
  --verre: light-dark(rgba(255, 255, 255, 0.8), rgba(38, 28, 44, 0.82));
  --verre-dense: rgba(255, 255, 255, 0.92);
  --verre-dense: light-dark(rgba(255, 255, 255, 0.92), rgba(30, 22, 36, 0.94));
  --verre-bord: rgba(255, 255, 255, 0.6);
  --verre-bord: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.14));
  --verre-reflet: rgba(255, 255, 255, 0.6);
  --verre-reflet: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08));
  --verre-liseré: rgba(255, 255, 255, 0.9);
  --verre-liseré: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.12));

  --largeur: 72rem;
  --marge: 1.5rem;
  --rayon: 1rem;
  --rayon-large: 1.5rem;
  --ombre-carte: 0 18px 40px -24px rgba(82, 32, 83, 0.45);
  --ombre-carte: 0 18px 40px -24px
    light-dark(rgba(82, 32, 83, 0.45), rgba(0, 0, 0, 0.7));
  --ombre-barre: 0 8px 32px -14px rgba(82, 32, 83, 0.22);
  --ombre-barre: 0 8px 32px -14px
    light-dark(rgba(82, 32, 83, 0.22), rgba(0, 0, 0, 0.55));
  --ombre-barre-dense: 0 10px 40px -12px rgba(82, 32, 83, 0.28);
  --ombre-barre-dense: 0 10px 40px -12px
    light-dark(rgba(82, 32, 83, 0.28), rgba(0, 0, 0, 0.65));
  --transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Choix explicite du visiteur, posé sur <html> avant le premier rendu. Sans
 * attribut, le thème suit le réglage du système.
 */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ------------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--texte);
  font-family: "Asap", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ utilitaires */

.contenant {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge);
}

/* Visible des lecteurs d'écran seulement. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.evitement:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--violet);
  color: #fff;
}

.surtitre {
  margin: 0;
  color: var(--turquoise);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.surtitre--orange {
  color: var(--orange);
  letter-spacing: 0.2em;
}

.point {
  color: var(--orange);
}

.losange {
  flex: none;
  color: var(--orange);
}

.fleche {
  display: inline-block;
  transition: transform var(--transition);
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform var(--transition),
    background-color var(--transition),
    box-shadow var(--transition),
    color var(--transition);
}

.bouton--orange {
  background: var(--orange);
  color: #fff;
}

.bouton--orange:hover {
  transform: translateY(-2px);
  background: var(--orange-survol);
  box-shadow: 0 14px 30px -12px rgba(239, 125, 31, 0.8);
}

.bouton--contour {
  border-color: currentColor;
}

.bouton--contour:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
}

.hero:not(.hero--photo) .bouton--contour {
  color: var(--titre);
}

.hero:not(.hero--photo) .bouton--contour:hover {
  background: var(--violet);
  color: #fff;
}

.bouton--pleine-largeur {
  width: 100%;
  justify-content: center;
}

.mention {
  max-width: 48rem;
  margin-top: 3rem;
  color: var(--texte-doux);
  font-size: 0.875rem;
}

.accroche {
  margin-top: 3rem;
  color: var(--titre);
  font-size: 1.25rem;
  font-weight: 700;
}

/*
 * Chapô : le texte d'ouverture d'une section. Sa taille et son contraste le
 * distinguent du corps, et sa mesure plus large lui évite de laisser la
 * moitié droite de la section vide.
 */
.chapo {
  max-width: 46rem;
  color: var(--titre);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

.chapo + .piliers,
.chapo + .prose {
  margin-top: 2rem;
}

/*
 * Liste de métiers : des entrées séparées par un filet plutôt que des cartes.
 * Le cadre, l'ombre et le coin arrondi disaient « objet distinct » huit fois
 * de suite, sans rien distinguer ; le filet suffit à séparer et laisse le
 * texte respirer.
 */
.entrees {
  display: grid;
  gap: 0;
  margin-top: 1rem;
}

.entree {
  padding: 1.75rem 0;
  border-top: 1px solid var(--bord);
  color: var(--texte-doux);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.entree strong {
  color: var(--titre);
  font-weight: 700;
}

@media (min-width: 48rem) {
  .entrees {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.5rem;
  }
}

/*
 * Les trois piliers en colonnes, nommés en grand : ils annoncent le plan de
 * la page, une pastille de la taille d'une étiquette les sous-vendait.
 */
.colonnes-piliers {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

.colonne-pilier {
  padding-top: 1.25rem;
  border-top: 3px solid var(--orange);
  color: var(--titre);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

@media (min-width: 48rem) {
  .colonnes-piliers {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/*
 * Titre et texte côte à côte. Un texte court posé seul sous son titre laisse
 * la moitié droite vide ; en vis-à-vis, le titre occupe cette place et le
 * moment se lit d'un bloc.
 */
.duo {
  display: grid;
  gap: 1.5rem;
}

.duo__titre {
  color: var(--titre);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

@media (min-width: 64rem) {
  .duo {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

/*
 * Chute d'une page : quelques lignes brèves posées sur l'aplat violet. Le
 * corps du site n'employait jamais cet aplat, réservé au hero et au pied ;
 * il donne à la fin de page le poids qu'un paragraphe gris n'avait pas.
 */
.chute {
  background: var(--violet);
  color: #fff;
}

.chute > .contenant {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.chute__texte {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Ligne d'amorce : plus longue, elle reste en corps au-dessus d'un filet. */
.chute__amorce {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
}

.chute__surtitre {
  color: var(--orange);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.prose {
  max-width: 38rem;
  color: var(--texte-doux);
  font-size: 1.125rem;
  line-height: 1.7;
}

.prose p + p {
  margin-top: 1rem;
}

.prose--clair {
  color: rgba(255, 255, 255, 0.8);
}

.liste-losanges {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
}

.liste-losanges li {
  display: flex;
  gap: 0.75rem;
}

.liste-tirets {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
  color: var(--texte-doux);
}

.liste-tirets li::before {
  content: "◆";
  margin-right: 0.5rem;
  color: var(--orange);
  font-size: 0.75rem;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  color: var(--titre);
  font-size: 0.875rem;
  font-weight: 600;
}

.lien-fleche:hover .fleche {
  transform: translateX(4px);
}

/* -------------------------------------------------------------- animations */

/* Halos du hero : deux dégradés radiaux qui dérivent, sans image à charger. */
@keyframes halo {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4%, -6%, 0) scale(1.12);
  }
}

.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: halo 18s ease-in-out infinite;
  will-change: transform;
}

.halo--orange {
  left: -6rem;
  top: -8rem;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, rgba(239, 125, 31, 0.28), transparent 65%);
}

.halo--turquoise {
  right: -8rem;
  top: 2rem;
  width: 38rem;
  height: 38rem;
  background: radial-gradient(circle, rgba(15, 140, 132, 0.25), transparent 65%);
  animation-duration: 26s;
  animation-direction: reverse;
}

/* Entrée à l'affichage de la page, décalée par --delai. */
@keyframes montee {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.montee {
  animation: montee 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--delai, 0ms);
}

/*
 * Révélation au défilement. L'état masqué n'est posé que si le JavaScript
 * tourne : sans lui, l'observateur ne lèverait jamais le voile et la page
 * resterait blanche.
 */
.apparition {
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delai, 0ms);
}

@media (scripting: enabled) {
  .apparition {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }
}

.apparition.vu {
  opacity: 1;
  transform: none;
}

/* Défilement continu du bandeau. */
@keyframes defilement {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/*
 * Transitions entre pages. Sur un site multi-pages, l'API View Transitions
 * enchaîne les documents : le contenu sortant s'efface vite, l'entrant arrive
 * plus lentement en montant. Sans prise en charge, la navigation reste
 * instantanée.
 */
@view-transition {
  navigation: auto;
}

/*
 * L'ancienne page reste opaque sous la nouvelle, qui se fond par-dessus.
 *
 * Les faire disparaître et apparaître ensemble laissait voir le fond blanc du
 * document entre les deux calques translucides : c'est ce qui se lisait comme
 * un flash blanc à chaque changement de page.
 */
::view-transition-old(root) {
  animation: none;
}

::view-transition-new(root) {
  animation:
    280ms ease-out both page-entree,
    420ms cubic-bezier(0.22, 1, 0.36, 1) both page-glisse;
}

@keyframes page-entree {
  from {
    opacity: 0;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes page-glisse {
  from {
    transform: translateY(14px);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .halo,
  .montee,
  .defilant__piste {
    animation: none;
  }

  .apparition {
    opacity: 1;
    transform: none;
    transition: none;
  }

  ::view-transition-new(root) {
    animation: none;
  }
}

/* -------------------------------------------------------------- navigation */

.barre {
  position: fixed;
  inset: 1rem 0 auto;
  z-index: 50;
  padding: 0 1rem;
}

.barre__centre {
  max-width: var(--largeur);
  margin: 0 auto;
}

.pilule {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  background: var(--verre);
  box-shadow:
    var(--ombre-barre),
    inset 0 1px 0 var(--verre-liseré);
  backdrop-filter: blur(24px) saturate(150%);
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

/* Au défilement, le fond se densifie : le contenu passe dessous. */
.barre--defile .pilule {
  background: var(--verre-dense);
  box-shadow:
    var(--ombre-barre-dense),
    inset 0 1px 0 var(--verre-liseré);
}

/* Reflet du haut : ce qui fait lire la barre comme du verre. */
.pilule__reflet {
  position: absolute;
  inset: 0 0 50%;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--verre-reflet), transparent);
}

.pilule__contenu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.5rem 1.25rem;
}

.logo img,
.acces__logo img {
  transition: transform var(--transition);
}

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

/*
 * Deux versions du logotype, une seule visible : mêmes règles à trois états
 * que les icônes du bouton de thème.
 */
.logo__sombre {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo__clair {
    display: none;
  }

  :root:not([data-theme="light"]) .logo__sombre {
    display: block;
  }
}

:root[data-theme="dark"] .logo__clair {
  display: none;
}

:root[data-theme="dark"] .logo__sombre {
  display: block;
}

:root[data-theme="light"] .logo__clair {
  display: block;
}

:root[data-theme="light"] .logo__sombre {
  display: none;
}

.logo:hover img {
  transform: scale(1.05);
}

.nav ul {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.nav a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  color: var(--texte);
  white-space: nowrap;
  transition: color var(--transition);
}

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

.nav__action {
  margin-left: 0.5rem;
}

.nav__action a {
  padding: 0.65rem 1.25rem;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(239, 125, 31, 0.9);
}

.nav__action a:hover {
  color: #fff;
}

/* Curseur qui suit le lien survolé, placé en JavaScript. */
.nav__curseur {
  position: absolute;
  inset: 0.25rem auto;
  left: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--violet-clair);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}

/*
 * Bouton de thème et bouton de menu : un même groupe à droite de la pilule,
 * pour qu'ils gardent leur alignement quand le menu passe en version mobile.
 */
.pilule__droite {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/*
 * Le bouton n'a d'utilité qu'avec JavaScript : sans lui, il ne s'affiche pas
 * et le thème suit le réglage du système, ce qui reste un comportement juste.
 */
.theme {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  background: var(--verre-reflet);
  color: var(--titre);
  cursor: pointer;
  transition:
    background-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

@media (scripting: enabled) {
  .theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.theme:hover {
  transform: scale(1.08);
  background: var(--violet-clair);
}

.theme svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * Trois états : sans attribut sur <html>, l'icône annonce le thème que le clic
 * amènera, calculé d'après le réglage du système ; avec un attribut, elle
 * annonce l'inverse du thème affiché.
 */
.theme__lune {
  display: block;
}

.theme__soleil {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme__lune {
    display: none;
  }

  :root:not([data-theme="light"]) .theme__soleil {
    display: block;
  }
}

:root[data-theme="dark"] .theme__lune {
  display: none;
}

:root[data-theme="dark"] .theme__soleil {
  display: block;
}

:root[data-theme="light"] .theme__lune {
  display: block;
}

:root[data-theme="light"] .theme__soleil {
  display: none;
}

.burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  background: var(--verre-reflet);
  color: var(--titre);
  cursor: pointer;
}

.burger__traits {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 0.75rem;
}

.burger__traits span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition);
}

.burger__traits span:first-child {
  top: 0;
}

.burger__traits span:last-child {
  bottom: 0;
}

.burger[aria-expanded="true"] .burger__traits span:first-child {
  transform: translateY(5px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__traits span:last-child {
  transform: translateY(-5px) rotate(-45deg);
}

.menu-mobile {
  margin-top: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon-large);
  background: var(--verre-dense);
  box-shadow: var(--ombre-barre-dense);
  backdrop-filter: blur(24px) saturate(150%);
}

.menu-mobile ul {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.menu-mobile a:not(.bouton) {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--rayon);
  color: var(--texte-doux);
}

.menu-mobile a:not(.bouton):hover {
  background: var(--violet-clair);
  color: var(--titre);
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 11rem 0 6rem;
  border-bottom: 1px solid var(--menthe-trait);
  background: var(--menthe);
}

.hero--compact {
  padding: 10rem 0 5rem;
}

.hero--photo {
  border-bottom: 0;
  background: var(--violet);
  color: #fff;
}

.hero__halos,
.hero__fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

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

/*
 * Voile dense à gauche, où se trouve le texte, et plus clair à droite, où
 * l'image respire : le contraste du titre ne dépend pas de la photo.
 */
.hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(82, 32, 83, 0.94) 0%,
    rgba(82, 32, 83, 0.82) 45%,
    rgba(82, 32, 83, 0.5) 100%
  );
}

.hero__titre {
  max-width: 56rem;
  margin-top: 1.25rem;
  color: var(--titre);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

.hero--photo .hero__titre {
  color: #fff;
}

.hero--photo .surtitre {
  color: rgba(255, 255, 255, 0.75);
}

.hero__chapeau {
  max-width: 38rem;
  margin-top: 1.5rem;
  color: var(--texte-doux);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.7;
}

.hero--photo .hero__chapeau {
  color: rgba(255, 255, 255, 0.85);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ---------------------------------------------------------------- sections */

.section {
  padding: 5rem 0;
}

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

.section--violet {
  background: var(--violet);
  color: #fff;
}

.section__titraille {
  max-width: 42rem;
}

.section__titre {
  margin-top: 0.75rem;
  color: var(--titre);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  text-wrap: balance;
}

.section__titre--clair {
  color: #fff;
}

.section__chapeau {
  margin-top: 1rem;
  color: var(--texte-doux);
  font-size: 1.125rem;
  line-height: 1.7;
}

.section--violet .section__chapeau {
  color: rgba(255, 255, 255, 0.8);
}

.section__corps {
  margin-top: 3.5rem;
}

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

.grille--espacee {
  margin-top: 3.5rem;
}

.deux-colonnes {
  display: grid;
  gap: 2.5rem;
}

/* ------------------------------------------------------------------ cartes */

.carte {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 1.75rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-large);
  background: var(--surface);
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.carte:hover {
  transform: translateY(-4px);
  border-color: var(--violet-trait);
  box-shadow: var(--ombre-carte);
}

.carte--sobre:hover {
  transform: none;
  box-shadow: none;
}

.carte--large-texte {
  font-size: 1.125rem;
  line-height: 1.7;
}

.carte--losange {
  display: flex;
  gap: 0.75rem;
}

/* Liseré dégradé qui se déploie au survol. */
.carte__liseré {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(to right, var(--violet), var(--orange));
  transition: transform 0.5s var(--transition);
}

.carte:hover .carte__liseré {
  transform: scaleX(1);
}

.carte__titre {
  color: var(--titre);
  font-size: 1.25rem;
  font-weight: 700;
}

.carte__cible {
  margin-top: 0.25rem;
  color: var(--orange);
  font-size: 0.875rem;
  font-weight: 500;
}

.carte__texte {
  margin-top: 0.75rem;
  color: var(--texte-doux);
  line-height: 1.7;
}

.carte__intitule {
  color: var(--orange);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.carte__valeur {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.carte__suite {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--orange);
  font-size: 0.875rem;
  font-weight: 600;
}

.carte--lien:hover .fleche {
  transform: translateX(4px);
}

/* Le lien couvre toute la carte, sans imbriquer de lien dans un lien. */
.carte--lien .carte__titre a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.etiquettes li {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--violet-clair);
  color: var(--titre);
  font-size: 0.75rem;
  font-weight: 500;
}

.avertissement {
  margin-top: 1.5rem;
  padding: 0.75rem;
  border-left: 2px solid var(--orange);
  background: var(--orange-clair);
  color: var(--texte-doux);
  font-size: 0.75rem;
  line-height: 1.6;
}

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

.piliers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/*
 * Les pastilles qui suivent un paragraphe reprennent ce qu'il vient
 * d'énumérer : sans respiration, elles se lisent comme la suite de la phrase.
 * La règle ne vise que ce cas, les pastilles ouvrant une section tenant leur
 * espacement de la section elle-même.
 */
.prose + .piliers {
  margin-top: 2rem;
}

.piliers li {
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--violet-trait);
  border-radius: 999px;
  background: var(--surface);
  color: var(--titre);
  font-weight: 600;
}

/* -------------------------------------------------------- blocs illustrés */

.chiffres {
  border-bottom: 1px solid var(--bord);
  background: var(--surface);
}

.chiffres dl {
  display: grid;
  gap: 2.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.chiffres__valeur {
  display: block;
  color: var(--titre);
  font-size: 2.25rem;
  font-weight: 800;
  white-space: nowrap;
}

.chiffres__libelle {
  display: block;
  margin-top: 0.5rem;
  font-weight: 500;
}

.chiffres__precision {
  display: block;
  margin-top: 0.5rem;
  color: var(--texte-doux);
  font-size: 0.875rem;
  line-height: 1.6;
}

.grand-chiffre {
  display: block;
  color: var(--orange);
  font-size: 3rem;
  font-weight: 800;
  white-space: nowrap;
}

.grand-chiffre__libelle {
  display: block;
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.ressenti dd {
  display: flex;
  gap: 1.25rem;
}

.ressenti__valeur {
  flex: none;
  color: var(--orange);
  font-size: 2.25rem;
  font-weight: 800;
  white-space: nowrap;
}

.ressenti__libelle {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.defilant {
  overflow: hidden;
  border-bottom: 1px solid var(--menthe-trait);
  background: var(--menthe-douce);
  padding: 1rem 0;
}

.defilant__piste {
  display: flex;
  width: max-content;
  align-items: center;
  animation: defilement 32s linear infinite;
  will-change: transform;
}

.defilant ul {
  display: flex;
  align-items: center;
}

.defilant li {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-left: 2.5rem;
  color: var(--violet-moyen);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*
 * Séparateur des mentions : un point dessiné en CSS plutôt qu'un caractère.
 * Le losange employé auparavant est absent de la police Asap, et arrivait donc
 * dans une police de repli, d'un dessin et d'une taille étrangers au reste.
 */
.defilant li::after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--orange);
}

.photo-texte {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/*
 * Deux blocs illustrés qui se suivent dans une même section : empilés sur
 * petit écran, la photo du premier venait buter sur le titre du second, sans
 * rien pour dire où l'un finit et où l'autre commence. L'écart doit dépasser
 * celui qui sépare un texte de sa propre photo, sinon la photo paraît
 * appartenir au bloc suivant.
 */
.photo-texte + .photo-texte {
  margin-top: 4rem;
}

/*
 * Un titre introduisant une prose : le rythme des paragraphes ne joue pas
 * entre eux, il faut le poser. L'écart reste inférieur à celui qui précède le
 * titre, pour qu'il se rattache au texte qu'il annonce.
 */
.carte__titre + .prose {
  margin-top: 1rem;
}

.photo-texte__image {
  overflow: hidden;
  border-radius: var(--rayon-large);
  box-shadow: 0 30px 60px -30px rgba(82, 32, 83, 0.5);
}

.photo-texte__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bandeau {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 24rem;
  padding: 5rem 0;
}

.bandeau--nu {
  min-height: 18rem;
  padding: 0;
}

.bandeau__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bandeau__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(82, 32, 83, 0.45);
}

.bandeau--nu .bandeau__voile {
  background: rgba(82, 32, 83, 0.2);
}

/*
 * Panneau de verre dépoli : il règle le contraste localement, là où la phrase
 * se lit, et laisse la photo vivre autour.
 */
.panneau {
  max-width: 38rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--rayon-large);
  background: rgba(82, 32, 83, 0.7);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  color: #fff;
}

.panneau__filet {
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: 999px;
  background: var(--orange);
}

.panneau blockquote {
  margin: 1.5rem 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}

.panneau figcaption {
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.exergue {
  margin: 0;
  padding: 2rem;
  border-left: 4px solid var(--orange);
  border-radius: var(--rayon-large);
  background: var(--violet-clair);
}

.exergue blockquote {
  margin: 0;
  color: var(--titre);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: balance;
}

.encart {
  padding: 1.75rem;
  border: 1px solid var(--violet-trait);
  border-radius: var(--rayon-large);
  background: var(--violet-clair);
}

.encart__titre {
  color: var(--titre);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.temoignage {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 1.75rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-large);
  background: var(--surface);
}

.temoignage blockquote {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.7;
}

.temoignage figcaption {
  margin-top: 1.25rem;
  color: var(--orange);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.thematiques {
  display: grid;
  gap: 1rem;
}

.thematique {
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-large);
  background: var(--surface);
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.thematique:hover {
  transform: translateY(-4px);
  border-color: var(--violet-trait);
  box-shadow: var(--ombre-carte);
}

.thematique__numero {
  color: var(--violet-trait);
  font-size: 1.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: color var(--transition);
}

.thematique:hover .thematique__numero {
  color: var(--orange);
}

.thematique__image {
  overflow: hidden;
  border-radius: var(--rayon);
}

.thematique__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.thematique:hover .thematique__image img {
  transform: scale(1.05);
}

/*
 * Mosaïque : la première case occupe quatre cellules, les cinq suivantes
 * complètent exactement trois rangées de trois.
 */
/*
 * La mosaïque qui suit un texte a besoin d'air : sans cela, la phrase qui
 * l'annonce vient se coller à la première image.
 */
.mosaique:not(:first-child) {
  margin-top: 2.5rem;
}

.mosaique {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 9rem;
  gap: 1rem;
}

.mosaique__case {
  overflow: hidden;
  border-radius: var(--rayon-large);
}

.mosaique__case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.mosaique__case:hover img {
  transform: scale(1.05);
}

.appel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5rem 0;
  background: var(--violet);
  color: #fff;
}

.appel__halo {
  position: absolute;
  right: -5rem;
  top: -6rem;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 125, 31, 0.45), transparent 65%);
  filter: blur(60px);
  animation: halo 18s ease-in-out infinite;
}

.appel h2 {
  max-width: 42rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  text-wrap: balance;
}

.appel p {
  max-width: 34rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.125rem;
}

.appel .bouton {
  margin-top: 2rem;
}

/* ----------------------------------------------------------- pied de page */

.pied {
  background: var(--violet);
  color: rgba(255, 255, 255, 0.8);
}

.pied__grille {
  display: grid;
  gap: 2.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.pied__logo {
  display: inline-flex;
}

.pied__logo img {
  height: 2.5rem;
  width: auto;
}

.pied__marque p {
  max-width: 24rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
}

/*
 * Deux formes selon que le badge a été déposé ou non : le lien en toutes
 * lettres, ou le logotype de certification. Celui-ci est blanc sur fond
 * transparent, il se pose donc directement sur le violet du pied de page —
 * un aplat dans les deux thèmes — sans pastille derrière lui.
 */
.pied__bcorp {
  display: inline-block;
  margin-top: 1rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

.pied__bcorp:hover {
  text-decoration: underline;
}

.pied__bcorp--image {
  /* Le lien couvre le badge : la cible reste confortable au doigt. */
  margin-top: 1.25rem;
  margin-left: -0.25rem;
  padding: 0.25rem;
  transition: transform var(--transition);
}

.pied__bcorp--image:hover {
  transform: scale(1.04);
  text-decoration: none;
}

.pied__bcorp--image img {
  display: block;
  width: 11rem;
  height: auto;
}


.pied h2 {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * Les villes en ligne, séparées par un point médian posé en CSS : chacune
 * reste insécable, et le séparateur ne se retrouve pas dans le texte copié.
 */
.pied__villes {
  display: flex;
  flex-wrap: wrap;
  max-width: 22rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.8;
}

.pied__villes li {
  white-space: nowrap;
}

.pied__villes li:not(:last-child)::after {
  content: "·";
  margin: 0 0.4rem;
  opacity: 0.6;
}

.pied__lien {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.pied nav ul,
.pied address {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.pied a:hover {
  color: #fff;
}

.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
}

.pied__bas p {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* ---------------------------------------------------------- page d'accès */

.acces {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  padding: 4rem 1.5rem;
  background: var(--violet);
}

.acces__panneau {
  width: 100%;
  max-width: 28rem;
  padding: 2.5rem;
  border-radius: var(--rayon-large);
  background: var(--surface);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.acces__logo {
  display: inline-flex;
}

.acces__logo img {
  height: 3rem;
  width: auto;
}

.acces h1 {
  margin-top: 2rem;
  color: var(--titre);
  font-size: 1.5rem;
  font-weight: 700;
}

.acces p {
  margin-top: 0.75rem;
  color: var(--texte-doux);
  line-height: 1.7;
}

.acces code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--surface-douce);
  font-size: 0.875rem;
}

.acces form {
  margin-top: 2rem;
  text-align: left;
}

.acces label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

.acces input {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--surface-douce);
  color: var(--texte);
  font: inherit;
}

.acces input:focus {
  border-color: var(--titre);
  background: var(--surface);
}

.acces .erreur {
  margin-top: 0.75rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--orange);
  border-radius: var(--rayon);
  background: var(--orange-clair);
  color: var(--orange-survol);
  font-size: 0.875rem;
  font-weight: 600;
}

.acces button {
  margin-top: 1.5rem;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* -------------------------------------------------- adaptation aux écrans */

@media (min-width: 40rem) {
  .grille--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .thematique {
    grid-template-columns: auto 1fr;
    column-gap: 2rem;
  }

  .thematique__image {
    grid-column: span 2;
  }

  .mosaique {
    grid-auto-rows: 12rem;
  }

  .acces__panneau {
    padding: 2.5rem 3rem;
  }
}

@media (min-width: 64rem) {
  .barre {
    inset: 1.5rem 0 auto;
    padding: 0 1.5rem;
  }

  .section {
    padding: 7rem 0;
  }

  .hero {
    padding: 13rem 0 9rem;
  }

  .hero--compact {
    padding: 11rem 0 6rem;
  }

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

  .chiffres dl {
    grid-template-columns: repeat(4, 1fr);
  }

  .pied__grille {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .photo-texte {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }

  .photo-texte + .photo-texte {
    margin-top: 5.5rem;
  }

  .photo-texte--inverse .photo-texte__texte {
    order: 2;
  }

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

  .deux-colonnes--large {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }

  .bento {
    grid-template-columns: repeat(3, 1fr);
  }

  .bento__large {
    grid-column: span 2;
  }

  .mosaique {
    grid-template-columns: repeat(3, 1fr);
  }

  .mosaique__case--grande {
    grid-column: span 2;
    grid-row: span 2;
  }

  .thematique {
    grid-template-columns: auto 1fr 16rem;
  }

  .thematique__image {
    grid-column: auto;
  }
}

/* La navigation complète cède la place au menu déroulant. */
@media (max-width: 63.99rem) {
  .nav {
    display: none;
  }

  .burger {
    display: inline-flex;
  }
}