/* Deplacee hors du gabarit base.pulse.php (rapport de correction, constat
   G2) : le CSP reellement emis ne porte pas de nonce pour style-src (voir
   config/security.php, headers.csp.style_src), et un <style> inline SANS
   nonce est rejete par tout navigateur qui respecte cette politique. Servie
   en fichier statique depuis public/, donc sous /assets/css/base.css, ce qui
   la met aussi en cache au lieu d'etre recompilee a chaque page.

   La palette vit dans maquette/design_handoff_zecircle/tokens.js, recopiee
   ici en variables CSS sur l'element racine : un seul endroit a mettre a
   jour si elle change, au lieu d'un style inline repete sur chaque page. */
:root {
  --paper: oklch(97% 0.014 85);
  --ink: oklch(20% 0.018 50);
  --ink-soft: oklch(46% 0.018 50);
  --accent: oklch(55% 0.14 35);
  --accent-ink: oklch(98% 0.008 80);
  --deep: oklch(26% 0.032 155);
  --deep-ink: oklch(95% 0.012 90);
  --surface: oklch(93% 0.016 80);
  --line: oklch(85% 0.012 70);
}
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing: border-box; }
input::placeholder { color: var(--ink-soft); opacity: 0.7; }
/* Les champs poses sur le fond sombre. La regle ci-dessus vise le papier
   clair : var(--ink-soft) y est un gris lisible, mais sur le vert profond il
   tombe sous 2:1, tres loin du minimum de 4,5:1, et le texte d aide devient
   invisible. Signale sur capture, mesure sur le rendu. L opacite reste sous 1
   pour que l aide se distingue encore d une valeur reellement saisie. */
.zc-champ-sombre::placeholder { color: var(--deep-ink); opacity: 0.72; }

/* Le cercle des metiers : chaque point grossit a son tour puis revient, dans
   le sens des aiguilles d une montre, en partant de celui de midi. Le decalage
   se pose en attribut style sur chaque point, seul endroit ou l ordre horaire
   est lisible a cote des coordonnees.

   transform-box: fill-box fait porter l echelle sur le centre du point et non
   sur l origine du SVG : sans lui, le point file en diagonale au lieu de
   grossir sur place. */
.zc-point-metier { transform-box: fill-box; transform-origin: center; animation: zc-point-grossit 4.2s ease-in-out infinite; }
@keyframes zc-point-grossit { 0%, 20%, 100% { transform: scale(1); } 10% { transform: scale(1.55); } }
/* Une animation qui tourne sans fin est ecartee pour qui a demande moins de
   mouvement : le point reste a sa taille, rien d autre ne change. */
.zc-nom-metier { animation: zc-nom-sappuie 4.2s ease-in-out infinite; }
/* Le nom passe au gras et a l encre pleine au meme instant que son point.
   C est lui que l oeil lit, un point de 4,5 pixels se remarque a peine : le
   nom porte l effet, le point l accompagne. Le texte est centre par
   text-anchor, donc le passage au gras l epaissit sans le deplacer. */
@keyframes zc-nom-sappuie {
  0%, 20%, 100% { font-weight: 400; fill: var(--ink-soft); }
  10% { font-weight: 700; fill: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .zc-point-metier { animation: none; } }
@media (prefers-reduced-motion: reduce) { .zc-nom-metier { animation: none; } }
.zc-faq details { border-bottom: 1px solid var(--line); }
.zc-faq summary { cursor: pointer; list-style: none; padding: 15px 28px 15px 2px; font-size: 15.5px; font-weight: 600; color: var(--ink); position: relative; }
.zc-faq summary::-webkit-details-marker { display: none; }
.zc-faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 20px; font-weight: 400; color: var(--accent); }
/* Le signe moins s'ecrit en echappement CSS : ecrit en clair, il avait ete
   corrompu par un enregistrement dans un autre encodage et ressortait en « 2 ». */
.zc-faq details[open] summary::after { content: "\2212"; }
.zc-faq p { margin: 0 0 16px; padding-right: 28px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
/* Les liens de navigation debordaient de 207 px a 360 px de large : le header
   ne se repliait pas, et un overflow-x:hidden pose plus haut le masquait, en
   cassant au passage le position:sticky du bandeau. On masque les liens sur
   petit ecran plutot que de les faire passer a la ligne, qui rallongerait le
   bandeau colle. A remplacer par un vrai menu deroulant en production. */
/* Le bouton de retour en haut porte display:flex en style inline, qui ecrase
   la regle [hidden]{display:none} du navigateur : sans ceci il reste visible
   des le chargement, alors que sa propriete hidden vaut bien true. */
#zc-haut[hidden] { display: none !important; }
.zc-nav-liens { display: flex; align-items: center; gap: 22px; }
@media (max-width: 700px) { .zc-nav-liens { display: none; } }
@keyframes zc-quarter { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; } }
@keyframes zc-ring { 0% { opacity: 0; } 14% { opacity: 1; } 82% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; } }
/* Le logo fait TROIS tours a l arrivee, puis se tait et reste allume.

   Une boucle infinie faisait mieux que de lasser : elle bougeait dans
   l en-tete de chaque page, pendant toute la lecture. Trois tours se
   remarquent, puis laissent la page tranquille.

   IL FAUT DEUX ANIMATIONS, et la raison merite d etre dite. Le cycle se
   termine a opacite NULLE, c est son fondu de sortie : l arreter sur sa
   derniere image ferait disparaitre le logo au lieu de le figer. La
   seconde animation le rallume, juste apres le dernier tour de CHAQUE
   element, et « forwards » garde cet etat pour de bon.

   Les deux valeurs d animation-delay se lisent dans l ordre des deux
   animations : le premier decale le tour, le second l allumage. Un tour
   dure 3.4s, trois tours 10.2s, donc chaque allumage se pose au decalage
   de son element plus 10.2s. */
.zc-logo path { opacity: 0; animation: zc-quarter 3.4s ease-in-out 3, zc-allume 0.45s ease-out forwards; }
.zc-logo path:nth-of-type(1) { animation-delay: 0s, 10.2s; }
.zc-logo path:nth-of-type(2) { animation-delay: 0.35s, 10.55s; }
.zc-logo path:nth-of-type(3) { animation-delay: 0.7s, 10.9s; }
.zc-logo path:nth-of-type(4) { animation-delay: 1.05s, 11.25s; }
.zc-logo circle { opacity: 0; animation: zc-ring 3.4s ease-in-out 3, zc-allume 0.45s ease-out forwards; animation-delay: 1.4s, 11.6s; }
@keyframes zc-allume { from { opacity: 0; } to { opacity: 1; } }

/* Survol « lift », standard du groupe : une carte de contenu se souleve de
   4 px et son ombre grossit. Ecrit ici plutot qu'en style-hover, comme dans
   la zone membre, pour que les deux pages portent la meme regle au meme
   endroit. Les bandes pleine largeur et les blocs sur fond sombre n'en
   portent pas : le standard exclut les cartes volontairement posees. */
.zc-lift { transition: transform 0.22s ease, box-shadow 0.45s ease; }
.zc-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,0.10); }
/* Les cartes sur fond sombre gardent le mouvement, mais une ombre noire n'y
   se verrait pas : on eclaircit legerement le fond a la place. */
.zc-lift-sombre { transition: transform 0.22s ease, background 0.22s ease; }
.zc-lift-sombre:hover { transform: translateY(-4px); background: rgba(255,255,255,0.13); }
/* Le bouton d'action se souleve moins, 2 px : il est deja saillant. */
.zc-lift-cta { transition: transform 0.16s ease, filter 0.16s ease; }
.zc-lift-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
/* Un utilisateur qui prefere moins d'animation n'en recoit aucune. */
@media (prefers-reduced-motion: reduce) {
  .zc-lift, .zc-lift:hover, .zc-lift-sombre, .zc-lift-sombre:hover,
  .zc-lift-cta, .zc-lift-cta:hover { transition: none; transform: none; }
}

/* Traduction des attributs style-hover portes par l'accueil de la maquette
   (resources/views/accueil.pulse.php) : ce n'est pas de la CSS mais une
   convention consommee par le moteur de prototypage (support.js), qui n'a
   pas d'equivalent dans le gabarit reel. Chaque effet devient ici une regle
   :hover explicite, nommee par ce qu'elle fait plutot que par la page qui
   l'emploie, pour rester reutilisable. */
.zc-hover-accent { transition: color 0.16s ease; }
.zc-hover-accent:hover { color: var(--accent); }
.zc-hover-souligne:hover { text-decoration: underline; }
.zc-cta-sombre { transition: background 0.16s ease, color 0.16s ease; }
.zc-cta-sombre:hover { background: var(--accent); color: var(--accent-ink); }
.zc-cta-clair { transition: filter 0.16s ease; }
.zc-cta-clair:hover { filter: brightness(0.95); }
@media (prefers-reduced-motion: reduce) {
  .zc-hover-accent, .zc-hover-accent:hover, .zc-cta-sombre, .zc-cta-sombre:hover,
  .zc-cta-clair, .zc-cta-clair:hover { transition: none; }
}

/* Corps des deux pages legales (mentions-legales.pulse.php,
   confidentialite.pulse.php), reprise de la feuille de style locale que
   portait chacune dans la maquette. Scopee sous .zc-corps-legal : le reste
   du site pose ses styles en attributs inline, une regle h2/p globale ici
   deborderait sur les autres pages. */
.zc-corps-legal { max-width: 820px; margin: 0 auto; padding: clamp(28px,5vw,48px) 24px 64px; }
.zc-titre-legal { font-family: Georgia,'Iowan Old Style','Palatino Linotype',serif; font-weight: 400; font-size: clamp(26px,4.5vw,34px); margin: 0 0 10px; color: var(--ink); }
.zc-chapeau-legal { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 6px; }
.zc-date-legal { font-size: 13px; color: var(--ink-soft); margin: 0 0 32px; }
.zc-corps-legal h2 { font-family: Georgia,'Iowan Old Style','Palatino Linotype',serif; font-weight: 400; font-size: 20px; margin: 34px 0 10px; color: var(--ink); }
.zc-corps-legal h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: var(--ink); }
.zc-corps-legal p { font-size: 15px; line-height: 1.7; margin: 0 0 14px; color: var(--ink); }
.zc-corps-legal ul { font-size: 15px; line-height: 1.7; margin: 0 0 14px; padding-left: 20px; color: var(--ink); }
.zc-corps-legal li { margin: 0 0 7px; }
.zc-corps-legal strong { font-weight: 600; }
.zc-corps-legal a { color: var(--accent); }
.zc-encart-legal { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 0 0 18px; }
.zc-encart-legal p:last-child { margin-bottom: 0; }
.zc-alerte-legal { border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 14px 14px 0; padding: 16px 20px; margin: 0 0 18px; }
.zc-alerte-legal p:last-child { margin-bottom: 0; }
.zc-ident-legal { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 15px; line-height: 1.6; margin: 0; }
.zc-ident-legal dt { color: var(--ink-soft); }
.zc-ident-legal dd { margin: 0; }
.zc-pied-legal { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 20px; font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 520px) { .zc-ident-legal { grid-template-columns: 1fr; gap: 2px 0; } .zc-ident-legal dd { margin: 0 0 10px; } }

/* Formulaire d'inscription (resources/views/inscription.pulse.php) et page
   de retour (message.pulse.php), tache 5. .zc-champ et .zc-etiquette
   reprennent a l'identique le style local que portait
   maquette/design_handoff_zecircle/zone-membre.html, pour que ce premier
   formulaire du site et la future zone membre partagent le meme rendu. */
.zc-champ { width: 100%; font-family: inherit; font-size: 15px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.zc-etiquette { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.zc-form-inscription { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.zc-champ-bloc { display: flex; flex-direction: column; }
.zc-champ-ligne { display: flex; flex-wrap: wrap; gap: 12px; }
.zc-aide-champ { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 0; }
.zc-bouton-inscription { align-self: flex-start; border: none; font-family: inherit; font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 22px; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.zc-message-inscription { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0 0 20px; max-width: 640px; }
/* Piege anti-robot (App\Http\Formulaire::CHAMP_POT_DE_MIEL) : masque par
   CSS, jamais par type="hidden", qu'un robot sait reperer et eviter. */
.zc-piege { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* La pastille « Gratuit » du bandeau d accueil. Elle porte l argument le plus
   court de la page, et elle est petite : sans appel, l oeil part droit au
   titre et ne la lit jamais. Trois battements au chargement, puis plus rien.
   Une boucle infinie ferait le contraire de ce qu on cherche : au bout de
   quelques secondes elle cesse d etre une information et devient une gene qui
   suit le lecteur pendant qu il lit le reste.

   Le halo se dilate en meme temps que l echelle et s efface avant la fin du
   cycle, pour que l etat d arrivee soit exactement l etat de repos : le
   fill-mode « both » gele cet etat au lieu de rendre la main sur un demi-pas.
   L echelle ne deplace pas la ligne, transform ne relance pas la mise en
   page, la phrase qui suit reste ou elle est. */
.zc-pastille-gratuit { animation: zc-pastille-appel 1.5s ease-out 0.5s 3 both; }
@keyframes zc-pastille-appel {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 oklch(55% 0.14 35 / 0.4); }
  16%  { transform: scale(1.13); box-shadow: 0 0 0 5px oklch(55% 0.14 35 / 0.28); }
  38%  { transform: scale(1);    box-shadow: 0 0 0 13px oklch(55% 0.14 35 / 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 oklch(55% 0.14 35 / 0); }
}
/* Meme egard que pour le cercle des metiers : qui a demande moins d animation
   recoit une pastille immobile, qui reste parfaitement lisible. */
@media (prefers-reduced-motion: reduce) { .zc-pastille-gratuit { animation: none; } }

/* Le logo apparait quart par quart, et ses paths partent donc d une opacite
   NULLE. Couper l animation sans rendre l opacite le ferait disparaitre : la
   regle ci-dessous doit toujours porter les deux declarations ensemble.

   Sans elle, qui a demande moins de mouvement voyait le logo clignoter en
   boucle sur CHAQUE page du site, puisque l animation est infinie et que
   prefers-reduced-motion n annule rien tout seul. */
@media (prefers-reduced-motion: reduce) {
  .zc-logo path, .zc-logo circle { animation: none; opacity: 1; }
}