/* RadarPresse — alignement sur la direction artistique d'asknadir.com.
   Refonte du 03/09/2026, demandee par Nadir.

   Ce fichier ne redefinit PAS la charte : les couleurs, les polices et les
   espacements restent ceux de site.css. Il n'apporte que ce qui vient
   d'AskNadir — la pilule d'appel a l'action et ses effets — plus les
   gabarits neufs de cette refonte (carrousels de cartes, mur de logos,
   bloc personnel). Charge en dernier : il gagne sur les fichiers d'avant.  */

/* ============================================================
   1 · L'APPEL A L'ACTION, GABARIT ASKNADIR
   Repris a l'identique de components/refonte/cta.tsx : pilule
   pleine, fond ivoire, texte noir, gras, et le survol qui grandit
   d'un pour cent. C'est le seul endroit du site ou le rayon n'est
   pas nul, et c'est assume : le bouton doit etre le meme objet sur
   les deux sites.
   ============================================================ */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blanc);color:#000;
  font-family:var(--corps);font-weight:700;font-size:14px;line-height:1.3;
  letter-spacing:-.005em;text-align:center;text-decoration:none;
  padding:14px 28px;border:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.cta:hover{transform:scale(1.02)}
.cta:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.cta-2{background:transparent;color:var(--enc2);font-weight:600;
  border:1px solid rgba(255,255,255,.25)}
.cta-2:hover{border-color:rgba(255,255,255,.5);color:var(--blanc)}
.cta-l{font-size:15px;padding:16px 32px}
@media(prefers-reduced-motion:reduce){.cta{transition:none}.cta:hover{transform:none}}

/* L'en-tete : le meme bouton, en plus petit. La barre magenta collee a
   sa droite est retiree (demande du 03/09) — le bouton se suffit. */
.bar .cta{font-size:13px;padding:11px 20px}
.bar .cta::before{content:none}
@media(max-width:639px){
  .bar .cta{font-size:12px;padding:10px 16px;white-space:normal;
    max-width:56vw;line-height:1.25}
  .top{gap:10px}
  .brand{font-size:18px}
}

/* ============================================================
   2 · LE CARROUSEL DE CARTES
   Meme moteur que le carrousel de chiffres (carrousel.js), mais la
   carte porte du texte : titre court, puis des puces. Une carte a
   la fois sur telephone, deux sur ordinateur.
   ============================================================ */
.carrousel.cartes .piste>*{flex:0 0 min(100%,520px)}
@media(max-width:639px){.carrousel.cartes .piste>*{flex:0 0 100%}}

.kart{background:var(--carte);border:1px solid var(--ligne);
  border-top:3px solid var(--rose);padding:28px 26px 30px;
  display:flex;flex-direction:column;gap:14px}
.kart .n{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;
  letter-spacing:.16em;color:var(--rose-encre)}
.kart h3{font-size:20px;line-height:1.22}
.kart p{margin:0;font-size:15px;line-height:1.6;color:var(--gris)}
.kart ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.kart li{font-size:14px;line-height:1.5;color:var(--gris)}
.kart li b,.kart p b{color:var(--enc)}
.kart .note{font-size:13px;color:var(--gris-clair);border-top:1px solid var(--ligne);
  padding-top:12px;margin-top:auto}

/* ============================================================
   3 · LES TROIS POINTS
   Ce qui remplace le schema en trois temps : trois phrases
   numerotees, rien d'autre a lire.
   ============================================================ */
.points{display:grid;gap:0;margin-top:var(--e-6,28px);
  border-top:1px solid var(--ligne)}
.points li{list-style:none;display:grid;grid-template-columns:64px 1fr;
  gap:18px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--ligne)}
.points .n{font-family:var(--titre);font-size:34px;line-height:1;color:var(--rose-titre)}
.points p{margin:0;font-size:clamp(17px,2.2vw,20px);line-height:1.5;color:var(--enc)}
.points{padding:0;margin-left:0;margin-right:0}
@media(max-width:520px){
  .points li{grid-template-columns:44px 1fr;gap:12px;padding:18px 0}
  .points .n{font-size:26px}
}

/* ============================================================
   4 · LES AVIS EN CARROUSEL
   Un avis a l'ecran, on le deroule avec les fleches. Aucune
   denomination de client au-dessus de la citation : la parole
   suffit, l'etiquette encombrait.
   ============================================================ */
.carrousel.avis .piste>*{flex:0 0 min(100%,620px)}
@media(max-width:639px){.carrousel.avis .piste>*{flex:0 0 100%}}
.avi{background:var(--carte);border:1px solid var(--ligne);
  padding:32px 30px 30px;display:flex;flex-direction:column;gap:22px;
  min-height:220px}
.avi q{display:block;font-size:clamp(17px,2.2vw,21px);line-height:1.5;
  color:var(--enc);quotes:"\00ab\00a0" "\00a0\00bb"}
.avi .qui{display:flex;align-items:center;gap:12px;margin-top:auto}
.avi .qui img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.avi .qui b{display:block;font-family:var(--titre);font-weight:400;font-size:14px;
  color:var(--blanc);letter-spacing:-.01em}
.avi .qui span{display:block;font-size:12px;color:var(--gris-clair);
  line-height:1.4;margin-top:3px}
.avi.anonyme .qui{padding-left:0}

/* ============================================================
   5 · LES APPAREILS ET LE MUR DE LOGOS
   Une seule section pour la presse et les outils RP : la
   separation en quatre familles demandait quatre lectures.
   ============================================================ */
.appareils{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px}
.appareils .chip svg{stroke:var(--rose-txt)}

.mur-logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.mur-logos .chip{height:38px}
.mur-logos .chip .mq{width:18px;height:18px}
.mur-logos .chip .mq-mot{height:26px;max-width:130px}
/* Un logotype porte le nom de la marque : ecrase a 20 px, sa seconde ligne
   (« a CISION product », « PRESS / MONITOR ») ne se lit plus. La pastille
   monte avec lui, comme dans le hero. */
.mur-logos .chip:has(.mq-mot){height:46px;padding:0 14px}

/* ============================================================
   6 · LE BLOC PERSONNEL
   La photo et la phrase qui dit qui repond. Il monte AVANT les
   deroules : on sait a qui on parle avant de lire ce qu'il fait.
   ============================================================ */
.moi{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  background:var(--carte);border:1px solid var(--ligne);
  border-left:3px solid var(--rose);padding:26px 26px;margin-top:var(--e-6,28px)}
.moi img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.moi div{flex:1 1 340px}
.moi b{display:block;font-family:var(--titre);font-weight:400;font-size:21px;
  line-height:1.25;margin-bottom:8px;color:var(--blanc)}
.moi p{margin:0;font-size:16px;line-height:1.6;color:var(--gris)}

.conclu{margin:22px 0 0;font-family:var(--titre);font-weight:400;
  font-size:clamp(19px,2.6vw,24px);line-height:1.25;color:var(--blanc)}

/* ============================================================
   7 · LE HERO — l'accent change de place
   Le titre ne porte plus de mot surligne. La couleur d'accent
   passe sur « Les integrations, en un clic », qui encadre
   desormais la rangee de marques.
   ============================================================ */
.brancher{border-color:var(--rose)}
.brancher .bl{color:var(--rose-encre)}
.brancher .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.brancher .row .chip{justify-content:center;padding:0 10px;font-size:12px}
@media(max-width:520px){.brancher .row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   8 · L'EXCEPTION DE FORME
   systeme.css impose `border-radius:0 !important` a tout ce qui
   n'est pas marque hors charte : c'est la loi des angles vifs du
   Brand Book. Le bouton d'asknadir.com la respecte — mesure le
   03/09 sur la page en ligne : `border-radius: 0px`, fond blanc,
   texte noir, 14 px / 700. La pilule ecrite le matin etait une
   erreur de lecture, elle est retiree : le CTA est un rectangle,
   comme le reste du site.
   ============================================================ */

/* Meme arbitrage que le reste du site : une tete reste ronde. Ces deux
   gabarits sont neufs, ils manquaient a la liste d'exceptions. */
body :is(.moi.moi,.avi.avi .qui) img{border-radius:50% !important}

/* La pastille d'integration ne coupe plus son libelle : sur trois colonnes,
   « plus tous vos outils internes » depassait de sa case. */
.brancher .row .chip{white-space:normal;height:auto;min-height:40px;
  padding:8px 10px;text-align:center;line-height:1.25}
.brancher .row .chip:has(.mq-mot){height:auto;min-height:40px}

/* Le mur de logos et l'appel a l'action final se partageaient le meme ecran
   sur un telephone (audit-mobile, 03/09). On les separe. */
#integrations{padding-bottom:76px}

/* Quatre garanties : en trois colonnes, la quatrieme restait seule sur une
   deuxieme ligne. Deux par deux, le bloc se lit d'un regard. */
@media(min-width:640px){.rang{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   10 · LE TABLEAU DE BORD, EN UNE SEULE IMAGE
   Le carrousel d'indicateurs est retire (demande du 03/09) : on
   veut toutes les cases a l'ecran d'un coup d'oeil, plus deux
   graphiques. La grille reste une grille sur telephone — deux
   colonnes — au lieu de partir en bande defilante.
   ============================================================ */
.tdb{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tdb .tile{padding:15px 14px}
.tdb .tile .k{font-size:10px;letter-spacing:.06em}
.tdb .tile .v{font-size:26px;margin:8px 0 6px}
.tdb .tile .t{font-size:12px;line-height:1.45}
@media(max-width:900px){.tdb{grid-template-columns:repeat(2,minmax(0,1fr))}}

.gfx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.gf{margin:0;background:rgba(0,0,0,.05);border:1px solid rgba(255,255,255,.13);padding:16px}
.gf figcaption{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris-clair);margin-bottom:14px}
.gf svg{display:block;width:100%;height:auto}
@media(max-width:640px){.gfx{grid-template-columns:1fr}}

/* Le schema en trois temps garde ses trois vignettes ; sans titre
   intermediaire, la phrase porte seule et remonte d'un cran. */
.enchaine .fx-e p{color:var(--enc2);font-size:16px;max-width:34ch}

/* Sur telephone, la barre du tableau de bord passe sur deux lignes au
   lieu de superposer son titre et sa periode ; la cinquieme tuile
   occupe la ligne entiere plutot que de rester orpheline. */
@media(max-width:520px){
  .board-bar{flex-wrap:wrap}
  .board-bar .pe{margin-left:0;flex-basis:100%;padding-top:6px}
}
@media(max-width:900px){.tdb .tile:last-child{grid-column:span 2}}

/* Demande du 03/09 : « avant la concurrence » prend le rose de la
   marque, en texte. C'est la seule occurrence de magenta ecrit du
   site — mesuree a l'audit APCA avant mise en ligne. */
h1 .tinte{color:var(--rose)}

/* ============================================================
   11 · AUCUN TITRE AU-DELA DE DEUX LIGNES SUR TELEPHONE
   Les retours a la ligne ecrits a la main servent le grand ecran ;
   sur 390 px ils ajoutent une ligne de trop. On les neutralise, on
   descend la taille de base, et titres.js finit le travail en
   mesurant chaque titre reellement rendu.
   ============================================================ */
@media(max-width:640px){
  h1 br,h2 br{display:none}
  h1{font-size:30px;line-height:1.06}
  h2{font-size:22px;line-height:1.12}
  .kart h3,.enchaine h3{font-size:17px;line-height:1.2}
}

/* Le bouton de page : une seule ligne, centre, et il prend toute la
   largeur disponible (demande du 03/09 au soir). Le meme libelle partout,
   sauf dans l'en-tete ou la place manque. */
.cta-ligne{justify-content:center}
.cta-ligne .cta-l{width:100%;max-width:520px}
@media(max-width:640px){
  .cta-l{font-size:14px;padding:14px 16px;white-space:nowrap;width:100%;max-width:none}
  .final .cta-l{width:100%}
}

/* Le dernier appel a l'action est dans un encadre qui le retrecissait :
   sur telephone l'encadre respire moins, le bouton prend l'ecran. */
@media(max-width:640px){
  .final{margin:0 12px;padding:44px 14px}
}