/* ==========================================================================
   B.A. FINANCES, site Copilote
   Feuille unique. Aucun style en ligne dans les pages, la politique de
   securite de contenu interdit 'unsafe-inline'.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Polices
   Une seule graisse et un seul style par regle. Aucune plage font-weight :
   une plage reactive des graisses non voulues.
   Lora plafonne a 700, le 800 n'existe pas dans la fonte.
   Le suffixe -v2 fait partie du nom : une police modifiee change de nom,
   sinon le cache d'un an avec immutable ne serait jamais rafraichi.

   Huit fichiers, et non neuf. inter-400i.woff2 a ete supprime le 14 aout 2026,
   avec sa declaration : le seul element en italique des quatre pages est le
   <em> du H1, qui est en Lora. Aucune regle de cette feuille ne demandait
   d'italique en Inter, la declaration ne pouvait donc correspondre a rien.
   N'en redeclarer une que le jour ou un italique en Inter apparait vraiment.
   -------------------------------------------------------------------------- */

@font-face{
  font-family:'Lora';
  src:url('../fonts/lora-600-v2.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Lora';
  src:url('../fonts/lora-700-v2.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Lora';
  src:url('../fonts/lora-600i-v2.woff2') format('woff2');
  font-weight:600; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}


/* --------------------------------------------------------------------------
   2. Variables
   Univers sombre, charte v3.1 stricte, accent lime.

   La bascule du clair au sombre, le 12 aout 2026, n'a touche qu'au fond, a
   l'accent et au relief : elle a laisse la structure, les largeurs et les
   rayons intacts. Ce n'est pas une regle pour la suite. La meme journee a
   ensuite change l'ordre des sections, remplace la grille des six formules par
   deux cartes et aligne l'en-tete a gauche.
   -------------------------------------------------------------------------- */

:root{
  --bg:#08090b;
  --surface:#0f1114;
  --card:#141618;
  /* Fond de carte au survol, un cran au-dessus de --card. Le survol se marque
     par ce fond et par une bordure qui passe en --accent, jamais par une
     ombre : sur fond sombre une ombre ne se voit pas. Le lime du survol est un
     etat, il ne dure que le temps du survol, et n'entame pas la regle des sept
     emplacements lime au repos. */
  --card-survol:#1a1d20;
  --border:#1e2126;
  --border-light:#2a2d32;

  /* Pas de --accent-text. Sur fond sombre le lime est lisible a toutes les
     tailles, la distinction grand corps contre petit corps disparait.
     Pas de --accent-dim ni de --accent-glow non plus : declarees le 12 aout
     2026, jamais lues, supprimees le meme jour. Les reintroduire seulement si
     un usage reel apparait, et il n'y en a pas en vue : le lime ne fait ni
     fond ni halo sur ce site.

     Valeur passee de #bef264 a #d6f345 le 15 aout 2026. Teinte legerement
     plus jaune, 70 degres au lieu de 74, et plus saturee. Aucun contraste
     n'est degrade : 15,9 pour 1 sur --bg contre 15,3 avant, et le texte du
     bouton, qui est --bg sur --accent, suit le meme rapport.
     LES IMAGES MATRICIELLES SONT RESTEES A #bef264, voir CLAUDE.md. */
  --accent:#d6f345;

  --title:#ffffff;
  --text:#e2e2e2;
  --dim:#d1d5db;

  /* Pas de --red ni de --green. Les valeurs de l'univers clair, #c0392b et
     #2d7a3e, sont illisibles sur ce fond, et aucune page n'affiche d'etat.
     Les fixer le jour ou un etat apparait, pas avant. */

  --sp-xs:8px;
  --sp-sm:16px;
  --sp-md:24px;
  --sp-lg:32px;
  --sp-xl:48px;
  --sp-2xl:64px;
  --sp-3xl:88px;

  /* Conteneur principal. Les blocs qui portent du texte courant se bornent
     eux-memes : les cartes d'approche a 820px, les paragraphes d'accroche du
     hero a 620px. La variable --mesure et l'utilitaire .mesure qui allaient
     avec ont ete supprimes le 12 aout 2026, plus rien ne les employait. */
  --wrap:1120px;

  /* Rayons. Le 18px des cartes diverge du 12px de la charte v3.1, choix
     assume pour ce site, consigne dans CLAUDE.md. Le 12px reste en vigueur
     sur les tuiles, elements plus petits. */
  --radius-card:18px;
  --radius-tile:12px;

  --serif:'Lora', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Aucune ombre de carte : sur fond sombre une ombre ne se voit pas. Le
     relief vient du fond de la carte, plus clair que la section, et de sa
     bordure. Seul le bouton porte une ombre, coloree, qui fait halo. */
  /* Composantes de --accent en decimal, a tenir synchronisees avec lui :
     #d6f345 vaut 214,243,69. Ce sont les deux seuls endroits de la feuille ou
     l'accent est ecrit en dur, l'alpha interdisant var(). */
  --shadow-btn:0 4px 24px rgba(214,243,69,0.22);
  --shadow-btn-survol:0 6px 32px rgba(214,243,69,0.32);
}


/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

/* Univers sombre annonce au navigateur : barres de defilement et controles
   natifs suivent, sinon ils restent clairs et jurent avec la page. */
html{-webkit-text-size-adjust:100%;color-scheme:dark}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Sans cette regle le texte selectionne est illisible. */
::selection{background:var(--accent);color:var(--bg)}

/* Lien en blanc souligne, pas en lime : le lime est un signal, pas un decor.
   Le soulignement porte a lui seul la distinction. */
a{color:var(--title);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}

/* Anneau de focus en blanc, pour la meme raison. Contraste maximal sur fond
   sombre, obligation d'accessibilite. */
:focus-visible{outline:2px solid var(--title);outline-offset:3px}

h1,h2,h3{font-family:var(--serif);color:var(--title);margin:0;line-height:1.2}
h1{font-size:clamp(36px,6.5vw,58px);font-weight:700;letter-spacing:-0.03em;line-height:1.05}
h2{font-size:clamp(25px,4vw,33px);font-weight:700;letter-spacing:-0.02em}
h3{font-size:19px;font-weight:600}

p{margin:0}
ul{margin:0;padding:0;list-style:none}


/* --------------------------------------------------------------------------
   4. Trame
   Le rythme vertical encode la structure : plus d'espace entre deux niveaux
   differents qu'a l'interieur d'un meme niveau.
   -------------------------------------------------------------------------- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--sp-md);
}

.section{padding:var(--sp-3xl) 0}

/* Surface alternee. */
.section--alt{background:var(--surface)}

/* Premiere section apres l'en-tete. L'en-tete occupe 88vh, contenu centre
   verticalement : la marge basse de la tagline est deja large, un padding-top
   plein y ajouterait un vide que rien ne justifie. Deux tiers de --sp-lg, soit
   environ 21px, ecrits en calc pour que la reduction reste attachee a
   l'echelle d'espacement dont elle sort volontairement. Le reglage mobile de
   la derniere section n'est pas concerne. */
.section--suite-hero{padding-top:calc(var(--sp-lg) * 2 / 3)}

/* Apparition au defilement.
   L'etat masque depend de la classe .reveal-actif, posee sur <html> par ui.js.
   Sans script, sans IntersectionObserver, ou avec mouvement reduit, la classe
   n'est jamais posee et tout le contenu est visible d'emblee. Sur le site
   principal opacity:0 est en CSS statique : une erreur JS y rend la page
   entiere invisible.

   Le decalage passe par la propriete translate et non par transform, laissee
   libre pour les etats : c'est elle que portent le survol du bouton de retour
   en haut et l'entree en cascade du hero. Les deux proprietes se composent
   sans se marcher dessus.

   La transition est ici a specificite basse, pour que les cartes puissent la
   completer dans leur propre regle avec leurs durees de survol. */
.reveal{transition:opacity .7s ease, translate .7s ease}
html.reveal-actif .reveal{opacity:0;translate:0 24px}
html.reveal-actif .reveal.visible{opacity:1;translate:0 0}

/* Titre de section centre, avec sa marge basse. */
.section-titre{
  text-align:center;
  margin-bottom:var(--sp-xl);
}

/* Note de bas de bloc, sous-texte. */
.note{
  margin-top:var(--sp-lg);
  font-size:14px;
  font-weight:300;
  color:var(--dim);
  text-align:center;
}


/* --------------------------------------------------------------------------
   5. En-tete, aligne a gauche, centre verticalement sur 88vh

   Le reste du site est centre horizontalement : titres de section, tuiles,
   cartes et bloc de contact. L'ecart est volontaire, il distingue l'entree du
   corps de la page.
   -------------------------------------------------------------------------- */

.hero{
  min-height:88vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--sp-2xl) 0;
  text-align:left;
}

/* Le bloc ne porte plus qu'un enfant, le wordmark. Il reste en flex parce que
   c'est justify-content qui l'aligne, a gauche ici, recentre par .erreur .brand
   et par .legal-tete .brand. Le gap a ete supprime avec le symbole, le
   14 aout 2026 : il n'y a plus deux enfants entre lesquels espacer.
   La regle .logo, qui dimensionnait le symbole, a disparu le meme jour. Elle
   ne servait plus qu'a 404.html, derniere page a le porter. */
.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:var(--sp-2xl);
}

.wordmark{
  font-family:var(--serif);
  font-size:21px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--title);
}

/* Le wordmark renvoie a l'accueil. Le lien est a l'interieur du span : la
   typographie reste portee par .wordmark, et le soulignement global des liens
   se neutralise sur l'element qui le produit. Enveloppe a l'exterieur, la
   decoration de l'ancetre se propagerait au span sans pouvoir etre effacee.
   Meme motif que a.btn en section 11. Rendu inchange : couleur heritee de
   .wordmark, pas de soulignement au repos ni au survol. */
.wordmark a{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

/* Liens du pied de page en retrait au repos, distincts au survol. Meme motif
   que .wordmark a : la decoration se neutralise sur l'element qui la produit,
   la regle globale a{} n'est pas touchee.
   Les deux etats vont ensemble et ne se separent pas. Au repos le lien prend
   --dim, la couleur du bloc, et perd son trait : il se fond dans le pied de
   page. Au survol il remonte en --title et retrouve son soulignement, donc les
   deux marques de lien du site reviennent en meme temps.
   Consequence a connaitre : le soulignement portant a lui seul la distinction
   des liens, celui-ci n'en a aucune au repos, et le survol n'existe pas sur
   ecran tactile. Le lien des mentions legales est alors le seul repere de
   l'article 6 de la LCEN, sans marque visuelle sur mobile.
   La regle vaut aussi pour le pied de page de mentions.html, qui porte la meme
   classe autour d'un lien de retour a l'accueil. */
.footer a{
  color:var(--dim);
  text-decoration:none;
  cursor:pointer;
}
.footer a:hover{color:var(--title);text-decoration:underline}

/* Declaration unique du H1 de l'en-tete : marge basse et entree en cascade.
   La keyframe fadeUp est definie plus bas, avec les trois autres retards. */
.hero h1{
  margin-bottom:var(--sp-lg);
  opacity:0;
  animation:fadeUp .9s .35s forwards;
}

/* Un seul mot du titre en italique, le verbe qui porte la promesse.
   GRAISSE 600 ET NON 700, ET C'EST LA SEULE VALEUR POSSIBLE. Lora n'existe en
   italique qu'en 600 : lora-600i-v2.woff2, il n'y a pas de 700 italique. Le
   style etant apparie avant la graisse, demander 700 italique faisait servir
   le 600 italique sans le dire. La regle nomme donc la graisse reellement
   servie. Ne pas remettre 700 en croyant aligner sur le titre : cela ne
   changerait rien au rendu et rendrait de nouveau la feuille mensongere. */
.hero h1 em{
  font-style:italic;
  font-weight:600;
  color:var(--title);
}

/* Largeur de lecture conservee, mais alignee a gauche : pas de marge auto. */
.lead{
  max-width:620px;
}
.lead + .lead{margin-top:var(--sp-md)}

.tagline{
  margin-top:var(--sp-xl);
  font-size:13px;
  font-weight:700;
  letter-spacing:1.8px;
  color:var(--accent);
}

/* Entree en cascade, portee du site principal a l'identique : meme keyframe,
   meme duree de 0,9s, memes retards echelonnes de 0,15s. Le retard du H1, a
   0,35s, est porte par sa propre declaration plus haut.
   Le wordmark n'est pas anime : sur le site principal le logo est dans la
   navigation et reste present d'emblee.
   fill-mode forwards, donc l'element garde l'etat final. Sous mouvement
   reduit la neutralisation est ecrite en clair dans la derniere section. */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

.hero .lead:nth-of-type(1){opacity:0;animation:fadeUp .9s .5s forwards}
.hero .lead:nth-of-type(2){opacity:0;animation:fadeUp .9s .65s forwards}
.hero .tagline{opacity:0;animation:fadeUp .9s .8s forwards}


/* --------------------------------------------------------------------------
   6. Des questions legitimes
   Tuiles, comme la section des sujets. Le filet vertical d'accent a ete
   remplace par l'encadrement de la tuile.

   Les trois traitements de label de la charte, A, B et C, etaient definis ici.
   Aucune page ne les employait depuis la disparition des noms de formules :
   supprimes le 12 aout 2026. Leurs specifications restent dans CLAUDE.md, a
   reecrire le jour ou une page en aura besoin.
   -------------------------------------------------------------------------- */

.questions{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-md);
}

.questions li{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:24px 28px;
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:18px;
  color:var(--accent);
  line-height:1.45;
  text-align:center;
  transition:border-color .3s ease, background-color .3s ease, opacity .7s ease, translate .7s ease;
}

/* Bordure d'accent au survol, comme sur le site principal. Aucun deplacement :
   un soulevement promettrait un clic qui n'existe pas. */
.questions li:hover{
  border-color:var(--accent);
  background:var(--card-survol);
}

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


/* --------------------------------------------------------------------------
   7. Notre cadre, anciennement Ce que nous ne faisons pas
   Cartes encadrees. Aucune puce, aucun tiret, aucun marqueur : le texte porte
   deja la negation. Aucun rouge non plus : --red et --green ont ete supprimees
   des variables, elles n'existent pas pour l'univers sombre.
   -------------------------------------------------------------------------- */

.exclusions{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-md);
}

.exclusion{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:28px;
  text-align:center;
  /* Graisse 500 la ou l'echelle donne 400 pour le corps. Divergence assumee et
     consignee dans CLAUDE.md : ces quatre lignes sont le contenu entier de la
     section, pas du texte courant. */
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  transition:border-color .3s ease, background-color .3s ease, opacity .7s ease, translate .7s ease;
}

/* Meme traitement que les questions. */
.exclusion:hover{
  border-color:var(--accent);
  background:var(--card-survol);
}

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


/* --------------------------------------------------------------------------
   8. Les formules
   -------------------------------------------------------------------------- */

/* Filet d'ouverture en accent, seul lime permanent hors du prix, de la tagline
   et des boutons. Les bordures de cartes ne passent au lime qu'au survol. */
.formules{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-md);
  border-top:2px solid var(--accent);
  padding-top:var(--sp-lg);
}

/* Traitement de carte commun au site. Aucun soulevement : depuis le
   remplacement de la grille de six formules par des cartes de texte, plus aucun
   bloc de contenu ne se souleve au survol. Le bouton de retour en haut le fait
   encore, mais c'est une commande, pas un bloc : le soulevement y promet
   justement le clic qui existe. */
.formule{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:28px;
  transition:border-color .3s ease, background-color .3s ease, opacity .7s ease, translate .7s ease;
}

.formule:hover{
  border-color:var(--accent);
  background:var(--card-survol);
}

.formule h3{margin-bottom:var(--sp-sm)}

/* Bordure lime permanente, seule carte du site dans ce cas. Motif : la
   distinction de ce bloc ne reposait que sur le survol, qui n'existe pas au
   doigt. Sur mobile la carte n'avait donc aucune marque, les trois cartes y
   faisant la meme largeur.
   2px, comme le filet d'ouverture de la section et le cercle du curseur : la
   feuille ne connait que ces deux epaisseurs de trait lime, on n'en cree pas
   une troisieme. Le survol n'y ajoute plus que le fond, la bordure y etant
   deja au maximum ; c'est voulu, l'etat au repos est ici plus fort que l'etat
   survole des autres cartes.
   ECART A LA CHARTE, assume : CLAUDE.md limite l'accent a sept emplacements au
   repos et exclut toute bordure. Celui-ci est le huitieme. */
.formule--pleine{
  border-width:2px;
  border-color:var(--accent);
  /* 27 = 28 - 1. La bordure prend 1px de plus de chaque cote, le padding le
     rend : encart total inchange a 29px. La carte garde exactement la hauteur
     et la mesure de texte qu'elle avait a 1px, et rien ne descend de 2px. */
  padding:27px;
}

/* Mention placee au-dessus du montant : c'est elle qui qualifie le prix, elle
   doit etre lue avant lui. */
.f-avant{
  font-size:14px;
  font-weight:400;
  color:var(--dim);
  margin-bottom:4px;
}

/* 44px, hors du barreme de la charte qui donne 22 a 32px pour un prix.
   Divergence assumee et consignee dans CLAUDE.md : le barreme visait six prix
   alignes dans une liste, il n'en reste qu'un sur toute la page et c'est lui
   qui porte la section. */
.f-prix{
  font-family:var(--serif);
  font-size:44px;
  font-weight:700;
  line-height:1.1;
  color:var(--accent);
}

.f-unite{
  margin-top:2px;
  font-size:14px;
  font-weight:400;
  color:var(--dim);
}

/* Sous-texte de l'echelle : Inter 14px, 400, --dim. Etait a 15px, taille que
   l'echelle ne connait pas, ramene le 12 aout 2026. */
.f-note{
  margin-top:var(--sp-md);
  padding-top:var(--sp-md);
  /* Filet de separation. Sur fond sombre il est plus clair que la bordure de
     carte, l'ordre de la charte v3.1 est retabli. */
  border-top:1px solid var(--border-light);
  font-size:14px;
  font-weight:400;
  color:var(--dim);
  line-height:1.5;
}

@media (min-width:760px){
  .formules{grid-template-columns:repeat(2,1fr)}
  /* Carte pleine largeur en tete de grille. Le socle commun vaut pour les six
     formules : il ne peut pas occuper une colonne sur deux. Seule regle de
     portee de la feuille, la grille n'en avait aucune. Modificateur de
     placement, pas un composant : la carte reste une .formule, fond, bordure,
     rayon, padding et survol compris. */
  .formule--pleine{grid-column:1 / -1}
}


/* --------------------------------------------------------------------------
   9. Notre approche
   Trois cartes en une colonne, bornees a 820px et centrees dans le conteneur.
   C'est la carte qui porte la mesure de lisibilite, plus le texte a
   l'interieur : le paragraphe remplit la carte.
   -------------------------------------------------------------------------- */

.cartes-approche{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-md);
}

.carte-approche{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:32px 36px;
  transition:border-color .3s ease, background-color .3s ease, opacity .7s ease, translate .7s ease;
}

.carte-approche:hover{
  border-color:var(--accent);
  background:var(--card-survol);
}

/* Taille et graisse viennent de la regle globale h3, 19px 600. */
.carte-approche h3{margin-bottom:var(--sp-sm)}

/* Phrase d'accroche : Inter en taille de corps, graisse 600, couleur de titre.
   Elle porte l'idee de la carte, les paragraphes qui suivent la developpent. */
.approche-accroche{
  font-size:16px;
  font-weight:600;
  color:var(--title);
  margin-bottom:var(--sp-sm);
}

/* Developpement en paragraphes courts, trois lignes au maximum. Interligne a
   1,6, un peu plus serre que le corps du site, pour que le blanc entre les
   paragraphes se lise mieux que le blanc entre les lignes.
   Aucun retour a la ligne force : la coupe est portee par les paragraphes. */
.carte-approche p{line-height:1.6}
.carte-approche p + p{margin-top:var(--sp-sm)}


/* --------------------------------------------------------------------------
   10. Les sujets abordes
   Tuiles sans marqueur.
   -------------------------------------------------------------------------- */

.sujets{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-sm);
}

/* Tuile et non carte : fond --surface, plus sombre que le --card des cartes.
   C'est cet ecart de fond qui encode la difference de niveau, l'ombre ne le
   fait plus. La section est sur --bg, la tuile reste donc detachee. */
/* Corps de l'echelle : Inter 16px, 400, --text. Etait a 15px, ramene le
   12 aout 2026. Ces onze tuiles portent le contenu de la section, pas un
   sous-texte : c'est la ligne Corps qui leur revient, et le niveau de tuile
   est deja encode par le fond et le rayon, pas par la taille du texte. */
.sujets li{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-tile);
  padding:16px 18px;
  font-size:16px;
  font-weight:400;
  color:var(--text);
  line-height:1.5;
  transition:border-color .3s ease, background-color .3s ease, opacity .7s ease, translate .7s ease;
}

/* La tuile monte d'un cran dans l'echelle des fonds, de --surface a --card,
   sans jamais depasser le niveau d'une carte. */
.sujets li:hover{
  border-color:var(--accent);
  background:var(--card);
}

@media (min-width:620px){
  .sujets{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .sujets{grid-template-columns:repeat(3,1fr)}
}


/* --------------------------------------------------------------------------
   11. Contact
   Les boutons ne contiennent aucune coordonnee. Le script les remplace par
   un lien actionnable au premier clic.
   -------------------------------------------------------------------------- */

.contact{text-align:center}

.contact-intro{margin-bottom:var(--sp-xs)}

.contact-hint{
  font-size:14px;
  font-weight:300;
  color:var(--dim);
  margin-bottom:var(--sp-xl);
}

.contact-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--sp-sm);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 var(--sp-md);
  border:0;
  border-radius:var(--radius-tile);
  background:var(--accent);
  color:var(--bg);
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow-btn);
}
.btn:hover{background:var(--accent);color:var(--bg);box-shadow:var(--shadow-btn-survol)}
.btn:active{transform:translateY(1px)}

/* Le script remplace le bouton par un lien portant la meme classe. Le lien
   herite du soulignement global, il faut le retirer ici. */
a.btn{color:var(--bg);text-decoration:none}


/* --------------------------------------------------------------------------
   12. Curseur cercle
   Porte du site principal, corrige. Le lime est ici autorise : le cercle est
   un signal d'interaction, pas un decor.

   cursor:none n'est JAMAIS pose en CSS statique. Il depend de la classe
   .curseur-cercle, que le script ajoute sur <html> apres avoir verifie le
   pointeur. Si le script echoue, est bloque ou n'est pas charge, la page garde
   son curseur natif. Sur le site principal cette regle est statique et une
   erreur JS y prive le visiteur de tout curseur.
   -------------------------------------------------------------------------- */

.curseur{
  position:fixed;
  top:0;
  left:0;
  width:18px;
  height:18px;
  border:2px solid var(--accent);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  display:none;
  transition:opacity .3s ease, transform .15s ease, border-width .15s ease;
}

/* Le cercle n'existe que si le script a valide le pointeur. */
html.curseur-cercle .curseur{display:block}
.curseur.visible{opacity:1}

html.curseur-cercle body{cursor:none}

/* Affordance de selection preservee : le curseur en I reste sur tout bloc de
   texte courant, et le script y masque le cercle. Les cartes sont couvertes
   par p et li, sauf les cartes d'approche qui sont des article. */
html.curseur-cercle p,
html.curseur-cercle li,
html.curseur-cercle h1,
html.curseur-cercle h2,
html.curseur-cercle h3,
html.curseur-cercle .carte-approche{cursor:auto}

html.curseur-cercle a,
html.curseur-cercle button{cursor:pointer}


/* --------------------------------------------------------------------------
   13. Bouton de retour en haut
   Un vrai bouton, pas un div : atteignable au clavier, avec un intitule.
   La fleche est un SVG inline, aucun glyphe Unicode : ni Lora ni Inter ne
   contiennent de fleche, elle serait rendue par une police systeme.
   -------------------------------------------------------------------------- */

.retour-haut{
  position:fixed;
  bottom:32px;
  right:32px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--accent);
  color:var(--bg);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  /* Un bouton a opacity:0 reste atteignable au clavier : sans visibility le
     visiteur au clavier tomberait sur une commande invisible. */
  visibility:hidden;
  box-shadow:var(--shadow-btn);
  transition:opacity .3s ease, visibility .3s ease, transform .2s ease, box-shadow .2s ease;
  z-index:98;
}

.retour-haut.visible{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}

.retour-haut:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-btn-survol);
}

.retour-haut svg{
  display:block;
  width:20px;
  height:20px;
}

@media (max-width:640px){
  /* Empreinte reduite et plaquee dans l'angle, le bouton reste dans la
     gouttiere des cartes sans masquer leur contenu. */
  .retour-haut{width:40px;height:40px;bottom:16px;right:16px}
  .retour-haut svg{width:18px;height:18px}
}


/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */

.footer{
  border-top:1px solid var(--border-light);
  padding:var(--sp-xl) 0;
  font-size:14px;
  font-weight:300;
  color:var(--dim);
  text-align:center;
}
.footer p + p{margin-top:var(--sp-xs)}


/* --------------------------------------------------------------------------
   15. Page 404
   -------------------------------------------------------------------------- */

.erreur{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--sp-3xl) 0;
  text-align:center;
}
.erreur .brand{justify-content:center}
.erreur h1{font-size:clamp(30px,5vw,44px);margin-bottom:var(--sp-md)}
.erreur p{max-width:52ch;margin-left:auto;margin-right:auto;margin-bottom:var(--sp-lg)}


/* --------------------------------------------------------------------------
   16. Mentions legales et confidentialite
   Seule page du site faite de prose continue. Le reste de la feuille decrit
   des composants courts, titres de section, tuiles et cartes, dont aucun ne
   convient a un texte suivi de treize rubriques : d'ou cette section, et non
   un detournement des classes de l'accueil.

   La page ne charge aucun script. Ni curseur cercle, ni retour en haut, ni
   apparition au defilement : aucune classe .reveal n'y figure, donc rien n'y
   depend d'un script pour etre visible.
   -------------------------------------------------------------------------- */

/* En-tete repris de 404.html : bloc de marque centre, symbole et wordmark.
   Pas le hero de l'accueil, qui occupe 88vh autour d'un H1 de promesse
   commerciale, hors de propos en tete d'une page juridique. Le H1 est donc
   reduit, comme celui de la 404, sans descendre sous le H2 de l'accueil. */
.legal-tete{
  padding:var(--sp-3xl) 0 var(--sp-xl);
  text-align:center;
}
.legal-tete .brand{justify-content:center}
.legal-tete h1{font-size:clamp(28px,4.5vw,40px)}

/* Date de mise a jour, sous-texte, meme traitement que .note. */
.legal-date{
  margin-top:var(--sp-md);
  font-size:14px;
  font-weight:300;
  color:var(--dim);
}

.legal{padding-bottom:var(--sp-3xl)}

/* Carte unique portant tout le texte, --card sur --bg, comme partout.
   Bornee a 820px comme les cartes d'approche : c'est la carte qui porte la
   mesure de lisibilite, pas le conteneur a 1120px.

   AUCUN SURVOL SUR CETTE CARTE, ET C'EST VOULU. La regle generale fait passer
   la bordure des cartes en --accent au survol, ce qui reste un signal parce
   que le pointeur ne couvre qu'un bloc a la fois. Ici la carte occupe la page
   entiere : le pointeur n'en sort jamais, la bordure serait lime en
   permanence, et un lime permanent cesse d'etre un etat. */
.legal-carte{
  max-width:820px;
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:var(--sp-xl) var(--sp-lg);
}

/* Titre de rubrique. En --title et non en --accent : les mentions du site
   principal mettent les leurs en or, ce serait ici un huitieme emplacement
   lime au repos. Corps reduit par rapport au H2 de l'accueil, il y a treize
   rubriques et non six sections.
   Le filet est en --border-light, plus clair que la bordure de la carte,
   comme tout filet du site. */
.legal-carte h2{
  font-size:clamp(21px,3vw,26px);
  margin-top:var(--sp-2xl);
  padding-bottom:var(--sp-sm);
  border-bottom:1px solid var(--border-light);
}
.legal-carte h2:first-child{margin-top:0}

.legal-carte h3{margin-top:var(--sp-lg)}

/* Le rythme vertical encode la structure, comme en section 4 : --sp-sm entre
   deux paragraphes d'une meme rubrique, --sp-md apres un titre. */
.legal-carte p{margin-top:var(--sp-sm)}
.legal-carte h2 + p,
.legal-carte h3 + p{margin-top:var(--sp-md)}

/* Tuile posee dans la carte : --surface, donc plus sombre que --card.
   L'echelle des fonds encode le niveau, une tuile ne remonte jamais au niveau
   de la carte qui la porte. Rayon de tuile, 12px, l'element est petit.
   Le filet vertical d'accent de la source a ete supprime, pas transpose : du
   lime au repos hors des sept emplacements. */
.legal-bloc{
  margin-top:var(--sp-md);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-tile);
  padding:var(--sp-md);
}
.legal-bloc p:first-child{margin-top:0}

/* Couples intitule et valeur. Le libelle en --title, la valeur en --text :
   la hierarchie passe par la couleur, aucun marqueur n'est ajoute. */
.legal-fiche{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-xs) var(--sp-sm);
  margin:0;
}
.legal-fiche dt{font-weight:600;color:var(--title)}
.legal-fiche dd{margin:0}

/* Listes de la page. Aucun marqueur, comme partout sur le site : les enonces
   de la rubrique reglementaire commencent tous par une negation, elle porte
   deja la separation. */
.legal-carte ul{margin-top:var(--sp-sm)}
.legal-carte li + li{margin-top:var(--sp-xs)}


/* --------------------------------------------------------------------------
   17. Ecrans etroits
   -------------------------------------------------------------------------- */

@media (max-width:620px){
  .section{padding:var(--sp-2xl) 0}
  .section--suite-hero{padding-top:var(--sp-md)}
  .hero{min-height:auto;padding:var(--sp-xl) 0 var(--sp-2xl)}
  .brand{margin-bottom:var(--sp-xl)}
  .section-titre{margin-bottom:var(--sp-lg)}
  /* Toutes les cartes resserrent leur padding au meme point de rupture. */
  .exclusion,.formule,.carte-approche{padding:var(--sp-md) var(--sp-sm)}
  /* Meme compensation qu'en section 8 sur le padding resserre : 23 = 24 - 1 et
     15 = 16 - 1, encart total inchange a 25 et 17px. Sans cette ligne la regle
     ci-dessus, qui vient plus tard dans la feuille, reprend le dessus et la
     compensation disparait sous 620px. */
  .formule--pleine{padding:23px 15px}
  .contact-actions .btn{flex:1 1 100%}

  /* Mentions. La carte suit le meme resserrement que les autres, et les
     couples intitule et valeur passent en une colonne : a 320px, une colonne
     auto pour "TVA intracommunautaire" ne laisserait rien a la valeur. */
  .legal-tete{padding:var(--sp-xl) 0 var(--sp-lg)}
  .legal-carte{padding:var(--sp-lg) var(--sp-md)}
  .legal-fiche{grid-template-columns:1fr;gap:0}
  .legal-fiche dd{margin-bottom:var(--sp-sm)}
  .legal-fiche dd:last-child{margin-bottom:0}
}


/* --------------------------------------------------------------------------
   18. Mouvement reduit
   Le visiteur qui demande moins d'animation garde tous les changements d'etat,
   couleur et bordure comprises, mais aucun deplacement ni aucune duree.
   Le lissage du curseur est traite dans ui.js, il ne peut pas l'etre ici.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .retour-haut:hover{transform:none}
  .btn:active{transform:none}
  /* Ceinture et bretelles : ui.js ne pose pas .reveal-actif sous cette
     preference, mais si la preference change en cours de session, rien ne
     doit rester masque. */
  html.reveal-actif .reveal{opacity:1;translate:0 0}

  /* L'entree du hero repose sur opacity:0 plus une animation. La duree
     ecrasee a 0,01ms suffirait, mais la regle est ecrite en clair : sous
     mouvement reduit le hero est present, sans aucune entree. */
  .hero h1,
  .hero .lead:nth-of-type(1),
  .hero .lead:nth-of-type(2),
  .hero .tagline{
    animation:none;
    opacity:1;
  }
}