/* ==========================================================================
   Finitions — la couche de détail qui sépare un bon site d'un site soigné.

   PRINCIPE
   Rien ici ne touche au contenu ni à la mise en page. Ce fichier n'ajoute que
   des états : ce qui se passe au survol, ce qui se passe quand on fait défiler.
   Il s'appuie sur les jetons déjà définis par le site — --shadow-card-hover,
   --ease-out, --dur-base — pour que les effets aient l'air d'avoir toujours
   été là plutôt que d'avoir été posés par-dessus.

   SÛRETÉ
   Tout ce qui masque quelque chose est enfermé sous [data-fx-actif], attribut posé
   par finitions.js — un attribut, pas une classe : React réécrit la classe de
   <html> à l'hydratation. Sans JavaScript, la page s'affiche comme avant.

   POURQUOI TANT DE « IMPORTANT »
   Les pages posent leurs styles en ligne, et le site anime déjà certains
   survols par du JavaScript qui écrit, lui aussi, en ligne. Une feuille de
   style ordinaire perd contre cela. Les déclarations de survol sont donc
   marquées : c'est le seul moyen pour une couche ajoutée de passer devant, et
   c'est sans risque puisqu'elle ne décrit que des états transitoires.

   MOUVEMENT
   Un visiteur qui a demandé moins d'animations à son système n'en reçoit
   aucune — les apparitions deviennent instantanées, les survols gardent leurs
   changements de couleur, qui ne sont pas du mouvement.
   ========================================================================== */

:root {
  --fx-lift: -3px;
  --fx-dur: 520ms;
}

/* --------------------------------------------------------------------------
   1. Apparition au défilement
   Un léger glissement vers le haut avec un fondu. 12 px, pas davantage : on
   veut que l'œil sente l'arrivée, pas qu'il la regarde.
   -------------------------------------------------------------------------- */
[data-fx-actif] [data-fx-reveal] {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition:
    opacity var(--fx-dur) var(--ease-out),
    transform var(--fx-dur) var(--ease-out);
  transition-delay: var(--fx-delai, 0ms);
  will-change: opacity, transform;
}

[data-fx-actif] [data-fx-reveal="vu"] {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

/* --------------------------------------------------------------------------
   2. Cartes
   Le repère du bon niveau : on soulève de trois pixels. En dessous ça ne se
   voit pas, au-dessus la page se met à sauter sous le curseur.
   -------------------------------------------------------------------------- */
[data-fx-actif] [data-fx~="carte"] {
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}

[data-fx-actif] [data-fx~="carte"]:hover {
  transform: translateY(var(--fx-lift)) !important;
  box-shadow: var(--shadow-card-hover) !important;
  border-color: var(--blue-200) !important;
}

/* Une carte cliquable mérite d'être un peu plus vive qu'une carte muette. */
[data-fx-actif] a[data-fx~="carte"]:hover {
  border-color: var(--blue-300) !important;
}

[data-fx-actif] [data-fx~="carte"]:active {
  transform: translateY(-1px) !important;
  transition-duration: var(--dur-fast);
}

/* --------------------------------------------------------------------------
   3. La flèche des liens
   Elle avance de quatre pixels. C'est le détail qui donne l'impression que le
   lien répond, sans rien déplacer autour.
   -------------------------------------------------------------------------- */
[data-fx-actif] [data-fx~="pointe"] {
  transition: transform var(--dur-base) var(--ease-out);
}

/* Le « important » vise un cas précis : l'accueil pose un transform en ligne
   sur sa flèche, et un style en ligne l'emporte sur une feuille. */
[data-fx-actif] [data-fx~="fleche"]:hover [data-fx~="pointe"] {
  transform: translateX(4px) !important;
}

/* --------------------------------------------------------------------------
   4. Les images
   Un agrandissement de 3 % à l'intérieur de son cadre. Lent — 600 ms — pour
   que ce soit un mouvement de fond, pas un sursaut.
   -------------------------------------------------------------------------- */
[data-fx-actif] [data-fx~="media"] img {
  transition: transform 600ms var(--ease-out);
}

[data-fx-actif] [data-fx~="media"]:hover img,
[data-fx-actif] [data-fx~="carte"]:hover [data-fx~="media"] img {
  transform: scale(1.03) !important;
}

/* --------------------------------------------------------------------------
   5. Les boutons
   Même montée que les cartes, plus une ombre colorée sur le bouton principal.
   -------------------------------------------------------------------------- */
[data-fx-actif] [data-fx~="bouton"] {
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
}

[data-fx-actif] [data-fx~="bouton"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-button) !important;
}

[data-fx-actif] [data-fx~="bouton"]:active {
  transform: translateY(0) !important;
  transition-duration: var(--dur-fast);
}

/* --------------------------------------------------------------------------
   6. L'en-tête
   Tant qu'on est en haut, l'en-tête se fond dans la page. Dès qu'on descend,
   il se détache par une ombre — on comprend qu'il flotte au-dessus du contenu.
   -------------------------------------------------------------------------- */
.hd {
  transition: box-shadow var(--dur-slow) var(--ease-standard);
}

[data-fx-defile] .hd {
  box-shadow: 0 1px 0 var(--border-card), 0 10px 30px -22px rgba(11, 19, 84, .5);
}

/* --------------------------------------------------------------------------
   7. Les liens de navigation
   Un trait qui se déploie depuis la gauche. Il est en position absolue, donc
   rien ne bouge autour quand il apparaît.
   -------------------------------------------------------------------------- */
[data-fx-actif] [data-fx~="nav"] {
  position: relative;
}

[data-fx-actif] [data-fx~="nav"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--action-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

[data-fx-actif] [data-fx~="nav"]:hover::after,
[data-fx-actif] [data-fx~="nav"]:focus-visible::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   8. La barre de lecture
   Sur les articles seulement : une ligne fine en haut de l'écran qui dit où
   l'on en est. Sur une page de service, elle n'aurait rien à mesurer.
   -------------------------------------------------------------------------- */
#fx-progression {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--blue-500), var(--violet-500));
  z-index: 200;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   9. Le clavier
   Un anneau net pour qui navigue sans souris — et rien du tout au clic, où il
   serait parasite. C'est de l'accessibilité autant que de la finition.
   -------------------------------------------------------------------------- */
[data-fx-actif] a:focus-visible,
[data-fx-actif] button:focus-visible,
[data-fx-actif] input:focus-visible,
[data-fx-actif] textarea:focus-visible,
[data-fx-actif] select:focus-visible,
[data-fx-actif] [tabindex]:focus-visible {
  outline: 2px solid var(--action-primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   10. Les champs de formulaire
   -------------------------------------------------------------------------- */
[data-fx-actif] input,
[data-fx-actif] textarea,
[data-fx-actif] select {
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

[data-fx-actif] input:focus,
[data-fx-actif] textarea:focus,
[data-fx-actif] select:focus {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   11. Moins d'animations
   Le réglage système est un choix, pas une préférence à contourner. Les
   apparitions deviennent immédiates et tout mouvement cesse ; les changements
   de couleur restent, ils n'ont jamais donné le mal des transports.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-fx-actif] [data-fx-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-fx-actif] [data-fx~="carte"]:hover,
  [data-fx-actif] [data-fx~="bouton"]:hover,
  [data-fx-actif] [data-fx~="carte"]:active,
  [data-fx-actif] [data-fx~="bouton"]:active {
    transform: none;
  }

  [data-fx-actif] [data-fx~="fleche"]:hover [data-fx~="pointe"],
  [data-fx-actif] [data-fx~="media"]:hover img,
  [data-fx-actif] [data-fx~="carte"]:hover [data-fx~="media"] img {
    transform: none;
  }

  [data-fx-actif] [data-fx~="nav"]::after {
    transition: none;
  }

  #fx-progression {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12. Impression
   -------------------------------------------------------------------------- */
@media print {
  [data-fx-actif] [data-fx-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  #fx-progression {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   13. Blocs GEO — « L'essentiel » et « Pour aller plus loin / Fiche »
   Habillage visuel uniquement : le texte et le balisage lus par les moteurs
   (Google, GPTBot, PerplexityBot, ClaudeBot…) restent identiques.
   Les !important l'emportent sur les styles en ligne générés.
   -------------------------------------------------------------------------- */

/* ---- L'essentiel ---- */
section[data-geo="tldr"] {
  background: var(--surface-page) !important;
  padding: 56px 0 !important;
}
[data-geo="tldr"] > div > div {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: none !important;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 56px;
  padding: 44px 48px !important;
  border-radius: var(--radius-2xl) !important;
  border: 1px solid var(--blue-100) !important;
  background: linear-gradient(135deg, #fff 0%, #fff 35%, var(--blue-50) 100%) !important;
  box-shadow: var(--shadow-raised);
}
[data-geo="tldr"] > div > div::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120px;
  left: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 85, 242, .10), transparent 70%);
}
[data-geo="tldr"] > div > div > span {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--blue-200);
  color: var(--blue-600) !important;
}
[data-geo="tldr"] > div > div > span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action-primary);
  box-shadow: 0 0 0 4px var(--blue-100);
}
[data-geo="tldr"] h2 {
  grid-column: 1;
  margin-top: 18px !important;
  font-size: clamp(24px, 2.5vw, 30px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em;
}
[data-geo="tldr"] h2 + p {
  grid-column: 1;
  margin-top: 16px !important;
  font-size: var(--fs-body-lg) !important;
  line-height: 1.7 !important;
}
[data-geo="tldr"] ul {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  margin: 0 !important;
  padding: 6px 26px !important;
  list-style: none;
  display: block !important;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
[data-geo="tldr"] li {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 18px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-heading) !important;
}
[data-geo="tldr"] li:last-child {
  border-bottom: 0;
}
[data-geo="tldr"] li strong {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: var(--fw-extrabold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.geo-sep {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 900px) {
  section[data-geo="tldr"] { padding: 36px 0 !important; }
  [data-geo="tldr"] > div > div {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding: 28px 22px !important;
  }
  [data-geo="tldr"] ul {
    grid-column: 1;
    grid-row: auto;
    margin-top: 24px !important;
    padding: 4px 18px !important;
  }
  [data-geo="tldr"] li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
    padding: 13px 0;
  }
}

/* ---- Pour aller plus loin + Fiche d'identité ---- */
section[data-geo="fiche"]:has(details) {
  background: var(--surface-subtle) !important;
  padding: 64px 0 !important;
  border-top: 1px solid var(--border-card);
}
[data-geo="fiche"]:has(details) > div > div:first-child {
  margin-bottom: 36px !important;
}
[data-geo="fiche"]:has(details) > div > div:first-child > span {
  display: block;
  font-size: clamp(20px, 2vw, 24px) !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
  color: var(--text-heading) !important;
}
[data-geo="fiche"]:has(details) > div > div:first-child > ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px !important;
  margin-top: 18px !important;
}
[data-geo="fiche"]:has(details) li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 18px 18px 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--text-heading) !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[data-geo="fiche"]:has(details) li a::after {
  content: "→";
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
  font-weight: var(--fw-extrabold);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
[data-geo="fiche"]:has(details) li a:hover {
  transform: translateY(-2px);
  border-color: var(--blue-200);
  box-shadow: var(--shadow-card-hover);
}
[data-geo="fiche"]:has(details) li a:hover::after {
  background: var(--action-primary);
  color: #fff;
  transform: translateX(3px);
}
[data-geo="fiche"]:has(details) li a:focus-visible {
  outline: 2px solid var(--action-primary);
  outline-offset: 3px;
}

[data-geo="fiche"] details {
  padding: 0 !important;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, border-color .2s ease;
}
[data-geo="fiche"] details:hover,
[data-geo="fiche"] details[open] {
  border-color: var(--blue-200) !important;
  box-shadow: var(--shadow-raised);
}
[data-geo="fiche"] summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  font-size: var(--fs-body-lg) !important;
}
[data-geo="fiche"] summary::-webkit-details-marker { display: none; }
[data-geo="fiche"] summary::after {
  content: "";
  order: -1;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f45db' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6.5 16c.6-1.4 1.5-2 2.5-2s1.9.6 2.5 2M14 10h4M14 13.5h3'/%3E%3C/svg%3E") center / 22px no-repeat;
}
[data-geo="fiche"] summary::before {
  content: "" !important;
  order: 2;
  float: none !important;
  flex: none;
  margin: 0 6px 0 auto !important;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--action-primary);
  border-bottom: 2px solid var(--action-primary);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s ease;
}
[data-geo="fiche"] details[open] summary::before {
  content: "" !important;
  transform: translateY(2px) rotate(-135deg);
}
[data-geo="fiche"] details > p {
  margin: 0 !important;
  padding: 0 24px 0 82px;
  max-width: none !important;
  font-size: var(--fs-body-sm) !important;
}
[data-geo="fiche"] details > p:last-child {
  padding: 0 24px 22px;
  margin-top: 16px !important;
}
[data-geo="fiche"] details > div {
  margin: 20px 24px 0 !important;
}
[data-geo="fiche"] details table {
  border: 1px solid var(--border-card) !important;
  border-radius: var(--radius-lg) !important;
}
[data-geo="fiche"] details tr:nth-child(even) td {
  background: var(--surface-subtle);
}
[data-geo="fiche"] details tr:last-child td {
  border-bottom: 0 !important;
}
[data-geo="fiche"] details td {
  padding: 13px 18px !important;
  vertical-align: top;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
[data-geo="fiche"] details td:first-child {
  width: 30%;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: var(--fw-extrabold) !important;
  color: var(--blue-600) !important;
}
[data-geo="fiche"] details td a {
  color: var(--text-link);
  font-weight: var(--fw-semibold);
}

@media (max-width: 700px) {
  section[data-geo="fiche"]:has(details) { padding: 44px 0 !important; }
  [data-geo="fiche"] summary { padding: 16px 18px; gap: 12px; font-size: var(--fs-body) !important; }
  [data-geo="fiche"] summary::after { width: 36px; height: 36px; background-size: 19px; }
  [data-geo="fiche"] details > p { padding: 0 18px; }
  [data-geo="fiche"] details > p:last-child { padding: 0 18px 18px; }
  [data-geo="fiche"] details > div { margin: 16px 18px 0 !important; }
  [data-geo="fiche"] details tr,
  [data-geo="fiche"] details td { display: block; width: auto !important; }
  [data-geo="fiche"] details td:first-child { padding-bottom: 2px !important; border-bottom: 0 !important; }
  [data-geo="fiche"] details td + td { padding-top: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-geo="fiche"] li a,
  [data-geo="fiche"] li a::after,
  [data-geo="fiche"] summary::before { transition: none; }
}