/* ==========================================================================
   ComptaLien.ca — feuille de style de la vitrine.

   POURQUOI des jetons sur :root : les illustrations sont du SVG en ligne.
   En leur donnant des classes qui lisent les mêmes variables que le texte,
   le mode sombre se règle à un seul endroit et aucun dessin ne reste en
   blanc sur fond sombre.

   Les couples texte/fond ci-dessous ont été mesurés (WCAG AA = 4,5:1) :
     clair   encre/blanc 16,9   secondaire/blanc 8,0   marque/blanc 13,1
             accent-texte/blanc 6,9   blanc/bouton-marque 13,1
     sombre  encre/fond 15,8    secondaire/fond 9,2    marque/fond 9,7
             accent-texte/fond 7,8    blanc/bouton-marque 6,7
   ========================================================================== */

:root {
  color-scheme: light dark;

  --fond:          #FFFFFF;
  --fond-doux:     #F4F7FC;
  --fond-accent:   #EAF2FE;
  --encre:         #0F1C36;
  --encre-douce:   #46506B;
  --marque:        #0B2D6B;
  --marque-vive:   #103C8C;
  --accent:        #3B82F6;   /* graphismes et anneau de focus, jamais du texte fin */
  --accent-texte:  #1552C7;   /* la version du bleu lumineux qui tient l'AA en texte */
  --bordure:       #D7E0EF;
  --bordure-forte: #B9CBE6;

  --bouton-fond:   #0B2D6B;
  --bouton-fond-survol: #103C8C;
  --bouton-texte:  #FFFFFF;

  /* POURQUOI des jetons séparés pour les aplats : --marque s'ÉCLAIRCIT en
     mode sombre (c'est ce qu'il faut pour du texte), donc le réutiliser comme
     FOND de pastille y mettrait du blanc sur du bleu pâle. Les aplats gardent
     leur propre couleur, qui fonce quand le reste s'éclaircit. */
  --puce-fond:        #0B2D6B;   /* blanc dessus : 13,1 */
  --puce-fond-claire: #1552C7;   /* blanc dessus : 6,9  */
  --puce-texte:       #FFFFFF;

  --ombre: 0 1px 2px rgba(11, 45, 107, .06), 0 8px 24px rgba(11, 45, 107, .07);

  --gouttiere: 16px;   /* la gouttière latérale exigée sur téléphone */
  --large: 1120px;
  --rayon: 14px;
}

/* Mode sombre par préférence système. Le fond du body est explicite dans les
   deux modes : sans cela, un navigateur en thème sombre peindrait derrière la
   page une couleur que nous n'avons pas choisie. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond:          #0A1428;
    --fond-doux:     #12213D;
    --fond-accent:   #142C52;
    --encre:         #E8EEFA;
    --encre-douce:   #A9B8D4;
    --marque:        #9DBDFA;
    --marque-vive:   #C2D6FD;
    --accent:        #3B82F6;
    --accent-texte:  #7EA9FB;
    --bordure:       #26375A;
    --bordure-forte: #35507F;

    --bouton-fond:   #1D4ED8;
    --bouton-fond-survol: #2563EB;
    --bouton-texte:  #FFFFFF;

    --puce-fond:        #1D4ED8;   /* blanc dessus : 6,7 */
    --puce-fond-claire: #2563EB;   /* blanc dessus : 5,2 */
    --puce-texte:       #FFFFFF;

    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--fond);          /* explicite, dans les deux modes */
  color: var(--encre);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;                  /* le corps ne descend jamais sous 15px */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;               /* filet : aucun débordement horizontal */
}

h1, h2, h3 { color: var(--encre); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 6.2vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 4.4vw, 2.3rem); margin-bottom: .4em; }
h3 { font-size: 1.08rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-texte); }
a:hover { color: var(--marque); }

strong { font-weight: 600; }
em { font-style: normal; font-weight: 600; color: var(--accent-texte); }

/* Focus visible au clavier — l'anneau bleu tient 3,7:1 sur blanc et 7,8:1
   sur fond sombre, donc il reste perceptible dans les deux modes. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.saut-contenu:focus { left: 0; }

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.enveloppe--etroite { max-width: 760px; }
.centre { text-align: center; }

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

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
}
/* Repli si color-mix n'est pas connu du navigateur : un fond plein plutôt
   qu'un en-tête transparent illisible. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .entete { background: var(--fond); }
}

.entete__rang {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--marque);
  font-weight: 600;
  font-size: 1.06rem;
  min-height: 44px;              /* cible tactile */
  margin-right: auto;
  white-space: nowrap;
}
.logo__marque { width: 30px; height: 30px; flex: none; }
.logo__ca { color: var(--accent-texte); font-weight: 500; }

.l-bulle { fill: none; stroke: var(--marque); stroke-width: 2.2; stroke-linejoin: round; }
.l-maillon rect { fill: none; stroke: var(--accent); stroke-width: 2.2; }

.nav { display: none; gap: 4px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--encre-douce);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.nav a:hover { color: var(--marque); background: var(--fond-doux); }

/* --------------------------------------------------------------------------
   Se connecter — les deux portes
   --------------------------------------------------------------------------

   DEUX PERSONNES DIFFÉRENTES ARRIVENT ICI, et une seule connaît son adresse.
   Le comptable a l'application en favori; le client final, lui, a reçu une
   invitation il y a six mois et cherche « le site de mon comptable ». Cette
   page d'accueil est le seul endroit qu'il retrouve, donc elle doit porter sa
   porte à lui, nommée dans ses mots.

   `<details>` et zéro script: le menu s'ouvre au clavier, se ferme avec Échap,
   et fonctionne si le JavaScript ne charge pas. La page n'en a aucun, et ce
   bouton n'était pas une raison d'en introduire un.
   -------------------------------------------------------------------------- */

.connexion { position: relative; }

/* Le marqueur par défaut de `<summary>` (le triangle) est retiré des deux
   façons qu'il faut: la règle standard et celle de WebKit. */
.connexion > summary { list-style: none; cursor: pointer; gap: 6px; }
.connexion > summary::-webkit-details-marker { display: none; }
.connexion[open] > summary { border-color: var(--marque); background: var(--fond-doux); }

.connexion__chevron {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s ease;
}
.connexion[open] .connexion__chevron { transform: rotate(180deg); }

.connexion__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 274px;
  padding: 6px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.connexion__porte {
  display: block;
  padding: 11px 13px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--encre);
}
.connexion__porte + .connexion__porte { margin-top: 2px; }
.connexion__porte:hover { background: var(--fond-doux); }
.connexion__qui  { display: block; font-weight: 600; font-size: 15px; color: var(--marque); }
.connexion__quoi { display: block; margin-top: 2px; font-size: 13.5px; color: var(--encre-douce); }

/* SUR TÉLÉPHONE, LE MENU NE FLOTTE PAS: il s'ancre aux deux bords de l'écran.
   Un menu de 274 px ancré à droite d'un bouton déjà proche du bord déborderait
   la page vers la droite — exactement le défilement horizontal qu'on refuse. */
@media (max-width: 519px) {
  .connexion__menu { right: -8px; min-width: min(274px, calc(100vw - 32px)); }
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.boutons--centre { justify-content: center; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;              /* au-delà des 44px exigés */
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.bouton--principal { background: var(--bouton-fond); color: var(--bouton-texte); }
.bouton--principal:hover { background: var(--bouton-fond-survol); color: var(--bouton-texte); }
.bouton--second {
  background: transparent;
  color: var(--marque);
  border-color: var(--bordure-forte);
}
.bouton--second:hover { border-color: var(--marque); background: var(--fond-doux); color: var(--marque); }
.bouton--compact { min-height: 44px; padding: 9px 15px; font-size: 15px; white-space: nowrap; }
.bouton--grand { min-height: 54px; padding: 14px 30px; font-size: 17px; }

/* --------------------------------------------------------------------------
   Éléments de texte partagés
   -------------------------------------------------------------------------- */

.surtitre {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-texte);
}
.accroche { font-size: clamp(1.02rem, 2.4vw, 1.22rem); color: var(--encre-douce); max-width: 34em; }
.intro { font-size: clamp(1rem, 2.2vw, 1.12rem); color: var(--encre-douce); max-width: 42em; }
.centre .intro { margin-inline: auto; }
.mention { font-size: 15px; color: var(--encre-douce); margin-top: 16px; }

.clou {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 4px solid var(--accent);
  background: var(--fond-accent);
  border-radius: 0 10px 10px 0;
  font-size: 16px;
  color: var(--encre);
}

.etiquette {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--puce-fond);
  color: var(--puce-texte);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}
.etiquette--claire { background: var(--puce-fond-claire); }

/* --------------------------------------------------------------------------
   Bandes et grilles
   -------------------------------------------------------------------------- */

.bande { padding: 56px 0; border-top: 1px solid var(--bordure); }
.bande--douce { background: var(--fond-doux); }
.bande--signature { background: var(--fond-doux); }
.bande--final { background: var(--fond-doux); }

.grille { display: grid; gap: 16px; margin-top: 30px; grid-template-columns: 1fr; }

.carte {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 22px;
  box-shadow: var(--ombre);
}
.carte h3 { color: var(--marque); }
.carte p { color: var(--encre-douce); font-size: 16px; }

.liste { margin: 14px 0 0; padding-left: 1.1em; color: var(--encre-douce); font-size: 16px; }
.liste li { margin-bottom: 7px; }
.liste li::marker { color: var(--accent); }

/* --- Duo cabinet / client : le cœur de la marque -------------------------- */

.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 30px;
  align-items: stretch;
}
.carte--duo { background: var(--fond); }
.carte--duo h3 { margin-bottom: 14px; }

.duo__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  position: relative;
}
/* Le trait qui relie les deux cartes : vertical sur téléphone, horizontal
   dès qu'il y a deux colonnes. */
.duo__lien::before {
  content: "";
  position: absolute;
  inset: 0 auto;
  left: 50%;
  width: 2px;
  height: 100%;
  background: var(--bordure-forte);
  transform: translateX(-50%);
}
.maillon {
  width: 64px;
  height: 40px;
  position: relative;
  background: var(--fond-doux);
  padding: 0 6px;
}

/* --- Étapes numérotées ---------------------------------------------------- */

.etapes { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: none; }
.etape {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--bordure);
}
.etape:first-child { border-top: 0; padding-top: 0; }
.etape__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fond-accent);
  color: var(--marque);
  font-weight: 600;
  font-size: 17px;
}
.etape h3 { color: var(--marque); margin-bottom: .35em; }
.etape p { color: var(--encre-douce); font-size: 16px; }

/* --- L'encadré « ce qu'il ne voit pas » ------------------------------------ */

.avertissement {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--fond-accent);
}
.avertissement h3 { color: var(--marque); }
.avertissement p { color: var(--encre); font-size: 16px; }

/* --- La ligne rouge -------------------------------------------------------- */

/* POURQUOI cette bande garde ses couleurs en dur : c'est le seul bloc à fond
   plein sombre de la page dans les deux modes ; le blanc sur #0B2D6B mesure
   13,1:1, donc il n'a pas besoin de basculer. */
.bande--ligne { background: #0B2D6B; border-top: 0; }
.bande--ligne h2 { color: #FFFFFF; }
.surtitre--clair { color: #9DC0FF; }
.intro--clair { color: #DCE7FA; max-width: 46em; }
.mention--claire { color: #B7CBEC; font-size: 15px; }
@media (prefers-color-scheme: dark) {
  .bande--ligne { background: #071B3F; }
}

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */

.heros { padding: 44px 0 52px; }
.heros__grille { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
.heros__texte { min-width: 0; }
.heros__image { min-width: 0; }  /* filet anti-débordement en grille */

.maquette {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
}

/* POURQUOI une légende en HTML plutôt qu'en SVG : les libellés à l'intérieur
   du dessin sont dimensionnés dans un repère de 740 unités de large. Sur un
   téléphone de 375 px, ce repère est réduit de plus de moitié et un libellé
   de 11 unités tomberait sous 5 px réels — illisible. La légende, elle, est
   du vrai texte à 15 px qui ne rétrécit jamais. */
.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--encre-douce);
}
.legende__item { display: inline-flex; align-items: center; gap: 8px; }
.legende__pastille { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legende__pastille--cabinet { background: var(--puce-fond); }
.legende__pastille--client  { background: var(--puce-fond-claire); }

/* Les classes du dessin lisent les mêmes jetons que le texte : une seule
   définition de couleurs pour la page et pour la maquette. */
.m-cadre   { fill: var(--fond); stroke: var(--bordure-forte); stroke-width: 1.5; }
.m-barre   { fill: var(--puce-fond); }
.m-barre--client { fill: var(--puce-fond-claire); }
.m-pastille { fill: #FFFFFF; opacity: .55; }
.m-titre   { fill: var(--puce-texte); font-size: 13px; font-weight: 600; font-family: inherit; }
.m-etiquette { fill: var(--encre); font-size: 12px; font-weight: 600; font-family: inherit; }
.m-micro   { fill: var(--encre-douce); font-size: 10.5px; font-family: inherit; }
.m-ligne-entete { fill: var(--fond-doux); }
.m-rangee rect:first-child { fill: var(--fond-doux); }
.m-rangee--vive rect:first-child { fill: var(--fond-accent); stroke: var(--accent); stroke-width: 1.2; }
.m-trait   { fill: var(--encre-douce); opacity: .42; }
.m-trait--accent { fill: var(--accent); opacity: .85; }
.m-puce    { fill: var(--accent-texte); font-size: 10px; font-weight: 600; font-family: inherit; }
.m-bouton  { fill: var(--puce-fond); }
.m-bouton-mot { fill: var(--puce-texte); font-size: 9.5px; font-weight: 600; text-anchor: middle; font-family: inherit; }
.m-encart  { fill: var(--fond-doux); stroke: var(--bordure); stroke-width: 1; }
.m-encart--demande { fill: var(--fond-accent); stroke: var(--accent); stroke-width: 1.2; }
.m-ok      { fill: var(--accent-texte); font-size: 16px; font-weight: 600; font-family: inherit; }
.m-tiroir rect { fill: var(--fond-doux); stroke: var(--bordure); stroke-width: 1; }
.m-lien line { stroke: var(--bordure-forte); stroke-width: 2; }
.m-lien rect { fill: var(--fond); stroke: var(--accent); stroke-width: 2.4; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied { background: var(--marque); color: #FFFFFF; padding: 40px 0 26px; }
@media (prefers-color-scheme: dark) {
  .pied { background: #071023; border-top: 1px solid var(--bordure); }
}
.pied__rang { display: grid; gap: 22px; }
.pied__marque { font-size: 1.2rem; font-weight: 600; margin: 0 0 4px; color: #FFFFFF; }
.pied .logo__ca { color: #9DC0FF; }
.pied__signature {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #C7D8F5;
}
.pied__nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pied__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #DCE7FA;
  text-decoration: none;
  font-size: 15px;
}
.pied__nav a:hover { color: #FFFFFF; text-decoration: underline; }
.pied__fin {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 15px;
  color: #C7D8F5;
}

/* --------------------------------------------------------------------------
   Les paliers d'écran — le téléphone d'abord, tout le reste est un ajout
   -------------------------------------------------------------------------- */

/* Sous 860 px, les libellés internes du dessin deviendraient illisibles :
   on les retire et la maquette redevient un schéma de formes. Le sens reste
   porté par la légende, par le texte autour et par le <desc> du SVG pour les
   lecteurs d'écran. */
@media (max-width: 859px) {
  .maquette text { display: none; }
}

/* Sur les téléphones étroits, « Demander une démo » dans l'en-tête pousse le
   logo hors de l'écran. Le bouton se dit alors « Démo » : même destination,
   même cible tactile, aucune barre de défilement horizontale. */
.bouton__court { display: none; }
@media (max-width: 519px) {
  .bouton--compact .bouton__long  { display: none; }
  .bouton--compact .bouton__court { display: inline; }
  .logo { font-size: 1rem; }
  .logo__marque { width: 27px; height: 27px; }
}

@media (min-width: 620px) {
  .grille--2 { grid-template-columns: 1fr 1fr; }
  .bande { padding: 72px 0; }
  .heros { padding: 56px 0 72px; }
}

@media (min-width: 860px) {
  :root { --gouttiere: 28px; }
  .nav { display: flex; }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .heros__grille { grid-template-columns: 1.02fr 1fr; gap: 44px; }

  .duo { grid-template-columns: 1fr 88px 1fr; align-items: center; }
  .duo__lien { padding: 0; }
  .duo__lien::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
  .maillon { background: var(--fond-doux); }

  .pied__rang { grid-template-columns: 1fr auto; align-items: center; }
  .pied__nav { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   Animations — sobres, et seulement dans le héros.

   POURQUOI seulement le héros : une apparition au défilement demanderait du
   JavaScript ; sans lui, une animation posée plus bas laisserait du texte
   invisible chez qui la bloque. Le héros s'anime au chargement, donc il
   s'affiche toujours.
   -------------------------------------------------------------------------- */

@keyframes monte {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.monte { animation: monte .55s cubic-bezier(.22, .61, .36, 1) both; }
.monte--1 { animation-delay: .02s; }
.monte--2 { animation-delay: .09s; }
.monte--3 { animation-delay: .17s; }
.monte--4 { animation-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Remettre l'opacité à 1 explicitement : « animation: none » sur un
     keyframe en « both » laisserait sinon l'élément à son état initial. */
  .monte { animation: none; opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
}