/* ── Habillage du site Assiste-Compta Pro — « Clarté, marine et émeraude » ─────────────────────
   Trois couleurs, réparties 60 / 30 / 10 : un blanc et gris très clair pour les fonds et la
   lecture (60 %), un bleu marine pour les titres, le menu, le logo et les grands aplats (30 %),
   un vert émeraude réservé aux appels à l'action et aux repères (10 %). Deux familles seulement : une
   capitale à empattements (Playfair Display) pour les titres, une linéale (Poppins) pour le texte,
   plus une chasse fixe (IBM Plex Mono) pour les montants et les codes.

   Les polices sont servies par le site lui-même (assets/polices) : aucune requête vers un tiers,
   ce qui respecte la politique de sécurité de contenu et le choix « aucun cookie ». */

/* ── Polices ──────────────────────────────────────────────────────────────────────────────── */
@font-face { font-family: "Playfair Display"; src: url("/assets/polices/playfair-500.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/polices/poppins-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/polices/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/polices/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/polices/poppins-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/polices/plex-mono-400.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

/* ── Jetons ───────────────────────────────────────────────────────────────────────────────── */
:root {
  /* 1. Dominante (60 %) : blanc pur et gris très clair — fonds, cartes, lecture */
  --ivoire: #F4F7FA;        /* fond général, gris très clair */
  --papier: #FFFFFF;        /* cartes et panneaux, blanc pur */
  --filet: #E1E7EE;
  --filet-fort: #C7D1DC;

  /* 2. Secondaire (30 %) : bleu marine — titres, menu, logo, texte, aplats */
  --encre: #0F2A44;
  --encre-douce: #44576B;
  --encre-pale: #5A6B7E;

  /* Aplats marine : accueil, bloc « vos données », offre vedette, pied de page */
  --nuit: #0F2A44;
  --nuit-2: #16354F;
  --nuit-filet: #2A4762;
  --clair: #F4F7FA;
  --clair-doux: #B9C6D4;

  /* 3. Accent (10 %) : vert émeraude — boutons d'action, repères, numéros.
     Le vif sur marine ; la version profonde sur fond clair (contraste AA avec le blanc). */
  --or: #10B981;            /* émeraude vif, sur marine */
  --or-texte: #047857;      /* émeraude profond, sur blanc */
  --or-survol: #065F46;
  --or-vif-survol: #34D399;
  --or-voile: rgba(16, 185, 129, .14);
  --or-teinte: #E3F5EE;

  /* États d'un contrôle comptable */
  --ac-ok: #2F6B3F; --ac-ok-bg: #EEF5EE; --ac-ok-line: #C9DEC9;
  --ac-bad: #A3261B; --ac-bad-bg: #FBF0EE; --ac-bad-line: #EDCBC5;
  --ac-warn: #85520E; --ac-warn-bg: #FBF4E6; --ac-warn-line: #EBD9B4;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ac-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --t: 200ms cubic-bezier(.2, .7, .2, 1);
  --ombre: 0 1px 2px rgba(15, 42, 68, .05), 0 8px 24px rgba(15, 42, 68, .07);
  --ombre-forte: 0 30px 80px rgba(8, 24, 40, .45), 0 4px 14px rgba(8, 24, 40, .3);

  --largeur: 1200px;

  /* Anciens noms, conservés pour toute page qui les citerait encore. */
  --fl-fond: var(--papier); --fl-surface: var(--ivoire); --fl-filet: var(--filet);
  --fl-encre: var(--encre); --fl-encre-douce: var(--encre-douce); --fl-encre-pale: var(--encre-pale);
  --fl-accent: var(--or-texte);

  font-family: var(--sans);
  color: var(--encre);
  background: var(--ivoire);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 96px; scroll-behavior: smooth; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--ivoire);
  color: var(--encre);
  font-size: 15.5px;
  line-height: 1.65;
}

img { max-width: 100%; }
a { color: var(--encre); text-decoration-color: var(--or); text-underline-offset: 3px; }
a:hover { color: var(--or-texte); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--or-voile); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Échelle typographique ────────────────────────────────────────────────────────────────── */
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; }
h1 { margin: 0; font-size: clamp(40px, 4.6vw, 62px); line-height: 1.06; }
h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; }
h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.005em; line-height: 1.35; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  margin: 0 0 12px; color: var(--or-texte);
  font-family: var(--sans); font-size: 14px; font-weight: 200; letter-spacing: 0;
}
.eyebrow .mono { text-transform: none; letter-spacing: .02em; }
.muted { margin: 14px 0 0; max-width: 64ch; color: var(--encre-douce); line-height: 1.7; }
.mono { font-family: var(--ac-mono); overflow-wrap: anywhere; }

/* ── En-tête ──────────────────────────────────────────────────────────────────────────────── */
.win-title {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  min-height: 72px; padding: 10px max(20px, calc((100vw - var(--largeur)) / 2 + 20px));
  border-bottom: 1px solid rgba(15, 42, 68, .08);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}

.win-marque { display: flex; align-items: center; gap: 12px; color: var(--encre); text-decoration: none; }
.win-marque img { width: auto; height: 44px; object-fit: contain; }
.win-marque-nom { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.win-marque-nom b { color: var(--encre); font-weight: 600; font-style: italic; }

.win-menu { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.menu-entree {
  position: relative; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  color: var(--encre-douce); font-size: 14.5px; text-decoration: none;
  transition: color var(--t), background var(--t);
}
.menu-entree:hover { color: var(--encre); background: rgba(15, 42, 68, .06); }
/* Page active : pastille pleine, comme l'onglet actif des modèles de sites à la mode */
.menu-entree.est-actif { color: #FFFFFF; background: var(--encre); font-weight: 500; }
.menu-entree.est-actif:hover { color: #FFFFFF; background: var(--nuit-2); }

.entete-action { flex: 0 0 auto; }
.entete-actions { display: flex; align-items: center; gap: 10px; }

/* Icône « Mon compte » : l'e-mail n'apparaît plus qu'au survol (titre) ou dans ce panneau, jamais
   écrit en clair dans l'en-tête. */
.compte-menu { position: relative; }
.compte-icone {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 1px solid var(--filet-fort); border-radius: 999px;
  background: var(--papier); color: var(--encre-douce); cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.compte-icone:hover, .compte-icone[aria-expanded="true"] { background: rgba(15, 42, 68, .06); color: var(--encre); border-color: var(--filet-fort); }
.compte-panneau {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 220px; padding: 14px 16px;
  border: 1px solid var(--filet); border-radius: var(--r-md);
  background: var(--papier); box-shadow: var(--ombre-forte);
}
.compte-panneau-email {
  margin: 0 0 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--encre); font-size: 13.5px; font-weight: 500;
}
.compte-panneau .text-button { padding: 8px 6px; width: 100%; text-align: left; border-radius: var(--r-sm); }
.compte-panneau form { margin: 0; width: 100%; }

.menu-bascule {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px; margin-left: auto;
  border: 1px solid var(--filet-fort); border-radius: 999px; background: transparent; cursor: pointer;
}
.menu-bascule span { display: block; height: 1.5px; background: var(--encre); border-radius: 1px; }
.menu-mobile { display: none; flex-direction: column; padding: 8px 16px 18px; border-bottom: 1px solid var(--filet); background: var(--ivoire); }
.menu-mobile .menu-entree { padding: 13px 12px; font-size: 16px; border-radius: var(--r-sm); }

/* ── Boutons ──────────────────────────────────────────────────────────────────────────────── */
.win-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; min-width: 88px; padding: 10px 22px;
  border: 1px solid var(--filet-fort); border-radius: 999px;
  background: transparent; color: var(--encre);
  font: inherit; font-size: 14.5px; font-weight: 500; text-decoration: none; line-height: 1.2;
  cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.win-button:hover:not(:disabled) { border-color: var(--encre); color: var(--encre); }
.win-button:active:not(:disabled) { transform: translateY(1px); }
.win-button:disabled, .win-button.est-indisponible { cursor: default; opacity: .5; }
.win-button-default { border-color: var(--or-texte); background: var(--or-texte); color: #FFFFFF; }
.win-button-default:hover:not(:disabled) { background: var(--or-survol); border-color: var(--or-survol); color: #FFFFFF; }
.win-button-grand { min-height: 52px; padding: 13px 30px; font-size: 15.5px; }
.win-button svg { flex: 0 0 auto; }

.text-button {
  padding: 6px 10px; border: 0; border-radius: 999px; background: transparent;
  color: var(--encre-douce); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.text-button:hover { background: rgba(15, 42, 68, .06); color: var(--encre); }

/* ── Champs de saisie ─────────────────────────────────────────────────────────────────────── */
.win-field { display: flex; flex-direction: column; gap: 7px; }
.win-field-label { color: var(--encre); font-size: 13.5px; font-weight: 500; }
.win-input {
  width: 100%; height: 48px; padding: 10px 14px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-sm);
  outline: none; background: var(--papier); color: var(--encre); font: inherit; font-size: 15px;
  transition: border-color var(--t), box-shadow var(--t);
}
.win-input::placeholder { color: #8A99AA; }
.win-input:focus { border-color: var(--or-texte); box-shadow: 0 0 0 3px var(--or-voile); }
textarea.win-input { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }

/* ── Panneaux ─────────────────────────────────────────────────────────────────────────────── */
.win-group {
  padding: 40px 44px;
  border: 1px solid var(--filet); border-radius: var(--r-lg);
  background: var(--papier); box-shadow: var(--ombre);
}
.win-group > h2:first-child, .win-group > .eyebrow:first-child { margin-top: 0; }
.win-group-hint { margin: 10px 0 0; color: var(--encre-douce); font-size: 14px; line-height: 1.6; }

/* ── Mise en page ─────────────────────────────────────────────────────────────────────────── */
.page { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.section { padding: 96px 0; }
.section + .section { padding-top: 0; }
.section-etroit { max-width: 860px; }
.page-heading { padding: 72px 0 12px; }
.pile { display: flex; flex-direction: column; gap: 18px; }
.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.bandeau-essai {
  margin: 0; padding: 9px 20px;
  border-bottom: 1px solid var(--ac-warn-line); background: var(--ac-warn-bg);
  color: var(--ac-warn); font-size: 13px; font-weight: 500; text-align: center;
}

/* ── La scène : bande noire de l'accueil ──────────────────────────────────────────────────── */
/* Le haut de l'accueil reprend le décor du film : fond d'encre, texte ivoire, détails or. Tout ce
   qui s'y pose change de jeu de couleurs ici, et nulle part ailleurs. */
.scene {
  position: relative; overflow: hidden;
  background: var(--nuit); color: var(--clair);
}
.scene .page { position: relative; z-index: 1; }
.scene a:not(.win-button) { color: var(--clair); text-decoration-color: var(--or); }
.scene .eyebrow { color: var(--or); }
.scene .win-button, .bloc-nuit .win-button { border-color: rgba(242, 238, 230, .35); color: var(--clair); }
.scene .win-button:hover:not(:disabled), .bloc-nuit .win-button:hover:not(:disabled) { border-color: var(--clair); color: var(--clair); background: rgba(242, 238, 230, .06); }
.scene .win-button-default, .bloc-nuit .win-button-default { border-color: var(--or); background: var(--or); color: var(--nuit); font-weight: 600; }
.scene .win-button-default:hover:not(:disabled), .bloc-nuit .win-button-default:hover:not(:disabled) { background: var(--or-vif-survol); border-color: var(--or-vif-survol); color: var(--nuit); }

/* ── Accueil : l'ouverture ────────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding: 96px 0 72px; }
.hero h1 { margin-bottom: 26px; }
.hero h1 em {
  color: var(--clair); font-style: normal;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C40 5 82 3.6 130 4.4c52 .9 103 3 166 1.2' fill='none' stroke='%2310B981' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M18 12c60-3.2 140-4.4 250-2.6' fill='none' stroke='%2310B981' stroke-width='1.6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .22em;
  padding-bottom: .12em;
}
.hero-lead { max-width: 50ch; color: var(--clair-doux); font-size: 17.5px; font-weight: 300; line-height: 1.7; }
.hero-actions { margin-top: 34px; }
.hero-preuves { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--nuit-filet); }
.hero-preuve { display: flex; align-items: center; gap: 9px; color: var(--clair-doux); font-size: 13.5px; }
.hero-preuve svg { flex: 0 0 auto; color: var(--or); }

/* La vitrine : la vidéo de présentation, posée dans la colonne droite de l'ouverture. */
.vitrine { margin: 0; min-width: 0; }
.vitrine-ecran {
  position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 16 / 9;
  border: 1px solid var(--nuit-filet); border-radius: var(--r-md);
  background: #000; box-shadow: var(--ombre-forte);
  overflow: hidden; color: var(--clair); font: inherit;
}
.vitrine-ecran video, .vitrine-ecran iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.vitrine-son {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  border: 1px solid rgba(242, 238, 230, .28); border-radius: 10px;
  background: rgba(8, 24, 40, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--clair); font: inherit; font-size: 13.5px; cursor: pointer; transition: background var(--t), border-color var(--t);
}
.vitrine-son:hover { background: rgba(8, 24, 40, .85); border-color: rgba(242, 238, 230, .6); }
.vitrine-son .son-onde { display: none; }
.vitrine-son[aria-pressed="true"] .son-onde { display: inline; }
.vitrine-son[aria-pressed="true"] .son-coupe { display: none; }
.vitrine-legende {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px; color: var(--clair-doux); font-size: 13.5px;
}
.vitrine-legende b { color: var(--clair); font-weight: 500; }
.vitrine-legende .mono { flex: 0 0 auto; color: var(--clair-doux); font-size: 12.5px; white-space: nowrap; overflow-wrap: normal; }
.vitrine-vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; aspect-ratio: 16 / 9; border: 1px dashed var(--nuit-filet); border-radius: var(--r-md);
  color: var(--clair-doux); font-size: 14px;
}
.vitrine-vide .mono { color: var(--or); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

/* La capture du tableau de bord : une fenêtre posée sur l'ivoire. */
.capture { margin: 40px 0 0; min-width: 0; }
.capture img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--filet); border-radius: var(--r-md);
  background: var(--papier); box-shadow: 0 2px 4px rgba(15, 42, 68, .04), 0 24px 60px rgba(15, 42, 68, .12);
}

/* ── Bandeau de confiance ─────────────────────────────────────────────────────────────────── */
.bandeau-confiance {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border: 1px solid var(--filet); border-radius: var(--r-md);
  background: var(--filet); overflow: hidden;
}
.bandeau-confiance div { padding: 22px 24px; background: var(--papier); }
.bandeau-confiance b { display: block; color: var(--encre); font-family: var(--serif); font-size: 26px; font-weight: 500; }
.bandeau-confiance span { color: var(--encre-douce); font-size: 13px; }

/* ── Fonctionnalités ──────────────────────────────────────────────────────────────────────── */
.fonctions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.fonction {
  position: relative; overflow: hidden;
  padding: 30px 30px 32px; border: 1px solid var(--filet); border-radius: var(--r-lg);
  background: var(--papier); transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
/* Filet d'accent en haut de chaque carte, qui fait écho aux bandeaux colorés des modèles de sites */
.fonction::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--or-texte), var(--or));
}
.fonction:hover { border-color: var(--filet-fort); box-shadow: var(--ombre); transform: translateY(-3px); }
.fonction-icone {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 22px;
  border: 0; border-radius: 999px;
  background: var(--or-teinte); color: var(--or-texte);
}
.fonction h3 { margin-bottom: 8px; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.fonction p { color: var(--encre-douce); font-size: 14.5px; line-height: 1.65; }

/* ── Défilé des modules ───────────────────────────────────────────────────────────────────── */
/* Sans script, la piste reste une grille. Le script double les fiches et pose « est-defilant » :
   la rangée glisse alors en continu, de droite à gauche, et s'arrête sous la souris. */
.carrousel { position: relative; }
.carrousel.est-defilant {
  margin-top: 40px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.carrousel.est-defilant .carrousel-piste {
  display: flex; gap: 20px; width: max-content; margin: 0; padding: 4px 0;
  animation: defiler var(--duree-defile, 54s) linear infinite;
}
.carrousel.est-defilant .fonction { flex: 0 0 340px; }
.carrousel.est-arrete .carrousel-piste { animation-play-state: paused; }
@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 10px)); } }

/* ── Étapes numérotées ────────────────────────────────────────────────────────────────────── */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin-top: 44px; counter-reset: etape; border-top: 1px solid var(--filet-fort); }
.etapes-trois { grid-template-columns: repeat(3, 1fr); }
.etape { position: relative; padding: 30px 32px 8px 0; border: 0; background: transparent; }
.etape + .etape { padding-left: 32px; border-left: 1px solid var(--filet); }
.etape::before {
  counter-increment: etape; content: counter(etape);
  display: block; margin-bottom: 10px;
  color: var(--or-texte); font-family: var(--serif); font-size: 44px; line-height: 1;
}
.etape h3 { margin-bottom: 8px; font-family: var(--serif); font-size: 24px; font-weight: 500; }
.etape p { color: var(--encre-douce); font-size: 14.5px; }

/* ── Bloc « vos données » : un aplat d'encre ──────────────────────────────────────────────── */
.win-group.bloc-nuit { border-color: var(--nuit); background: var(--nuit); color: var(--clair); box-shadow: none; }
.bloc-nuit .eyebrow { color: var(--or); }
.bloc-nuit .muted { color: var(--clair-doux); }
.bloc-nuit .liste-verte li { color: var(--clair); }
.bloc-nuit .liste-verte svg { color: var(--or); }
.bloc-nuit .liste-verte { grid-template-columns: repeat(3, max-content); gap: 10px 36px; margin-top: 28px; }
/* Notre philosophie (accueil) : le texte s'étale sur toute la largeur du bloc, sans coupure au milieu du nom. */
.section-donnees .bloc-nuit .muted { max-width: none; font-size: 18px; line-height: 1.6; }
.pas-de-coupure { white-space: nowrap; }

/* ── Bloc « vos données » + encart publicitaire ───────────────────────────────────────────── */
.section-donnees { display: flex; align-items: stretch; gap: 32px; }
.section-donnees > .win-group { flex: 1 1 auto; min-width: 0; }
.section-donnees > .publicite { flex: 0 0 300px; margin: 0; }

/* ── Tarif et achat ───────────────────────────────────────────────────────────────────────── */
.achat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: start; }
.liste-verte { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.liste-verte li { display: flex; align-items: flex-start; gap: 11px; color: var(--encre-douce); font-size: 15px; }
.liste-verte svg { flex: 0 0 auto; margin-top: 4px; color: var(--or-texte); }

.formulaire { display: grid; gap: 18px; }
.formulaire .win-button { width: 100%; margin-top: 4px; }
.formulaire-pied { margin: 0; color: var(--encre-pale); font-size: 12.5px; line-height: 1.55; }

.win-field-checkbox { flex-direction: row; align-items: flex-start; gap: 10px; }
.win-field-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--encre); cursor: pointer; }
.win-field-checkbox span { font-size: 14px; color: var(--encre-douce); line-height: 1.5; }
.win-field-checkbox a { color: var(--or-texte); }

.message { margin: 0; padding: 11px 14px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; }
.message:empty { display: none; }
.message-erreur { border: 1px solid var(--ac-bad-line); background: var(--ac-bad-bg); color: var(--ac-bad); }
.message-succes { border: 1px solid var(--ac-ok-line); background: var(--ac-ok-bg); color: var(--ac-ok); }
.message-attente { border: 1px solid var(--ac-warn-line); background: var(--ac-warn-bg); color: var(--ac-warn); }

/* ── À propos : la carte d'invitation ──────────────────────────────────────────────────────── */
.invitation-section { display: flex; justify-content: center; }
.invitation {
  position: relative; width: min(680px, 100%); padding: 64px 64px 56px; text-align: center;
  background: var(--papier); border: 1px solid var(--filet-fort); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(15, 42, 68, .04), 0 30px 60px -30px rgba(15, 42, 68, .25);
}
.invitation::before { content: ''; position: absolute; inset: 12px; border: 1px solid var(--filet); pointer-events: none; }
.invitation-logo { width: 54px; height: auto; margin: 0 auto 22px; display: block; }
.invitation-avant { margin: 0 0 14px; color: var(--encre-pale); font-size: 14.5px; font-style: italic; font-family: var(--serif); }
.invitation h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.15; }
.invitation-filet { width: 56px; height: 1px; margin: 28px auto; background: var(--or); }
.invitation p { max-width: 52ch; margin-left: auto; margin-right: auto; color: var(--encre-douce); line-height: 1.75; }
.invitation-signature { margin-top: 26px !important; color: var(--encre) !important; font-family: var(--serif); font-size: 22px; }
.invitation-pied { margin-top: 18px !important; font-size: 13px; color: var(--encre-pale) !important; }
.invitation-actions { justify-content: center; margin-top: 30px; }

/* ── Aide : la zone de contact ──────────────────────────────────────────────────────────────── */
.contact-carte { max-width: 640px; }
.contact-carte textarea.win-input { min-height: 180px; line-height: 1.6; }

.badge-premium {
  display: inline-block; margin-left: 6px; padding: 1px 9px; vertical-align: 3px;
  border: 0; border-radius: 6px; background: var(--or-teinte); color: var(--or-texte);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0;
}

/* ── Téléchargement ───────────────────────────────────────────────────────────────────────── */
.plateformes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
.plateforme { display: flex; flex-direction: column; padding: 34px; border: 1px solid var(--filet); border-radius: var(--r-md); background: var(--papier); }
.plateforme.est-conseillee { border-color: var(--or); box-shadow: 0 0 0 3px var(--or-voile), var(--ombre); }
.plateforme-logo { width: 38px; height: 68px; margin-bottom: 16px; color: var(--encre); }
.plateforme h2 { margin-bottom: 6px; font-size: 30px; }
.plateforme-detail { margin: 0 0 22px; color: var(--encre-pale); font-family: var(--ac-mono); font-size: 12.5px; }
.plateforme .win-button { margin-top: auto; }
.plateforme-note { margin: 14px 0 0; color: var(--encre-douce); font-size: 13.5px; }
.etiquette-conseillee {
  display: inline-block; align-self: flex-start; margin-bottom: 12px; padding: 3px 11px;
  border: 1px solid var(--or); border-radius: 999px; background: var(--or-voile);
  color: var(--or-texte); font-family: var(--ac-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.plateforme-indisponible { color: var(--encre-pale); font-size: 13.5px; }

/* ── Vidéos ───────────────────────────────────────────────────────────────────────────────── */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; }
.video { display: flex; flex-direction: column; border: 1px solid var(--filet); border-radius: var(--r-md); background: var(--papier); overflow: hidden; transition: box-shadow var(--t), transform var(--t); }
.video:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.video-vignette {
  position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 16 / 9;
  border: 0; border-bottom: 1px solid var(--filet); background: var(--nuit);
  cursor: pointer; overflow: hidden;
}
.video-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-lecture {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; width: 58px; height: 58px;
  border: 1px solid rgba(242, 238, 230, .6); border-radius: 50%;
  background: rgba(8, 24, 40, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background var(--t), transform var(--t), border-color var(--t);
}
.video-lecture::after { content: ''; margin-left: 4px; border-style: solid; border-color: transparent transparent transparent var(--clair); border-width: 8px 0 8px 13px; }
.video-vignette:hover .video-lecture { background: var(--or); border-color: var(--or); transform: translate(-50%, -50%) scale(1.06); }
.video-vignette:hover .video-lecture::after { border-left-color: var(--nuit); }
.video-duree {
  position: absolute; right: 12px; bottom: 12px; padding: 2px 9px; border-radius: 999px;
  background: rgba(8, 24, 40, .78); color: var(--clair); font-family: var(--ac-mono); font-size: 11.5px;
}
.video-vignette-vide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--nuit-2); color: var(--clair-doux); font-family: var(--ac-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.video-texte { padding: 20px 22px 24px; }
.video-categorie { margin: 0 0 6px; color: var(--or-texte); font-family: var(--ac-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.video-texte h3 { margin-bottom: 6px; }
.video-texte p { color: var(--encre-douce); font-size: 14px; }
.video-meta { margin-top: 10px; color: var(--encre-pale); font-size: 12.5px; }
.plus-videos { display: flex; justify-content: center; }

/* Le lecteur : une fenêtre sombre, comme une salle de projection. */
.lecteur { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(8, 24, 40, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lecteur[hidden] { display: none; }
.lecteur-fenetre { width: min(1120px, 100%); border: 1px solid var(--nuit-filet); border-radius: var(--r-md); background: var(--nuit); box-shadow: var(--ombre-forte); overflow: hidden; }
.lecteur-titre {
  display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 20px;
  border-bottom: 1px solid var(--nuit-filet); background: var(--nuit-2);
  color: var(--clair-doux); font-size: 14px;
}
.lecteur-titre span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecteur-fermer { min-width: 44px; min-height: 40px; padding: 0 12px; border-color: var(--nuit-filet); color: var(--clair); }
.lecteur-fermer:hover:not(:disabled) { border-color: var(--clair); color: var(--clair); }
.lecteur-cadre { aspect-ratio: 16 / 9; background: #000; }
.lecteur-cadre iframe, .lecteur-cadre video { width: 100%; height: 100%; border: 0; display: block; }

/* ── Questions fréquentes ─────────────────────────────────────────────────────────────────── */
.faq { margin-top: 28px; border-top: 1px solid var(--filet-fort); }
.faq-item { border-bottom: 1px solid var(--filet); }
.faq-item summary {
  display: flex; align-items: center; gap: 14px; padding: 22px 4px;
  font-size: 16.5px; font-weight: 500; cursor: pointer; list-style: none;
  transition: color var(--t);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--or-texte); }
.faq-item summary::before {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 1.5px solid var(--or-texte); border-bottom: 1.5px solid var(--or-texte);
  transform: rotate(-45deg); transition: transform var(--t);
}
.faq-item[open] summary::before { transform: rotate(45deg); }
.faq-reponse { padding: 0 4px 22px 26px; color: var(--encre-douce); font-size: 15px; max-width: 76ch; }

/* ── Textes longs : pages légales et aide ─────────────────────────────────────────────────── */
.prose { max-width: 74ch; }
.prose h2 { margin: 40px 0 12px; font-size: 26px; }
.prose h3 { margin: 26px 0 8px; }
.prose p, .prose li { color: var(--encre-douce); font-size: 15.5px; line-height: 1.75; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--encre-pale); }
.prose strong { color: var(--encre); font-weight: 600; }
.prose table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { padding: 11px 13px; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.prose th { border-bottom: 1px solid var(--filet-fort); font-family: var(--ac-mono); font-size: 11.5px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-pale); }
.prose td { color: var(--encre-douce); }
.maj { margin-top: 30px; color: var(--encre-pale); font-size: 13px; }

/* ── Encadrés ─────────────────────────────────────────────────────────────────────────────── */
.encart { padding: 20px 24px; border: 1px solid var(--filet); border-radius: var(--r-md); background: var(--ivoire); }
.encart-attention { border-color: var(--ac-warn-line); background: var(--ac-warn-bg); }
.encart-attention p { color: var(--ac-warn); }
.encart h3 { margin-bottom: 6px; }
.encart p { color: var(--encre-douce); font-size: 14.5px; }

/* ── Le code d'activation remis au client ─────────────────────────────────────────────────── */
.code-licence {
  display: block; margin: 0; padding: 18px 20px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-sm);
  background: var(--ivoire); color: var(--encre);
  font-family: var(--ac-mono); font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-all; user-select: all;
}
.code-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ── Publicité ────────────────────────────────────────────────────────────────────────────── */
.publicite { margin: 36px 0; padding: 14px; border: 1px solid var(--filet); border-radius: var(--r-md); background: var(--papier); }
.publicite-mention { margin: 0 0 8px; color: var(--encre-pale); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.publicite ins { display: block; min-height: 90px; }

/* ── Consentement ─────────────────────────────────────────────────────────────────────────── */
.consentement {
  position: fixed; inset: auto 20px 20px auto; z-index: 70; width: min(460px, calc(100vw - 40px));
  padding: 24px 26px; border: 1px solid var(--filet); border-radius: var(--r-md);
  background: var(--papier); box-shadow: 0 20px 50px rgba(15, 42, 68, .2);
}
.consentement[hidden] { display: none; }
.consentement h2 { margin-bottom: 8px; font-size: 22px; }
.consentement p { color: var(--encre-douce); font-size: 13.5px; line-height: 1.55; }
.consentement-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

/* ── Pied de page : retour au noir ────────────────────────────────────────────────────────── */
.pied { margin-top: 96px; background: var(--nuit); color: var(--clair); }
.pied-grille { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; max-width: var(--largeur); margin: 0 auto; padding: 72px 20px 48px; }
.pied-bloc { display: flex; flex-direction: column; gap: 10px; }
.pied .win-marque { color: var(--clair); }
.pied .win-marque-nom b { color: var(--or); }
.pied-bloc h2 { margin-bottom: 6px; color: var(--clair); font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.pied-bloc a:not(.win-marque) { color: var(--clair-doux); font-size: 14.5px; text-decoration: none; width: fit-content; transition: color var(--t); }
.pied-bloc a:not(.win-marque):hover { color: var(--clair); }
.pied-resume { max-width: 40ch; margin-top: 8px; color: var(--clair-doux); font-size: 14px; line-height: 1.65; }
.reseaux { display: flex; gap: 10px; margin-top: 10px; }
.reseau {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--nuit-filet); border-radius: 50%;
  background: transparent; color: var(--clair-doux); transition: border-color var(--t), color var(--t);
}
.reseau:hover { border-color: var(--or); color: var(--or); }
.pied-bas { max-width: var(--largeur); margin: 0 auto; padding: 22px 20px 40px; border-top: 1px solid var(--nuit-filet); color: #93A4B6; font-size: 12.5px; }

/* ── Écrans étroits ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .entete-action { display: none; }
  .win-title { gap: 16px; }
}

@media (max-width: 1020px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 64px 0 56px; }
  .fonctions, .etapes-trois, .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandeau-confiance { grid-template-columns: repeat(2, 1fr); }
  .achat { grid-template-columns: 1fr; gap: 40px; }
  .section-donnees { flex-direction: column; }
  .section-donnees > .publicite { flex-basis: auto; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .win-menu, .entete-action { display: none; }
  .menu-bascule { display: flex; }
  .menu-mobile:not([hidden]) { display: flex; }
  .win-title { gap: 12px; min-height: 64px; padding: 8px 16px; }
  .win-marque img { height: 38px; }
  .win-marque-nom { font-size: 19px; }
  .page { padding: 0 16px; }
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 44px; }
  .hero-lead { font-size: 16.5px; }
  .hero-actions .win-button { width: 100%; }
  .win-group { padding: 28px 22px; border-radius: var(--r-md); }
  .fonctions, .etapes, .etapes-trois, .videos, .plateformes, .bandeau-confiance { grid-template-columns: minmax(0, 1fr); }
  .etape, .etape + .etape { padding: 24px 0 8px; border-left: 0; }
  .etape + .etape { border-top: 1px solid var(--filet); }
  .bloc-nuit .liste-verte { grid-template-columns: 1fr; }
  .carrousel.est-defilant .fonction { flex-basis: 280px; }
  .prose table { display: block; overflow-x: auto; }
  .pied-grille { grid-template-columns: 1fr; padding-top: 56px; }
  .consentement { inset: auto 12px 12px 12px; width: auto; }
  .invitation { padding: 48px 26px 40px; }
  .vitrine-son { left: 10px; bottom: 10px; min-height: 36px; padding: 6px 11px; font-size: 12.5px; }
  .lecteur { padding: 12px; }
  .vitrine-ecran .video-lecture { width: 68px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.carrousel-piste) { transition: none !important; animation: none !important; }
  /* Le défilé des modules reste, plus lent : il s'arrête toujours sous la souris ou au doigt. */
  .carrousel.est-defilant .carrousel-piste { animation-duration: calc(var(--duree-defile, 54s) * 1.6); }
}
/* La vidéo de l'accueil ne passe jamais en plein écran : elle reste dans son cadre. */
.vitrine-video::-webkit-media-controls-fullscreen-button { display: none !important; }
.vitrine-video { pointer-events: none; }
.pied-bloc a.reseau { width: 44px; }
.sans-coupure { white-space: nowrap; }

/* ══ Mise en valeur : titres, boutons et mouvement ══════════════════════════════════════════════
   Cette couche se pose par-dessus le reste sans changer la structure des pages. Elle hiérarchise
   les titres, donne du relief aux boutons et fait entrer les blocs en douceur au défilement
   (le script ajoute « est-anime » sur <html> ; sans script, tout reste visible). */

/* Titres : coupures équilibrées, petits titres en capitales espacées précédés d'un trait. */
h1, h2, h3 { text-wrap: balance; }
h1, h2 { color: inherit; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.eyebrow::before { content: ''; flex: 0 0 auto; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow + h1, .eyebrow + h2 { margin-top: 2px; }

/* En-tête : une ombre légère apparaît dès que l'on fait défiler. */
.win-title { transition: box-shadow var(--t), background var(--t), min-height var(--t); }
.win-title.est-defile { box-shadow: 0 6px 24px -12px rgba(15, 42, 68, .25); background: rgba(255, 255, 255, .95); }
.menu-entree.est-actif::after { height: 2px; border-radius: 2px; }

/* Boutons : relief, flèche sur les appels à l'action, léger soulèvement au survol. */
.win-button { border-radius: 12px; letter-spacing: .005em; }
.win-button:hover:not(:disabled) { transform: translateY(-1px); }
.win-button:not(.win-button-default):hover:not(:disabled) { background: rgba(15, 42, 68, .04); }
.win-button-default {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 18px -8px rgba(4, 120, 87, .6);
  font-weight: 600;
}
.win-button-default:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 14px 26px -10px rgba(4, 120, 87, .7);
}
.win-button-grand.win-button-default::after {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-left: 2px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--t);
}
.win-button-grand.win-button-default:hover:not(:disabled)::after { transform: translateX(3px) rotate(45deg); }
.scene .win-button-default, .bloc-nuit .win-button-default, .tarif-vedette .win-button-default {
  box-shadow: 0 10px 28px -10px rgba(16, 185, 129, .65);
}
.scene .win-button:not(.win-button-default):hover:not(:disabled),
.bloc-nuit .win-button:not(.win-button-default):hover:not(:disabled) { background: rgba(244, 247, 250, .07); }

/* ── Accueil : un décor de grille comptable, très discret, et une entrée en scène ── */
.scene::before, .bloc-nuit::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(244, 247, 250, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 247, 250, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 65% 75% at 78% 45%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 75% at 78% 45%, #000 15%, transparent 72%);
}
.scene::after {
  content: ''; position: absolute; right: -10%; top: 10%; width: 60%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(16, 185, 129, .16), transparent);
}
.hero { padding: 104px 0 88px; }
.scene .eyebrow {
  padding: 7px 14px 7px 12px; border: 1px solid rgba(16, 185, 129, .35); border-radius: 999px;
  background: rgba(16, 185, 129, .08); font-size: 12px;
}
.scene .eyebrow::before { width: 7px; height: 7px; border-radius: 50%; animation: pulsation 2.4s ease-in-out infinite; }
@keyframes pulsation { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); } 60% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } }
.hero h1 { margin-top: 8px; }
.hero h1 em { animation: souligner 1s cubic-bezier(.2, .7, .2, 1) .5s both; }
@keyframes souligner { from { background-size: 0 .22em; } to { background-size: 100% .22em; } }
.hero-actions { gap: 14px; }
.hero-preuves { gap: 10px; border-top: 0; padding-top: 0; margin-top: 30px; }
.hero-preuve {
  padding: 7px 14px 7px 11px; border: 1px solid var(--nuit-filet); border-radius: 999px;
  background: rgba(244, 247, 250, .03);
}
.vitrine-ecran { transition: transform 600ms cubic-bezier(.2, .7, .2, 1), box-shadow 600ms; }
.vitrine:hover .vitrine-ecran { transform: translateY(-4px); }

/* Entrée de l'ouverture, en cascade. */
.hero > div > * { animation: monter 700ms cubic-bezier(.2, .7, .2, 1) both; }
.hero > div > :nth-child(2) { animation-delay: 80ms; }
.hero > div > :nth-child(3) { animation-delay: 160ms; }
.hero > div > :nth-child(4) { animation-delay: 240ms; }
.hero > div > :nth-child(5) { animation-delay: 320ms; }
.hero > aside { animation: monter 900ms cubic-bezier(.2, .7, .2, 1) 200ms both; }
@keyframes monter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Têtes de section de l'accueil : centrées, pour poser chaque chapitre ── */
:is(#fonctions, #tarifs) > :is(.eyebrow, h2, .muted) { display: block; margin-left: auto; margin-right: auto; text-align: center; }
:is(#fonctions, #tarifs) > .eyebrow { width: fit-content; display: flex; }
:is(#fonctions, #tarifs) > h2 { max-width: 30ch; }
:is(#fonctions, #tarifs) > .muted { max-width: 62ch; }
:is(#fonctions, #tarifs) > .eyebrow::after { content: ''; flex: 0 0 auto; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }

.capture { margin-top: 48px; }
.capture img { transition: transform 700ms cubic-bezier(.2, .7, .2, 1), box-shadow 700ms; }
.capture:hover img { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 42, 68, .04), 0 34px 70px rgba(15, 42, 68, .16); }

/* ── Fiches des modules : soulèvement et pastille qui s'allume ── */
.carrousel.est-defilant .carrousel-piste { padding: 10px 0 14px; }
.fonction { position: relative; }
.fonction:hover { transform: translateY(-4px); border-color: rgba(4, 120, 87, .35); box-shadow: 0 18px 40px -22px rgba(15, 42, 68, .35); }
.fonction-icone { transition: background var(--t), color var(--t), transform var(--t); }
.fonction:hover .fonction-icone { background: var(--or-texte); color: #FFFFFF; transform: scale(1.06); }
.fonction h3 { color: var(--encre); }

/* ── Blocs marine : décor, pastilles, et dernier appel centré ── */
.win-group.bloc-nuit { position: relative; overflow: hidden; }
.bloc-nuit > * { position: relative; }
.bloc-nuit .liste-verte li {
  align-items: center; padding: 8px 16px 8px 12px; border: 1px solid var(--nuit-filet); border-radius: 999px;
  background: rgba(244, 247, 250, .04); font-size: 14px;
}
.bloc-nuit .liste-verte svg { margin-top: 0; }
.bloc-nuit .liste-verte { grid-template-columns: repeat(3, max-content); gap: 10px; }
.bloc-nuit:has(> .rangee) { padding: 64px 44px; text-align: center; }
.bloc-nuit:has(> .rangee)::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 50%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 90% at 50% 50%, #000 10%, transparent 75%);
}
.bloc-nuit:has(> .rangee) .eyebrow { justify-content: center; }
.bloc-nuit:has(> .rangee) h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.bloc-nuit:has(> .rangee) .muted { margin-left: auto; margin-right: auto; }
.bloc-nuit > .rangee { justify-content: center; gap: 14px; margin-top: 30px !important; }

#tarifs > .encart { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; text-align: center; border-style: dashed; background: transparent; }
#tarifs > .encart h3 { margin: 0; }
/* Les tarifs de l'accueil ne se découvrent pas en défilant : ils s'ouvrent au clic sur « Voir les tarifs ». */
#tarifs.tarifs-replies { display: none; }

/* ── Pied de page ── */
.pied-bloc a:not(.win-marque):not(.reseau) { position: relative; }
.pied-bloc a:not(.win-marque):not(.reseau)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.pied-bloc a:not(.win-marque):not(.reseau):hover::after { transform: scaleX(1); }
.pied-bloc h2 { color: var(--or); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }

/* ── Apparition au défilement ── */
.est-anime .a-reveler { opacity: 0; transform: translateY(22px); transition: opacity 700ms cubic-bezier(.2, .7, .2, 1), transform 700ms cubic-bezier(.2, .7, .2, 1); transition-delay: var(--retard, 0ms); }
.est-anime .a-reveler.est-visible { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .hero { padding: 48px 0 44px; }
  .bloc-nuit .liste-verte { grid-template-columns: 1fr; justify-items: start; }
  .bloc-nuit:has(> .rangee) { padding: 44px 22px; }
  .bloc-nuit > .rangee .win-button { width: 100%; }
  :is(#fonctions, #tarifs) > h2 { max-width: none; }
  .scene .eyebrow { font-size: 11px; letter-spacing: .05em; }
}
@media (prefers-reduced-motion: reduce) {
  .est-anime .a-reveler { opacity: 1; transform: none; }
}

/* ── Refonte : image de présentation, essai gratuit, message À propos et carte du monde ─────── */
.vitrine-image { margin: 0; }
.vitrine-image img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--nuit-filet); box-shadow: var(--ombre-forte); }
.message-apropos { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.message-texte h1 { margin-bottom: 22px; }
.message-texte p { max-width: 58ch; color: var(--encre-douce); line-height: 1.75; }
.message-texte .rangee { margin-top: 28px; }
.message-image { margin: 0; }
.message-image img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; border-radius: var(--r-lg); box-shadow: var(--ombre-forte); }
.carte-section { padding-top: 24px; }
.carte-monde { position: relative; max-width: 900px; margin: 0 auto; }
.carte-monde img { display: block; width: 100%; height: auto; }
.repere { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--or); transform: translate(-50%, -50%); animation: repere-pouls 2.6s ease-out infinite; }
@keyframes repere-pouls { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .repere { animation: none; } }
.mention-italique { max-width: 110ch; margin: 36px auto 0; color: var(--encre-pale); font-size: 12.5px; font-style: italic; line-height: 1.7; text-align: center; }
@media (max-width: 960px) { .message-apropos { grid-template-columns: 1fr; gap: 36px; } .message-image img { max-width: 300px; margin: 0; } }

/* ── Connexion et création de compte : une fenêtre devant un fond flouté ─────────────────── */
body.fenetre-compte { margin: 0; min-height: 100vh; background: var(--nuit); }
body.fenetre-compte::before { content: ''; position: fixed; inset: -24px; z-index: 0; background: url('/assets/presentation-tableau-de-bord.png') center / cover no-repeat; filter: blur(10px) saturate(.85); }
body.fenetre-compte::after { content: ''; position: fixed; inset: 0; z-index: 0; background: rgba(8, 24, 40, .55); }
body.fenetre-compte .win-title, body.fenetre-compte .pied, body.fenetre-compte .menu-mobile { display: none; }
body.fenetre-compte main { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; box-sizing: border-box; padding: 48px 16px; }
body.fenetre-compte .fenetre-compte-boite { position: relative; box-sizing: border-box; width: min(440px, 100%); padding: 40px 36px 32px; border-radius: var(--r-lg); background: var(--papier); box-shadow: var(--ombre-forte); }
body.fenetre-compte .fenetre-compte-boite h1 { margin-bottom: 10px; font-size: 30px; }
body.fenetre-compte .fenetre-compte-boite .muted { margin: 0 0 24px; font-size: 14.5px; }
body.fenetre-compte .fenetre-compte-boite .win-group { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.fenetre-compte .fenetre-compte-boite .formulaire-pied { text-align: center; }
body.fenetre-compte .fenetre-fermer { position: absolute; top: 12px; right: 14px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; color: var(--encre-douce); font-size: 24px; line-height: 1; text-decoration: none; }
body.fenetre-compte .fenetre-fermer:hover { background: rgba(15, 42, 68, .06); color: var(--encre); }
@media (max-width: 480px) { body.fenetre-compte .fenetre-compte-boite { padding: 34px 22px 26px; } }

/* ── Accueil : icône arrondie, carte du monde, tarifs empilés, aide sur un seul écran ───────── */
.message-image img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 22px 26px rgba(15, 42, 68, .28)); }

.fonctions-entete { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.fonctions-entete .capture { margin: 0; }
.fonctions-titre { padding-top: 64px; }
.fonctions-titre h2 { font-size: clamp(26px, 2.5vw, 34px); }
.fonctions-titre .muted { max-width: none; margin-top: 16px; }
@media (max-width: 960px) { .fonctions-entete { grid-template-columns: minmax(0, 1fr); gap: 28px; } .fonctions-titre { padding-top: 0; } }


.bienvenue { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--ivoire); transition: opacity 600ms ease, visibility 600ms ease; }
.bienvenue img { width: 96px; height: 96px; opacity: 0; transform: scale(.9); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1); }
.bienvenue p { margin: 0; font-family: var(--serif); font-size: 26px; color: var(--encre); opacity: 0; transform: translateY(8px); transition: opacity 600ms ease 200ms, transform 600ms ease 200ms; }
.bienvenue.est-ouvert img, .bienvenue.est-ouvert p { opacity: 1; transform: none; }
.bienvenue.est-ferme { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bienvenue, .bienvenue * { transition: none !important; } }

body.page-aide { display: flex; flex-direction: column; min-height: 100vh; }
body.page-aide main { flex: 1 0 auto; display: flex; align-items: center; }
body.page-aide main > .page { width: 100%; }
body.page-aide main .section { padding: 0; }
body.page-aide .page-heading { padding: 28px 0 14px; }
body.page-aide .page-heading h1 { font-size: clamp(24px, 3vw, 32px); }
body.page-aide .page-heading .muted { margin-top: 8px; font-size: 14px; }
body.page-aide .contact-carte { padding: 26px 32px; }
body.page-aide .publicite { display: none; }
body.page-aide .pied { padding-top: 18px; padding-bottom: 18px; }
body.page-aide .pied-grille { display: none; }

/* Réglages de mise en page : page Aide sur un seul écran */
body.page-aide .formulaire { gap: 14px; }
body.page-aide .page-heading { padding: 22px 0 10px; }
body.page-aide .contact-carte { padding: 22px 28px; }
body.page-aide .pied { padding-top: 12px; padding-bottom: 12px; }
body.page-aide textarea.win-input { min-height: 96px; }


/* ══ Habillage « monochrome » ═══════════════════════════════════════════════════════════════════
   Inspiré des pages d'application épurées : fond gris bleuté #D3D9DD, cartes blanches cerclées
   d'un filet noir et largement arrondies, aplats noirs, une seule linéale (Helvetica) en graisse
   normale, grands titres en capitales serrées, boutons en pilule. Aucune couleur vive : le noir,
   le blanc et un gris ardoise (#495C67) suffisent. Cette couche se pose en dernier et ne touche
   pas à la structure des pages. Ancienne feuille complète : styles.avant-style-application.css. */
:root {
  --ivoire: #D3D9DD; --papier: #FFFFFF; --filet: #010101; --filet-fort: #010101;
  --encre: #010101; --encre-douce: #2F3A40; --encre-pale: #3B474E;
  --nuit: #010101; --nuit-2: #14191C; --nuit-filet: #3A4449; --clair: #FFFFFF; --clair-doux: #C3CBD0;
  --ardoise: #495C67;
  --or: #FFFFFF; --or-texte: #010101; --or-survol: #2F3A40; --or-vif-survol: #D3D9DD;
  --or-voile: rgba(1, 1, 1, .08); --or-teinte: #EEF1F3;
  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r-sm: 14px; --r-md: 20px; --r-lg: 28px;
  --t: 200ms ease;
  --ombre: 0 0 0 transparent;
  --ombre-forte: 0 24px 60px -24px rgba(1, 1, 1, .45);
}
body { font-size: 15px; line-height: 1.6; }
a { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid #010101; outline-offset: 3px; }
::selection { background: #010101; color: #FFFFFF; }

/* Titres : linéale en graisse normale, grands titres en capitales serrées. */
h1, h2, h3 { font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: clamp(40px, 6vw, 84px); line-height: 1; text-transform: uppercase; }
h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; text-transform: uppercase; }
h3 { font-size: 18px; }
.fonction h3, .etape h3, .tarif h3, .plateforme h2 { font-family: var(--sans); font-weight: 400; font-size: 20px; text-transform: none; }
.prose h2, .consentement h2, body.fenetre-compte .fenetre-compte-boite h1, .invitation h1 { text-transform: none; }
.hero h1 em { background: none; padding: 0; animation: none; font-style: normal; color: var(--clair-doux); }
.eyebrow, .scene .eyebrow { padding: 0; border: 0; background: none; color: inherit; font-size: 12.5px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow::before, :is(#fonctions, #tarifs) > .eyebrow::after { display: none; }

/* En-tête : une pilule blanche qui flotte au-dessus de la page. */
.win-title, .win-title.est-defile {
  top: 12px; margin: 12px max(12px, calc((100vw - var(--largeur)) / 2)) 0;
  min-height: 60px; padding: 8px 10px 8px 26px;
  border: 1px solid #010101; border-radius: 999px; background: #FFFFFF;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.win-marque-nom { font-family: var(--sans); font-weight: 400; letter-spacing: -.02em; }
.win-marque-nom b { font-style: normal; font-weight: 600; }
.menu-entree { padding: 6px 12px; border-radius: 999px; color: #010101; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; }
.menu-entree:hover { background: var(--or-teinte); color: #010101; }
.menu-entree.est-actif, .menu-entree.est-actif:hover { background: transparent; color: #010101; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.compte-icone, .menu-bascule { border-color: #010101; }
.menu-mobile { margin: 8px 12px 0; border: 1px solid #010101; border-radius: var(--r-lg); background: #FFFFFF; }

/* Boutons : pilules. Plein noir pour l'action, contour pour le reste ; inversés sur fond noir. */
.win-button, .scene .win-button, .bloc-nuit .win-button {
  min-height: 44px; padding: 10px 22px; border: 1px solid #010101; border-radius: 999px;
  background: transparent; color: #010101; box-shadow: none;
  font-size: 13.5px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; transform: none;
}
.win-button-default, .tarif .win-button-default { border-color: #010101; background: #010101; color: #FFFFFF; box-shadow: none; font-weight: 400; }
.scene .win-button, .bloc-nuit .win-button, .tarif-vedette .win-button { border-color: rgba(255, 255, 255, .6); color: #FFFFFF; }
.scene .win-button-default, .bloc-nuit .win-button-default, .tarif-vedette .win-button-default { border-color: #FFFFFF; background: #FFFFFF; color: #010101; box-shadow: none; font-weight: 400; }
.win-button:hover:not(:disabled), .win-button:not(.win-button-default):hover:not(:disabled) { background: #010101; border-color: #010101; color: #FFFFFF; transform: none; box-shadow: none; }
.win-button-default:hover:not(:disabled) { background: var(--ardoise); border-color: var(--ardoise); color: #FFFFFF; transform: none; box-shadow: none; }
.scene .win-button:hover:not(:disabled), .bloc-nuit .win-button:hover:not(:disabled), .tarif-vedette .win-button:hover:not(:disabled),
.scene .win-button:not(.win-button-default):hover:not(:disabled), .bloc-nuit .win-button:not(.win-button-default):hover:not(:disabled) { background: #FFFFFF; border-color: #FFFFFF; color: #010101; }
.scene .win-button-default:hover:not(:disabled), .bloc-nuit .win-button-default:hover:not(:disabled), .tarif-vedette .win-button-default:hover:not(:disabled) { background: var(--ivoire); border-color: var(--ivoire); color: #010101; }
.win-button-grand { min-height: 50px; padding: 12px 28px; font-size: 14px; }
.text-button { border-radius: 999px; }
.text-button:hover { background: var(--or-teinte); }

/* Champs : blancs, filet noir, coins arrondis. */
.win-input { height: 46px; padding: 10px 16px; border-color: #010101; border-radius: var(--r-sm); }
.win-input:focus { border-color: #010101; box-shadow: 0 0 0 3px rgba(1, 1, 1, .12); }

/* Cartes : blanc, filet noir d'un pixel, grand rayon, aucune ombre. */
.win-group, .fonction, .tarif, .plateforme, .video, .encart, .publicite, .compte-panneau, .consentement,
.invitation, .bandeau-confiance { border: 1px solid #010101; box-shadow: none; }
.win-group, .fonction, .tarif { border-radius: var(--r-lg); }
.compte-panneau, .consentement, body.fenetre-compte .fenetre-compte-boite { box-shadow: var(--ombre-forte); }
.capture img, .vitrine-ecran, .vitrine-image img { border: 1px solid #010101; border-radius: var(--r-lg); box-shadow: none; }
.fonction::before, .scene::before, .bloc-nuit::before, .tarif-vedette::before, .invitation::before { display: none; }
.fonction-icone { background: #010101; color: #FFFFFF; }
.fonction:hover { transform: none; border-color: #010101; box-shadow: none; }
.fonction:hover .fonction-icone { background: var(--ardoise); transform: none; }
.etape::before { color: #010101; font-family: var(--sans); font-weight: 400; }
.bandeau-confiance b { font-family: var(--sans); font-weight: 400; }
.plateforme.est-conseillee { border: 2px solid #010101; box-shadow: none; }
.tarif-etiquette, .etiquette-conseillee, .badge-premium { border: 1px solid #010101; border-radius: 999px; background: #FFFFFF; color: #010101; box-shadow: none; font-family: var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.tarif-vedette .tarif-etiquette { border-color: #FFFFFF; }

/* Aplats noirs : l'accueil, le bloc « vos données », l'offre vedette, le pied de page.
   L'accueil reçoit une lueur ardoise, rappel des fonds abstraits des pages d'application. */
.scene { background: radial-gradient(70% 90% at 75% 40%, #495C67 0%, #1C2428 45%, #010101 80%); }
.scene::after { display: none; }
.hero-preuve, .bloc-nuit .liste-verte li { padding: 6px 14px; border: 1px solid var(--nuit-filet); border-radius: 999px; background: none; }
.pied { margin: 96px 12px 12px; border-radius: var(--r-lg); }
.pied-bloc h2 { color: var(--clair-doux); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.pied-bloc a:not(.win-marque):not(.reseau)::after { background: #FFFFFF; }
.repere { background: #010101; }

/* Sobriété : ni soulèvement ni cartes inclinées. */
.tarif:not(.tarif-vedette):hover, .video:hover, .vitrine:hover .vitrine-ecran, .capture:hover img { transform: none; box-shadow: none; }
@media (max-width: 720px) {
  .win-title, .win-title.est-defile { margin: 8px 8px 0; padding: 6px 8px 6px 18px; min-height: 54px; }
  .pied { margin: 64px 8px 8px; }
}

/* ══ Retouches de l'accueil, des tarifs et de la publicité ══════════════════════════════════════ */

/* L'ouverture remonte jusqu'en haut : la barre flotte par-dessus, sans bande grise au-dessus. */
body:has(.scene) .win-title { margin-bottom: -72px; }
.scene { padding-top: 72px; }
.hero { padding: 64px 0 72px; align-items: center; }
/* Titre de l'accueil ramené à une taille mesurée. */
.hero h1 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; margin-bottom: 20px; }
.hero-lead { font-size: 16.5px; }
/* Les trois assurances, l'une sous l'autre. */
.hero-preuves { flex-direction: column; align-items: flex-start; gap: 10px; }

/* La publicité de l'accueil : une bande horizontale dans la carte noire. */
.section-donnees { display: block; }
.bloc-nuit .publicite { position: relative; margin: 32px 0 0; padding: 14px 18px; border: 1px solid var(--nuit-filet); border-radius: var(--r-md); background: #FFFFFF; color: #010101; }
.bloc-nuit .publicite ins { min-height: 90px; max-height: 120px; overflow: hidden; }
.publicite-fermer { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 1px solid #010101; border-radius: 999px; background: #FFFFFF; color: #010101; font-size: 16px; line-height: 1; cursor: pointer; }
.publicite-mention { color: #3B474E; }

/* La publicité flottante : au milieu de l'écran, par-dessus la page, après 45 s d'inactivité. */
.publicite-voile { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(1, 1, 1, .45); }
.publicite-flottante { position: relative; width: min(640px, 100%); margin: 0; padding: 18px 20px 20px; border: 1px solid #010101; border-radius: var(--r-lg); background: #FFFFFF; box-shadow: var(--ombre-forte); }
.publicite-flottante ins { min-height: 250px; }

@media (max-width: 720px) {
  body:has(.scene) .win-title { margin-bottom: -62px; }
  .scene { padding-top: 62px; }
  .hero { padding: 40px 0 48px; }
}

/* La démonstration en vidéo, à la place de la capture du tableau de bord. */
.capture-video video { display: block; width: 100%; height: auto; aspect-ratio: 14 / 9; border: 1px solid #010101; border-radius: var(--r-lg); background: #C0C0C0; object-fit: cover; }

/* ══ À propos, Mon compte, tarifs et tutoriels ══════════════════════════════════════════════════ */

/* À propos : une fenêtre blanche sur toute la largeur. Le logo en haut, le texte étalé sous lui, puis la philosophie. */
.fenetre-apropos { overflow: hidden; border: 1px solid var(--filet-fort); border-radius: var(--r-lg); color: var(--encre); background: #FFFFFF; }
.fenetre-apropos .message-apropos { display: flex; flex-direction: column; align-items: stretch; }
.fenetre-apropos .message-image { display: flex; align-items: center; justify-content: flex-start; gap: 22px; margin: 0; padding: 48px 64px 0; }
.fenetre-apropos .message-image img { width: 96px; height: 96px; max-width: none; margin: 0; border-radius: 24px; box-shadow: var(--ombre); filter: none; }
.fenetre-apropos .message-legende { margin: 0; color: var(--encre-douce); font-size: 14px; line-height: 1.5; }
.fenetre-apropos .message-texte { display: flex; flex-direction: column; align-items: stretch; padding: 40px 64px 60px; }
.fenetre-apropos .eyebrow { display: flex; align-items: center; gap: 22px; width: 100%; max-width: none; margin: 0 0 26px; white-space: nowrap; color: var(--encre-pale); }
.fenetre-apropos .eyebrow::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--filet-fort); }
.fenetre-apropos h1 { margin-bottom: 30px; max-width: none; color: var(--encre); font-size: clamp(34px, 3.9vw, 56px); font-weight: 500; line-height: 1.06; text-transform: none; letter-spacing: -.02em; }
.fenetre-apropos .apropos-corps { columns: 2; column-gap: 56px; }
.fenetre-apropos .apropos-corps p { break-inside: avoid; margin: 0 0 18px; max-width: none; color: var(--encre-douce); font-size: 16px; line-height: 1.75; text-align: left; }
.fenetre-apropos .message-texte .rangee { margin-top: 12px; }
.fenetre-apropos .message-texte .win-button-default { border-color: var(--encre); background: var(--encre); color: #FFFFFF; }
.fenetre-apropos .message-texte .win-button-default:hover:not(:disabled) { border-color: var(--or-texte); background: var(--or-texte); color: #FFFFFF; }
.fenetre-pied { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #010101; }
.fenetre-pied div { display: flex; flex-direction: column; gap: 4px; padding: 20px 32px; }
.fenetre-pied div + div { border-left: 1px solid #010101; }
.fenetre-pied span { color: var(--encre-pale); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.fenetre-pied b { font-size: 16px; font-weight: 500; }
@media (max-width: 960px) {
  .fenetre-apropos .message-image { gap: 16px; padding: 32px 24px 0; }
  .fenetre-apropos .message-image img { width: 72px; height: 72px; border-radius: 18px; }
  .fenetre-apropos .message-texte { padding: 32px 24px 44px; }
  .fenetre-apropos .apropos-corps { columns: 1; }
  .fenetre-apropos .eyebrow { white-space: normal; }
  .fenetre-pied { grid-template-columns: minmax(0, 1fr); }
  .fenetre-pied div + div { border-left: 0; border-top: 1px solid #010101; }
}

/* Mon compte : le changement de mot de passe est replié, et s'ouvre sur demande. */
.compte-depliant { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.compte-depliant:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 4px; border-radius: var(--r-sm); }
.compte-depliant svg { flex: 0 0 auto; transition: transform var(--t); }
.compte-depliant[aria-expanded="true"] svg { transform: rotate(180deg); }
.compte-mdp { display: grid; gap: 18px; margin-top: 18px; }
.compte-mdp > .muted { margin: 0; }
.compte-mdp .rangee { margin: 0; }

/* Afficher ou masquer un mot de passe : le bouton se loge dans le champ, à droite. */
.champ-mot-de-passe { position: relative; display: block; }
.champ-mot-de-passe .win-input { width: 100%; padding-right: 92px; }
.voir-mot-de-passe { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--encre-douce); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.voir-mot-de-passe:hover { background: rgba(15, 42, 68, .06); color: var(--encre); }
.voir-mot-de-passe:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 2px; }

/* Mon compte : un en-tête mesuré. */
.compte-carte { padding: 36px 40px; }
.compte-entete { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.compte-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 999px; background: #010101; color: #FFFFFF; }
.compte-entete .eyebrow { margin-bottom: 4px; }
.compte-entete h1 { font-size: clamp(24px, 2.6vw, 32px); text-transform: none; }
.compte-email { margin: 4px 0 0; color: var(--encre-douce); font-size: 14.5px; }
.compte-titre { margin: 36px 0 16px; padding-top: 28px; border-top: 1px solid #010101; font-size: 13px; letter-spacing: .06em; }
.compte-deconnexion { margin-top: 28px; }

/* ══ Tarifs : trois cartes séparées, sans filet entre elles. La carte annuelle est noire, avec son étiquette. ══ */
.tarifs, .tarifs-essai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: 48px; counter-reset: tarif; }
.tarif { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0 28px 28px; overflow: hidden; border: 1px solid #010101; border-radius: var(--r-lg); background: #FFFFFF; color: var(--encre); box-shadow: none; }
.tarif:not(.tarif-vedette):hover { background: #F4F6F7; }
.tarif-vedette { background: #010101; border-color: #010101; color: #FFFFFF; }
.tarif h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -28px; padding: 22px 28px; border-bottom: 1px solid #010101; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .05em; line-height: 1.3; text-transform: uppercase; color: inherit; }
.tarif h3::after { counter-increment: tarif; content: "0" counter(tarif); flex: 0 0 auto; color: var(--encre-pale); font-size: 12px; font-weight: 400; letter-spacing: .04em; }
.tarif-vedette h3 { padding-right: 176px; border-bottom-color: var(--nuit-filet); }
.tarif-vedette h3::after { content: none; }
.tarif-etiquette { position: absolute; top: 19px; right: 22px; left: auto; transform: none; margin: 0; padding: 4px 10px; font-size: 10.5px; letter-spacing: .04em; white-space: nowrap; box-shadow: none; }
.tarif-accroche { margin: 18px 0 0; color: var(--encre-douce); font-size: 14.5px; line-height: 1.5; }
.tarif .tarif-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 34px 0 0; }
.tarif .tarif-prix b { font-family: var(--sans); font-size: clamp(40px, 3.6vw, 54px); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: inherit; }
.tarif .tarif-prix span { color: var(--encre-pale); font-size: 14.5px; font-weight: 500; }
.tarif-mention { margin: 10px 0 0; color: var(--encre-pale); font-size: 13.5px; line-height: 1.55; }
.tarif-sous-titre { margin: 30px 0 0; color: var(--encre); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tarif-sous-titre ~ .tarif-sous-titre { margin-top: 30px; padding-top: 30px; border-top: 1px solid #010101; }
.tarif .liste-verte { margin: 16px 0 0; gap: 12px; }
.tarif .liste-verte li { color: var(--encre-douce); font-size: 14.5px; line-height: 1.45; }
.tarif .liste-verte svg { margin-top: 3px; color: var(--encre); }
.tarif .liste-verte:last-of-type { margin-bottom: 26px; }
.tarif-contact { margin: 0 0 26px; color: var(--encre-pale); font-size: 13px; line-height: 1.6; }
.tarif-contact a { color: inherit; }
.tarif .win-button { width: 100%; margin-top: auto; }
.tarif-vedette .tarif-accroche, .tarif-vedette .tarif-mention, .tarif-vedette .tarif-prix span, .tarif-vedette .tarif-contact { color: var(--clair-doux); }
.tarif-vedette .tarif-sous-titre { color: var(--clair); }
.tarif-vedette .tarif-sous-titre ~ .tarif-sous-titre { border-top-color: var(--nuit-filet); }
.tarif-vedette .liste-verte li, .tarif-vedette .liste-verte svg { color: var(--clair); }
.tarif-vedette .tarif-contact a { color: var(--clair); }
/* Entre 1021 et 1180 px, les trois cartes sont étroites : le libellé du bouton tient sur une ligne. */
@media (min-width: 1021px) and (max-width: 1180px) {
  .tarif .win-button-grand { padding-inline: 16px; font-size: 12.5px; letter-spacing: 0; }
}
@media (max-width: 1020px) {
  .tarifs, .tarifs-essai { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* Tutoriels : une grille de vignettes façon YouTube, sur toute la largeur de la page. */
.tutoriels-catalogue { padding: 32px 0 8px; }
.grille-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 40px 20px; }
.carte-video { display: flex; flex-direction: column; min-width: 0; }
.carte-vignette { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #1C2428; cursor: pointer; text-align: left; }
.carte-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
button.carte-vignette:hover img, button.carte-vignette:focus-visible img { transform: scale(1.04); }
.carte-vignette-vide { display: block; width: 100%; height: 100%; background: radial-gradient(90% 90% at 70% 30%, #495C67 0%, #1C2428 55%, #010101 100%); }
.carte-lecture { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 999px; background: rgba(1, 1, 1, .72); opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.carte-lecture::after { content: ''; position: absolute; left: 22px; top: 18px; border-style: solid; border-color: transparent transparent transparent #FFFFFF; border-width: 10px 0 10px 16px; }
button.carte-vignette:hover .carte-lecture, button.carte-vignette:focus-visible .carte-lecture { opacity: 1; }
.carte-duree { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 6px; background: rgba(1, 1, 1, .85); color: #FFFFFF; font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1.4; }
.carte-vignette-attente { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed #8A969D; background: #EEF1F3; color: var(--encre-pale); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.carte-attente-numero { font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--encre); text-transform: none; }
.carte-infos { padding-top: 12px; }
.carte-texte { min-width: 0; }
.carte-titre { margin: 0; color: var(--encre); font-family: var(--sans); font-size: 15.5px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte-attente .carte-titre { color: var(--encre-pale); font-weight: 400; }
.carte-meta { margin: 6px 0 0; color: var(--encre-pale); font-size: 13px; line-height: 1.4; }
.carte-resume { margin: 6px 0 0; color: var(--encre-pale); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) { .grille-videos { gap: 28px 16px; } }
.tutoriels-entete h1 { max-width: 20ch; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; }
.tutoriels-entete .muted { max-width: 62ch; }
.tutoriels-catalogue .plus-videos { padding: 28px 0 0; }

/* ══ Pages légales : écrites à même la page, sans carte ════════════════════════════════════════ */
.page-juridique { padding-top: 40px; padding-bottom: 24px; }
.juridique-entete, .page-juridique > .page-heading { padding: 64px 0 28px; border-bottom: 1px solid #010101; }
.juridique-entete h1, .page-juridique .page-heading h1 { max-width: none; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; text-transform: none; letter-spacing: -.015em; }
.juridique-date { margin: 14px 0 0; color: var(--encre-pale); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.page-juridique .page-heading .muted { max-width: 90ch; }

/* Conditions : le texte sur 70 % de la largeur, le résumé « En bref » à l'extrême droite. */
.article-juridique { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 0 64px; align-items: start; padding: 40px 0; border-bottom: 1px solid #C3CBD0; }
.article-juridique:last-of-type { border-bottom: 0; }
.article-texte h2 { margin: 0 0 18px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; text-transform: none; letter-spacing: -.01em; }
.article-texte h3 { margin: 22px 0 8px; font-size: 16px; font-weight: 600; }
.article-texte p, .article-texte li { color: var(--encre-douce); font-size: 15.5px; line-height: 1.78; }
.article-texte ul { margin: 0 0 14px; padding-left: 22px; }
.article-texte li { margin-bottom: 6px; }
.article-texte strong { color: #010101; font-weight: 600; }
.article-resume { position: sticky; top: 104px; padding-left: 22px; border-left: 2px solid #010101; }
.article-resume-titre { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.article-resume p:not(.article-resume-titre) { margin: 0; color: #2F3A40; font-size: 14.5px; line-height: 1.65; }
.article-preambule .article-texte p { font-size: 16.5px; }
@media (max-width: 900px) {
  .article-juridique { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 32px 0; }
  .article-resume { position: static; }
}

/* Mentions, confidentialité, cookies, remboursement : toute la largeur, ligne par ligne. */
.page-juridique-large .section { padding-top: 0; }
.prose-juridique { max-width: none; }
.prose-juridique h2 { margin: 0; padding: 40px 0 14px; border-top: 1px solid #C3CBD0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; text-transform: none; letter-spacing: -.01em; }
.prose-juridique h2:first-child { border-top: 0; }
.prose-juridique p, .prose-juridique li { max-width: none; font-size: 15.5px; line-height: 1.78; }
.prose-juridique table { font-size: 14.5px; }
.page-juridique .encart { margin: 28px 0 8px; padding: 22px 0; border: 0; border-top: 1px solid #010101; border-bottom: 1px solid #010101; border-radius: 0; background: transparent; }
.page-juridique .publicite { margin-top: 32px; }

/* Tutoriels : titre sur une seule ligne. */
.tutoriels-entete h1 { max-width: none; white-space: nowrap; font-size: clamp(22px, 3.1vw, 44px); }
@media (max-width: 720px) { .tutoriels-entete h1 { white-space: normal; } }
/* Retouches : résumé posé en tête de chaque article, pas de double filet, pas de vide sous l'en-tête. */
.article-resume { position: static; }
.page-juridique .section { padding: 16px 0 24px; }
.page-juridique .encart { border-top: 0; margin-top: 8px; }


/* ══ Mode d'emploi : une bande sur toute la largeur, en deux lignes ═════════════════════════════ */
.mode-emploi { padding-top: 24px; }
.mode-emploi-bande { border-top: 1px solid #010101; border-bottom: 1px solid #010101; }
.mode-emploi-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; margin: 0; padding: 22px 0; }
.mode-emploi-ligne + .mode-emploi-ligne { border-top: 1px solid #C3CBD0; }
.mode-emploi-ligne .eyebrow { margin: 0; }
.mode-emploi-ligne b { font-size: clamp(20px, 2vw, 26px); font-weight: 400; letter-spacing: -.01em; }
.mode-emploi-ligne > span:not(.eyebrow) { color: var(--encre-douce); font-size: 15.5px; }
.mode-emploi-ligne .win-button { flex: 0 0 auto; }
@media (max-width: 720px) { .mode-emploi-ligne { flex-direction: column; align-items: flex-start; } }

/* ══ Aide : « Ce qu'il faut nous indiquer », sur une ligne, replié par défaut ═══════════════════ */
.depliant { border-top: 1px solid #010101; border-bottom: 1px solid #010101; }
.depliant summary { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding: 22px 4px; cursor: pointer; list-style: none; }
.depliant summary::-webkit-details-marker { display: none; }
.depliant summary::after { content: ''; margin-left: auto; width: 10px; height: 10px; border-right: 1.5px solid #010101; border-bottom: 1.5px solid #010101; transform: rotate(45deg); transition: transform var(--t); }
.depliant[open] summary::after { transform: rotate(-135deg); }
.depliant-titre { font-size: clamp(18px, 1.8vw, 22px); }
.depliant-sous { color: var(--encre-pale); font-size: 14.5px; }
.depliant-contenu { padding: 0 4px 12px; }
.indiquer-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 8px 40px; padding: 16px 0; border-top: 1px solid #C3CBD0; }
.indiquer-entete { color: var(--encre-pale); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.indiquer-demande { font-weight: 500; }
.indiquer-joindre { color: var(--encre-douce); line-height: 1.7; }
@media (max-width: 720px) { .indiquer-ligne { grid-template-columns: minmax(0, 1fr); } .indiquer-entete { display: none; } }
.mode-emploi-ligne:first-child { justify-content: flex-start; }

/* Titre de la page de téléchargement : présent pour les moteurs de recherche, discret à l'écran. */
.page-heading h1.titre-telechargement { font-size: clamp(24px, 4vw, 40px); line-height: 1.1; overflow-wrap: anywhere; }


/* Refonte légère de l’accueil et de la page À propos — conserve les vidéos, la palette et les parcours existants. */
.hero-lead { max-width: 54ch; margin: -5px 0 0; color: #D1DDE5; font-size: 16px; line-height: 1.75; }
.hero h1 { max-width: 15ch; }
.vitrine-ecran { border-color: rgba(255,255,255,.18); box-shadow: 0 24px 64px rgba(0,0,0,.32); }
#fonctions .capture-video video { border-color: var(--filet); box-shadow: 0 18px 48px rgba(15,42,68,.13); }
#fonctions .fonctions-titre h2 { max-width: 17ch; line-height: 1.16; }
.fenetre-apropos .apropos-corps { columns: 1; max-width: 76ch; }
.fenetre-apropos .message-texte { padding-bottom: 48px; }
.fenetre-apropos .apropos-corps p { font-size: 15.5px; }
.engagements-section { padding-top: 12px; }
.engagements-entete { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.engagements-entete .eyebrow { justify-content: center; }
.engagements-entete h2 { max-width: 25ch; margin: 0 auto; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.16; }
.engagements-grille { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 28px 0 46px; }
.engagements-grille article { padding: 25px 24px; border: 1px solid var(--filet); border-radius: var(--r-md); background: var(--papier); box-shadow: var(--ombre); }
.engagements-grille article > span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 17px; border-radius: 10px; background: var(--or-teinte); color: var(--or-texte); font: 600 12px var(--ac-mono); }
.engagements-grille h3 { margin: 0 0 8px; font-size: 17px; }
.engagements-grille p { margin: 0; color: var(--encre-douce); font-size: 13.5px; line-height: 1.65; }
@media (max-width: 720px) {
  .hero-lead { font-size: 15px; }
  .engagements-grille { grid-template-columns: 1fr; gap: 11px; }
  .engagements-grille article { padding: 20px; }
  .engagements-section { padding-top: 0; }
}


/* Arbre vivant : rameaux en arcs, bifurcations et titres qui se révèlent avec le défilement. */
.section-arbre { padding-top: 30px; }
.parcours-entete { max-width: 760px; margin: 0 auto 54px; text-align: center; }
.parcours-entete .eyebrow { justify-content: center; }
.parcours-entete h2 { max-width: 22ch; margin: 0 auto 14px; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.12; }
.parcours-entete .muted { max-width: 58ch; margin: 0 auto; color: var(--encre-douce); }
.parcours-arbre { position: relative; display: grid; gap: 42px; padding: 6px 0; }
.arbre-tronc { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(0 0 var(--tronc-coupe, 0%) 0); }
.arbre-branche { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) clamp(132px,16vw,200px) minmax(0,1fr); align-items: center; min-height: 240px; }
.arbre-texte { position: relative; z-index: 1; grid-column: 1; grid-row: 1; padding: 18px 30px; opacity: var(--branche-progression, 1); transform: translateY(var(--branche-decalage, 0px)); }
.arbre-numero { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 13px; border: 1px solid var(--filet-fort); border-radius: 50%; background: var(--papier); color: var(--or-texte); font: 600 12px var(--ac-mono); }
.arbre-texte h3 { overflow: hidden; clip-path: inset(0 var(--titre-coupe, 0%) 0 0); margin: 0 0 9px; color: var(--encre); font-size: clamp(21px,2.6vw,29px); line-height: 1.2; white-space: nowrap; }
.arbre-texte p { max-width: 38ch; margin: 0; color: var(--encre-douce); font-size: 15px; line-height: 1.7; opacity: var(--description-progression, 1); }
.arbre-liaison { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arbre-liaison path { fill: #78916f; stroke: #5e7c65; stroke-width: 1.2; stroke-linejoin: round; transition: none; }
.arbre-liaison .branche-secondaire { fill: #93a57d; stroke: #748a70; stroke-width: .8; }
.arbre-liaison.branche-vers-droite .branche-desktop { clip-path: inset(0 var(--branche-coupe, 100%) 0 0); }
.arbre-liaison.branche-vers-gauche .branche-desktop { clip-path: inset(0 0 0 var(--branche-coupe, 100%)); }
.arbre-liaison .branche-mobile { display: none; clip-path: inset(0 var(--branche-coupe, 100%) 0 0); }
.arbre-ecran { position: relative; z-index: 1; grid-column: 3; grid-row: 1; overflow: hidden; margin: 0; border: 1px solid var(--filet); border-radius: var(--r-md); background: var(--papier); box-shadow: 0 16px 42px rgba(15,42,68,.12); opacity: 1; transform: none; }
.arbre-scroll .arbre-ecran { visibility: hidden; opacity: 0; transform: translateY(18px); transition: none; }
.arbre-scroll .arbre-branche.est-developpee .arbre-ecran { visibility: visible; opacity: var(--branche-progression); transform: translateY(var(--branche-decalage)); }
.arbre-branche.branche-droite .arbre-texte { grid-column: 3; text-align: left; }
.arbre-branche.branche-droite .arbre-ecran { grid-column: 1; }
.arbre-chrome { display: flex; align-items: center; gap: 5px; height: 31px; padding: 0 11px; border-bottom: 1px solid var(--filet); background: #f7f9f8; }
.arbre-chrome i { width: 7px; height: 7px; border-radius: 50%; background: #c8d3ce; }
.arbre-chrome span { margin: 0 auto; color: var(--encre-pale); font-size: 10px; }
.arbre-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #e8ecea; }
.arbre-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.arbre-lecture { position: absolute; right: 13px; bottom: 13px; display: grid; place-items: center; width: 43px; height: 43px; padding: 0; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(15,42,68,.82); color: #fff; cursor: pointer; transition: opacity var(--t), background var(--t); }
.arbre-lecture:hover { background: var(--or-texte); }
.arbre-media.est-en-lecture .arbre-lecture { opacity: .35; }
.arbre-media.est-en-lecture .arbre-lecture:hover, .arbre-media.est-en-lecture .arbre-lecture:focus-visible { opacity: 1; }
.arbre-ecran figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 15px; }
.arbre-ecran figcaption strong { color: var(--encre); font-size: 12px; }
.arbre-ecran figcaption span { color: var(--encre-pale); font-size: 10px; }
@media (max-width: 760px) {
  .section-arbre { padding-top: 12px; }
  .parcours-entete { margin-bottom: 30px; text-align: left; }
  .parcours-entete .eyebrow { justify-content: flex-start; }
  .parcours-entete h2 { margin-left: 0; }
  .parcours-arbre { display: grid; gap: 28px; }
  .arbre-tronc { left: -2px; width: 36px; }
  .arbre-branche, .arbre-branche.branche-droite { grid-template-columns: 32px minmax(0,1fr); gap: 0 12px; min-height: auto; }
  .arbre-branche .arbre-texte, .arbre-branche.branche-droite .arbre-texte { grid-column: 2; grid-row: 1; padding: 8px 0 13px; text-align: left; }
  .arbre-branche .arbre-ecran, .arbre-branche.branche-droite .arbre-ecran { grid-column: 2; grid-row: 2; }
  .arbre-liaison .branche-desktop { display: none; }
  .arbre-liaison .branche-mobile { display: block; }
  .arbre-texte h3 { font-size: 21px; }
  .arbre-texte p { font-size: 13.5px; }
  .arbre-ecran figcaption span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arbre-tronc { clip-path: none; }
  .arbre-liaison path, .arbre-texte h3 { clip-path: none !important; }
  .arbre-scroll .arbre-ecran { visibility: visible; opacity: 1; transform: none; transition: none; }
}


/* ══ Habillage « Minimalisme moderne » (3 nov. 2026) ═══════════════════════════════════════════
   Clair, net, sophistiqué. Un papier chaud au lieu du gris bleuté, des filets d'un gris doux au lieu
   du trait noir, une seule linéale (Inter), et une italique à empattements pour l'unique mot qui
   compte dans le titre. Une seule couleur d'accent, un vert sauge profond qui rappelle la fougère du
   logo, utilisée avec parcimonie : repères, numéros, focus. L'accueil s'ouvre en clair ; le noir
   est gardé pour le dernier appel et la carte annuelle. Les cartes de tarifs gardent leur contour
   noir (choix du propriétaire). Cette couche se pose en dernier et ne touche pas à la structure.
   Feuille précédente : sauvegardes-style/styles.avant-minimalisme-nov3.css */
@font-face { font-family: "Inter"; src: url("/assets/polices/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ivoire: #F6F5F2; --papier: #FFFFFF; --filet: #E6E4DF; --filet-fort: #D5D2CB;
  --encre: #111214; --encre-douce: #4A4D53; --encre-pale: #74777D;
  --nuit: #0E0F11; --nuit-2: #18191C; --nuit-filet: #2B2D31; --clair: #FFFFFF; --clair-doux: #A6A9AF;
  --accent: #2F5D50; --accent-voile: rgba(47, 93, 80, .10);
  --or: #FFFFFF; --or-texte: #111214; --or-teinte: #EFEEEA; --or-voile: rgba(17, 18, 20, .06);
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --italique: "Playfair Display", Georgia, "Times New Roman", serif;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --t: 220ms cubic-bezier(.2, .7, .2, 1);
  --ombre-douce: 0 1px 2px rgba(17, 18, 20, .04), 0 12px 32px -12px rgba(17, 18, 20, .14);
  --ombre-ecran: 0 0 0 1px rgba(17, 18, 20, .06), 0 2px 4px rgba(17, 18, 20, .04), 0 40px 80px -32px rgba(17, 18, 20, .32);
  --ombre-forte: 0 30px 70px -28px rgba(17, 18, 20, .38);
  font-feature-settings: "cv11", "ss01", "ss03";
}
body { background: var(--ivoire); color: var(--encre); font-size: 15.5px; line-height: 1.65; letter-spacing: -.006em; }
::selection { background: var(--encre); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { text-decoration-color: var(--filet-fort); text-decoration-thickness: 1px; }
a:hover { color: var(--encre); text-decoration-color: currentColor; }

/* Titres : casse normale, graisse moyenne, approche serrée. */
h1, h2 { font-family: var(--sans); font-weight: 600; text-transform: none; color: var(--encre); }
h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.045em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -.035em; }
h3 { font-weight: 600; letter-spacing: -.015em; }
.muted { color: var(--encre-douce); }
.eyebrow, .scene .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 0; border: 0; background: none;
  color: var(--encre-pale); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow::before { display: block; content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: none; }
.fenetre-apropos .eyebrow::before, .mode-emploi-ligne .eyebrow::before { display: none; }

/* En-tête : une pilule de verre dépoli, filet discret, ombre qui naît au défilement. */
.win-title, .win-title.est-defile {
  border: 1px solid rgba(17, 18, 20, .07); background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
}
.win-title.est-defile { background: rgba(255, 255, 255, .86); box-shadow: 0 10px 30px -16px rgba(17, 18, 20, .25); }
.win-marque img { height: 38px; }
.win-marque-nom { font-family: var(--sans); font-size: 18px; font-weight: 500; letter-spacing: -.03em; }
.win-marque-nom b { font-weight: 700; }
.menu-entree { padding: 7px 14px; color: var(--encre-douce); font-size: 14px; font-weight: 450; letter-spacing: -.005em; text-transform: none; }
.menu-entree:hover { background: var(--or-voile); color: var(--encre); }
.menu-entree.est-actif, .menu-entree.est-actif:hover { background: var(--or-teinte); color: var(--encre); font-weight: 550; text-decoration: none; }
.menu-mobile { border: 1px solid var(--filet); box-shadow: var(--ombre-douce); }
.compte-icone, .menu-bascule { border-color: var(--filet-fort); }

/* Boutons : pilules en casse normale. Plein d'encre pour l'action, filet doux pour le reste. */
.win-button, .scene .win-button, .bloc-nuit .win-button {
  border: 1px solid var(--filet-fort); background: rgba(255, 255, 255, .6); color: var(--encre);
  font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; text-transform: none;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.win-button:hover:not(:disabled), .win-button:not(.win-button-default):hover:not(:disabled),
.scene .win-button:not(.win-button-default):hover:not(:disabled) { border-color: var(--encre); background: #FFFFFF; color: var(--encre); }
.win-button-default, .tarif .win-button-default, .scene .win-button-default {
  border-color: var(--encre); background: var(--encre); color: #FFFFFF; font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 20px -10px rgba(17, 18, 20, .55);
}
.win-button-default:hover:not(:disabled), .scene .win-button-default:hover:not(:disabled) {
  border-color: #2A2C31; background: #2A2C31; color: #FFFFFF; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 26px -12px rgba(17, 18, 20, .6);
}
.win-button-grand { min-height: 52px; padding: 13px 28px; font-size: 15px; }
.win-button-grand.win-button-default::after { width: 6px; height: 6px; border-width: 1.6px; }
/* Sur fond d'encre : inversés. */
.bloc-nuit .win-button, .tarif-vedette .win-button { border-color: rgba(255, 255, 255, .22); background: transparent; color: #FFFFFF; }
.bloc-nuit .win-button:not(.win-button-default):hover:not(:disabled), .tarif-vedette .win-button:not(.win-button-default):hover:not(:disabled) { border-color: #FFFFFF; background: rgba(255, 255, 255, .06); color: #FFFFFF; }
.bloc-nuit .win-button-default, .tarif-vedette .win-button-default { border-color: #FFFFFF; background: #FFFFFF; color: var(--encre); box-shadow: none; }
.bloc-nuit .win-button-default:hover:not(:disabled), .tarif-vedette .win-button-default:hover:not(:disabled) { border-color: #E9E8E4; background: #E9E8E4; color: var(--encre); }

/* Champs et cartes : filets doux au lieu du trait noir. */
.win-input { border-color: var(--filet-fort); background: #FFFFFF; transition: border-color var(--t), box-shadow var(--t); }
.win-input:focus { border-color: var(--encre); box-shadow: 0 0 0 4px var(--or-voile); }
.win-group, .fonction, .plateforme, .video, .encart, .publicite, .compte-panneau, .consentement, .invitation,
.bandeau-confiance, .fenetre-apropos { border: 1px solid var(--filet); background: var(--papier); box-shadow: var(--ombre-douce); }
.plateforme.est-conseillee { border: 1px solid var(--encre); box-shadow: var(--ombre-douce); }
.tarif-etiquette, .etiquette-conseillee, .badge-premium { border-color: var(--filet-fort); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; }
.fenetre-pied { border-top-color: var(--filet); }
.fenetre-pied div + div { border-left-color: var(--filet); }
.compte-titre { border-top-color: var(--filet); }
.compte-avatar { background: var(--encre); }
.juridique-entete, .page-juridique > .page-heading { border-bottom-color: var(--filet-fort); }
.article-juridique, .prose-juridique h2 { border-color: var(--filet); }
.article-resume { border-left-color: var(--accent); }
.page-juridique .encart { border-bottom-color: var(--filet); box-shadow: none; }
.mode-emploi-bande, .depliant { border-color: var(--filet-fort); }
.mode-emploi-ligne + .mode-emploi-ligne, .indiquer-ligne { border-top-color: var(--filet); }
.depliant summary::after { border-color: var(--encre); }
.publicite-fermer { border-color: var(--filet-fort); }
#tarifs > .encart { border: 1px dashed var(--filet-fort); background: transparent; box-shadow: none; }
.plateforme .win-button { margin-top: auto; }
.plateforme .plateforme-note { margin-bottom: 28px; }
.carte-vignette { border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(17, 18, 20, .06); }

/* ── Accueil : l'ouverture passe au clair ── */
.scene {
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
    var(--ivoire);
  color: var(--encre);
}
.scene::before {
  display: block; background-image: radial-gradient(rgba(17, 18, 20, .09) 1px, transparent 1.2px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 75% 45%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 70% at 75% 45%, #000 0%, transparent 70%);
}
.scene a:not(.win-button) { color: var(--encre); }
.scene .eyebrow { padding: 6px 14px 6px 12px; border: 1px solid var(--filet); border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--encre-douce); letter-spacing: .08em; }
.scene .eyebrow::before { animation: pulsation-sauge 2.6s ease-in-out infinite; }
@keyframes pulsation-sauge { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 93, 80, .45); } 60% { box-shadow: 0 0 0 6px rgba(47, 93, 80, 0); } }
.hero { gap: 64px; padding: 96px 0 104px; }
.hero h1 { max-width: none; margin: 6px 0 24px; font-size: clamp(40px, 4.7vw, 66px); }
.hero h1 em {
  display: inline; font-family: var(--italique); font-style: italic; font-weight: 500; letter-spacing: -.02em;
  color: var(--encre-douce); background: none; padding: 0; animation: none;
}
.hero-lead { max-width: 46ch; margin: 0; color: var(--encre-douce); font-size: 17.5px; font-weight: 400; line-height: 1.65; }
.hero-actions { margin-top: 36px; gap: 12px; }
.hero-preuves { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--filet); }
.hero-preuve { padding: 0; border: 0; background: none; color: var(--encre-pale); font-size: 13.5px; }
.hero-preuve svg { color: var(--accent); }
.vitrine-ecran { border: 0; border-radius: 20px; background: #0E0F11; box-shadow: var(--ombre-ecran); }
.vitrine:hover .vitrine-ecran { transform: translateY(-3px); }
.vitrine-son { border-color: rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(14, 15, 17, .55); font-size: 13px; }

/* ── Fonctionnalités : la démonstration comme une fenêtre posée ── */
.fonctions-titre h2 { font-size: clamp(30px, 3.4vw, 44px); }
.capture-video video, #fonctions .capture-video video { border: 0; border-radius: 20px; box-shadow: var(--ombre-ecran); }

/* ── Le parcours : l'arbre garde sa sève, en tons de sauge plus calmes ── */
.parcours-entete h2 { max-width: 18ch; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; }
#bois-arbre stop:nth-child(1), #bois-arbre stop:nth-child(3) { stop-color: #7F927F; }
#bois-arbre stop:nth-child(2) { stop-color: #A3B19C; }
.arbre-liaison path { fill: #8EA08B; stroke: #7A8D78; }
.arbre-liaison .branche-secondaire { fill: #AEBBA7; stroke: #92A28D; }
.arbre-numero { border-color: var(--filet-fort); background: var(--papier); color: var(--accent); font-family: var(--ac-mono); }
.arbre-texte h3 { font-weight: 600; letter-spacing: -.03em; }
.arbre-ecran { border: 0; border-radius: var(--r-md); box-shadow: var(--ombre-ecran); }
.arbre-chrome { border-bottom-color: var(--filet); background: #FAFAF8; }
.arbre-chrome i { background: #DAD8D2; }
.arbre-lecture { border-color: rgba(255, 255, 255, .6); background: rgba(17, 18, 20, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.arbre-lecture:hover { background: var(--accent); }

/* ── Notre philosophie : une déclaration posée sur le papier, plus une carte noire ── */
.section-donnees .win-group.bloc-nuit {
  padding: 72px 0 8px; border: 0; border-top: 1px solid var(--filet-fort); border-radius: 0;
  background: transparent; color: var(--encre); box-shadow: none; overflow: visible;
}
.section-donnees .bloc-nuit::before { display: none; }
.section-donnees .bloc-nuit .eyebrow { color: var(--encre-pale); }
.section-donnees .bloc-nuit h2 { max-width: 20ch; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; }
.section-donnees .bloc-nuit .muted { max-width: 60ch; margin-top: 22px; color: var(--encre-douce); font-size: 18px; line-height: 1.6; }
.section-donnees .bloc-nuit .liste-verte { margin-top: 30px; }
.section-donnees .bloc-nuit .liste-verte li { padding: 8px 16px 8px 12px; border: 1px solid var(--filet); border-radius: 999px; background: var(--papier); color: var(--encre); font-size: 14px; }
.section-donnees .bloc-nuit .liste-verte svg { color: var(--accent); }
.section-donnees .bloc-nuit .publicite { border-color: var(--filet); }

/* ── Dernier appel : le seul aplat d'encre de la page ── */
.bloc-nuit:has(> .rangee) {
  padding: 88px 48px; border: 0; border-radius: 28px; color: var(--clair);
  background: radial-gradient(80% 120% at 50% 0%, #26282D 0%, #0E0F11 62%);
  box-shadow: var(--ombre-forte);
}
.bloc-nuit:has(> .rangee)::before {
  display: block; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 0%, transparent 70%);
}
.bloc-nuit:has(> .rangee) h2 { color: #FFFFFF; }
.bloc-nuit:has(> .rangee) .eyebrow { color: var(--clair-doux); }
.bloc-nuit:has(> .rangee) .eyebrow::before { background: #8FB5A6; }
.bloc-nuit:has(> .rangee) .muted { color: var(--clair-doux); }
.bloc-nuit:has(> .rangee) h2 { max-width: 16ch; font-size: clamp(32px, 4.4vw, 56px); }

/* ── Tarifs : trois cartes séparées, contour noir, carte annuelle noire (inchangé sur le fond) ── */
.tarif { border-color: var(--encre); border-radius: var(--r-lg); }
.tarif h3 { font-weight: 600; letter-spacing: .08em; }
.tarif .tarif-prix b { font-weight: 600; letter-spacing: -.045em; }
.tarif-vedette { background: var(--nuit); border-color: var(--nuit); box-shadow: var(--ombre-forte); }
.tarif .liste-verte svg { color: var(--accent); }
.tarif-vedette .liste-verte svg { color: #8FB5A6; }

/* ── Pied de page : clair, aéré, séparé par un seul filet ── */
.pied { margin: 120px 0 0; border-top: 1px solid var(--filet-fort); border-radius: 0; background: transparent; color: var(--encre); }
.pied-grille { padding: 64px 20px 40px; }
.pied .win-marque { color: var(--encre); }
.pied .win-marque-nom b { color: var(--encre); }
.pied-bloc h2 { margin-bottom: 4px; color: var(--encre-pale); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.pied-bloc a:not(.win-marque) { color: var(--encre-douce); font-size: 14px; }
.pied-bloc a:not(.win-marque):hover { color: var(--encre); }
.pied-bloc a:not(.win-marque):not(.reseau)::after { background: var(--encre); }
.pied-resume { color: var(--encre-pale); }
.pied-bas { border-top-color: var(--filet); color: var(--encre-pale); font-size: 12.5px; }
.reseau { border-color: var(--filet-fort); color: var(--encre-douce); }
.reseau:hover { border-color: var(--encre); color: var(--encre); }

@media (max-width: 1020px) {
  .hero { gap: 48px; padding: 64px 0 72px; }
}
@media (max-width: 720px) {
  .hero { padding: 40px 0 56px; }
  .hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .hero-lead { font-size: 16px; }
  .scene .eyebrow { padding: 5px 11px 5px 10px; font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
  .hero-preuves { flex-direction: column; gap: 10px; margin-top: 32px; }
  .section-donnees .win-group.bloc-nuit { padding-top: 48px; }
  .section-donnees .bloc-nuit .muted { font-size: 16.5px; }
  .bloc-nuit:has(> .rangee) { padding: 56px 22px; border-radius: 22px; }
  .pied { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene .eyebrow::before { animation: none; }
  .win-button-default:hover:not(:disabled) { transform: none; }
}


/* ══ Habillage « Potoub » (4 nov. 2026) ═════════════════════════════════════════════════════════
   Le site transposé dans le modèle Potoub (html.design) : bande bleue d'en-tête avec sa forme
   arrondie en haut à gauche, bannière bleue, sections alternées gris très clair / blanc, titres
   Poppins en deux tons (sombre puis bleu), boutons en pilule à épais contour, bloc des modules sur le
   fond quadrillé bleu, bande de contact bleue, pied de page noir et bande de copyright bleue.
   Seuls deux décors du modèle sont repris (assets/modele) : la forme d'en-tête et le fond quadrillé.
   Les illustrations du modèle sont remplacées par les vidéos et captures du logiciel. Les cartes de
   tarifs restent trois cartes séparées à contour noir, l'annuelle noire (choix du propriétaire).
   Feuille précédente : sauvegardes-style/styles.avant-potoub-nov4.css */
:root {
  --ivoire: #FFFFFF; --papier: #FFFFFF; --filet: #E4E9EC; --filet-fort: #CDD6DB;
  --encre: #010A05; --encre-douce: #3D4542; --encre-pale: #777977;
  --titre: #382D3C;
  --bleu: #0EADEF; --bleu-entete: #11AEEF; --bleu-fonce: #0192C8; --bleu-clair: #35BFF8;
  --nuit: #212120; --nuit-2: #2C2C2B; --nuit-filet: #3A3A38; --clair: #FFFFFF; --clair-doux: #C9CCCB;
  --accent: var(--bleu); --or-teinte: #EAF7FD; --or-voile: rgba(14, 173, 239, .12);
  --sans: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --serif: var(--sans);
  --r-sm: 10px; --r-md: 20px; --r-lg: 24px;
  --t: 400ms ease-in;
  --ombre-douce: 0 10px 30px -14px rgba(1, 10, 5, .18);
  --ombre-ecran: 0 24px 60px -24px rgba(1, 10, 5, .45);
  font-feature-settings: normal;
}
body { background: #FFFFFF; color: var(--encre); font-size: 16px; line-height: 1.75; letter-spacing: 0; }
::selection { background: var(--bleu); color: #FFFFFF; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
a { color: var(--encre); text-decoration-color: var(--bleu); }
a:hover { color: var(--bleu-fonce); }

h1, h2 { font-family: var(--sans); color: var(--titre); text-transform: none; letter-spacing: 0; }
h1 { font-size: clamp(38px, 4.8vw, 66px); font-weight: 600; line-height: 1.18; }
h2 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; line-height: 1.15; }
h3 { font-family: var(--sans); font-weight: 500; letter-spacing: 0; }
.blu { color: var(--bleu); }
.white { color: #FFFFFF; }
.muted { color: var(--encre-douce); }
.eyebrow, .scene .eyebrow {
  display: inline-flex; margin: 0 0 14px; padding: 0; border: 0; background: none;
  color: var(--bleu); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after { display: none !important; }

/* ── En-tête : la bande bleue, sa forme arrondie à gauche ── */
.win-title, .win-title.est-defile {
  position: sticky; top: 0; z-index: 40; overflow: hidden;
  margin: 0; min-height: 96px; padding: 18px max(30px, calc((100vw - var(--largeur)) / 2 + 20px));
  border: 0; border-radius: 0; background: var(--bleu-entete); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.win-title::after {
  content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 558px; height: 228px;
  background: url("/assets/modele/cross_top.png") no-repeat 0 0; pointer-events: none;
}
.win-title.est-defile { box-shadow: 0 8px 24px -12px rgba(1, 10, 5, .4); }
/* L'en-tête reste collé en haut pendant le défilement. Sur l'accueil, la forme arrondie se prolonge
   dans la bannière (même image, décalée de la hauteur de l'en-tête) : le texte remonte sans être coupé. */
.win-marque { color: #FFFFFF; }
.win-marque img { height: 46px; }
.win-marque-nom { font-family: var(--sans); color: #FFFFFF; font-size: 24px; font-weight: 600; letter-spacing: 0; }
.win-marque-nom b { color: #FFFFFF; font-weight: 600; }
.menu-entree { position: relative; padding: 8px 14px; border-radius: 10px; color: #FFFFFF; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.menu-entree:hover { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.menu-entree.est-actif, .menu-entree.est-actif:hover { background: transparent; color: #FFFFFF; font-weight: 600; text-decoration: none; }
.menu-entree.est-actif::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 3px; background: #FFFFFF; }
.win-title .text-button { color: #FFFFFF; font-size: 16px; }
.win-title .text-button:hover { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.win-title .compte-icone, .win-title .menu-bascule { border-color: rgba(255, 255, 255, .7); background: transparent; color: #FFFFFF; }
.win-title .menu-bascule span { background: #FFFFFF; }
.win-title .win-button-default, .win-title .win-button-default:hover:not(:disabled) {
  min-height: 0; padding: 7px 32px; border: 0; border-radius: 10px; box-shadow: none; transform: none;
  font-size: 17px; font-weight: 500;
}
.win-title .win-button-default { background: #FFFFFF; color: var(--encre); }
.win-title .win-button-default:hover:not(:disabled) { background: #000000; color: #FFFFFF; }
.menu-mobile { margin: 0; border: 0; border-radius: 0; background: var(--bleu-fonce); box-shadow: none; }
.menu-mobile .menu-entree { color: #FFFFFF; }

/* ── Boutons : la pilule du modèle, à épais contour bleu ── */
.win-button, .scene .win-button, .bloc-nuit .win-button {
  min-height: 54px; padding: 10px 34px; border: 4px solid var(--bleu); border-radius: 40px;
  background: transparent; color: var(--encre); box-shadow: none; transform: none;
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.win-button:hover:not(:disabled), .win-button:not(.win-button-default):hover:not(:disabled) { border-color: var(--bleu); background: var(--bleu); color: #FFFFFF; transform: none; box-shadow: none; }
.win-button-default, .tarif .win-button-default { border-color: var(--bleu); background: var(--bleu); color: #FFFFFF; box-shadow: none; font-weight: 500; }
.win-button-default:hover:not(:disabled) { border-color: var(--bleu-fonce); background: var(--bleu-fonce); color: #FFFFFF; transform: none; box-shadow: none; }
.win-button-grand { min-height: 58px; padding: 12px 38px; font-size: 17px; }
.win-button-grand.win-button-default::after { display: none; }
.tarif-vedette .win-button-default { border-color: #FFFFFF; background: #FFFFFF; color: var(--encre); }
.tarif-vedette .win-button-default:hover:not(:disabled) { border-color: var(--bleu); background: var(--bleu); color: #FFFFFF; }

/* Champs et cartes */
.win-input { border: 1px solid var(--filet-fort); border-radius: var(--r-sm); }
.win-input:focus { border-color: var(--bleu); box-shadow: 0 0 0 4px var(--or-voile); }
.win-group, .fonction, .plateforme, .video, .encart, .publicite, .compte-panneau, .consentement, .invitation,
.bandeau-confiance, .fenetre-apropos { border: 1px solid var(--filet); border-radius: var(--r-md); box-shadow: var(--ombre-douce); }
.plateforme.est-conseillee { border: 2px solid var(--bleu); }
.tarif-etiquette, .etiquette-conseillee, .badge-premium { border-color: var(--bleu); color: var(--bleu-fonce); }
.arbre-numero, .engagements-grille article > span { background: var(--or-teinte); color: var(--bleu-fonce); }
.article-resume { border-left-color: var(--bleu); }
.compte-avatar { background: var(--bleu); }
.page-heading h1, .juridique-entete h1 { color: var(--titre); }
.page-heading { padding-top: 64px; }

/* ── Bannière bleue ── */
.banniere { position: relative; background: url("/assets/modele/cross_top.png") no-repeat 0 -96px, var(--bleu-entete); color: #FFFFFF; }
.banniere-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 56px; padding-top: 40px; padding-bottom: 100px; }
.banniere-texte { position: relative; z-index: 1; }
.banniere .eyebrow { color: #FFFFFF; opacity: .9; }
.banniere h1 { margin: 0 0 24px; color: #FFFFFF; font-size: clamp(38px, 4.4vw, 58px); font-weight: 600; }
.banniere .win-button-grand { padding: 12px 30px; }
.banniere .hero-lead { max-width: 46ch; margin: 0; color: #FFFFFF; font-size: 17px; font-weight: 500; line-height: 1.6; }
.banniere .hero-actions { margin-top: 40px; gap: 16px; }
.banniere .win-button { border-color: #FFFFFF; color: #FFFFFF; }
.banniere .win-button:not(.win-button-default):hover:not(:disabled) { border-color: #000000; background: #000000; color: #FFFFFF; }
.banniere .win-button-default { border-color: #FFFFFF; background: #FFFFFF; color: var(--encre); }
.banniere .win-button-default:hover:not(:disabled) { border-color: #000000; background: #000000; color: #FFFFFF; }
.banniere .hero-preuves { display: flex; flex-direction: column; gap: 8px; margin-top: 36px; padding: 0; border: 0; }
.banniere .hero-preuve { padding: 0; border: 0; background: none; color: #FFFFFF; font-size: 15px; font-weight: 500; }
.banniere .hero-preuve svg { color: #FFFFFF; }
/* La vidéo posée sur un disque sombre hachuré, avec deux anneaux, comme l'illustration du modèle. */
.banniere-visuel { position: relative; padding: 40px 30px; }
.banniere-visuel::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; width: min(92%, 520px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: repeating-linear-gradient(135deg, #2B2537 0 2px, #3A3348 2px 6px);
}
.banniere-visuel .vitrine { position: relative; z-index: 1; }
.banniere-visuel .vitrine-ecran { border: 6px solid #FFFFFF; border-radius: 6px; background: #000000; box-shadow: var(--ombre-ecran); }
.banniere-visuel .vitrine:hover .vitrine-ecran { transform: none; }
.vitrine-son { border-radius: 40px; }
.anneau { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; }
.anneau-haut { top: 6px; right: 0; width: 76px; height: 76px; border: 14px solid #2B2537; border-left-color: transparent; transform: rotate(-30deg); }
.anneau-bas { bottom: 0; right: 40px; width: 68px; height: 68px; border: 13px solid #F5A623; }

/* ── Sections alternées et titres de section ── */
.bande { padding: 90px 0; background: #FFFFFF; }
.bande-claire { background: #FAFAFA; }
.bande-grille { display: grid; align-items: center; gap: 56px; }
.bande-grille-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bande-grille-texte { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.titlepage h2 { margin: 0 0 32px; }
.titlepage > p:not(.eyebrow) { max-width: 62ch; margin: 0 0 40px; color: var(--encre); font-size: 17px; line-height: 2; }
.titlepage-bouton { float: right; }
.titlepage-centre { padding-bottom: 60px; text-align: center; }
.titlepage-centre h2 { margin: 0; }
.capture { margin: 0; }
.capture-video video, #fonctions .capture-video video { border: 0; border-radius: 14px; box-shadow: var(--ombre-ecran); }
.bande-image { margin: 0; }
.bande-image img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ombre-ecran); }
.liste-pastilles { display: flex; flex-wrap: wrap; gap: 12px; margin: -16px 0 0; }
.liste-pastilles li { align-items: center; padding: 8px 20px 8px 14px; border: 3px solid var(--bleu); border-radius: 40px; color: var(--encre); font-weight: 500; }
.liste-pastilles svg { margin: 0; color: var(--bleu); }
.bande .publicite { margin-top: 32px; }

/* ── Les modules : onglets à gauche, boîte blanche à droite, sur le fond quadrillé ── */
.choisir { padding-top: 90px; background: #FFFFFF; }
.choisir-fond { padding: 110px 0; background: var(--bleu-fonce) url("/assets/modele/why.jpg") center / cover no-repeat; }
.choisir-grille { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: stretch; }
.modules-onglets { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.module-onglet {
  display: block; width: 100%; padding: 16px 22px; border: 0; background: transparent; cursor: pointer;
  color: var(--encre); font: 500 21px/1.4 var(--sans); text-align: left; transition: background var(--t), color var(--t);
}
.module-onglet:hover, .module-onglet[aria-selected="true"] { background: #060505; color: #FFFFFF; }
.module-onglet:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; }
.module-boite { height: 100%; padding: 35px; background: #FFFFFF; text-align: center; }
.module-media { overflow: hidden; aspect-ratio: 16 / 9; max-width: 640px; margin: 0 auto; border-radius: 8px; background: #E8ECEA; box-shadow: 0 10px 30px -18px rgba(1, 10, 5, .5); }
.module-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.module-boite h3 { margin: 0; padding: 22px 0 8px; color: var(--bleu); font-size: 25px; line-height: 1.2; }
.module-boite p { max-width: 56ch; margin: 0 auto; color: var(--encre); font-size: 17px; font-weight: 500; line-height: 1.75; }

/* ── Tarifs, posés sur le blanc ── */
#tarifs > h2 { color: var(--titre); }
.tarif { border-color: #010101; border-radius: var(--r-md); }
.tarif .liste-verte svg { color: var(--bleu); }
.tarif-vedette { background: #060505; border-color: #060505; }
.tarif-vedette .liste-verte svg { color: var(--bleu-clair); }
#tarifs > .encart { border: 2px dashed var(--bleu); box-shadow: none; }
.tarif .win-button-grand { padding-inline: 16px; font-size: 16px; }
.demande-essai .win-button-grand { padding-inline: 26px; }

/* ── Bande de contact bleue ── */
.demande { padding: 90px 0; background: var(--bleu-fonce); }
.demande .titlepage h2 { margin: 0 0 48px; color: var(--titre); }
.demande-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 30px; }
.demande-formulaire { display: grid; gap: 26px; }
.demande-formulaire .win-input {
  width: 100%; height: 60px; padding: 0 30px; border: 0; border-radius: 35px; background: #FFFFFF;
  color: var(--encre); font-family: var(--sans); font-size: 17px;
}
.demande-formulaire textarea.win-input { height: auto; min-height: 170px; padding: 22px 30px; border-radius: 20px; resize: vertical; }
.demande-formulaire .win-input::placeholder { color: var(--encre-pale); opacity: 1; }
.demande-formulaire .win-input:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, .45); }
.demande-envoyer, .demande-envoyer:hover:not(:disabled) { justify-self: center; width: 100%; max-width: 220px; border: 0; }
.demande-envoyer { background: #FFFFFF; color: #000000; }
.demande-envoyer:hover:not(:disabled) { background: #191E20; color: #FFFFFF; }
.demande .message { margin: 0; color: #FFFFFF; text-align: center; }
.demande .message:empty { display: none; }
.demande-essai { padding: 40px; border-radius: var(--r-md); background: #FFFFFF; }
.demande-essai h3 { margin: 0 0 14px; color: var(--titre); font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.2; }
.demande-essai > p:not(.eyebrow) { margin: 0 0 28px; color: var(--encre); font-size: 16px; line-height: 1.8; }
.demande-essai .rangee { gap: 14px; }

/* ── Pied de page noir, bande de copyright bleue ── */
.pied { margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--nuit); color: #FFFFFF; }
.demande + .pied, main:has(> .demande:last-child) + .pied { margin-top: 0; }
.pied-grille { padding: 85px 20px 0; }
.pied .win-marque, .pied .win-marque-nom, .pied .win-marque-nom b { color: #FFFFFF; }
.pied-bloc { gap: 8px; }
.pied-bloc h2 { margin: 0 0 14px; color: #FFFFFF; font-family: var(--sans); font-size: 26px; font-weight: 500; letter-spacing: 0; line-height: 1.3; text-transform: none; }
.pied-bloc a:not(.win-marque):not(.reseau) { position: relative; padding-left: 26px; color: #FCFBFB; font-size: 16px; }
.pied-bloc a:not(.win-marque):not(.reseau)::before { content: ''; position: absolute; left: 0; top: .55em; width: 11px; height: 11px; border-radius: 50%; background: #FFFFFF; transition: background var(--t); }
.pied-bloc a:not(.win-marque):not(.reseau)::after { display: none; }
.pied-bloc a:not(.win-marque):not(.reseau):hover { color: var(--bleu); }
.pied-bloc a:not(.win-marque):not(.reseau):hover::before { background: var(--bleu); }
.pied-resume { color: var(--clair-doux); font-size: 16px; }
.pied-bas { max-width: none; margin: 85px 0 0; padding: 25px 20px; border: 0; background: var(--bleu-fonce); color: #FFFFFF; font-size: 16px; text-align: center; }
.reseau { border-color: #FFFFFF; background: #FFFFFF; color: #000000; }
.reseau:hover { border-color: var(--bleu); color: var(--bleu); }

/* ── Écrans moyens et étroits ── */
@media (max-width: 991px) {
  .banniere-grille, .bande-grille-media, .bande-grille-texte, .demande-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .banniere-grille { padding-top: 40px; padding-bottom: 72px; }
  .bande-grille-texte .bande-image { order: -1; }
  .titlepage-bouton { float: none; }
  .choisir-grille { grid-template-columns: minmax(0, 1fr); }
  .modules-onglets { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
  .module-onglet { width: auto; padding: 10px 18px; border-radius: 40px; background: rgba(255, 255, 255, .85); font-size: 15px; }
}
@media (max-width: 720px) {
  .win-title, .win-title.est-defile { min-height: 72px; padding: 12px 16px; }
  .win-title::after { width: 300px; height: 123px; background-size: contain; }
  .win-marque img { height: 36px; }
  .win-marque-nom { font-size: 19px; }
  .banniere-grille { padding-top: 28px; }
  .banniere { background-size: 300px 123px, auto; background-position: 0 -72px, 0 0; }
  .banniere h1 { font-size: clamp(34px, 10vw, 44px); }
  .banniere .hero-actions .win-button { width: 100%; }
  .banniere-visuel { padding: 24px 6px; }
  .anneau-haut { width: 54px; height: 54px; border-width: 10px; }
  .anneau-bas { width: 48px; height: 48px; border-width: 10px; right: 16px; }
  .bande, .demande { padding: 64px 0; }
  .choisir { padding-top: 64px; }
  .choisir-fond { padding: 48px 0; }
  .module-boite { padding: 18px; }
  .module-boite h3 { font-size: 21px; }
  .module-boite p { font-size: 15.5px; }
  .titlepage > p:not(.eyebrow) { font-size: 16px; line-height: 1.8; }
  .demande-essai { padding: 26px 20px; }
  .demande-essai .win-button { width: 100%; }
  .pied-grille { padding-top: 56px; }
  .pied-bas { margin-top: 56px; }
}