/* =========================================================================
   PAGE « A PROPOS » (v7, 2026-09-17)
   Chargee APRES styles.css, par cette page seulement.
   Regle tenue : aucun jeton de :root n'est redefini ici, aucune classe
   partagee n'est reecrite. Tout ce qui est propre a cette page porte le
   prefixe `ap-`. Seule exception assumee et documentee : deux marges
   internes de `.carte__tuile` et `.carte__tete`, portees UNIQUEMENT sous
   `.ap-valeurs` et `.ap-repere` (section 5).
   ========================================================================= */

/* =========================================================================
   1. L'EN-TETE : LE VISUEL A GAUCHE, LE TEXTE A DROITE (decision D)
   L'ORDRE DU DOCUMENT est texte puis visuel, et il ne change pas : c'est
   l'ordre juste sur mobile (le titre h1 et l'intro d'abord, sinon un visuel
   de 500 px pousse le propos de la page sous la ligne de flottaison) et
   pour un lecteur d'ecran. Le visuel etant purement decoratif
   (`aria-hidden`), le passer en PREMIERE COLONNE par la grille sur ecran
   large ne cree aucune divergence entre ce qui est vu et ce qui est lu.
   ========================================================================= */

/* Deux colonnes egales des 1000 px, puis le visuel prend la part large : a
   1280 et 1440 px il mesure 626 px, soit 57 % de la largeur de contenu de
   l'en-tete (1092 px) et 49 % d'une fenetre de 1280. Mesures et reserve sur
   les fenetres tres larges : section 4 du journal. */
@media (min-width: 1000px) {
  .ap-entete-page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .ap-entete-page .entete-page__texte { grid-column: 2; grid-row: 1; }
  .ap-entete-page .ap-visuel { grid-column: 1; grid-row: 1; }
}
@media (min-width: 1180px) {
  .ap-entete-page { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

.ap-visuel { display: block; }
.ap-visuel__svg {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin-inline: auto;
}
/* Sous 1000 px le visuel suit le texte, centre et borne : il illustre, il
   ne prend pas la place du propos. La borne de 520 px lui garde une
   presence sur une tablette (colonne de 680 px a 768) sans le laisser
   pousser le corps de la page trop bas. */
@media (max-width: 999px) {
  .ap-visuel__svg { max-width: 520px; }
}

/* =========================================================================
   2. LE VISUEL : L'ANNEAU ET SES SATELLITES, ETAT POSE
   Ce qui suit est l'etat FINAL, celui que voit un visiteur sans script ou
   qui demande moins de mouvement : anneau entierement trace, breche et
   point detache en place, « i » au centre, trois pastilles posees sur
   l'anneau. La section 3 n'ajoute que le chemin pour y arriver.
   ========================================================================= */

/* Les arrets du degrade de l'anneau. C'est la famille du degrade du bouton
   (meme diagonale, memes jetons d'accent), avec la borne sombre remontee
   de `--accent-profond` a `--accent-sombre` : mesure sur `--nuit-haute`,
   #0e4ddf ne tient que 2,78:1 quand un objet graphique demande 3:1, alors
   que #2f63ea tient 3,65:1. L'ecart est un choix de lisibilite, pas de
   gout ; il est releve dans le journal. */
.ap-a1 { stop-color: var(--accent-sombre); }
.ap-a2 { stop-color: var(--accent); }
.ap-a3 { stop-color: var(--accent-clair); }
.ap-a4 { stop-color: var(--accent); }

/* Le « i » est le sujet central : il est plus clair que l'anneau pour que
   l'oeil y tombe (7,8:1 sur le fond nuit au point le plus sombre). */
.ap-i1 { stop-color: var(--nuit-texte-fort); }
.ap-i2 { stop-color: var(--accent-clair); }

/* La pastille : face claire dessus, face sombre dessous (A5). Bornes
   mesurees : blanc de l'icone sur le point le plus clair 3,78:1 ; point le
   plus sombre de la pastille sur le fond nuit 3,65:1. */
.ap-p1 { stop-color: var(--accent); }
.ap-p2 { stop-color: var(--accent-sombre); }

/* Le filet de verre du haut de la pastille : la lumiere vient du dessus,
   elle s'eteint avant le bas. */
.ap-f1 { stop-color: #ffffff; stop-opacity: 0.52; }
.ap-f2 { stop-color: #ffffff; stop-opacity: 0.02; }

/* L'anneau lui-meme : epaisseur genereuse, bouts ronds, degrade en trait.
   `stroke-dasharray` vaut plus que la longueur de l'arc (1114 unites) : un
   seul tiret, donc un anneau entier tant que l'offset est nul. */
.ap-trace {
  fill: none;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-dasharray: 1120;
  stroke-dashoffset: 0;
}
.ap-anneau { stroke: url(#ap-deg-anneau); }
/* Le halo : le MEME arc, floute et pose dessous. Sur un fond nuit c'est lui
   qui donne le relief ; l'ombre portee sombre ne se lit que la ou l'anneau
   passe devant la lueur claire du bandeau. */
.ap-halo {
  stroke: var(--accent);
  opacity: 0.4;
  filter: url(#ap-flou);
}
.ap-corps { filter: url(#ap-ombre-anneau); }
.ap-detache { fill: url(#ap-deg-anneau); }

.ap-i__point, .ap-i__tige { fill: url(#ap-deg-i); }

.ap-pastille { fill: url(#ap-deg-pastille); filter: url(#ap-ombre-pastille); }
.ap-pastille__filet { fill: none; stroke: url(#ap-deg-filet); stroke-width: 1.5; }
/* Les trois signes sont ceux des trois engagements de la page, repris tels
   quels par `<use>` : jamais redessines. L'epaisseur est donnee dans le
   repere du symbole (0 a 64), ramenee a 40 unites a l'affichage, soit
   2,8 x 40/64 = 1,75 unite de viewBox, l'epaisseur des icones du site. */
.ap-sat__icone {
  fill: none;
  stroke: var(--jour);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Les trois places sur l'anneau : rayon 190, centre (260, 240), angles
   30, 120 et 215 degres. La pastille est dessinee CENTREE sur son origine
   locale, ce qui rend la translation lisible et le `scale` centre sur
   elle-meme (origine de transformation a l'origine du repere). */
.ap-sat { transform-box: view-box; transform-origin: 0px 0px; }
.ap-sat--1 { transform: translate(424.54px, 335px); }
.ap-sat--2 { transform: translate(165.00px, 404.54px); }
.ap-sat--3 { transform: translate(104.36px, 131.02px); }

/* =========================================================================
   3. LE VISUEL : L'ENTREE ET LES DEUX BOUCLES
   Tout ce qui suit est garde par `.js-anim` (posee par app.js seulement si
   le mouvement reduit n'est pas demande) ET par `.est-visible` (posee quand
   le bloc entre dans la vue). Sans l'une ou l'autre, rien ne s'applique et
   la section 2 tient l'image posee.
   Chronologie : l'anneau se trace (0,1 a 1 s), le « i » parait (0,8 a
   1,4 s), le point detache apparait (0,95 a 1,4 s), les trois pastilles
   gravitent puis se posent (1,05 a 3,75 s), et la respiration de 12 s est
   la SEULE boucle qui continue ensuite (contrat §0 : une par ecran).
   Aucune animation ne porte du sens : le texte de la page le dit deja.
   ========================================================================= */

/* L'anneau se trace lui-meme, breche comprise : l'offset part de la
   longueur entiere du dash et revient a la valeur ecrite en section 2.
   Remplissage `backwards` et non `both` : rien ne doit rester tenu apres
   la fin de l'animation (piege mesure le 17/09 sur les cartes). */
.js-anim .ap-visuel.est-visible .ap-trace {
  animation: ap-tracer 0.9s var(--courbe) 0.1s backwards;
}
@keyframes ap-tracer {
  from { stroke-dashoffset: 1120; }
  to   { stroke-dashoffset: 0; }
}

/* Le point detache : il arrive apres l'anneau, la ou la breche s'ouvre. */
.ap-detache { transform-box: view-box; transform-origin: 368.98px 84.36px; }
.js-anim .ap-visuel.est-visible .ap-detache {
  animation: ap-poser-point 0.45s var(--courbe) 0.95s backwards;
}
@keyframes ap-poser-point {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: none; }
}

/* Le « i » parait en fondu au centre. */
.ap-i { transform-box: view-box; transform-origin: 260px 240px; }
.js-anim .ap-visuel.est-visible .ap-i {
  animation: ap-paraitre 0.6s var(--courbe) 0.8s backwards;
}
@keyframes ap-paraitre {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: none; }
}

/* Le point du « i » reste POSE. Il pulsait de 1 a 1,15 en 3 s : c'etait une
   deuxieme boucle continue sur le meme ecran, en plus de la respiration de
   12 s, alors que le contrat §0 n'en autorise qu'une. Le contrat tranche pour
   la respiration, qui porte l'anneau entier ; la pulsation est retiree, avec
   ses images-cles et l'origine de transformation qui n'existait que pour elle
   (le remplissage du point, lui, vit en section 2, ligne « .ap-i__point,
   .ap-i__tige »). Le point continue d'APPARAITRE a l'entree, avec le « i ». */

/* Les trois pastilles gravitent sur une orbite exterieure ELLIPTIQUE
   (238 sur 200, l'anneau en faisant 190) sur une centaine de degres, puis
   rentrent se poser a leur place. Les cinq etapes sont des points calcules
   sur cette ellipse, pas des valeurs choisies a l'oeil. Une ellipse plus
   large que haute tient dans un cadre large : c'est ce qui permet a
   l'anneau d'occuper 77 % de la largeur du dessin au lieu de 51 %. */
.js-anim .ap-visuel.est-visible .ap-sat--1 { animation: ap-orbite-1 2.3s var(--courbe) 1.05s backwards; }
.js-anim .ap-visuel.est-visible .ap-sat--2 { animation: ap-orbite-2 2.3s var(--courbe) 1.25s backwards; }
.js-anim .ap-visuel.est-visible .ap-sat--3 { animation: ap-orbite-3 2.3s var(--courbe) 1.45s backwards; }

@keyframes ap-orbite-1 {
  0%   { opacity: 0; transform: translate(341.40px, 52.06px) scale(0.62); }
  16%  { opacity: 1; transform: translate(412.98px, 86.79px) scale(1); }
  52%  { transform: translate(492.80px, 198.42px); }
  80%  { transform: translate(463.79px, 293.75px); }
  100% { transform: translate(424.54px, 335px); }
}
@keyframes ap-orbite-2 {
  0%   { opacity: 0; transform: translate(483.65px, 308.40px) scale(0.62); }
  16%  { opacity: 1; transform: translate(442.32px, 368.56px) scale(1); }
  52%  { transform: translate(309.48px, 435.63px); }
  80%  { transform: translate(201.56px, 427.45px); }
  100% { transform: translate(165.00px, 404.54px); }
}
@keyframes ap-orbite-3 {
  0%   { opacity: 0; transform: translate(159.42px, 421.26px) scale(0.62); }
  16%  { opacity: 1; transform: translate(91.71px, 381.42px) scale(1); }
  52%  { transform: translate(23.77px, 264.37px); }
  80%  { transform: translate(62.08px, 170.12px); }
  100% { transform: translate(104.36px, 131.02px); }
}

/* La seule boucle qui reste ensuite : une respiration de 12 s de l'anneau
   et de ses pastilles ensemble, moins de deux pour cent d'amplitude. Elle
   demarre quand la derniere pastille s'est posee. */
.ap-respire { transform-box: view-box; transform-origin: 260px 240px; }
.js-anim .ap-visuel.est-visible .ap-respire {
  animation: ap-respirer 12s ease-in-out 3.9s infinite alternate;
}
@keyframes ap-respirer {
  from { transform: none; }
  to   { transform: scale(1.016); }
}

/* =========================================================================
   4. MOUVEMENT REDUIT ET IMPRESSION
   Les regles de la section 3 sont deja gardees par `.js-anim`, que app.js
   ne pose pas sous mouvement reduit : ce bloc est la ceinture en plus de
   la bretelle, pour le cas ou la classe serait posee malgre tout (autre
   harnais, autre version). Il coupe, et l'image posee de la section 2
   s'affiche telle quelle.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .js-anim .ap-visuel.est-visible .ap-trace,
  .js-anim .ap-visuel.est-visible .ap-detache,
  .js-anim .ap-visuel.est-visible .ap-i,
  .js-anim .ap-visuel.est-visible .ap-sat--1,
  .js-anim .ap-visuel.est-visible .ap-sat--2,
  .js-anim .ap-visuel.est-visible .ap-sat--3,
  .js-anim .ap-visuel.est-visible .ap-respire {
    animation: none;
  }
}
@media print {
  .js-anim .ap-visuel.est-visible .ap-trace,
  .js-anim .ap-visuel.est-visible .ap-detache,
  .js-anim .ap-visuel.est-visible .ap-i,
  .js-anim .ap-visuel.est-visible .ap-sat--1,
  .js-anim .ap-visuel.est-visible .ap-sat--2,
  .js-anim .ap-visuel.est-visible .ap-sat--3,
  .js-anim .ap-visuel.est-visible .ap-respire {
    animation: none;
  }
  /* Les filtres SVG sortent en rectangles gris chez certains moteurs
     d'impression (A5) : sur papier, l'anneau et les pastilles se passent
     de leur ombre et de leur halo. */
  .ap-corps, .ap-pastille { filter: none; }
  .ap-halo { display: none; }
}

/* =========================================================================
   5. LE CORPS : LES PASTILLES DES CARTES REPRENNENT CELLES DE L'ANNEAU
   Le vocabulaire est le meme (carre arrondi de meme rapport, degrade de la
   famille du bouton, signe au trait blanc), calibre par fond : l'anneau vit
   sur la nuit, les cartes sur le clair. Ce sont les tuiles partagees
   (`.carte__tuile`, fondations 1.4) : rien n'est redessine ici.
   ========================================================================= */

/* Une carte de valeur n'a pas de vignette au-dessus de sa tete, contrairement
   aux cartes de l'accueil : la marge de 18 px qui separait la tete de la
   vignette n'a plus d'objet et creusait un vide en haut de carte. Seule
   surcharge de cette feuille sur une classe partagee, bornee a cette page. */
.ap-valeurs .carte__tete { margin-top: 0; }
/* Entre 760 et 979 px `.grille-3` passe a trois colonnes etroites (environ
   280 px) : la tuile et le titre cote a cote ne laissent plus que 225 px au
   titre, qui se brise en deux. Sur cette plage seule, la tuile reprend sa
   place AU-DESSUS du titre, comme en v6. Mesure : titre sur une ligne a
   980 px et au-dela, sur deux en dessous si la tuile reste a cote. */
@media (min-width: 760px) and (max-width: 979px) {
  .ap-valeurs .carte__tete { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Un repere est une carte du systeme partage, mais centree : `.carte` est un
   conteneur flexible en colonne, et `text-align: center` ne centre pas un
   element flexible. Cette ligne est ce qui manque, rien de plus. */
.ap-repere { align-items: center; }
.ap-repere .carte__tuile { margin-bottom: 14px; }