/* ══════════════════════════════════════════════════════════════════════
   investiw — Feuille de style unique du site.
   Chargée par les sept pages : index, actions, macro, recherche, formation,
   investir, actualite.

   Une balise <link> fonctionne en ouverture directe (file://) : ce fichier
   partagé ne casse donc pas le double-clic sur les pages.

   Sommaire
     1. Jetons de design       7. Page accueil
     2. Base                   8. Recherche, Formation, Actualité
     3. Utilitaires            9. Page Investir
     4. Ruban de séance       10. Responsive
     5. Navigation             11. Animation
        (dont l'état de connexion et le sous-menu Fondamentaux)
     6. Pied de page
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. Jetons de design ─────────────── */
:root{
  /* Marque */
  --mauve:        #7C5CBF;   /* couleur signature */
  --mauve-fonce:  #5A3F96;   /* survol, texte mauve lisible (8,2:1 sur blanc) */
  --mauve-pale:   #EDE6FF;   /* aplats légers, pastilles */
  --mauve-voile:  #F4F0FF;   /* fonds très légers */
  --encre:        #1A1525;   /* texte principal (17:1) */
  --brume:        #6B6585;   /* texte secondaire (5,1:1) */

  /* Sémantique de marché — teintes marocaines, pas le vert/rouge de terminal */
  --hausse:       #0F6F73;   /* vert-bleu de zellige (5,4:1) */
  --baisse:       #A8324A;   /* rouge grenade, mesuré (6,4:1) */
  --baisse-voile: #F7E7EA;

  /* Neutres */
  --blanc:        #FFFFFF;
  --chaux:        #FAF8FD;   /* blanc de chaux froid — jamais de crème chaud */
  --trait:        #E7E2F2;

  /* Formes et rythme */
  --r-petit: 8px;
  --r-moyen: 10px;
  --r-grand: 12px;
  /* Réservé aux cartes qui portent une ombre : un rayon plus généreux que
     --r-grand, sans toucher à celui-ci, que douze autres éléments partagent
     (encadrés, champs, états d'attente) et qui n'ont pas à s'arrondir. */
  --r-carte: 14px;
  --largeur: 1140px;

  --titre: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Mouvement — trois durées, deux courbes, et rien d'autre.
     Tout le site s'y réfère : changer une valeur ici change le rythme
     partout, sans avoir à relire une seule règle. */
  --t-rapide: 160ms;    /* survols, changements de couleur */
  --t-douce:  220ms;    /* apparition d'un panneau, bascule d'onglet */
  --t-lente:  700ms;    /* comptage d'un nombre */
  --t-trace: 1700ms;    /* le tracé de la signature, une fois par visite */

  --sortie: cubic-bezier(.2,.7,.3,1);   /* décélère : ce qui arrive se pose */
  --entree: cubic-bezier(.4,0,.6,1);    /* symétrique : ce qui réagit au doigt */

  /* ── Ombres ──
     Elles étaient écrites en dur, huit valeurs différentes pour quatre
     usages : chaque page ajoutée en inventait une. Trois suffisent, plus
     l'anneau de focus. Une ombre porte ici une INFORMATION — cet objet est
     survolé, ce panneau flotte au-dessus du reste — jamais une décoration.

     Toutes sont teintées d'encre plutôt que de gris neutre : une ombre
     grise sur un fond légèrement mauve paraît sale. */
  --ombre-carte:    0 8px 22px rgba(26,21,37,.07);   /* carte au repos */
  /* Portée franchement plus loin qu'auparavant (0 10px 26px / .09) : les
     cartes ne se contentaient plus de leur filet, il leur fallait une vraie
     élévation au survol pour se décoller du fond. */
  --ombre-levee:    0 18px 44px rgba(26,21,37,.11);  /* carte soulevée */
  --ombre-flottant: 0 14px 34px rgba(26,21,37,.13);  /* menu, panneau superposé */
  /* Le survol d'un bouton plein se teinte de mauve : l'ombre prolonge la
     couleur de l'objet au lieu de l'assombrir. */
  --ombre-bouton:   0 4px 12px rgba(124,92,191,.26);
  --ombre-bouton-bas: 0 1px 3px rgba(124,92,191,.20);
  --anneau-focus:   0 0 0 3px rgba(124,92,191,.20);
}

/* Les personnes qui ont demandé moins de mouvement l'obtiennent d'abord ici,
   à la source : toutes les durées tombent à une valeur imperceptible. Les
   quelques animations qui doivent en plus être neutralisées dans leur forme
   (déplacements, tracé, scintillement) le sont une à une en section 11. */
@media (prefers-reduced-motion:reduce){
  :root{
    --t-rapide: 1ms;
    --t-douce:  1ms;
    --t-lente:  1ms;
    --t-trace:  1ms;
  }
}

/* ─────────────── 2. Base ─────────────── */
*{box-sizing:border-box}

body{
  margin:0;
  background:var(--blanc);
  color:var(--encre);
  font-family:var(--texte);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{
  font-family:var(--titre);
  font-weight:700;           /* Libre Baskerville n'existe qu'en 400 et 700 */
  line-height:1.22;
  margin:0;
  letter-spacing:-.015em;
}

p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}

/* Focus clavier visible sur tout élément interactif */
:focus-visible{
  outline:2px solid var(--mauve-fonce);
  outline-offset:3px;
  border-radius:2px;
}

/* ─────────────── 3. Utilitaires ─────────────── */
.wrap{width:100%;max-width:var(--largeur);margin:0 auto;padding:0 26px}

/* Chiffres tabulaires : indispensable pour que les montants s'alignent
   en colonne. Inter le propose via tnum. */
.chiffre{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* !important OBLIGATOIRE. Sans lui, n'importe quelle règle de classe posant
   un display (par exemple .fiches{display:grid}) l'emporte sur le [hidden]
   de la feuille du navigateur, et l'élément masqué reste visible.
   Bug déjà rencontré une fois sur ce projet : ne pas retirer. */
[hidden]{display:none!important}

/* Masqué à l'œil, lu par les lecteurs d'écran */
/* Texte réservé aux lecteurs d'écran : présent dans le document, invisible à
   l'œil. Sans « left:0 », cette classe faisait défiler tout le site à
   l'horizontale sur téléphone.

   Le mécanisme, mesuré le 24 septembre 2026 : ces éléments sont en
   position:absolute, donc leur bloc conteneur est le premier ancêtre POSITIONNÉ
   — jamais un simple overflow:auto. Un « Action » posé dans la dernière colonne
   d'un tableau large se retrouvait ainsi à x = 894 sur un écran de 380,
   ÉCHAPPANT au défilement de .defile qui aurait dû le contenir. Sa boîte d'un
   pixel étendait la zone défilable de la page à 895 : la page entière glissait
   de 515 pixels sous le doigt, sans qu'aucun contenu visible ne dépasse.

   « left:0 » l'ancre au bord gauche de son bloc conteneur : il ne peut plus
   jamais se poser au-delà de l'écran. clip-path double clip, qui est obsolète
   mais que gardent les navigateurs anciens. */
.hors-ecran{
  position:absolute;left:0;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}

.rubrique{font-size:.8rem;font-weight:600;color:var(--mauve-fonce);margin-bottom:9px}

/* Note discrète sous un bloc de données */
.maj{margin-top:16px;padding-top:11px;border-top:1px solid var(--trait);
  font-size:.77rem;color:var(--brume)}

/* Encart d'information */
.encart{margin-top:20px;padding:12px 16px;border-left:3px solid var(--mauve);
  background:var(--mauve-voile);font-size:.84rem;color:var(--mauve-fonce);
  border-radius:0 var(--r-petit) var(--r-petit) 0;max-width:720px}
.encart b{font-weight:600}

/* État « pas encore disponible », annoncé franchement */
.bientot-chip{display:inline-block;font-size:.74rem;font-weight:500;
  color:var(--brume);background:var(--chaux);border:1px solid var(--trait);
  border-radius:99px;padding:3px 11px}

/* ─────────────── 4. Ruban de séance ─────────────── */
.ruban{background:var(--encre);color:#D3CCE4;font-size:.78rem;line-height:1.4}
.ruban .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  padding-top:8px;padding-bottom:8px}
.etat{display:inline-flex;align-items:center;gap:7px;font-weight:500;color:var(--blanc)}
.etat i{width:6px;height:6px;border-radius:50%;background:#8C84A6;flex:none}
.etat.ouvert i{background:#41C4A2;box-shadow:0 0 0 3px rgba(65,196,162,.24)}
.ruban .sep{width:1px;height:12px;background:rgba(255,255,255,.2)}

/* ─────────────── 5. Navigation ─────────────── */
.tete{position:sticky;top:0;z-index:40;background:var(--blanc);
  border-bottom:1px solid var(--trait)}
.tete .wrap{display:flex;align-items:center;gap:30px;min-height:66px}

.marque{font-family:var(--titre);font-size:1.28rem;font-weight:700;
  letter-spacing:-.02em;flex:none;color:var(--encre)}
.marque b{font-weight:700;color:var(--mauve)}

.menu{display:flex;align-items:center;gap:24px;margin-right:auto}
.menu a{font-size:.92rem;font-weight:500;color:var(--brume);padding:3px 0;
  border-bottom:2px solid transparent;transition:color var(--t-rapide),border-color var(--t-rapide)}
.menu a:hover{color:var(--encre);border-bottom-color:var(--trait)}
.menu a[aria-current]{color:var(--encre);font-weight:600;border-bottom-color:var(--mauve)}

/* Boutons et liens */
.bouton{display:inline-block;background:var(--mauve);color:var(--blanc);
  font-family:var(--texte);font-weight:600;font-size:.92rem;padding:11px 22px;
  border:0;border-radius:var(--r-moyen);cursor:pointer;transition:background-color var(--t-rapide)}
.bouton:hover{background:var(--mauve-fonce)}

.lien{font-weight:600;font-size:.88rem;color:var(--mauve-fonce);
  border-bottom:1px solid var(--trait);padding-bottom:1px;transition:border-color var(--t-rapide)}
.lien:hover{border-bottom-color:var(--mauve)}

/* État de connexion dans l'en-tête.
   Le compte ne conditionne aucun contenu : il ne sert qu'à retrouver le
   portefeuille de démonstration. D'où un widget discret, pas un appel à
   l'action, et un poids visuel inférieur à celui du menu. */
.auth-nav{position:relative;flex:none;display:flex;align-items:center}

.auth-attente{font-size:.86rem;color:var(--trait);letter-spacing:.12em}

.auth-bouton{background:none;color:var(--mauve-fonce);font-family:var(--texte);
  font-size:.86rem;font-weight:600;padding:7px 15px;cursor:pointer;
  border:1px solid var(--trait);border-radius:var(--r-moyen);
  transition:border-color var(--t-rapide),background-color var(--t-rapide)}
.auth-bouton:hover{border-color:var(--mauve);background:var(--mauve-voile)}
.auth-bouton[aria-expanded=true]{border-color:var(--mauve);background:var(--mauve-voile)}

.auth-compte{display:flex;align-items:center;gap:12px;min-width:0}
.auth-courriel{font-size:.84rem;font-weight:600;color:var(--encre);
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-sortie{background:none;border:0;padding:0;cursor:pointer;flex:none;
  font-family:var(--texte);font-size:.8rem;color:var(--brume);
  border-bottom:1px solid var(--trait);transition:color var(--t-rapide),border-color var(--t-rapide)}
.auth-sortie:hover{color:var(--encre);border-bottom-color:var(--brume)}
.auth-sortie:disabled{opacity:.5;cursor:not-allowed}

/* Panneau déroulant. Ancré à droite pour ne jamais déborder de la fenêtre. */
.auth-panneau{position:absolute;top:calc(100% + 9px);right:0;z-index:60;
  width:min(340px,calc(100vw - 36px));padding:20px;text-align:left;
  background:var(--blanc);border:1px solid var(--trait);
  border-radius:var(--r-moyen);box-shadow:var(--ombre-flottant)}
.auth-panneau .auth-champ+.auth-champ{margin-top:13px}
.auth-panneau .auth-actions{margin-top:15px}
.auth-panneau .ajouter{flex:1 1 auto}
.auth-panneau .auth-note{margin-top:13px;padding-top:12px}

/* Connexion Google : bouton neutre (fond blanc, logo quatre couleurs), comme
   l'exigent les consignes de Google ; mêmes rayon, typo et survol que les
   champs du panneau. */
.auth-google{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:10px 16px;font-family:var(--texte);font-size:.88rem;
  font-weight:600;color:var(--encre);background:var(--blanc);
  border:1px solid #D7CBF0;border-radius:var(--r-petit);cursor:pointer;
  transition:border-color var(--t-rapide),background-color var(--t-rapide)}
.auth-google:hover{border-color:var(--mauve);background:var(--mauve-voile)}
.auth-google:disabled{opacity:.5;cursor:not-allowed}
.auth-google svg{width:18px;height:18px;flex:none}
.auth-ou{display:flex;align-items:center;gap:10px;margin:14px 0;
  font-size:.78rem;color:var(--brume)}
.auth-ou::before,.auth-ou::after{content:"";flex:1;border-top:1px solid var(--trait)}
.auth-panneau .auth-champ[hidden]+.auth-champ{margin-top:0}
.auth-aide{margin-top:6px;font-size:.76rem;line-height:1.45;color:var(--brume)}

/* Écran bloquant « Choisissez votre pseudo » : au-dessus de tout, y compris
   de l'en-tête collant (z-index 40) et de son panneau (60). */
.pseudo-voile{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;padding:16px;background:rgba(26,21,37,.55);overflow-y:auto}
.pseudo-voile[hidden]{display:none}
.pseudo-boite{width:min(420px,100%);padding:26px;background:var(--blanc);
  border-radius:var(--r-carte);box-shadow:var(--ombre-flottant)}
.pseudo-boite h2{font-size:1.3rem;margin-bottom:8px}
.pseudo-texte{font-size:.88rem;color:var(--brume);margin-bottom:18px}
.pseudo-sortie{margin-top:14px;padding-top:12px;border-top:1px solid var(--trait);
  font-size:.8rem;color:var(--brume)}
body.pseudo-requis{overflow:hidden}

/* ─────────────── 6. Pied de page ─────────────── */
.pied{border-top:1px solid var(--trait);background:var(--chaux);
  padding:34px 0 42px;margin-top:70px}
.pied .wrap{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;
  align-items:flex-start}
.pied .marque{font-size:1.1rem}
.mentions{font-size:.8rem;color:var(--brume);max-width:560px}
.mentions span{display:block;margin-top:7px}

/* ══════════════ 6b. BANDEAU D'OUVERTURE ══════════════

   Le seul moment de couleur forte de chaque page : un bandeau encre qui
   porte le titre, texturé d'un zellige à huit branches tracé en SVG. Tout
   ce qui suit garde le fond clair.

   Le motif est une TEXTURE, pas un décor : à 14 % d'opacité et fondu vers
   le bas par un masque, il se devine plutôt qu'il ne se regarde. Un zellige
   lisible au premier coup d'œil parlerait plus fort que le titre.

   Il est posé en ::before plutôt qu'en second calque de background, pour
   qu'il puisse porter son propre masque sans emporter le dégradé avec lui.

   Ce bandeau est un FRÈRE de <main>, jamais son enfant : il lui faut toute
   la largeur de la fenêtre, alors que <main class="wrap"> est plafonné à
   --largeur. Son contenu retrouve cette largeur par un .wrap intérieur. */
.bande-encre{position:relative;overflow:hidden;color:#fff;
  padding:64px 0 56px;
  background:
    radial-gradient(circle at 15% -10%, rgba(124,92,191,.35), transparent 55%),
    linear-gradient(180deg, var(--encre) 0%, #16111F 100%)}
.bande-encre::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%237C5CBF' stroke-width='1'%3E%3Cpath d='M42 4 L52 16 L68 16 L68 32 L80 42 L68 52 L68 68 L52 68 L42 80 L32 68 L16 68 L16 52 L4 42 L16 32 L16 16 L32 16 Z'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.14;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%)}
/* Le contenu repasse au-dessus de la trame. */
.bande-encre .wrap{position:relative}

/* Variante des pages secondaires : même motif, moins de hauteur. L'accueil
   garde la version haute, c'est la seule page qui a droit à ce souffle. */
.bande-encre.compacte{padding:44px 0 40px}

/* L'accueil seul porte le chevauchement des cadres. Il lui faut donc, sous
   son dernier paragraphe, la hauteur que les cartes vont mordre — sans quoi
   elles se posent sur le texte au lieu de mordre sur du vide. */
.bande-encre.une{padding-bottom:96px}

/* Le bloc de titre perd ses marges propres : c'est le bandeau qui donne
   désormais la respiration verticale, sinon les deux s'additionnent. */
.bande-encre .intro,
.bande-encre .une{padding:0;margin:0}
.bande-encre h1{color:#fff}
/* Doublées par le conteneur .intro : sans cela, la règle de couleur des
   paragraphes ci-dessous, plus spécifique, les ramènerait toutes deux au
   même lavande et ferait disparaître la nuance propre à chacune. */
.bande-encre .rubrique,
.bande-encre .intro .rubrique{color:#C6B8EF}
/* Le fil d'Ariane de la fiche valeur vit dans .rubrique : ses liens doivent
   suivre la même éclaircie que le reste du bandeau. */
.bande-encre .rubrique a,
.bande-encre .lien{color:#DCD2F5;border-bottom-color:rgba(255,255,255,.3)}
.bande-encre .lien:hover{border-bottom-color:#DCD2F5}
/* .intro p et .une p posent var(--brume) plus bas dans ce fichier, à
   spécificité égale (0,1,1) : par la seule position, ils l'emportaient et le
   texte du bandeau tombait à 3,2:1 sur l'encre — illisible. Nommer le
   conteneur porte ces sélecteurs à (0,2,1) et règle la question sans
   déplacer de bloc ni recourir à !important. */
.bande-encre p,
.bande-encre .intro p,
.bande-encre .une p{color:#C9BEE0}
.bande-encre .chapo{font-size:1.05rem;max-width:52ch;line-height:1.55;
  margin-top:14px}
/* Le mauve de la signature disparaîtrait sur l'encre : elle s'éclaircit,
   sans changer de famille. */
.bande-encre .signature line{stroke:#B39DDB}
/* La mention de place, en brume sur fond clair, tomberait à 3,2:1 sur
   l'encre. Même correction que pour les paragraphes. */
.bande-encre .fiche-place{color:#B9AFD6}
/* Un encart garde son filet, mais en clair — le mauve plein s'y éteindrait. */
.bande-encre .encart,
.bande-encre .intro .encart{border-left-color:#8E74CE;
  background:rgba(255,255,255,.05);color:#D3C9E8}
.bande-encre .encart b{color:#fff}

@media (max-width:700px){
  .bande-encre{padding:44px 0 40px}
  .bande-encre.compacte{padding:34px 0 30px}
}

/* ══════════════ 7. PAGE ACCUEIL ══════════════ */
.une{padding:44px 0 0}
.une h1{font-size:clamp(1.7rem,3.3vw,2.4rem);max-width:17ch}

/* Deux colonnes de largeur égale : l'indice à gauche, la veille à droite.
   align-items:stretch (implicite) donne aux deux cadres la même hauteur,
   celle du plus haut — ici la colonne du graphique. */
/* Marge négative : les deux cadres remontent sur le bandeau d'encre et le
   chevauchent d'une quarantaine de pixels. C'est ce léger débord qui les
   fait flotter au-dessus du bandeau au lieu de commencer sagement après lui.
   Sous 820px le bandeau se raccourcit et le chevauchement est annulé plus
   bas : à cette largeur il mangerait le chapô. */
.une-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:-44px;
  position:relative;z-index:2}
.une-duo>.cadre{margin-top:0;display:flex;flex-direction:column}
/* Carte Actualité masquée (aucun Weekly publié) : le MASI prend toute la
   largeur. [hidden] doit battre le display:flex ci-dessus. */
.une-duo.une-solo{grid-template-columns:1fr}
.une-duo>.cadre[hidden]{display:none}

/* Le duo remontant de 44px, tout ce qui le suit remontait d'autant et venait
   se coller sous les cadres. Cette section rend l'air repris. */
.marche{margin-top:58px}

/* Cadre : traitement réservé aux blocs de données encadrés */
/* L'ombre est portée AU REPOS et non plus seulement au survol : un filet
   d'un pixel ne suffisait pas à décoller la carte du fond de chaux. Le
   survol ne fait plus qu'accentuer ce qui est déjà là. */
.cadre{margin-top:26px;border:1px solid var(--trait);border-radius:var(--r-carte);
  overflow:hidden;background:var(--blanc);box-shadow:var(--ombre-carte);
  transition:box-shadow var(--t-douce) var(--sortie)}
.cadre:hover{box-shadow:var(--ombre-levee)}
.cadre-tete{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  padding:15px 20px;border-bottom:1px solid var(--trait);background:var(--chaux)}
.cadre-tete h2{font-size:1rem}
.cadre-tete .code{font-size:.76rem;font-weight:500;color:var(--brume)}
.graphe{height:390px}
.graphe .tradingview-widget-container,
.graphe .tradingview-widget-container__widget{height:100%;width:100%}
.cadre-pied{padding:11px 20px;border-top:1px solid var(--trait);
  font-size:.82rem;color:var(--brume)}

/* Liste de veille — colonne droite de la « une ».
   flex:1 la fait occuper la hauteur restante du cadre, et min-height:0
   est indispensable pour qu'un enfant de flex puisse réellement défiler. */
.veille{flex:1;min-height:0;overflow-y:auto;padding:0 20px}
/* Les entrées de veille se signalent au survol par un filet mauve qui se
   déploie à gauche, et non par un fond ou une ombre : la liste est serrée
   dans une colonne étroite, un aplat y ferait tache à chaque déplacement
   de souris. Le décalage du texte accompagne le filet. */
.veille-carte{padding:16px 0;border-bottom:1px solid var(--trait);
  position:relative;padding-left:0;
  transition:padding-left var(--t-rapide) var(--sortie)}
.veille-carte::before{content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:2px;border-radius:2px;background:var(--mauve);
  transform:scaleY(0);transform-origin:center;
  transition:transform var(--t-douce) var(--sortie)}
.veille-carte:hover{padding-left:13px}
.veille-carte:hover::before{transform:scaleY(1)}
.veille-carte:last-child{border-bottom:0}
.veille-carte h3{font-size:.98rem;line-height:1.35}

/* ── Aperçu d'actualité de l'accueil ──
   Des renvois vers des articles publiés ailleurs. La source prend le mauve
   de marque plutôt que le vert de .serie, réservé aux rubriques maison :
   ce contenu n'est pas de nous, autant que la couleur le dise. */
.serie-source{color:var(--mauve-fonce)}
.veille-lien{color:var(--encre);text-decoration:none}
.veille-lien:hover{color:var(--mauve-fonce);text-decoration:underline;
  text-underline-offset:3px}
/* Toute la carte est cliquable, sans imbriquer le titre dans un lien qui
   engloberait le reste : l'ancre s'étend en calque. */
.veille-carte .veille-lien::after{content:"";position:absolute;inset:0}
.veille-quand{margin-top:6px;font-size:.74rem;color:var(--brume);
  font-variant-numeric:tabular-nums}
/* Chargement et absence de données : le même retrait sobre que les autres
   états vides du site. */
.veille-etat{padding:22px 0;font-size:.84rem;line-height:1.55;
  color:var(--brume)}
.veille-carte p:not(.serie){margin-top:7px;font-size:.86rem;color:var(--brume)}
.veille-carte .bientot-chip{margin-top:10px}

/* Filet de défilement discret, pour ne pas trancher avec la charte */
.veille{scrollbar-width:thin;scrollbar-color:#D8D0EC transparent}
.veille::-webkit-scrollbar{width:8px}
.veille::-webkit-scrollbar-thumb{background:#D8D0EC;border-radius:99px;
  border:2px solid var(--blanc)}
.veille::-webkit-scrollbar-track{background:transparent}

/* Les widgets TradingView insèrent un iframe dont la largeur calculée reste
   parfois bloquée à une valeur étroite, laissant un grand vide à droite.
   On impose le remplissage du conteneur. Le !important est nécessaire :
   le widget écrit ses dimensions en style inline sur l'iframe. */
.graphe iframe{width:100%!important;height:100%!important;display:block;border:0}


/* Les deux produits — traitement en aplat plein, distinct des cadres */
.produits{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}
/* Dégradé mauve très léger, du coin haut-gauche vers le blanc : la carte
   prend une lumière plutôt qu'un aplat. */
.produit{display:block;padding:32px 30px;border:1px solid var(--trait);
  border-radius:var(--r-carte);
  background:linear-gradient(155deg, var(--mauve-voile) 0%, var(--blanc) 60%);
  box-shadow:var(--ombre-carte);
  transition:border-color var(--t-rapide),
             box-shadow var(--t-douce) var(--sortie)}
/* Le survol ne repeint PLUS le fond : une couleur pleine écraserait le
   dégradé qu'on vient de poser. Il élève la carte et teinte son filet. */
.produit:hover{border-color:var(--mauve-pale);box-shadow:var(--ombre-levee)}
.produit h2{font-size:clamp(1.1rem,2.1vw,1.35rem);margin-top:2px}
.produit>p{margin-top:12px;font-size:.92rem;color:var(--brume)}
/* Une pastille fléchée remplace le soulignement : le lien devient une cible
   plutôt qu'un mot. Le soulignement est retiré — il aurait couru sous le
   cercle. La flèche est en ::before, donc décorative et hors du texte lu :
   le libellé reste seul à être annoncé. */
.produit-lien{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-size:.88rem;font-weight:600;color:var(--encre)}
.produit-lien::before{content:"→";flex:none;width:26px;height:26px;
  border-radius:50%;background:var(--encre);color:#fff;font-size:.8rem;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--t-rapide) var(--sortie),
             background-color var(--t-rapide)}
.produit:hover .produit-lien::before{transform:translateX(3px);
  background:var(--mauve-fonce)}

/* ══════════════ 8. PAGES RECHERCHE ET FORMATION ══════════════ */

/* Grille des rapports téléchargeables */
.rapports{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:20px;margin-top:34px}
/* ══════════════════════════════════════════════════════════════════════
   UNE PUBLICATION (recherche.html)

   Une page d'article, pas une carte dans une grille : il n'y a qu'un
   rapport, et son résumé se lit. La largeur de lecture est bornée à
   680 px — la même que .intro — parce qu'un paragraphe étalé sur 1140 px
   fait perdre la ligne à chaque retour chariot.
   ══════════════════════════════════════════════════════════════════════ */

.publi{margin-top:30px;border:1px solid var(--trait);
  border-left:3px solid var(--mauve);
  border-radius:0 var(--r-grand) var(--r-grand) 0;
  background:var(--blanc);overflow:hidden;
  box-shadow:var(--ombre-carte);
  transition:border-color var(--t-rapide),
             box-shadow var(--t-douce) var(--sortie)}
/* Cette règle disait --ombre-carte, soit exactement l'ombre de repos : le
   survol ne produisait donc aucun effet visible une fois l'ombre posée au
   repos. Elle monte d'un cran. */
.publi:hover{box-shadow:var(--ombre-levee)}

.publi-tete{padding:26px 30px 0}
.publi-serie{font-size:.79rem;font-weight:600;color:var(--mauve-fonce);
  margin-bottom:8px}
.publi-titre{font-size:1.45rem;line-height:1.3;max-width:760px;
  letter-spacing:-.01em}
.publi-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;
  margin-top:12px;font-size:.79rem;color:var(--brume)}
.publi-sep{color:var(--trait)}

.publi-corps{padding:6px 30px 4px}
.publi-corps p{margin-top:16px;font-size:.95rem;line-height:1.72;
  color:var(--encre);max-width:680px}
/* Le premier paragraphe porte l'essentiel : il est légèrement plus grand,
   comme un chapô. */
.publi-corps p:first-child{font-size:1rem;color:var(--encre)}

/* Le pied du bloc : l'action, et la réserve de langue juste à côté d'elle
   — pas en bas de page, où on la lirait après avoir cliqué. */
.publi-pied{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  margin-top:22px;padding:20px 30px 26px;
  border-top:1px solid var(--trait);background:var(--chaux)}
.publi-langue{display:flex;align-items:center;gap:9px;font-size:.79rem;
  color:var(--brume);max-width:420px;line-height:1.5}
/* Le code de langue en pastille : il se repère avant même d'être lu. */
.publi-drapeau{flex:none;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  color:var(--brume);background:var(--blanc);border:1px solid var(--trait);
  border-radius:4px;padding:2px 6px}

.rapport{display:flex;flex-direction:column;border:1px solid var(--trait);
  border-left:3px solid var(--mauve);border-radius:0 var(--r-grand) var(--r-grand) 0;
  padding:22px 24px;background:var(--blanc);transition:background-color var(--t-rapide)}
.rapport:hover{background:var(--chaux)}
.rapport-tete{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.rapport h2{font-size:1.08rem;line-height:1.35}
.rapport>p{margin-top:10px;font-size:.9rem;color:var(--brume);flex:1}
.rapport-pied{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--trait)}
.rapport-meta{font-size:.76rem;color:var(--brume);font-variant-numeric:tabular-nums}

/* Badges de type de publication */
.type-rapport{color:var(--mauve-fonce);background:var(--mauve-pale);
  border:1px solid var(--mauve-pale)}
.type-strategie{color:var(--blanc);background:var(--mauve);border:1px solid var(--mauve)}

/* Blocs de la page Formation */
.bloc{margin-top:56px}
.intro-bloc{margin-top:16px;font-size:.92rem;color:var(--brume);max-width:660px}

.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;margin-top:26px}
/* Les cartes de format ne mènent nulle part : elles se teintent sans se
   soulever. Un objet qui se soulève promet un clic, et il n'y en a pas. */
.format{border:1px solid var(--trait);border-radius:var(--r-grand);
  padding:22px 24px;background:var(--blanc);
  transition:border-color var(--t-rapide),background-color var(--t-rapide),
    box-shadow var(--t-douce)}
.format:hover{border-color:#D7CBF0;background:var(--chaux);
  box-shadow:var(--ombre-carte)}
.format-num{display:block;font-family:var(--titre);font-size:1.4rem;font-weight:400;
  color:#9E95B8;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums;
  transition:color var(--t-rapide)}
/* Le numéro passe au mauve : c'est le seul repère de progression de la
   série, autant qu'il réagisse. */
.format:hover .format-num{color:var(--mauve)}
.format h3{font-size:1.02rem}
.format p{margin-top:9px;font-size:.89rem;color:var(--brume)}


.intro{padding:46px 0 8px;max-width:680px}
.intro h1{font-size:clamp(1.7rem,3.3vw,2.3rem)}
.intro p{margin-top:14px;color:var(--brume);font-size:.95rem}

/* Filtres sectoriels — s'appuient sur l'attribut hidden, d'où la règle
   [hidden]{display:none!important} plus haut. */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;
  padding-bottom:20px;border-bottom:1px solid var(--trait)}
.filtre{font-family:var(--texte);font-size:.82rem;font-weight:500;
  color:var(--brume);background:var(--blanc);border:1px solid var(--trait);
  border-radius:99px;padding:6px 15px;cursor:pointer;
  transition:border-color var(--t-rapide),color var(--t-rapide),background-color var(--t-rapide)}
.filtre:hover{border-color:var(--mauve);color:var(--encre)}
.filtre[aria-pressed="true"]{background:var(--mauve);border-color:var(--mauve);
  color:var(--blanc);font-weight:600}
.filtre .n{font-variant-numeric:tabular-nums;opacity:.75;margin-left:5px}



/* Liste vide, message neutre */
.vide{margin-top:28px;padding:34px 20px;text-align:center;font-size:.9rem;
  color:var(--brume);background:var(--chaux);border:1px solid var(--trait);
  border-radius:var(--r-grand)}

/* Section pédagogique : entrées numérotées et filets, surtout pas des cartes */
/* Les modules du programme : un filet horizontal, pas une carte. Au survol,
   le numéro passe au mauve et le module se décale d'un cheveu — assez pour
   suivre du regard une longue liste, trop peu pour distraire. */
.notion{display:grid;grid-template-columns:58px 1fr;gap:24px;padding:26px 0;
  border-top:1px solid var(--trait);margin-top:22px;
  transition:padding-left var(--t-rapide) var(--sortie)}
.notion:hover{padding-left:8px}
.notion:first-of-type{margin-top:26px}
.notion .num{font-family:var(--titre);font-size:1.5rem;font-weight:400;
  color:#9E95B8;line-height:1.2;font-variant-numeric:tabular-nums;
  transition:color var(--t-rapide)}
.notion:hover .num{color:var(--mauve)}
.notion h3{font-size:1.05rem}
.notion p{margin-top:10px;font-size:.92rem;color:var(--brume);max-width:660px}
.repere{display:inline-block;margin-top:13px;font-size:.81rem;font-weight:500;
  color:var(--hausse);border-left:2px solid var(--hausse);padding-left:11px}

/* Plus fortes hausses et baisses — deux colonnes séparées d'un filet */
/* Les deux colonnes deviennent deux cartes, séparées par un vrai intervalle
   plutôt que par un filet vertical : chacune se lit comme un objet entier.
   Le padding horizontal descend sur les lignes elles-mêmes, pour que le
   survol d'une ligne puisse remplir la carte d'un bord à l'autre. */
.movers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.movers-col{background:var(--blanc);border:1px solid var(--trait);
  border-radius:var(--r-carte);box-shadow:var(--ombre-carte);overflow:hidden;
  transition:box-shadow var(--t-douce) var(--sortie)}
.movers-col:hover{box-shadow:var(--ombre-levee)}
.movers-titre{display:flex;align-items:center;gap:9px;font-size:.85rem;
  font-weight:600;padding:16px 20px 8px}
.movers-titre.up{color:var(--hausse)}
.movers-titre.down{color:var(--baisse)}
.movers-titre s{width:16px;height:2px;border-radius:2px;background:currentColor;
  text-decoration:none}
/* Une barre de couleur en bord gauche dit le sens avant même la lecture du
   chiffre : le texte teinté seul demandait de trouver le pourcentage pour
   savoir de quel côté on penche. 17 + 3 = 20, le texte reste donc aligné
   sur le titre de la carte. */
.mover{display:grid;grid-template-columns:20px 1fr auto;gap:14px;align-items:center;
  padding:11px 20px 11px 17px;border-top:1px solid var(--trait);
  border-left:3px solid transparent;
  transition:background-color var(--t-rapide)}
.mover.up{border-left-color:var(--hausse)}
.mover.down{border-left-color:var(--baisse)}
/* Le débord latéral d'antan n'a plus lieu d'être : la ligne occupe toute la
   largeur de la carte, son fond s'arrête donc naturellement sur ses bords. */
.mover:hover{background:var(--chaux)}
.mover-rang{font-family:var(--titre);font-size:.92rem;color:#847BA0;
  font-variant-numeric:tabular-nums}
.mover-nom{font-size:.9rem;font-weight:500;line-height:1.3}
.mover-nom .tick{font-size:.71rem;font-weight:600;color:var(--brume);
  background:var(--chaux);border:1px solid var(--trait);border-radius:4px;
  padding:1px 5px;margin-left:7px;font-variant-numeric:tabular-nums}
.mover-val{text-align:right;font-variant-numeric:tabular-nums}
.mover-prix{display:block;font-size:.85rem;color:var(--brume)}
.mover-var{display:block;font-size:.92rem;font-weight:600;margin-top:1px}
.mover-var.up{color:var(--hausse)}
.mover-var.down{color:var(--baisse)}

.attente{margin-top:18px;padding:26px 20px;border:1px solid var(--trait);
  border-radius:var(--r-grand);background:var(--chaux);text-align:center;
  font-size:.89rem;color:var(--brume)}

/* ══════════════ 9. PAGE INVESTIR ══════════════ */

/* Bloc de connexion — réutilise .cadre et les champs du pupitre */
.auth-corps{padding:24px}
.auth-champ{flex:1 1 220px;min-width:0}
.auth-champ label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}
.auth-champ input{width:100%;font-family:var(--texte);font-size:.9rem;
  color:var(--encre);background:var(--blanc);border:1px solid #D7CBF0;
  border-radius:var(--r-petit);padding:9px 11px;
  transition:border-color var(--t-rapide),box-shadow var(--t-rapide)}
.auth-champ input::placeholder{color:#8B82A6}
.auth-champ input:focus{outline:none;border-color:var(--mauve);
  box-shadow:var(--anneau-focus)}
.auth-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.auth-intro{font-size:.92rem;color:var(--brume);max-width:62ch}
.auth-intro strong{color:var(--encre);font-weight:600}
.auth-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--trait);
  font-size:.8rem;color:var(--brume)}

/* Identité et actions dans l'en-tête du compte */
.registre-tete{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
  justify-content:space-between;margin-top:30px;padding-bottom:12px;
  border-bottom:2px solid var(--encre)}
.registre-tete h2{font-size:1.25rem}
.compte-actuel{font-size:.83rem;color:var(--brume);margin-right:auto}
.registre-actions{display:flex;flex-wrap:wrap;gap:9px}


/* Résumé du compte */
/* Quatre cases, mais pas quatre poids égaux. « Valeur totale » et
   « Performance » sont ce qu'on vient voir ; « Espèces » et « Valeur des
   titres » n'en sont que la décomposition. Les deux premières occupent
   donc chacune une colonne et demie.
   Sous 900 px, la grille repasse à deux colonnes de poids égal : à cette
   largeur, une case et demie devient trop étroite pour son chiffre. */
.compte-resume{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:14px;margin-top:26px}
@media (min-width:900px){
  .compte-resume{grid-template-columns:1.4fr 1fr 1fr 1.4fr}
}
/* Le chiffre principal respire davantage que les trois autres. */
.compte-case.fort .compte-val{font-size:1.42rem}
/* Les quatre cases du bandeau réagissent comme les cartes du reste du site.
   Elles ne mènent nulle part : elles se teintent, elles ne se soulèvent
   pas. */
.compte-case{border:1px solid var(--trait);border-radius:var(--r-grand);
  padding:15px 18px;background:var(--blanc);
  transition:border-color var(--t-rapide),box-shadow var(--t-douce)}
.compte-case:hover{border-color:#D7CBF0;box-shadow:var(--ombre-carte)}
/* La case principale porte déjà l'aplat de marque : lui ajouter une ombre
   grise la salirait. Elle prend un halo mauve, comme la pastille de score
   la plus forte du Weekly. */
.compte-case.fort{background:var(--mauve);border-color:var(--mauve)}
.compte-case.fort:hover{border-color:var(--mauve);
  box-shadow:0 0 0 4px var(--mauve-voile)}
.compte-lib{display:block;font-size:.75rem;color:var(--brume)}
.compte-case.fort .compte-lib{color:#E4D9FF}
.compte-val{display:block;font-family:var(--titre);font-size:1.22rem;font-weight:700;
  margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.compte-case.fort .compte-val{color:var(--blanc)}
.compte-val.up{color:var(--hausse)}
.compte-val.down{color:var(--baisse)}
.compte-note{display:block;font-size:.72rem;color:var(--brume);margin-top:3px}
.compte-case.fort .compte-note{color:#D6C9F5}

/* Pupitre : passer un ordre à gauche, alimenter le compte à droite */
.pupitre{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:20px;margin-top:26px;align-items:start}
.pupitre>.cadre{margin-top:0}

.onglets{display:flex;gap:8px;padding:14px 20px 0;flex-wrap:wrap}
/* Les mêmes onglets, mais posés à même la page plutôt que dans un cadre :
   ils n'ont pas de bord à épouser, ils en portent un. */
.onglets-admin{padding:0;margin-top:28px;gap:20px;
  border-bottom:1px solid var(--trait)}
.onglets-admin .onglet{font-size:.92rem;padding:8px 2px 12px}
.onglet{font-family:var(--texte);font-size:.86rem;font-weight:600;color:var(--brume);
  background:none;border:0;border-bottom:2px solid transparent;padding:6px 2px 10px;
  cursor:pointer;transition:color var(--t-rapide),border-color var(--t-rapide)}
.onglet:hover{color:var(--encre)}
.onglet[aria-pressed="true"]{color:var(--encre);border-bottom-color:var(--mauve)}

.pupitre-corps{padding:18px 20px 20px}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px}
.champ label{display:block;font-size:.79rem;font-weight:600;margin-bottom:6px}
.champ select,
.champ textarea,
.champ input{width:100%;font-family:var(--texte);font-size:.9rem;color:var(--encre);
  background:var(--blanc);border:1px solid #D7CBF0;border-radius:var(--r-petit);
  padding:9px 11px;transition:border-color var(--t-rapide),box-shadow var(--t-rapide)}
.champ input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
/* Redimensionnement vertical seul : élargir une zone de texte déborderait
   de la grille du formulaire. */
.champ textarea{resize:vertical;min-height:110px;line-height:1.6}

/* Champ en lecture seule : il doit se voir au premier coup d'œil.
   Le masquage des flèches est nécessaire — sur un input type=number,
   readonly n'empêche pas partout de cliquer sur le sélecteur. */
.champ input[readonly]{background:var(--chaux);color:var(--brume);
  border-color:var(--trait);cursor:default}
.champ input[readonly]:focus{border-color:var(--trait);box-shadow:none}
.champ input[readonly]::-webkit-outer-spin-button,
.champ input[readonly]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.champ input[readonly][type=number]{-moz-appearance:textfield;appearance:textfield}
.champ select:focus,
.champ textarea:focus,
.champ input:focus{outline:none;border-color:var(--mauve);
  box-shadow:var(--anneau-focus)}
.champ .aide{display:block;font-size:.73rem;color:var(--brume);margin-top:5px}

/* Colonne de droite du pupitre : la courbe, puis la caisse. Les deux cartes
   s'empilent avec le même écart que celui des colonnes. */
.pupitre-colonne{display:grid;gap:20px;align-content:start;min-width:0}
.pupitre-colonne>.cadre{margin-top:0}

/* Une compétition terminée ferme la carte d'ordre : la courbe reste seule et
   prend toute la largeur plutôt que de laisser un vide à sa gauche. */
.pupitre.solo{grid-template-columns:1fr}

/* ── Courbe de performance ──
   Pas de bibliothèque : un tracé SVG, aux trois couleurs déjà en service
   pour la hausse, la baisse et le plat. Le viewBox est posé en pixels par
   le script, l'échelle reste donc 1:1 et le trait garde son épaisseur. */
.courbe-corps{padding:14px 18px 16px}
.courbe{display:block;width:100%;height:150px;overflow:visible;color:var(--brume)}
.courbe.up{color:var(--hausse)}
.courbe.down{color:var(--baisse)}
.courbe.plat{color:var(--brume)}

.courbe-trait{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.courbe-aire{fill:currentColor;opacity:.09;stroke:none}
.courbe-point{fill:currentColor;stroke:var(--blanc);stroke-width:2}
/* La ligne du zéro : un repère, pas une donnée — elle reste en retrait. */
.courbe-zero{stroke:var(--trait);stroke-width:1;stroke-dasharray:3 4}

/* Le MASI. Volontairement HORS de currentColor : celui-ci suit la
   performance du portefeuille — vert, rouge ou gris selon le jour — et
   l'indice deviendrait alors de la même couleur que la courbe qu'il sert à
   juger. Un gris fixe et un trait pointillé plus fin le posent en second
   plan, sans jamais entrer en concurrence avec le sujet. */
.courbe-trait-masi{fill:none;stroke:var(--brume);stroke-width:1.5;
  stroke-dasharray:3 3;stroke-linejoin:round;stroke-linecap:round;
  opacity:.65;display:none}

/* Un cercle par point relevé. Discrets par construction : ils donnent au
   trait sa texture — dire s'il repose sur trois relevés ou trois cents —
   sans se lire comme des données à part entière. Le dernier, valorisé en
   direct, est le seul à pleine opacité. */
.courbe-marqueur{fill:currentColor;opacity:.5}
.courbe-marqueur.vif{opacity:1}

.courbe-cle{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;
  font-size:.71rem;color:var(--brume)}
.courbe-cle-item{display:inline-flex;align-items:center;gap:6px}
.courbe-cle-pastille{width:12px;height:2px;display:inline-block;
  border-radius:1px;flex:none}
/* La pastille suit la couleur du trait qu'elle désigne, laquelle dépend du
   sens de la performance. Le SVG la tient de currentColor ; la légende vit
   en dehors du SVG et reçoit donc le même ton par une classe. */
.courbe-cle-pastille.portefeuille{background:var(--brume)}
.courbe-cle.up .courbe-cle-pastille.portefeuille{background:var(--hausse)}
.courbe-cle.down .courbe-cle-pastille.portefeuille{background:var(--baisse)}
.courbe-cle-pastille.masi{background:repeating-linear-gradient(
  90deg,var(--brume) 0 3px,transparent 3px 6px);opacity:.65}

.courbe-actuel{font-family:var(--titre);font-size:1rem;font-weight:700;
  margin-left:auto;font-variant-numeric:tabular-nums;color:var(--brume)}
.courbe-actuel.up{color:var(--hausse)}
.courbe-actuel.down{color:var(--baisse)}

/* Étiquette du zéro, posée sur son trait à l'intérieur du SVG. */
.courbe-zero-lib{font-family:var(--texte);font-size:10px;fill:#A49CBE;
  font-variant-numeric:tabular-nums}

.courbe-legende,.courbe-bornes{display:flex;justify-content:space-between;
  gap:10px;font-size:.71rem;color:var(--brume);font-variant-numeric:tabular-nums}
.courbe-legende{margin-top:9px}
.courbe-bornes{margin-top:3px}

.courbe-vide{padding:26px 4px 10px;text-align:center;font-size:.8rem;
  color:var(--brume)}
/* Rien à tracer : on retire le cadre du graphique plutôt que de montrer un
   repère vide, qui promettrait une courbe absente. */
.courbe-sans .courbe,
.courbe-sans .courbe-legende,
.courbe-sans .courbe-bornes,
.courbe-sans .courbe-cle{display:none}

.ordre-pied{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--trait)}
.ordre-total{font-size:.8rem;color:var(--brume)}
.ordre-total b{display:block;font-family:var(--titre);font-size:1.15rem;
  color:var(--encre);font-variant-numeric:tabular-nums;margin-top:2px}

.ajouter{background:var(--mauve);color:var(--blanc);border:0;font-family:var(--texte);
  font-size:.88rem;font-weight:600;padding:10px 20px;border-radius:var(--r-petit);
  cursor:pointer;white-space:nowrap;transition:background-color var(--t-rapide)}
.ajouter:hover{background:var(--mauve-fonce)}
.ajouter:disabled{opacity:.5;cursor:not-allowed}
.secondaire{background:var(--blanc);color:var(--mauve-fonce);border:1px solid var(--mauve)}
.secondaire:hover{background:var(--mauve-voile)}

/* Tableaux du portefeuille */
.defile{overflow-x:auto}
.tableau{width:100%;border-collapse:collapse;min-width:660px}
.tableau thead th{font-size:.76rem;font-weight:600;color:var(--brume);text-align:left;
  padding:12px;border-bottom:1px solid var(--trait);white-space:nowrap}
.tableau th.n,.tableau td.n{text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.tableau tbody td{padding:13px 12px;border-bottom:1px solid var(--trait);
  vertical-align:middle}
/* La ligne survolée se teinte, et son bord gauche prend le mauve : dans un
   tableau large, un simple changement de fond se perd — le filet donne un
   point d'ancrage à l'œil qui suit la ligne jusqu'au bout. */
.tableau tbody tr{transition:background-color var(--t-rapide),
  box-shadow var(--t-rapide)}
.tableau tbody tr:hover{background:var(--chaux);
  box-shadow:inset 2px 0 0 var(--mauve)}
/* La ligne « rien à afficher » n'est pas une donnée : elle ne réagit pas. */
.tableau tbody tr.rien:hover{background:none;box-shadow:none}
.titre-pos{font-weight:500;font-size:.93rem}
.titre-pos .tick{display:block;font-size:.74rem;font-weight:400;color:var(--brume);
  margin-top:2px}
.montant{font-weight:600}
.gris{color:var(--brume)}
.rien td{padding:34px 12px;text-align:center;color:var(--brume);font-size:.9rem}

.part{display:flex;align-items:center;gap:9px;justify-content:flex-end}
.part-barre{width:56px;height:5px;border-radius:3px;background:var(--trait);
  overflow:hidden;flex:none}
.part-barre i{display:block;height:100%;background:var(--mauve);border-radius:3px}
.part-pct{font-size:.83rem;color:var(--brume);font-variant-numeric:tabular-nums;
  min-width:46px;text-align:right}

.gain{font-variant-numeric:tabular-nums;font-weight:600}
.gain.up{color:var(--hausse)}
.gain.down{color:var(--baisse)}
.gain.plat{color:var(--brume)}
.gain small{display:block;font-weight:400;font-size:.76rem;opacity:.85}

.retirer{background:none;border:0;color:var(--brume);cursor:pointer;
  font-family:var(--texte);font-size:.8rem;font-weight:500;padding:4px 6px;
  border-radius:5px;transition:color var(--t-rapide),background-color var(--t-rapide)}
.retirer:hover{color:var(--baisse);background:var(--baisse-voile)}

/* Vendre depuis la ligne de portefeuille. Il mène au pupitre, il ne vend
   pas : d'où un bouton de bordure, et non l'aplat mauve qui, partout
   ailleurs sur le site, valide une opération. */
.vendre-pos{background:var(--blanc);border:1px solid var(--trait);
  color:var(--mauve-fonce);cursor:pointer;font-family:var(--texte);
  font-size:.79rem;font-weight:600;padding:5px 12px;border-radius:var(--r-petit);
  white-space:nowrap;
  transition:border-color var(--t-rapide),background-color var(--t-rapide),
    box-shadow var(--t-rapide)}
.vendre-pos:hover{background:var(--mauve-voile);border-color:var(--mauve);
  box-shadow:var(--anneau-focus)}

/* ══════════════════════════════════════════════════════════════════════
   FICHE D'UNE VALEUR (fiche-action.html)
   Aucun composant nouveau : la fiche réemploie .cadre, .compte-resume et
   .graphe. Ne sont définis ici que les quelques ajustements propres à la
   page.
   ══════════════════════════════════════════════════════════════════════ */

/* Le fil d'Ariane de la rubrique : Actions › Secteur */
.fil-sep{margin:0 7px;color:var(--trait)}

.fiche-identite{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin-top:8px}
.fiche-identite .tick{font-size:.86rem;font-weight:600;color:var(--mauve-fonce);
  background:var(--mauve-pale);border-radius:99px;padding:3px 11px}
.fiche-place{font-size:.8rem;color:var(--brume)}

/* Le secteur est un mot, pas un nombre : il ne prend ni la taille ni les
   chiffres tabulaires des trois autres cases du bandeau. */
.fiche-secteur-val{font-family:var(--texte);font-size:1rem;font-weight:600;
  line-height:1.35}

/* Un chiffre absent se montre en retrait, il ne se maquille pas. */
.fiche-absent-val{color:var(--brume)}

.fiche-duo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:20px;align-items:start}
.fiche-duo>.cadre{margin-top:26px;
  transition:border-color var(--t-rapide),box-shadow var(--t-douce)}
.fiche-duo>.cadre:hover{border-color:#D7CBF0;box-shadow:var(--ombre-carte)}

/* Le bouton « Acheter cette action » est l'action principale de la fiche :
   il mérite le traitement d'un bouton plein, halo compris. Le soulèvement
   vient déjà de la famille .ajouter, définie en 11c. */
.fiche-ordre-actions a.ajouter{box-shadow:var(--ombre-bouton-bas)}

/* La description vient d'une saisie manuelle et n'est JAMAIS interprétée
   comme du HTML : elle arrive par textContent. Les paragraphes que l'auteur
   a tapés sont rendus ici, par le CSS — c'est ce qui permet de se passer de
   <br> et donc de ne tolérer aucune balise. */
.fiche-description{font-size:.92rem;line-height:1.65;color:var(--encre);
  white-space:pre-line}
.fiche-description.fiche-vide{color:var(--brume);font-size:.87rem}

.fiche-ordre-texte{font-size:.88rem;line-height:1.6;color:var(--brume)}
.fiche-ordre-actions{margin-top:16px}
/* Le bouton d'achat est un lien : il doit se comporter comme un bouton sans
   cesser d'être un lien — clic du milieu, nouvel onglet, clavier. */
a.ajouter{display:inline-block;text-decoration:none;text-align:center}

/* ══════════════════════════════════════════════════════════════════════
   INDICATEURS MACROÉCONOMIQUES (macro.html)

   Une grille de cartes, chacune portant un graphique TradingView et un
   panneau d'explication repliable. Le traitement de surface reprend celui
   des autres cartes du site — filet, pas d'ombre — pour que la page ne
   paraisse pas venir d'ailleurs.
   ══════════════════════════════════════════════════════════════════════ */

.indics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;margin-top:22px;align-items:start}

.indic{border:1px solid var(--trait);border-radius:var(--r-grand);
  background:var(--blanc);padding:18px 20px 20px;cursor:pointer;
  transition:border-color var(--t-rapide),background-color var(--t-rapide)}
.indic:hover{border-color:#D7CBF0}
/* Ouverte, la carte s'ancre : c'est elle qu'on lit, les autres attendent. */
.indic.ouverte{border-color:var(--mauve)}

.indic-tete{display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px}
.indic-ident{min-width:0}
.indic-nom{font-size:1.05rem;line-height:1.25}
.indic-meta{margin-top:4px;font-size:.74rem;color:var(--brume)}
.indic-resume{margin-top:10px;font-size:.87rem;line-height:1.55;
  color:var(--brume)}

/* Le bouton d'ouverture : une croix qui pivote en signe moins. Il double le
   clic sur la carte — il existe pour le clavier et les lecteurs d'écran, qui
   n'ont que lui pour connaître l'état du panneau. */
.indic-bascule{flex:none;width:30px;height:30px;padding:0;
  background:var(--mauve-voile);border:1px solid var(--trait);
  border-radius:50%;cursor:pointer;position:relative;
  transition:background-color var(--t-rapide),border-color var(--t-rapide)}
.indic-bascule:hover{background:var(--mauve-pale);border-color:var(--mauve)}
.indic-croix::before,.indic-croix::after{content:"";position:absolute;
  top:50%;left:50%;background:var(--mauve-fonce);border-radius:1px}
.indic-croix::before{width:11px;height:1.5px;margin:-.75px 0 0 -5.5px}
.indic-croix::after{width:1.5px;height:11px;margin:-5.5px 0 0 -.75px;
  transition:transform var(--t-rapide) var(--sortie)}
/* Ouvert, la barre verticale se rétracte : la croix devient un moins. */
.indic.ouverte .indic-croix::after{transform:scaleY(0)}

.indic-graphe{margin-top:14px;border:1px solid var(--trait);
  border-radius:var(--r-petit);overflow:hidden;min-height:260px;
  /* Le graphique a ses propres interactions : le curseur ne doit pas
     suggérer qu'un clic ici ouvrirait le panneau. */
  cursor:default}
.indic-graphe iframe{width:100%!important;display:block;border:0}
.indic-absent{padding:110px 16px;text-align:center;font-size:.8rem;
  color:var(--brume);background:var(--chaux)}

/* ── Graphiques maison ──
   Pour les deux séries que les widgets TradingView refusent (taux directeur,
   inflation). Le cadre est celui des widgets, pour que les quatre cartes
   s'alignent ; le tracé vient du traceur partagé d'investiw.js. */
.indic-maison{padding:14px 16px 12px;background:var(--blanc);
  display:flex;flex-direction:column}

/* La lecture du dernier point. L'année compte autant que la valeur : ces
   séries ont un à deux ans de retard, l'afficher comme un chiffre du jour
   serait un contresens. */
.indic-lecture{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.indic-valeur{font-family:var(--titre);font-size:1.35rem;font-weight:700;
  color:var(--encre);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.indic-quand{font-size:.78rem;color:var(--brume)}

/* Neutre, et non vert ou rouge : il n'y a pas de gain ni de perte ici,
   contrairement à la courbe de portefeuille. Une inflation qui monte n'est
   ni bonne ni mauvaise, et le site ne le dit nulle part. */
.courbe-macro{display:block;width:100%;height:180px;
  overflow:visible;color:var(--mauve)}
.courbe-macro .courbe-trait{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.courbe-macro .courbe-aire{fill:currentColor;opacity:.1;stroke:none}
.courbe-macro .courbe-point{fill:currentColor;stroke:var(--blanc);stroke-width:2}

/* Axes (4 octobre 2026). Le texte prend --brume, 5,1:1 sur blanc : lisible
   sans voler la vedette au tracé. Grille à peine marquée ; la ligne du zéro,
   elle, est franche — c'est le repère qui sépare le positif du négatif. */
.courbe-cadre{position:relative;margin-top:10px}
.courbe-cadre[hidden]{display:none}
.courbe-macro:focus{outline:none}
.courbe-macro:focus-visible{outline:2px solid var(--mauve-fonce);outline-offset:3px;
  border-radius:var(--r-petit)}
.courbe-macro .courbe-grille-ligne{stroke:var(--trait);stroke-width:1}
.courbe-macro .courbe-zero-axe{stroke:var(--brume);stroke-width:1;opacity:.7}
.courbe-macro .courbe-tiret{stroke:#B9B1CF;stroke-width:1}
.courbe-macro .courbe-graduation,
.courbe-macro .courbe-annee{font-family:var(--texte);font-size:11px;
  fill:var(--brume);font-variant-numeric:tabular-nums}
.courbe-macro .courbe-etiquette{font-family:var(--texte);font-size:11px;
  font-weight:600;fill:var(--encre);font-variant-numeric:tabular-nums;
  paint-order:stroke;stroke:var(--blanc);stroke-width:3px;stroke-linejoin:round}
.courbe-macro .courbe-guide{stroke:var(--mauve);stroke-width:1;stroke-dasharray:2 3}
.courbe-macro .courbe-survol{fill:var(--blanc);stroke:var(--mauve-fonce);stroke-width:2}
.indic-bulle{position:absolute;z-index:2;pointer-events:none;white-space:nowrap;
  padding:5px 9px;font-size:.76rem;font-weight:600;color:var(--blanc);
  background:var(--encre);border-radius:var(--r-petit);
  font-variant-numeric:tabular-nums}
.indic-bulle[hidden]{display:none}

/* La source, sous chaque graphique maison : discrète, mais toujours là. */
.indic-source-graphe{margin-top:8px;font-size:.72rem;line-height:1.5;color:var(--brume)}

/* Série absente ou vide : on le dit à la place du graphique, on ne laisse
   pas un cadre vide dont personne ne sait s'il va se remplir. */
.indic-etat{margin:auto 0;padding:34px 6px;text-align:center;font-size:.8rem;
  line-height:1.55;color:var(--brume)}

/* Le renvoi vers TradingView. Discret : c'est un complément, pas la source
   principale de la page. */
.indic-lien{margin-top:10px;font-size:.78rem}
.indic-lien a{color:var(--mauve-fonce);text-decoration:none;
  border-bottom:1px solid var(--trait);
  transition:border-color var(--t-rapide)}
.indic-lien a:hover{border-bottom-color:var(--mauve)}

/* Le panneau d'explication. Filet mauve à gauche, comme les cartes de la
   page Recherche : c'est du texte de fond, pas une alerte. */
.indic-info{margin-top:16px;padding:14px 0 2px 16px;
  border-left:2px solid var(--mauve-pale);cursor:default}
.indic-info h4{font-size:.95rem}
.indic-info p{margin-top:9px;font-size:.86rem;line-height:1.62;
  color:var(--brume)}
.indic-info p b{color:var(--encre);font-weight:600}
.indic-source{margin-top:12px!important;padding-top:10px;
  border-top:1px solid var(--trait);font-size:.76rem!important}

/* ══════════════════════════════════════════════════════════════════════
   ACTUALITÉ+ (actualite.html) — refonte du 18 septembre 2026

   Trois niveaux, de natures très différentes. Chacun a donc sa forme, et
   c'est la forme qui dit de quoi il s'agit avant même la lecture :

     0. LE DAILY — bilan descriptif de chaque séance, généré par la base
        vers 17h ; carte blanche éditoriale, en tête de page.
     1. LE WEEKLY — le seul contenu écrit par investiw ; tout le reste
        renvoie ailleurs. Carte levée en mauve de marque, Baskerville,
        notes en jauge. C'est la voix du site, et la raison de revenir.
     2. PRESSE INTERNATIONALE — panneau en retrait sur fond de chaux, sans
        ombre, en Inter et non en Baskerville : c'est du contexte, pas de
        l'analyse locale.

   Disposition : le Daily puis le Weekly en pleine largeur, puis la presse
   sur une seule colonne, à largeur de lecture.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 0. Le sommaire d'ancres, dans le bandeau ──
   Trois sections sur une page : des ancres suffisent. Des onglets
   cacheraient deux tiers du contenu — une décision de l'autorité peut se
   manquer — et une colonne de navigation volerait de la largeur à une page
   déjà dense en texte. */
.actu-sommaire{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.83rem}
.actu-sommaire a{color:#C9BEE0;text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color var(--t-rapide),border-color var(--t-rapide)}
.actu-sommaire a:hover{color:#fff;border-bottom-color:#8E74CE}
.actu-sommaire .n{font-variant-numeric:tabular-nums;color:#8E84AC;
  margin-left:5px}

/* ── 1. LE WEEKLY ───────────────────────────────────────────────────── */

/* Le Weekly mord sur le bandeau d'encre, comme les cadres de l'accueil :
   c'est ce léger débord qui le fait flotter au-dessus plutôt que commencer
   sagement après. Il porte aussi la seule ombre levée de la page — les deux
   niveaux suivants en sont volontairement dépourvus. */
.weekly{margin-top:-44px;position:relative;z-index:2;
  border:1px solid var(--trait);border-radius:var(--r-carte);
  overflow:hidden;background:var(--blanc);box-shadow:var(--ombre-levee)}

/* Aucune édition publiée : le bloc se réduit à une ligne au lieu d'occuper
   la place d'honneur avec un grand vide. */
.weekly.weekly-sans{margin-top:-28px;box-shadow:var(--ombre-carte)}
.weekly.weekly-sans>.bloc-titre{padding:14px 22px}
.weekly.weekly-sans>.bloc-titre h2{font-size:1rem}
.weekly.weekly-sans>.vide{padding:16px 22px;border:0;background:none;
  border-radius:0;margin:0;text-align:left;font-size:.86rem}

/* En-tête sur aplat mauve : le seul de la page, il pose d'emblée que ce
   bloc n'est pas du même ordre que le reste. */
.weekly>.bloc-titre{margin:0;padding:20px 26px 18px;background:var(--mauve);
  border-bottom:0;align-items:baseline}
.weekly>.bloc-titre h2{color:var(--blanc);font-size:1.32rem}
.weekly>.bloc-titre .avis{color:#E4D9FF;font-size:.8rem}

.weekly>.attente,.weekly>.vide{margin:0;padding:34px 26px}

.weekly-titre{font-family:var(--titre);font-size:1.24rem;line-height:1.4;
  padding:22px 26px 0;max-width:720px}

.weekly-liste{list-style:none;padding:6px 26px 8px}
.weekly-actu{display:grid;grid-template-columns:64px 1fr;gap:22px;
  padding:22px 0;border-bottom:1px solid var(--trait);align-items:start}
.weekly-liste .weekly-actu:last-child{border-bottom:0}

/* La note, en jauge de dix segments plus le chiffre. Une pastille ronde
   portant « 7 » se lisait comme un rang — d'autant que le rang est juste à
   côté. Dix segments dont sept allumés se lisent comme une mesure, sans
   avoir à expliquer « sur 10 ».

   Le mauve de la marque, jamais de vert ni de rouge : la note dit le POIDS
   d'une nouvelle pour la cote, pas si elle est bonne. */
.weekly-note{flex:none;width:64px;display:flex;flex-direction:column;
  align-items:center;gap:7px}
.weekly-jauge{display:flex;gap:2px;width:100%}
.weekly-jauge i{flex:1;height:6px;border-radius:1px;background:var(--trait)}
.weekly-jauge i.plein{background:var(--mauve)}
.weekly-note b{font-family:var(--titre);font-size:1.32rem;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--mauve-fonce)}
.weekly-note .sur{font-size:.68rem;font-weight:400;color:var(--brume)}

.weekly-corps{min-width:0;position:relative}
/* Le numéro d'ordre, en filigrane : il situe sans peser. */
.weekly-rang{position:absolute;top:-4px;right:0;font-family:var(--titre);
  font-size:1.5rem;color:var(--trait);line-height:1;pointer-events:none}
.weekly-actu-titre{font-size:1.05rem;line-height:1.35;padding-right:38px}
.weekly-resume{margin-top:9px;font-size:.92rem;line-height:1.65;
  color:var(--brume);max-width:680px;white-space:pre-line}
.weekly-lien{margin-top:10px;font-size:.8rem}
.weekly-lien a{color:var(--mauve-fonce);text-decoration:none;
  border-bottom:1px solid var(--trait);transition:border-color var(--t-rapide)}
.weekly-lien a:hover{border-bottom-color:var(--mauve)}

/* ── 2. LA COLONNE DE PRESSE ──
   Une seule colonne, plafonnée à une largeur de lecture : sur toute la
   largeur du site, un titre anglais s'étirerait sur une ligne illisible. */
.actu-seule{max-width:760px;margin-top:52px}

/* ⚠️ RÈGLES GLOBALES À GARDER. Elles venaient de la section « officiel »
   d'Actualité+ (en pause depuis le 4 octobre 2026), mais la classe
   .registre-tete sert aussi à l'en-tête « Mon compte de démonstration »
   d'investir.html, qui hérite d'elles son filet du haut et la taille de son
   titre. Les retirer, ou les déplacer avant la règle de la section 9,
   changerait cette page. */
.registre-tete{border-top:2px solid var(--encre);padding-top:14px}
.registre-tete h2{font-size:1.18rem}

/* ── 1. LE DAILY ── (4 octobre 2026)
   Bilan descriptif de chaque séance, en tête de page. Éditorial plutôt que
   tableau de bord : une carte blanche, beaucoup d'air, une idée par bloc.
   Tout est en .daily-* : aucune règle globale n'est redéfinie. Couleurs,
   rayons et ombres viennent des variables du site. */
.daily{position:relative;z-index:2;margin-top:-44px;background:var(--blanc);
  border:1px solid var(--trait);border-radius:var(--r-carte);box-shadow:var(--ombre-carte)}
.daily-tete{padding:24px 26px 18px;border-bottom:1px solid var(--trait)}
.daily-tete h2{font-size:clamp(1.3rem,2.6vw,1.65rem);line-height:1.25}
.daily-statut{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px;
  font-size:.82rem;color:var(--brume)}
.daily-statut[hidden],.daily-nav[hidden],.daily-bandeau[hidden],.daily-etat[hidden]{display:none}
.daily-pastille{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:999px;background:var(--mauve-voile);color:var(--mauve-fonce);
  font-weight:600;font-size:.76rem}
.daily-pastille::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.daily-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;
  margin-top:12px;font-size:.84rem}
/* Cible tactile d'au moins 44 px de haut, sans grossir le texte. */
.daily-nav a,.daily-nav .inactif{display:inline-block;padding:12px 0}
.daily-nav a{color:var(--mauve-fonce);font-weight:600;text-decoration:none;
  border-bottom:1px solid transparent}
.daily-nav a:hover{border-bottom-color:var(--mauve)}
.daily-nav .inactif{color:var(--brume)}
.daily-bandeau{margin:0;padding:12px 26px;font-size:.86rem;line-height:1.55;
  color:var(--mauve-fonce);background:var(--mauve-voile);border-bottom:1px solid var(--trait)}
.daily-bandeau .lien{font-size:inherit}
.daily-etat{margin:0;padding:30px 26px;font-size:.92rem;line-height:1.6;color:var(--brume)}

.daily-bloc{padding:26px}
.daily-bloc+.daily-bloc{border-top:1px solid var(--trait)}
.daily-bloc[hidden]{display:none}
.daily-bloc h3{font-family:var(--texte);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brume)}
.daily-sous{margin-top:6px;font-size:.82rem;color:var(--brume)}

/* La phrase de tête : ce que l'œil lit en trois secondes. */
.daily-une{margin-top:10px;font-family:var(--titre);font-size:clamp(1.15rem,2.4vw,1.45rem);
  line-height:1.4;color:var(--encre);max-width:36ch}
.daily-une b{font-weight:700}
.daily-une-petite{font-size:1.05rem;max-width:52ch}

/* Barre d'ampleur : segments proportionnels, chiffre écrit sous chacun ;
   la baisse est hachurée pour se lire sans percevoir le rouge. */
.daily-ampleur{display:flex;height:14px;margin-top:20px;border-radius:999px;overflow:hidden;
  background:var(--trait)}
.daily-ampleur span{display:block;height:100%;transform-origin:left center}
.daily-ampleur .h{background:var(--hausse)}
.daily-ampleur .s{background:#C9C3D9}
.daily-ampleur .b{background:repeating-linear-gradient(135deg,var(--baisse) 0 6px,#8E2A3F 6px 9px)}
/* Remplissage à l'apparition : la règle qui replie la barre n'existe que si
   le mouvement est accepté. Sous prefers-reduced-motion, elle s'affiche
   pleine d'emblée, sans transition. */
@media (prefers-reduced-motion:no-preference){
  .daily-ampleur span{transition:transform var(--t-lente) var(--sortie)}
  .daily-ampleur.a-poser span{transform:scaleX(0)}
}
.daily-ampleur-lib{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;
  margin-top:9px;font-size:.84rem}
.daily-ampleur-lib span{white-space:nowrap}
.daily-ampleur-lib .h{color:var(--hausse);font-weight:600}
.daily-ampleur-lib .b{color:var(--baisse);font-weight:600}
.daily-ampleur-lib .s{color:var(--brume)}
.daily-note{margin-top:12px;font-size:.8rem;line-height:1.5;color:var(--brume)}
.daily-veille{margin-top:14px;padding:10px 14px;border-left:3px solid var(--mauve-pale);
  font-size:.86rem;line-height:1.55;color:var(--brume)}
.daily-veille b{color:var(--encre);font-weight:600}

/* Carte de chaleur des secteurs : une liste ordonnée de vrai texte. La
   couleur double le signe et le pourcentage ; contrastes mesurés de 5,9:1
   à 16,9:1 sur les sept paliers. */
.daily-secteurs{list-style:none;padding:0;margin:16px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.daily-sect{display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  min-height:86px;padding:12px 13px;border-radius:var(--r-petit);color:var(--encre)}
.daily-sect .nom{font-size:.82rem;font-weight:600;line-height:1.3}
.daily-sect .pct{display:block;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.daily-sect .n{display:block;font-size:.72rem}
.daily-sect.p-h3,.daily-echelle .p-h3{background:var(--hausse);color:var(--blanc)}
.daily-sect.p-h2,.daily-echelle .p-h2{background:#9CCBCC}
.daily-sect.p-h1,.daily-echelle .p-h1{background:#DCEFEF}
.daily-sect.p-0,.daily-echelle .p-0{background:var(--chaux);box-shadow:inset 0 0 0 1px var(--trait)}
.daily-sect.p-b1,.daily-echelle .p-b1{background:var(--baisse-voile)}
.daily-sect.p-b2,.daily-echelle .p-b2{background:#E7B3BF}
.daily-sect.p-b3,.daily-echelle .p-b3{background:var(--baisse);color:var(--blanc)}
/* « Autres » : gris neutre, en pointillé, hors classement. */
.daily-sect.p-autre{background:var(--blanc);color:var(--brume);
  box-shadow:inset 0 0 0 1px #C9C3D9;background-image:none}
.daily-sect.p-autre .pct{color:var(--brume)}
.daily-echelle{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:12px;
  font-size:.72rem;color:var(--brume)}
.daily-echelle i{display:inline-block;width:22px;height:10px;border-radius:3px}
.daily-echelle span{margin:0 6px}

/* Plus fortes variations : le composant .mover de l'accueil, tel quel. */
.daily-movers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px}
.daily-movers h4{font-family:var(--texte);font-size:.86rem;font-weight:600;margin-bottom:6px}
.daily-movers h4.up{color:var(--hausse)}
.daily-movers h4.down{color:var(--baisse)}
.daily-movers a.mover{color:inherit;text-decoration:none}
/* Le rang de .mover (#847BA0) ne fait que 3,95:1 sur blanc : dans le Daily,
   il passe en --brume (5,5:1). La règle de l'accueil n'est pas touchée. */
.daily-movers .mover-rang{color:var(--brume)}
.daily-aucune{padding:14px 0;font-size:.86rem;color:var(--brume)}

.daily-pied{margin:0;padding:16px 26px 20px;border-top:1px solid var(--trait);
  font-size:.76rem;line-height:1.55;color:var(--brume);background:var(--chaux);
  border-radius:0 0 var(--r-carte) var(--r-carte)}
.daily-pied span{display:block;margin-top:4px}

/* Le Weekly passe sous le Daily : il ne chevauche plus le bandeau. Le
   sélecteur à trois classes l'emporte sur .weekly et .weekly.weekly-sans,
   sans les modifier. */
.weekly.weekly-apres,.weekly.weekly-apres.weekly-sans{margin-top:40px}

@media (max-width:640px){
  .daily-tete,.daily-bloc{padding:20px 18px}
  .daily-bandeau,.daily-etat{padding-left:18px;padding-right:18px}
  .daily-pied{padding:14px 18px 18px}
  .daily-secteurs{grid-template-columns:1fr 1fr}
  .daily-movers{grid-template-columns:1fr;gap:18px}
  .daily-ampleur-lib{font-size:.8rem}
}

/* ── La presse internationale ──
   Panneau en retrait : fond de chaux, pas d'ombre, pas de blanc. Il ne
   réclame pas l'attention, il la reçoit après le Weekly. */
.presse{background:var(--chaux);border:1px solid var(--trait);
  border-radius:var(--r-carte);padding:20px 22px}
.presse-tete h2{font-size:1rem}
.presse-langue{display:flex;align-items:flex-start;gap:9px;margin-top:10px;
  font-size:.76rem;color:var(--brume);line-height:1.5}
.presse-liste{list-style:none;margin-top:6px}
.presse-item{padding:14px 0;border-bottom:1px solid var(--trait);
  position:relative}
.presse-liste .presse-item:last-child{border-bottom:0}
.presse-quand{font-size:.72rem;color:var(--brume);
  font-variant-numeric:tabular-nums}
/* Inter et non Baskerville : le serif est réservé à ce qu'investiw écrit. */
.presse-titre{margin-top:4px;font-family:var(--texte);font-size:.88rem;
  font-weight:600;line-height:1.4}
.presse-titre a{color:var(--encre);text-decoration:none}
.presse-titre a:hover{color:var(--mauve-fonce)}
.presse-titre a::after{content:"";position:absolute;inset:0}
/* Deux lignes, pas davantage : l'extrait situe l'article, il ne le
   remplace pas. */
.presse-extrait{margin-top:5px;font-size:.79rem;line-height:1.5;
  color:var(--brume);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.presse-pied{margin-top:14px;padding-top:12px;
  border-top:1px solid var(--trait);font-size:.74rem;color:var(--brume)}
.presse-vide,.presse-attente{padding:16px 0;font-size:.84rem;
  color:var(--brume);line-height:1.6}

/* Badges d'opération dans le journal */
.op{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap}
.op-depot{color:var(--hausse);background:#E3F0EF}
.op-retrait{color:var(--baisse);background:var(--baisse-voile)}
.op-achat{color:var(--mauve-fonce);background:var(--mauve-pale)}
.op-vente{color:var(--encre);background:var(--chaux);border:1px solid var(--trait)}
/* Relevés de cours hérités de l'onglet « Mettre à jour un cours », retiré
   depuis. Ce n'est pas un mouvement d'argent mais une simple lecture de
   prix : la pastille reste donc en retrait, sans la bordure de .op-vente
   avec laquelle elle partage le fond. */
.op-cotation{color:var(--brume);background:var(--chaux)}

.vider{background:none;border:1px solid var(--trait);color:var(--brume);
  font-family:var(--texte);font-size:.8rem;font-weight:500;padding:6px 14px;
  border-radius:var(--r-petit);cursor:pointer;
  transition:border-color var(--t-rapide),color var(--t-rapide),background-color var(--t-rapide)}
.vider:hover{border-color:#E7C2CB;color:var(--baisse);background:var(--baisse-voile)}

/* Le retour d'une action se pose au lieu d'apparaître d'un coup. C'est le
   seul signal que l'ordre est passé ou refusé : un texte qui surgit puis
   s'évanouit cinq secondes plus tard se rate facilement, surtout quand le
   regard est resté sur le formulaire.
   Le filet de couleur à gauche fait le reste du travail — il tient la place
   même quand le message est vide, d'où le min-height. */
.message{margin-top:12px;font-size:.85rem;min-height:21px;line-height:1.5}
.message.ok,.message.ko{padding-left:11px;border-left:2px solid currentColor;
  animation:arriver var(--t-douce) var(--sortie) both}
.message.ok{color:var(--hausse)}
.message.ko{color:var(--baisse)}
/* Le rouge d'alerte sert aussi hors des messages : compteur de caractères en
   dépassement, bénéfice périmé sous un PER. */
.aide.ko,.compte-note.ko{color:var(--baisse)}

/* ── Mode compétition ──
   Deux portefeuilles vivent à la même place. La bascule doit donc se voir
   sans ambiguïté : un segment plein, pas un onglet discret de plus. */
.modes{display:inline-flex;gap:4px;margin-top:22px;padding:4px;
  background:var(--chaux);border:1px solid var(--trait);border-radius:99px}
.mode{background:none;border:0;cursor:pointer;font-family:var(--texte);
  font-size:.86rem;font-weight:600;color:var(--brume);padding:7px 20px;
  border-radius:99px;transition:color var(--t-rapide),background-color var(--t-rapide)}
.mode:hover{color:var(--encre)}
.mode[aria-pressed=true]{background:var(--mauve);color:var(--blanc)}

.bandeau-comp{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  margin-top:22px;padding:16px 20px;background:var(--mauve-voile);
  border:1px solid var(--mauve-pale);border-left:3px solid var(--mauve);
  border-radius:0 var(--r-grand) var(--r-grand) 0}
.comp-choix{display:flex;align-items:center;gap:10px;min-width:0}
.comp-choix label{font-size:.78rem;font-weight:600;color:var(--mauve-fonce);
  flex:none}
.comp-choix select{font-family:var(--texte);font-size:.9rem;font-weight:600;
  color:var(--encre);background:var(--blanc);border:1px solid var(--mauve-pale);
  border-radius:var(--r-petit);padding:7px 10px;max-width:260px}
.comp-choix select:disabled{border-color:transparent;background:none;
  padding-left:0;appearance:none;-webkit-appearance:none}
.comp-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;
  margin-right:auto}
.comp-code{font-size:.73rem;color:var(--brume)}
/* Le code est fait pour être lu à voix haute et retapé : il mérite de
   l'espace entre les lettres, et une sélection facile. */
.comp-code b{display:block;font-size:1.14rem;font-weight:700;
  letter-spacing:.18em;color:var(--mauve-fonce);user-select:all}
.comp-etat{font-size:.78rem;color:var(--brume)}

.code-saisie{text-transform:uppercase;letter-spacing:.16em;font-weight:600}

/* Le classement : la ligne du lecteur ressort, sans lui coller une couleur
   de gain ou de perte qui parasiterait la colonne performance. */
.rang{font-family:var(--titre);font-weight:700;color:var(--brume);width:1%;
  white-space:nowrap}
.tableau tbody tr.moi{background:var(--mauve-voile)}
.tableau tbody tr.moi:hover{background:var(--mauve-pale)}
.tableau tbody tr.moi .rang{color:var(--mauve-fonce)}

/* Ordres hors séance.
   Les deux sections n'existent que si elles ont quelque chose à dire :
   masquées, leurs marges disparaissent avec elles, et le reste de la page
   garde exactement le rythme qu'il avait avant. */
#bloc-attente-ordres,#bloc-echecs,#bloc-classement{margin:38px 0}

/* Un ordre non exécuté est un avis, pas un objet du portefeuille : un filet
   à gauche plutôt qu'une carte de plus. */
.echecs{list-style:none;margin:18px 0 0;padding:0}
.echecs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 20px;
  align-items:center;padding:14px 18px;background:var(--baisse-voile);
  border-left:3px solid var(--baisse);border-radius:0 var(--r-petit) var(--r-petit) 0}
.echecs li+li{margin-top:10px}
.echec-quoi{font-size:.92rem;font-weight:600}
.echec-pourquoi{grid-column:1;font-size:.82rem;color:var(--baisse);line-height:1.5}
.echecs .retirer{grid-column:2;grid-row:1/3;color:var(--baisse)}
.echecs .retirer:hover{background:var(--blanc)}

.notes{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:26px;
  border-top:1px solid var(--trait);padding-top:22px}
.notes h3{font-size:.96rem}
.notes p{margin-top:7px;font-size:.85rem;color:var(--brume)}

/* Bloc « offre » : aplat plein, traitement encore différent des précédents.
   Sert la présentation du programme de formation. */
.offre{margin-top:64px;border:1px solid var(--trait);border-radius:var(--r-grand);
  overflow:hidden}
.offre-tete{background:var(--mauve);color:var(--blanc);padding:26px 30px}
.offre-tete h2{font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--blanc)}
.offre-tete p{margin-top:10px;font-size:.92rem;color:#EDE6FF;max-width:560px}
.offre-corps{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:0}
.offre-bloc{padding:28px 30px}
.offre-bloc+.offre-bloc{border-left:1px solid var(--trait);background:var(--chaux)}
.offre-bloc h3{font-size:1rem;margin-bottom:14px}

.inclus{list-style:none;margin:0;padding:0}
.inclus li{position:relative;padding-left:22px;margin-bottom:11px;font-size:.9rem;
  color:var(--brume)}
.inclus li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;
  border-radius:2px;background:var(--mauve)}
.inclus li b{color:var(--encre);font-weight:600}

.etapes{list-style:none;margin:0;padding:0;counter-reset:etape}
.etapes li{counter-increment:etape;position:relative;padding-left:34px;
  margin-bottom:15px;font-size:.89rem;color:var(--brume)}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;background:var(--mauve-pale);
  color:var(--mauve-fonce);font-size:.76rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums}
.etapes li b{color:var(--encre);font-weight:600}

.note-cadre{margin-top:18px;padding:14px 16px;background:var(--blanc);
  border:1px dashed #CFC4E8;border-radius:var(--r-petit);font-size:.86rem;
  color:var(--brume)}
.note-cadre b{color:var(--encre);font-weight:600}


/* ── Rubrique à sous-menu ──
   « Fondamentaux » n'est pas une page : c'est l'étiquette de deux
   destinations. Le déclencheur est donc un <button>, pas un lien qui ne
   mènerait nulle part.

   L'ouverture repose sur :hover ET :focus-within. Le second suffit à rendre
   le menu utilisable au clavier sans une ligne de script : tabuler jusqu'au
   bouton ouvre le panneau, les deux liens deviennent alors atteignables, et
   sortir du groupe le referme. */
.menu-groupe{position:relative;display:flex;align-items:center}

.menu-tete{background:none;border:0;cursor:pointer;padding:3px 0;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--texte);font-size:.92rem;font-weight:500;color:var(--brume);
  border-bottom:2px solid transparent;
  transition:color var(--t-rapide),border-color var(--t-rapide)}
.menu-tete:hover{color:var(--encre);border-bottom-color:var(--trait)}

/* Une des deux pages du groupe est ouverte : la rubrique le montre, comme
   le ferait un lien de premier niveau. */
.menu-tete[data-section=active]{color:var(--encre);font-weight:600;
  border-bottom-color:var(--mauve)}

/* Chevron dessiné en bordures : pas de fichier, pas de police d'icônes. */
.menu-fleche{width:0;height:0;flex:none;margin-top:1px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;
  transition:transform var(--t-rapide) var(--sortie)}

.sous-menu{position:absolute;top:calc(100% + 10px);left:-14px;z-index:50;
  min-width:184px;padding:7px;
  background:var(--blanc);border:1px solid var(--trait);
  border-radius:var(--r-moyen);box-shadow:var(--ombre-flottant);
  /* visibility, et non display : un display:none couperait la transition, et
     [hidden]{display:none!important} l'emporterait de toute façon. */
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity var(--t-douce),transform var(--t-douce) var(--sortie),
    visibility var(--t-douce)}

.menu-groupe:hover>.sous-menu,
.menu-groupe:focus-within>.sous-menu{opacity:1;visibility:visible;transform:none}
.menu-groupe:hover .menu-fleche,
.menu-groupe:focus-within .menu-fleche{transform:rotate(180deg)}

/* Une zone de rattrapage invisible sous le bouton : sans elle, le menu se
   ferme dès que le pointeur traverse l'espace de 10 px qui l'en sépare. */
.menu-groupe::after{content:"";position:absolute;top:100%;left:0;right:0;
  height:12px}

.sous-menu a{display:block;padding:8px 12px;border-radius:var(--r-petit);
  font-size:.89rem;font-weight:500;color:var(--brume);border-bottom:0;
  transition:color var(--t-rapide),background-color var(--t-rapide)}
.sous-menu a:hover{color:var(--encre);background:var(--mauve-voile)}
.sous-menu a[aria-current]{color:var(--mauve-fonce);font-weight:600;
  background:var(--mauve-voile)}

/* ── Page Actions : pupitre de recherche ── */
.pupitre-valeurs{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:30px}

.chercher{position:relative;flex:1 1 320px;min-width:0;max-width:460px;
  display:flex;align-items:center}
.chercher input{width:100%;font-family:var(--texte);font-size:.94rem;
  color:var(--encre);background:var(--blanc);
  border:1px solid #D7CBF0;border-radius:var(--r-moyen);
  padding:11px 14px;
  transition:border-color var(--t-rapide),box-shadow var(--t-rapide)}
.chercher input::placeholder{color:#8B82A6}
.chercher input:focus{outline:none;border-color:var(--mauve);
  box-shadow:var(--anneau-focus)}
/* Le bouton natif de vidage de <input type=search> est absent d'un
   navigateur à l'autre : on fournit le nôtre, prévisible partout. */
.chercher input::-webkit-search-cancel-button{-webkit-appearance:none}

.effacer{position:absolute;right:8px;background:none;border:0;cursor:pointer;
  font-family:var(--texte);font-size:.78rem;font-weight:500;color:var(--brume);
  padding:5px 9px;border-radius:var(--r-petit);
  transition:color var(--t-rapide),background-color var(--t-rapide)}
.effacer:hover{color:var(--encre);background:var(--chaux)}

.compteur{font-size:.82rem;color:var(--brume);
  font-variant-numeric:tabular-nums;margin-left:auto}

/* Le compte accolé à chaque secteur : la pastille dit combien de valeurs on
   trouvera derrière, avant même de cliquer. */
.filtre-nb{margin-left:7px;font-size:.72rem;font-weight:600;color:var(--brume);
  background:var(--chaux);border-radius:99px;padding:1px 7px}
.filtre[aria-pressed=true] .filtre-nb{color:var(--mauve-fonce);
  background:var(--blanc)}

/* ── Page Actions : la grille de fiches ──
   Une seule mesure de colonne, laissée à auto-fill : la grille se recompose
   d'elle-même de un à quatre par ligne, sans point de rupture à maintenir. */
.fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:18px;margin-top:26px}

/* La carte de valeur mène à sa fiche : elle se soulève, comme les cartes
   du fil d'actualité. Le patron .carte-survol est posé dans la section 11i
   et partagé avec le reste du site ; ne restent ici que les propriétés
   propres à la carte. */
.fiche{border:1px solid var(--trait);border-radius:var(--r-grand);
  padding:16px 16px 10px;background:var(--blanc);
  transition:border-color var(--t-rapide),background-color var(--t-rapide),
    box-shadow var(--t-douce),transform var(--t-douce) var(--sortie)}
.fiche:hover{border-color:#D7CBF0;box-shadow:var(--ombre-carte)}
@media (prefers-reduced-motion:no-preference){
  .fiche:hover{transform:translateY(-2px)}
}
/* Le prix prend la couleur de marque au survol : le regard va au chiffre,
   qui est ce qu'on vient chercher dans cette grille. */
.fiche-prix{transition:color var(--t-rapide)}
.fiche:hover .fiche-prix{color:var(--mauve-fonce)}

.fiche-tete{display:flex;align-items:flex-start;gap:10px;
  justify-content:space-between}
.fiche-nom{min-width:0}
.fiche-nom h2{font-size:.97rem;line-height:1.3}
/* Le titre de carte mène à la fiche. Un vrai lien, discret au repos : la
   grille se lit d'abord comme un tableau de cours, pas comme un sommaire. */
.fiche-lien{color:inherit;text-decoration:none}
.fiche-lien:hover{color:var(--mauve-fonce);text-decoration:underline;
  text-underline-offset:3px}
.fiche-nom .tick{display:block;margin-top:3px;font-size:.73rem;font-weight:600;
  color:var(--brume);letter-spacing:.04em}

.fiche-secteur{flex:none;max-width:96px;text-align:right;
  font-size:.68rem;line-height:1.3;color:var(--brume)}

.fiche-cours{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:13px;padding-bottom:11px;border-bottom:1px solid var(--trait)}
.fiche-prix{font-family:var(--titre);font-size:1.12rem;font-weight:700;
  letter-spacing:-.01em}
.fiche-var{font-size:.83rem;font-weight:600}
.fiche-var.up{color:var(--hausse)}
.fiche-var.down{color:var(--baisse)}
.fiche-var.plat{color:var(--brume)}

/* Ligne du PER. Elle vient sous le cours, en retrait typographique : c'est
   une donnée calculée à partir d'un chiffre saisi à la main, pas une cotation
   de marché, et elle n'a pas à peser autant que le prix. */
.fiche-per{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:10px;font-size:.76rem;font-weight:600;color:var(--brume);
  letter-spacing:.02em}
.fiche-per b{font-size:.98rem;font-weight:700;color:var(--encre);
  font-variant-numeric:tabular-nums}
.fiche-per span{flex:1 1 100%;font-size:.7rem;font-weight:400;
  letter-spacing:0;color:#8B82A6}

/* Rien à afficher : la ligne reste, en plus discret encore. Un emplacement
   qui disparaît d'une carte à l'autre désaligne toute la grille. */
.vide-per{color:#9B93B4}
.vide-per span{flex:0 1 auto;font-size:.76rem}

/* Un bénéfice de plus de dix-huit mois : deux publications ont eu lieu
   depuis. Le PER reste affiché, mais la date porte l'avertissement. */
.per-ancien span{color:var(--baisse)}

/* Capitalisation et bêta, sur une rangée unique sous le PER. Les deux
   repères se partagent la largeur à parts égales : la carte garde la même
   hauteur d'une valeur à l'autre, qu'ils soient saisis ou non. Corps plus
   petit que le PER — ce sont des repères de contexte, pas le chiffre que
   l'on vient chercher. */
.fiche-reperes{display:flex;justify-content:space-between;gap:10px;margin-top:6px;
  font-size:.7rem;font-weight:600;color:var(--brume);letter-spacing:.02em}
/* Chaque repère prend la largeur qu'il lui faut, pas la moitié du rang :
   « 204,1 Md MAD » est trois fois plus long que « 0,05 », et deux moitiés
   égales rognaient la capitalisation dès que la grille passait à trois
   colonnes. L'espace restant se place entre les deux, ce qui aligne le bêta
   à droite d'une carte à l'autre. min-width et l'ellipsis en dessous ne sont
   qu'un filet : ils ne servent que si une valeur dépassait toute attente. */
.fiche-reperes .repere{flex:0 1 auto;min-width:0;
  display:flex;align-items:baseline;gap:5px}
.fiche-reperes b{font-weight:700;color:var(--encre);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* Chiffre absent : même place, même ligne de base, ton effacé. */
.fiche-reperes i{font-style:normal;font-weight:400;color:#9B93B4}
/* L'abréviation porte une explication au survol : le soulignement pointillé
   par défaut des navigateurs bruiterait une ligne déjà dense. */
.fiche-reperes abbr{text-decoration:none;border:0;cursor:help}
/* Les deux chiffres absents : une seule phrase, mais la rangée garde sa
   disposition. Un display:block ici rendait la carte plus courte que ses
   voisines, et la grille s'en ressentait. */
.fiche-reperes.vide-per span{font-size:.7rem;font-weight:400}

/* La hauteur est réservée avant l'arrivée du graphique : sans elle, chaque
   widget qui se pose ferait sauter toute la grille. */
.fiche-graphe{height:132px;margin-top:8px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-petit);overflow:hidden}
.fiche-graphe .tradingview-widget-container,
.fiche-graphe .tradingview-widget-container__widget{width:100%;height:100%}
.fiche-graphe iframe{width:100%!important;height:100%!important;
  display:block;border:0}

.fiche-absent{font-size:.76rem;color:var(--brume);text-align:center;padding:0 10px}

/* Dérouler la suite de la grille. Bouton de bordure et non aplat plein : ce
   n'est pas l'action principale de la page, seulement la façon d'en voir
   davantage. Il reprend .ajouter.secondaire, donc les micro-interactions et
   le respect du mouvement réduit déjà en place. */
.voir-plus{display:flex;justify-content:center;margin-top:28px}
.voir-plus .ajouter{padding:12px 26px}
.voir-plus-nb{margin-left:9px;font-weight:500;color:var(--brume);
  font-variant-numeric:tabular-nums}
.voir-plus .ajouter:hover .voir-plus-nb{color:var(--mauve-fonce)}

.vide{margin-top:30px;padding:34px 20px;border:1px solid var(--trait);
  border-radius:var(--r-grand);background:var(--chaux);text-align:center;
  font-size:.9rem;color:var(--brume)}
/* ══════════════ 9d. Le comparateur ══════════════

   Les critères en LIGNES, les valeurs en COLONNES. C'est le sens de lecture
   d'une comparaison — l'œil descend une colonne pour connaître une société,
   il parcourt une ligne pour départager les quatre sur un même critère.

   Et c'est surtout ce qui rend la page tenable sur un téléphone : quatre
   colonnes ne tiendront jamais sur 380 pixels, quelle que soit la mise en
   page. Empilées les unes sous les autres, elles cessent d'être une
   comparaison — il faudrait faire défiler pour se souvenir du chiffre
   précédent. Le tableau défile donc horizontalement, dans .defile déjà
   utilisé par les tableaux du portefeuille, MAIS la colonne des critères
   reste collée à gauche : on garde toujours sous les yeux ce que l'on
   compare, et l'on fait glisser les sociétés dessous. */

.comparo{min-width:0}
.comparo-defile{border-radius:var(--r-moyen)}

/* La colonne des critères. Le fond opaque est indispensable : sans lui, les
   cellules défilantes passeraient par transparence sous le libellé. */
.comparo .comparo-critere{position:sticky;left:0;z-index:2;
  background:var(--blanc);border-right:1px solid var(--trait);
  width:132px;min-width:132px;font-size:.78rem;font-weight:600;
  color:var(--brume);text-align:left;white-space:nowrap}
.comparo tbody tr:hover .comparo-critere{background:var(--chaux)}

.comparo thead th{vertical-align:bottom;padding:14px 12px}
.comparo-tete-v{min-width:158px}
.comparo-nom{display:block;font-size:.92rem;font-weight:600;color:var(--encre);
  white-space:normal;line-height:1.35}
.comparo-tete-v .tick{display:inline-block;margin-top:5px}

.comparo-c{min-width:158px;vertical-align:top}
.comparo-v{display:block;font-size:.95rem;color:var(--encre)}
.comparo-v b{font-weight:700}
.comparo-n{display:block;margin-top:3px;font-size:.72rem;font-weight:400;
  color:#8B82A6;white-space:normal;line-height:1.45}
/* Bénéfice de plus de dix-huit mois : le PER reste affiché, la note porte
   l'avertissement — même signal que sur la page Actions. */
.comparo-ancien .comparo-n{color:var(--baisse)}
/* Donnée non renseignée : le tiret du reste du site, en plus effacé. */
.comparo-rien{font-style:normal;font-weight:400;color:#9B93B4}
.comparo-secteur{font-weight:500}

/* La dernière ligne porte les liens : pas de filet sous elle, et le bouton
   occupe toute la colonne pour rester une cible franche au doigt. */
.comparo .comparo-pied-l td,
.comparo .comparo-pied-l th{border-bottom:0;padding-top:16px}
.comparo-lien .ajouter{display:block;width:100%;text-align:center;
  padding:9px 12px;font-size:.79rem}

.comparo-actions{margin-top:16px}
.comparo-actions:empty{display:none}

/* ══════════════ 10. Responsive ══════════════ */

/* La colonne de presse d'Actualité+ se rapproche du Weekly sur écran étroit. */
@media (max-width:980px){
  .actu-seule{margin-top:40px}
}

@media (max-width:860px){
  .tete .wrap{flex-wrap:wrap;min-height:0;padding-top:11px;padding-bottom:0;gap:14px}
  .menu{order:3;width:100%;margin-right:0;gap:20px;overflow-x:auto;
    border-top:1px solid var(--trait);padding:9px 0 0;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap;padding-bottom:9px}

  /* Le menu défile horizontalement sous cette largeur : un panneau positionné
     en absolu y serait rogné par l'overflow, sans recours. Les deux
     destinations rejoignent donc simplement la file, et l'étiquette du groupe
     s'efface — « Actions » et « Macro » se suffisent à elles-mêmes. */
  .menu-tete{display:none}
  .menu-groupe,.sous-menu{display:contents}
  .sous-menu a{padding:3px 0 9px;border-radius:0;white-space:nowrap;
    font-size:.92rem;border-bottom:2px solid transparent;background:none}
  .sous-menu a:hover{background:none;color:var(--encre);
    border-bottom-color:var(--trait)}
  .sous-menu a[aria-current]{background:none;color:var(--encre);
    font-weight:600;border-bottom-color:var(--mauve)}
  .menu-groupe::after{display:none}
  /* Le menu passe en pleine largeur sur la ligne du dessous : c'est le
     widget de compte qui reprend la poussée à droite, contre la marque. */
  .auth-nav{margin-left:auto}
  .auth-panneau{width:min(320px,calc(100vw - 36px))}
  .auth-courriel{max-width:132px}
  .wrap{padding:0 18px}
  /* Les deux colonnes de la « une » s'empilent : le graphique MASI perd
     sa lisibilité sous ~430 px de large, en-tête et sélecteur compris. */
  /* Une colonne : le chevauchement n'a plus de sens, il masquerait le chapô
     du bandeau au lieu de mordre sur un vide. */
  .une-duo{grid-template-columns:1fr;margin-top:24px}

  /* Les deux cartes produit s'empilent. Elles restaient à deux colonnes
     quelle que soit la largeur : à 380px, chacune tombait sous cent pixels
     de texte utile, et la pastille fléchée finissait par pousser la page
     hors du cadre. */
  .produits{grid-template-columns:1fr;margin-top:40px}
  .veille{max-height:340px}
  .offre-corps{grid-template-columns:1fr}
  .offre-bloc+.offre-bloc{border-left:0;border-top:1px solid var(--trait)}
  .pupitre{grid-template-columns:1fr}
  /* Une carte d'indicateur par rangée : sous ~420 px de large, le graphique
     TradingView perd ses repères d'axe et ne dit plus rien. */
  .indics{grid-template-columns:1fr}
  /* Le fil repasse en une colonne : deux colonnes de titres tronqués sur un
     téléphone seraient illisibles. */
  .fil-riche{grid-template-columns:1fr;gap:12px}
  .fil-dense{grid-template-columns:1fr;gap:0}
  /* La vignette rétrécit pour laisser la place au titre, sans disparaître :
     c'est elle qui donne vie à la carte. */
  .fil-vignette{width:74px;height:74px}
  /* Le Weekly perd ses marges intérieures larges et sa pastille rétrécit. */
  .weekly>.bloc-titre{padding:18px 18px 16px}
  .weekly-titre{padding:18px 18px 0;font-size:1.1rem}
  .weekly-liste{padding:4px 18px 6px}
  .weekly-actu{grid-template-columns:48px 1fr;gap:16px}
  .weekly-score{width:48px;height:48px}
  .weekly-score b{font-size:1.2rem}
  .weekly-score-lib{display:none}
  .weekly-rang{display:none}
  .weekly-actu-titre{padding-right:0}
  .fiche-duo{grid-template-columns:1fr}
  .fiche-duo>.cadre{margin-top:0}
  .fiche-duo{gap:20px;margin-top:26px}
  /* Les deux cartes s'empilent. L'intervalle de la grille les sépare déjà :
     le filet et la marge que l'ancienne règle ajoutait au second feraient
     désormais double emploi. */
  .movers{grid-template-columns:1fr;gap:18px}
  .notes{grid-template-columns:1fr;gap:18px}
}
@media (max-width:760px){
  .une{padding:30px 0 0}

  /* Le chevauchement du Weekly sur le bandeau se resserre : à cette largeur
     le bandeau est plus court, et 44 px mordraient sur le texte. */
  .weekly{margin-top:-26px}
  .weekly.weekly-sans{margin-top:-18px}
  .weekly-actu{grid-template-columns:52px 1fr;gap:16px}
  .weekly-note{width:52px}
  /* La publication resserre ses marges intérieures et son titre : à cette
     largeur, 30 px de chaque côté mangent un tiers de la ligne. */
  .publi-tete{padding:20px 18px 0}
  .publi-corps{padding:4px 18px 2px}
  .publi-pied{padding:18px 18px 20px}
  .publi-titre{font-size:1.18rem}
  /* Le bouton prend toute la largeur : c'est l'action de la page, et une
     cible pleine largeur se touche sans viser. */
  .publi-pied .bouton{width:100%;text-align:center}
  .graphe{height:300px}

  .intro{padding:30px 0 4px}
  .filtre{font-size:.79rem;padding:5px 13px}
  .notion{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .notion .num{font-size:1.2rem}

  .entree{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .prochain{grid-template-columns:1fr;gap:14px;padding:18px 20px}
  .quand{display:flex;align-items:baseline;gap:7px;text-align:left;padding-top:0}
  .quand .jour{font-size:1.02rem}
  .quand .mois,.quand .an{margin-top:0;font-size:.8rem}
  .offre{margin-top:48px}
  .offre-tete,.offre-bloc{padding:22px 20px}

  .notes{grid-template-columns:1fr;gap:18px}
  .pied{margin-top:50px}
}

/* ══════════════════════════════════════════════════════════════════════
   10b. TÉLÉPHONE — ce qui ne se règle pas par une largeur de colonne

   Les blocs précédents remettent les grilles en une colonne. Ceux-ci
   traitent ce qui reste propre au doigt et au petit écran, et qui ne se
   voit pas en rétrécissant une fenêtre de bureau. Tout est mesuré à
   380 px dans un vrai navigateur, le 24 septembre 2026.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Le zoom d'iOS à la mise au point ──
   Safari sur iPhone AGRANDIT la page dès qu'on touche un champ dont le
   texte fait moins de 16 px — et il ne la réduit pas en sortant. On
   quittait donc le formulaire avec une page de travers, à recadrer à la
   main. Les 47 champs du site étaient tous en dessous.

   16 px pile, pas davantage : c'est le seuil exact, et grossir plus
   déséquilibrerait les formulaires. La règle ne s'applique qu'au tactile,
   les écrans de bureau gardent leur échelle. */
@media (max-width:760px){
  .champ input,.champ select,.champ textarea,
  .auth-champ input,.chercher input,.comp-choix select,
  input,select,textarea{font-size:16px}
}

@media (max-width:620px){
  /* ── Des cibles que le doigt atteint ──
     Le pouce vise mal : en deçà d'une quarantaine de pixels, on manque la
     commande ou on touche la voisine. Les hauteurs ci-dessous étaient
     mesurées entre 16 et 34 px. On agit sur le rembourrage et une hauteur
     minimale, jamais sur la taille du texte, pour ne pas grossir l'écran. */
  .ajouter,.bouton,.filtre,.vider,.mode,.onglet,.retirer,
  .vendre-pos,.replier,.effacer,.auth-bouton,.auth-sortie,
  .voir-plus .ajouter{min-height:44px}
  .ajouter,.bouton{padding:12px 20px}
  .filtre{padding:11px 16px}
  .vider,.retirer,.vendre-pos{padding:10px 16px}
  .onglet{padding:12px 16px}
  .mode{padding:11px 20px}
  .indic-bascule{width:44px;height:44px}

  /* Les liens de texte isolés gagnent une zone tactile sans changer de
     taille : le padding déborde sur l'interligne, invisible à l'œil. */
  .lien,.veille-lien,.fil-lien,.presse-titre a,
  .weekly-lien a,.cadre-pied a,.indic-lien a,.publi-pied a,
  .presse-pied a,.actu-sommaire a{padding:8px 0;display:inline-block}
  /* Le titre d'une carte de valeur : la cible utile est la carte entière,
     dont le lien couvre déjà la surface par ::after. Il lui manquait
     seulement de la hauteur propre. */
  /* Le titre d'une carte de valeur est le seul lien qu'elle porte : la carte
     n'est pas cliquable en entier, un <a> enveloppant avalerait les clics du
     graphique TradingView qu'elle contient. Il lui faut donc sa propre
     hauteur de cible. */
  .fiche-lien{display:inline-block;padding:9px 0}
  /* La marque : c'est le retour à l'accueil, la cible la plus utilisée
     d'un site consulté au pouce. */
  .marque{display:inline-flex;align-items:center;min-height:44px}

  /* ── Le plancher de lisibilité ──
     Onze pixels et demi se lisent sur un écran de bureau à cinquante
     centimètres ; pas sur un téléphone tenu à bout de bras, souvent dehors.
     Douze est le plancher retenu, sans toucher à la hiérarchie : tout ce
     qui était plus petit y monte, rien de plus.

     Les sélecteurs sont doublés par leur conteneur là où une règle plus
     spécifique fixait déjà la taille : sans cela, .champ .aide (0,2,0) et
     .titre-pos .tick (0,2,0) l'emportaient et rien ne bougeait. */
  .compte-note,.aide,.champ .aide,
  .tick,.mover-nom .tick,.titre-pos .tick,.fiche-nom .tick,
  .fiche-secteur,.indic-meta,.fil-date,.presse-quand,
  .weekly-note .sur,.courbe-legende,.courbe-bornes,
  .op,.maj,.mentions,.avis{font-size:.76rem}
  .courbe-zero-lib{font-size:11px}
  .fiche-absent,.indic-source,.voir-plus-nb,
  .fiche-per span,.indic-source-graphe,.presse-pied{font-size:.76rem}

  /* ── L'en-tête d'une carte de valeur ──
     Nom à gauche, secteur à droite, sur une seule ligne : à 380 px le
     secteur débordait de sa boîte de 96 px (mesuré à 119) et se faisait
     rogner. Les deux passent l'un sous l'autre, et le secteur retrouve
     toute la largeur. */
  .fiche-tete{flex-wrap:wrap;gap:4px 10px}
  /* flex-basis à 100 % et non un simple retour à la ligne : au gré de la
     longueur du nom, le secteur se retrouvait tantôt à droite du titre,
     tantôt dessous, et la grille de cartes paraissait mal alignée. Il prend
     donc toujours sa propre ligne. */
  .fiche-secteur{flex:1 1 100%;max-width:100%;text-align:left}

  /* ── Le menu, qui défile sans le dire ──
     Sept destinations pour 344 px : la barre défile déjà, mais sa glissière
     est masquée et rien n'indiquait qu'il restait quelque chose à droite.
     Un dégradé sur le bord droit du bandeau le montre, et s'efface de
     lui-même quand on arrive au bout. */
  .tete .wrap{position:relative}
  .menu{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .menu a{scroll-snap-align:start}

  /* ── Les tableaux qui défilent ──
     Positions, journal, classement et comparateur restent en tableau : les
     empiler en fiches ferait perdre la comparaison colonne par colonne, qui
     est justement ce qu'on vient y chercher. On rend le défilement
     perceptible plutôt que de le supprimer. */
  .defile{-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .defile::-webkit-scrollbar{height:4px}
  .defile::-webkit-scrollbar-thumb{background:#D8D0EC;border-radius:99px}

  /* ── L'en-tête, une fois connecté ──
     La marque, l'adresse et « Se déconnecter » se disputaient une seule
     ligne : l'adresse, tronquée à 132 px, poussait le bouton hors de
     l'écran, où il devenait inatteignable. L'adresse passe donc sous la
     marque, sur toute la largeur, et le bouton retrouve sa place.

     On la garde plutôt que de l'effacer : c'est ce qui dit AVEC QUEL COMPTE
     on est connecté, et un simulateur de portefeuille sans cette indication
     laisserait douter de ce qu'on regarde. */
  .auth-compte{flex-wrap:wrap;gap:2px 12px}
  .auth-courriel{max-width:100%;font-size:.78rem;font-weight:500;
    color:var(--brume);order:2;flex:1 1 100%}
  .auth-sortie{order:1}

  /* ── Les quatre sélecteurs du comparateur ──
     Les autres formulaires gardent leurs deux colonnes : une quantité et un
     prix sont des nombres courts, ils y tiennent. Ici les options portent
     « ATW — Attijariwafa Bank », et 150 px les tronquaient au ticker, ce qui
     retire justement ce que le sélecteur sert à retrouver. */
  #champs-choix{grid-template-columns:1fr}

  /* ── Respiration générale ──
     26 px de marge de part et d'autre sur 380 px, c'est un septième de
     l'écran perdu. 16 suffisent à ne pas coller au bord. */
  .wrap{padding:0 16px}
  .cadre-tete,.cadre-pied,.pupitre-corps{padding-left:16px;padding-right:16px}
  h1{overflow-wrap:break-word}
}

/* ══════════════════════════════════════════════════════════════════════
   11. ANIMATION

   Six moments, tous voulus, aucun générique. Il n'y a délibérément aucune
   apparition au défilement : une page dont chaque section entre en scène
   fatigue à la deuxième lecture, et c'est le contenu qu'on vient lire.

     11a. Ouverture de la « une »
     11b. Signature : le trait qui se dessine
     11c. Micro-interactions des commandes
     11d. Bascule d'onglet et de filtre
     11e. Scintillement d'attente
     11f. Transition entre les pages
     11g. Moins de mouvement, sur demande
     11h. Arrivée d'une donnée chargée
     11i. Survol d'une carte — le patron commun

   Les durées viennent des jetons de la section 1. Aucune valeur en dur ici.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 11a. Ouverture de la « une » ── */
@media (prefers-reduced-motion:no-preference){
  .une h1,.une .cadre{opacity:0;transform:translateY(10px);
    animation:leve .6s var(--sortie) forwards}
  .une .cadre{animation-delay:.14s}
  @keyframes leve{to{opacity:1;transform:none}}
}

/* ── 11b. Signature : le trait qui se dessine ──
   Le seul moment franchement animé du site, et il ne joue qu'une fois, au
   chargement de l'accueil. Un trait unique et droit, pas une courbe : sur un
   site de bourse, deux courbes qui se dessinent seraient lues comme une
   donnée de marché, et il n'y en a aucune derrière. */
.signature{display:block;width:min(340px,72%);height:auto;margin-top:20px}
.signature line{stroke:var(--mauve);stroke-width:3;stroke-linecap:round}

/* Le 340 est la longueur du trait dans le repère du SVG, pas une durée :
   c'est une donnée de géométrie, elle reste ici. Toute valeur supérieure ou
   égale à la longueur réelle (337) masque bien le trait au départ. */
@media (prefers-reduced-motion:no-preference){
  .signature line{stroke-dasharray:340;stroke-dashoffset:340;
    animation:tracer var(--t-trace) var(--sortie) .32s forwards}
  @keyframes tracer{to{stroke-dashoffset:0}}
}

/* ── 11c. Micro-interactions des commandes ──
   Deux familles séparées, parce qu'elles ne se comportent pas pareil :
   ce qui flotte sur la page peut se soulever, ce qui est encastré dans un
   rail ne le peut pas sans avoir l'air décollé. */

/* Ce qui flotte : boutons pleins, boutons de bordure, pastilles de filtre. */
.bouton,.ajouter,.auth-bouton,.vider,.filtre,.replier{
  transition:background-color var(--t-rapide),border-color var(--t-rapide),
    color var(--t-rapide),transform var(--t-rapide) var(--sortie),
    box-shadow var(--t-rapide)}

@media (prefers-reduced-motion:no-preference){
  .bouton:hover,.ajouter:not(:disabled):hover,.auth-bouton:hover,
  .vider:hover,.filtre:hover,.replier:hover{transform:translateY(-2px)}
  .bouton:active,.ajouter:not(:disabled):active,.auth-bouton:active,
  .vider:active,.filtre:active,.replier:active{
    transform:translateY(0) scale(.985);transition-duration:80ms}
}

/* Le bouton plein gagne une ombre en même temps qu'il se soulève : sans
   elle, il a l'air de glisser plutôt que de se détacher. */
.bouton:hover,.ajouter:not(:disabled):hover{box-shadow:var(--ombre-bouton)}
.bouton:active,.ajouter:not(:disabled):active{box-shadow:var(--ombre-bouton-bas)}

/* Ce qui est encastré : segments d'onglets, liens de navigation soulignés.
   Pas de soulèvement — seulement la couleur, et un enfoncement au clic. */
.onglet,.mode{transition:background-color var(--t-rapide),color var(--t-rapide),
  transform var(--t-rapide) var(--sortie)}
.menu a,.lien,.retirer,.auth-sortie{
  transition:color var(--t-rapide),border-color var(--t-rapide),
    background-color var(--t-rapide),transform var(--t-rapide) var(--sortie)}

@media (prefers-reduced-motion:no-preference){
  .onglet:active,.mode:active{transform:scale(.97);transition-duration:80ms}
  .menu a:hover,.lien:hover,.retirer:hover,.auth-sortie:hover{
    transform:translateY(-1px)}
  .menu a:active,.lien:active,.retirer:active,.auth-sortie:active{
    transform:translateY(0) scale(.98);transition-duration:80ms}
}

/* Les cartes de rapport se soulèvent elles aussi, mais à peine : elles sont
   grandes, et un grand objet qui bouge beaucoup devient bruyant. */
.rapport{transition:transform var(--t-douce) var(--sortie),
  box-shadow var(--t-douce),border-color var(--t-rapide)}
@media (prefers-reduced-motion:no-preference){
  .rapport:hover{transform:translateY(-3px);
    box-shadow:var(--ombre-levee)}
}

/* ── 11d. Bascule d'onglet et de filtre ──
   Le contenu se pose au lieu d'apparaître d'un bloc. Le glissement est
   horizontal et très court : il indique un changement de volet, pas un
   déplacement dans la page. */
@media (prefers-reduced-motion:no-preference){
  .bascule{animation:bascule var(--t-douce) var(--sortie)}
  @keyframes bascule{
    from{opacity:0;transform:translateX(7px)}
    to{opacity:1;transform:none}
  }
  /* Le panneau de connexion descend depuis son bouton. */
  .auth-panneau:not([hidden]){animation:deplie var(--t-douce) var(--sortie)}
  @keyframes deplie{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:none}
  }
}

/* ── 11e. Scintillement d'attente ──
   Un widget distant met parfois deux secondes à répondre. Un rectangle blanc
   muet laisse croire à une panne ; un scintillement dit « ça arrive ». Il
   disparaît dès que le contenu est là. */
.chargement{position:relative;overflow:hidden;
  background:linear-gradient(90deg,
    var(--chaux) 0%, var(--mauve-voile) 38%, var(--chaux) 76%);
  background-size:280% 100%}

@media (prefers-reduced-motion:no-preference){
  .chargement{animation:scintille 1.5s linear infinite}
  @keyframes scintille{
    from{background-position:130% 0}
    to{background-position:-130% 0}
  }
}

/* Le message d'attente respire doucement plutôt que de rester figé. */
@media (prefers-reduced-motion:no-preference){
  .attente,.auth-attente{animation:respire 1.9s ease-in-out infinite}
  @keyframes respire{50%{opacity:.55}}
}

/* ── 11f. Transition entre les pages ──
   API View Transitions, en CSS seul : aucun script, donc aucun risque de
   casser un lien. Les navigateurs qui ne connaissent pas cette règle
   l'ignorent, et la navigation reste exactement ce qu'elle était.
   Ne fonctionne qu'en même origine, donc pas en ouverture par file://. */
@view-transition{navigation:auto}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--t-douce);
  animation-timing-function:var(--sortie);
}

/* ── 11h. Arrivée d'une donnée chargée ──

   La règle du projet reste : aucune apparition au défilement. Celle-ci est
   d'une autre nature — elle ne se déclenche pas parce qu'on descend dans la
   page, mais parce qu'une donnée VIENT D'ARRIVER du réseau. Elle dit
   « c'est chargé », ce qu'un remplacement sec ne dit pas : sur une
   connexion lente, on ne sait pas si l'on regarde un état vide ou un état
   en cours.

   À poser par le script au moment du rendu, jamais dans le HTML statique. */
.arrive{animation:arriver var(--t-douce) var(--sortie) both}
@keyframes arriver{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* Un décalage léger quand plusieurs éléments arrivent ensemble : la grille
   se pose au lieu d'apparaître d'un bloc. Quatre paliers suffisent — au
   delà, l'attente se voit. */
.arrive-2{animation-delay:40ms}
.arrive-3{animation-delay:80ms}
.arrive-4{animation-delay:120ms}

/* ── 11i. Survol d'une carte — le patron commun ──

   Trois pages avaient chacune inventé son survol de carte, avec trois
   ombres différentes. Un seul patron désormais : le bord se teinte, le fond
   passe au blanc de chaux, une ombre douce apparaît. Le soulèvement, lui,
   est réservé aux cartes CLIQUABLES — un objet qui se soulève promet qu'il
   mène quelque part. */
.carte-survol{transition:border-color var(--t-rapide),
  background-color var(--t-rapide),box-shadow var(--t-douce),
  transform var(--t-douce) var(--sortie)}
.carte-survol:hover{border-color:#D7CBF0;box-shadow:var(--ombre-carte)}
@media (prefers-reduced-motion:no-preference){
  .carte-survol.carte-cliquable:hover{transform:translateY(-2px)}
}

/* ── 11g. Moins de mouvement, sur demande ──
   Les jetons de durée sont déjà tombés à 1 ms en section 1. Restent les
   animations dont il faut aussi neutraliser la FORME : un déplacement de
   7 px en 1 ms reste un saut visible, et une boucle infinie ne s'arrête
   pas toute seule. */
@media (prefers-reduced-motion:reduce){
  /* Plus aucune boucle : ni scintillement, ni respiration, ni tracé. */
  .chargement{animation:none;background:var(--chaux)}
  .attente,.auth-attente{animation:none}
  .signature line{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  /* La donnée arrive sans glisser : elle est simplement là. L'information
     « c'est chargé » se perd, mais elle ne valait pas un mouvement imposé
     à qui n'en veut pas. */
  .arrive{animation:none}
  .message.ok,.message.ko{animation:none}
  .carte-survol:hover{transform:none}
  /* Les survols qui décalent le contenu : le filet et la couleur restent,
     le déplacement disparaît. Un texte qui glisse sous le curseur est
     précisément ce que ce réglage demande d'éviter. */
  .veille-carte,.notion,.veille-carte::before{transition:none}
  .veille-carte:hover,.notion:hover{padding-left:0}
  .fiche:hover{transform:none}
  /* La croix passe d'un état à l'autre sans transition : le signe change,
     il ne pivote plus. Investiw.bascule() neutralise déjà la pose du
     panneau lui-même. */
  .indic-croix::after{transition:none}
  /* Les cartes du fil ne bougent plus : ni soulèvement, ni zoom de
     vignette. Le changement de bordure et de fond, lui, reste — il porte
     l'information « cette carte est survolée ». */
  .fil-carte:hover{transform:none;box-shadow:none}
  .fil-vignette img,.fil-carte:hover .fil-vignette img{transform:none;
    transition:none}
  /* Le tracé progressif des courbes macro : le script ne le pose déjà pas
     quand le mouvement est refusé, cette règle couvre le réglage changé en
     cours de route. */
  .courbe-macro .courbe-trait{stroke-dasharray:none!important;
    stroke-dashoffset:0!important;transition:none!important}
  /* Le script ne pose déjà pas le tracé progressif de la courbe quand le
     mouvement est refusé ; cette règle couvre le réglage changé en cours
     de route, sans recharger la page. */
  .courbe-trait{stroke-dasharray:none!important;stroke-dashoffset:0!important;
    transition:none!important}

  /* Plus aucun déplacement au survol ni au clic. */
  .bouton:hover,.bouton:active,
  .ajouter:hover,.ajouter:active,
  .auth-bouton:hover,.auth-bouton:active,
  .vider:hover,.vider:active,
  .filtre:hover,.filtre:active,
  .replier:hover,.replier:active,
  .onglet:active,.mode:active,
  .menu a:hover,.menu a:active,
  .lien:hover,.lien:active,
  .retirer:hover,.retirer:active,
  .auth-sortie:hover,.auth-sortie:active,
  .rapport:hover{transform:none}

  /* Les changements de couleur, eux, restent : ils portent une information
     (survol, état actif) et ne provoquent aucun mouvement. */
  .une h1,.une .cadre{opacity:1;transform:none;animation:none}
  .bascule,.auth-panneau:not([hidden]){animation:none}

  /* Un fondu de 1 ms plutôt qu'un fondu supprimé : la transition de page
     reste techniquement active, mais imperceptible. */
  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:1ms}
}