/* RadarPresse — maquette V2, gabarit iClosed. Version 2, 26/07 au soir.
   Se pose PAR-DESSUS ../public/site.css : la charte rose reste la source.

   Ce qui change depuis la v1 de cette feuille, et pourquoi :
   1. Le hero suit enfin le gabarit relevé sur iclosed.io : la preuve sociale est
      un BANDEAU sous le hero, pas une colonne dedans. La colonne de droite est
      rendue au personnage, en pleine hauteur.
   2. L'avant / apres ne se lit plus en gris sur gris. On MONTRE les deux etats
      au lieu de les decrire : a gauche la pile de sources en vrac, a droite
      l'alerte unique. Contraste blanc-sur-anthracite, jamais gris-sur-gris.
   3. Un bloc de reassurance (RGPD, AI Act, souverainete, IA francaise, base
      fermee) : sans lui, un responsable presse ne prend pas le rendez-vous. */

/* ---------- Le bandeau qui dit quelle maquette on regarde. Local seulement. ---------- */
.repere{position:fixed;left:14px;bottom:14px;z-index:99;background:var(--surface);color:#fff;
  border-radius:0;padding:9px 14px;font-family:var(--titre);font-size:12px;letter-spacing:.04em;max-width:320px}
.repere span{display:block;font-family:var(--corps);font-weight:400;font-size:11px;color:#E3E3E3;
  letter-spacing:0;margin-top:3px;line-height:1.4}

.socle{margin-top:24px;padding:18px 22px;border-radius:var(--r);background:rgba(231,105,187,.12);
  border:1px solid var(--rose);font-size:16px;line-height:1.6}
.socle b{font-family:var(--titre);font-weight:400}

.bar{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.93);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--ligne)}
.bar .top{padding:14px 0}

/* ===========================================================
   1 · LE HERO. Deux colonnes, la droite entierement au personnage.
   =========================================================== */
.hero3{position:relative;overflow:hidden;padding:34px 0 0}
.hero3::before{content:"";position:absolute;right:-6%;top:-260px;width:820px;height:820px;
  border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 34px,rgba(231,105,187,.14) 34px 35px)}
.hero3 .wrap{position:relative}
.hero3-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:end;min-height:520px}
.hero3-txt{padding-bottom:58px}

.hero3 .cible{font-family:var(--titre);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris-clair);margin:0 0 15px}
/* 15ch cassait « avant la concurrence » sur trois lignes bancales a 1440.
   18ch laisse la ligne respirer sans que le titre ne parte trop a droite. */
.hero3 h1{font-size:clamp(38px,4.8vw,50px);margin-bottom:20px;max-width:18ch;text-wrap:balance}
/* Le mot mis en valeur reste blanc, c'est le filet magenta dessous qui le
   designe (regle commune dans systeme.css). */
.hero3 h1 .hi{color:var(--blanc)}
.hero3 .comment{font-size:16px;line-height:1.6;color:var(--enc2);max-width:46ch;margin:0 0 28px}
.hero3 .comment b{color:var(--enc)}

.entree{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.brancher{width:100%;max-width:470px;background:var(--carte);border:1px solid var(--ligne);
  border-radius:var(--r);padding:15px 17px}
.brancher .bl{font-family:var(--corps);font-weight:700;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gris);margin:0 0 11px}
.brancher .row{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;
  border:1px solid var(--ligne);background:var(--carte);font-size:12px;font-weight:700;
  color:var(--enc2);white-space:nowrap}
.chip svg{width:15px;height:15px;flex:none;stroke:var(--rose-txt);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* La vraie marque, quand elle existe. Une seule encre, blanche : neuf logos
   dans leurs couleurs d'origine feraient neuf accents sur une page qui n'en
   admet qu'un. C'est le traitement d'usage sur une bande d'integrations, et
   il respecte les chartes des marques citees (marque nominative, forme
   inchangee, une seule couleur autorisee par chacune). */
.chip .mq{width:17px;height:17px;flex:none;object-fit:contain;display:block}
/* Un LOGOTYPE (Datapresse, Press Monitor) porte deja le nom de la marque :
   il remplace le libelle au lieu de s'ajouter a lui, et il lui faut une
   largeur libre. Le nom vit dans l'alternative textuelle. */
.chip .mq-mot{width:auto;height:22px;max-width:160px}
/* Ces deux marques tiennent sur DEUX lignes (« a CISION product », « PRESS /
   MONITOR ») : a 15 px la seconde ligne ne se lisait plus. La pastille monte
   avec elles. */
.chip:has(.mq-mot){padding:0 14px;height:40px}
.chip.plus{background:rgba(231,105,187,.12);border-color:var(--rose);color:var(--gris-clair)}

/* Le personnage. Il est pose au fond de la colonne, sans cadre ni carte :
   c'est ce qui le fait exister comme quelqu'un plutot que comme une illustration. */
.hero3-perso{position:relative;display:flex;justify-content:center;align-items:flex-end}
.hero3-perso img{width:100%;max-width:470px;height:auto;display:block;position:relative;z-index:2}
/* Le halo derriere elle : il la detache du fond sans lui dessiner de boite. */
.hero3-perso::before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:420px;height:420px;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(231,105,187,.30) 0%,rgba(231,105,187,0) 70%)}
/* Sa carte d'identite, posee sur l'image en bas a gauche. */
.perso-carte{position:absolute;left:0;bottom:32px;z-index:3;background:var(--surface);color:#fff;
  border-radius:0;padding:14px 18px;max-width:250px}
.perso-carte .nom{font-family:var(--titre);font-size:21px;line-height:1.1;margin-bottom:4px}
.perso-carte .role{font-size:12px;color:#E3E3E3;line-height:1.4;margin-bottom:9px}
.perso-carte .etat{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris-clair);
  background:rgba(231,105,187,.16);border:1px solid rgba(231,105,187,.42);border-radius:0;padding:3px 10px}
.perso-carte .etat i{width:6px;height:6px;border-radius:50%;background:var(--rose);flex:none;
  animation:pouls 2.2s ease-in-out infinite}
@keyframes pouls{0%,100%{opacity:.35}50%{opacity:1}}

/* ===========================================================
   2 · LE BANDEAU DE PREUVE, sous le hero. Gabarit iClosed :
   la preuve sociale est une bande pleine largeur, pas une colonne.
   =========================================================== */
.bande-avis{background:var(--surface);color:#fff;padding:34px 0 30px}
.bande-avis .lbl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--corps);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris-clair);margin:0 0 20px}
.bande-avis .lbl .sep{flex:1;height:1px;background:rgba(0,0,0,.14);min-width:20px}
.bande-avis .lbl .cnt{color:var(--gris-clair);font-weight:500;letter-spacing:0;text-transform:none;font-size:12px}

.av-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.av-row .a{background:rgba(0,0,0,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:0;padding:18px 19px;display:flex;flex-direction:column}
/* Les deux clientes du produit sont entourees : c'est la seule difference visible. */
.av-row .a.produit{background:rgba(231,105,187,.10);border:1.5px solid var(--rose)}
.av-row .a .tg{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gris-clair);margin-bottom:11px}
.av-row .a.maison .tg{color:var(--gris-clair)}
.av-row .a q{display:block;font-size:14px;line-height:1.5;color:#E3E3E3;quotes:"\00ab\00a0" "\00a0\00bb";margin-bottom:14px}
.av-row .a .qui{display:flex;align-items:center;gap:10px;margin-top:auto}
.av-row .a .qui img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.av-row .a .qui .sil{width:34px;height:34px;border-radius:50%;flex:none;background:rgba(231,105,187,.14);
  border:1px solid rgba(231,105,187,.45);display:flex;align-items:center;justify-content:center}
.av-row .a .qui .sil svg{width:18px;height:18px;fill:none;stroke:var(--rose);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.av-row .a .qui b{display:block;font-family:var(--titre);font-weight:400;font-size:12px;color:#fff;letter-spacing:-.01em}
.av-row .a .qui span{display:block;font-size:11px;color:var(--gris-clair);line-height:1.35;margin-top:2px}
.bande-note{margin:18px 0 0;font-size:11px;color:var(--gris-clair);line-height:1.5}

/* ===========================================================
   3 · LES TROIS BASES. On MONTRE l'avant et l'apres.
   =========================================================== */
/* Le titre et le chapeau d'un volet. Ces regles vivaient sous `.vue2`,
   une classe qui n'existe plus depuis que le composant est partage :
   le titre de phase se lisait donc comme du corps de texte. */
.volet .vt{font-family:var(--titre);font-size:clamp(21px,2.9vw,28px);line-height:1.15;
  margin:0 0 10px;color:var(--enc)}
.volet .vd{font-size:16px;line-height:1.6;color:var(--gris);margin:0 0 var(--e-6,48px);max-width:72ch}
.volet .vd b{color:var(--enc)}

/* Le face-a-face. Deux panneaux de meme hauteur, contraste maximal :
   l'avant est clair et desordonne, l'apres est sombre et net. */
/* Les deux panneaux se lisent en vis-a-vis : étiquette contre étiquette,
   titre contre titre, image contre image, liste contre liste. Sans ça, un
   titre sur deux lignes à gauche décale toute la colonne de droite et
   l'oeil doit chercher ce qui répond à quoi.
   La sous-grille fait ça toute seule : les deux panneaux partagent les
   MEMES lignes, pas seulement la meme largeur. */
.duel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto auto 1fr;gap:0 18px;align-items:stretch}
.duel > .pan{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;row-gap:14px}
/* Repli si la sous-grille manque : on retombe sur deux colonnes normales. */
@supports not (grid-template-rows:subgrid){
  .duel{grid-template-rows:none}
  .duel > .pan{display:flex;flex-direction:column;grid-row:auto}
}
.pan{border-radius:var(--r-l);padding:24px 24px 26px;display:flex;flex-direction:column}
.pan.avant{background:transparent;border:1px dashed rgba(255,255,255,.28)}
.pan.apres{background:var(--surface);color:#fff;border:1px solid var(--ligne);position:relative}
/* Les equerres du panneau, reprises des encadres techniques de la banniere :
   c'est ce qui dit « celui-la est le notre » sans ajouter un mot. */
.pan.apres::before,.pan.apres::after{content:"";position:absolute;width:14px;height:14px;
  border:2px solid var(--rose)}
.pan.apres::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.pan.apres::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.pan .pl{display:flex;align-items:center;gap:9px;font-family:var(--corps);font-weight:700;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 6px}
.pan.avant .pl{color:var(--gris-clair)}
.pan.apres .pl{color:var(--gris-clair)}
.pan .pt{font-family:var(--titre);font-size:21px;line-height:1.25;margin:0 0 18px}
.pan.apres .pt{color:#fff}

/* La demonstration visuelle, en haut de chaque panneau. */
.demo{border-radius:0;padding:16px;margin:0;height:230px;display:flex;
  flex-direction:column;justify-content:center;overflow:hidden}
.demo.a{background:var(--carte);border:1px dashed var(--ligne)}
.demo.b{background:rgba(0,0,0,.05);border:1px solid rgba(255,255,255,.14)}

/* Avant : une pile d'articles en vrac, legerement de travers, qui deborde. */
.vrac{position:relative;height:164px}
.vrac .art{position:absolute;left:0;right:0;background:var(--surface);border:1px solid rgba(255,255,255,.22);
  border-radius:0;padding:9px 11px;box-shadow:none}
.vrac .art .h{display:block;height:7px;border-radius:0;background:rgba(255,255,255,.30);margin-bottom:6px}
.vrac .art .h.c{width:62%}
.vrac .art .l{display:block;height:5px;border-radius:0;background:rgba(255,255,255,.16)}
.vrac .art .src{display:block;font-size:11px;color:var(--gris-clair);margin-top:6px;letter-spacing:.04em;text-transform:uppercase}
.vrac .art:nth-child(1){top:0;transform:rotate(-1.6deg)}
.vrac .art:nth-child(2){top:44px;transform:rotate(1.1deg)}
.vrac .art:nth-child(3){top:88px;transform:rotate(-.7deg)}
.vrac .art:nth-child(4){top:132px;transform:rotate(1.8deg);opacity:.5}
/* Le voile du bas : il dit « et il y en a encore » sans l'ecrire. */
.vrac::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-16px;height:56px;
  background:linear-gradient(to bottom,rgba(0,0,0,0),#000 78%)}

/* Apres : une seule carte d'alerte, nette, avec son triplet. */
.alerte{background:#000;border:1px solid rgba(255,255,255,.22);border-radius:0;padding:15px 16px;color:var(--enc);
  box-shadow:none}
.alerte .ah{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:11px;
  border-bottom:1px solid var(--ligne)}
.alerte .ah .pt2{width:7px;height:7px;border-radius:50%;background:var(--rose);flex:none;
  box-shadow:none}
.alerte .ah b{font-family:var(--titre);font-weight:400;font-size:12px;letter-spacing:-.01em}
.alerte .ah span{margin-left:auto;font-size:11px;color:var(--gris)}
.alerte .li{display:flex;gap:9px;align-items:flex-start;padding:5px 0;font-size:12px;line-height:1.45}
.alerte .li i{flex:none;width:17px;height:17px;border-radius:0;background:rgba(231,105,187,.12);
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.alerte .li i svg{width:11px;height:11px;stroke:var(--rose-txt);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.alerte .li em{font-style:normal;color:var(--gris);display:block;font-size:11px}
.alerte .li b{color:var(--enc)}

/* Les puces sous la demonstration. Contraste corrige : plus jamais de gris sur gris. */
.pan ul{list-style:none;margin:0;padding:0}
.pan li{position:relative;padding:0 0 11px 25px;font-size:14px;line-height:1.5}
.pan li:last-child{padding-bottom:0}
.pan li::before{position:absolute;left:0;top:0;font-size:12px;font-weight:700;line-height:1.5}
.pan.avant li{color:var(--enc2)}
.pan.avant li::before{content:"\2715";color:var(--gris-clair)}
.pan.apres li{color:#E3E3E3}
.pan.apres li::before{content:"\2713";color:var(--rose)}
.pan li b{color:var(--enc)}
.pan.apres li b{color:#fff}

/* ===========================================================
   4 · LES CINQ CAS. Trois en haut, deux en bas.
   =========================================================== */
.cas{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:30px}
.cas .c{grid-column:span 2;background:var(--carte);border:1px solid var(--ligne);
  border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column}
.cas .c:nth-child(4),.cas .c:nth-child(5){grid-column:span 3}
.cas .c .h{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.cas .c .ic{width:40px;height:40px;flex:none;border-radius:50%;background:rgba(231,105,187,.12);
  border:1px solid var(--rose);display:flex;align-items:center;justify-content:center}
.cas .c .ic svg{width:20px;height:20px;stroke:var(--rose-txt);fill:none;stroke-width:1.95;
  stroke-linecap:round;stroke-linejoin:round}
.cas .c .freq{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gris-clair);background:rgba(231,105,187,.12);border-radius:0;padding:3px 10px;white-space:nowrap}
.cas .c h3{font-size:16px;line-height:1.25;margin:0 0 10px}
.cas .c p{font-size:14px;line-height:1.55;color:var(--enc2);margin:0 0 12px}
.cas .c p:last-of-type{margin-bottom:0}
.cas .c b{color:var(--enc)}
.cas .c .dit{margin-top:auto;padding-top:14px;border-top:1px solid var(--ligne);
  font-size:14px;line-height:1.5;color:var(--enc)}
.cas .c .dit span{display:block;font-size:11px;color:var(--gris);margin-top:5px}

/* ===========================================================
   5 · LE TABLEAU DE BORD.
   =========================================================== */
.board{background:var(--surface);border-radius:var(--r-l);padding:34px 32px;margin-top:30px}
.board-bar{display:flex;align-items:center;gap:10px;padding-bottom:18px;margin-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.13)}
.board-bar .pt{width:9px;height:9px;border-radius:50%;background:#1E1E1E}
.board-bar .pt.on{background:var(--rose)}
.board-bar .tt{font-family:var(--titre);font-size:14px;color:#fff;margin-left:6px}
.board-bar .pe{margin-left:auto;font-size:11px;color:var(--gris-clair)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:rgba(0,0,0,.05);border:1px solid rgba(255,255,255,.13);border-radius:0;padding:17px 16px}
.tile .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-clair);
  margin:0 0 9px;line-height:1.35;min-height:2.7em}
.tile .v{font-family:var(--titre);font-size:28px;color:var(--gris-clair);line-height:1}
.tile .v small{font-family:var(--corps);font-weight:400;font-size:12px;color:#E3E3E3;margin-left:5px}
.tile .t{font-size:12px;color:#E3E3E3;margin-top:8px;line-height:1.4}
.tile.baisse .v{color:#fff}

/* En carrousel, la tuile occupe toute la largeur : le chiffre peut enfin
   porter la carte, et c'est LUI qu'on souligne. Une carte, un chiffre, une
   phrase — le lecteur sait ou poser l'oeil sans arbitrer. */
.carrousel .tile{padding:34px 32px 36px;min-height:230px;
  display:flex;flex-direction:column;justify-content:center;gap:14px}
.carrousel .tile .k{margin:0;font-size:12px}
.carrousel .tile .v{font-size:clamp(46px,7vw,68px);color:#fff;margin:0;
  text-decoration:underline;text-decoration-color:var(--rose);
  text-decoration-thickness:.09em;text-underline-offset:.12em;
  text-decoration-skip-ink:none}
/* L'unite n'est pas le chiffre : elle ne prend pas le filet, sinon on lit
   deux traits la ou il n'y a qu'une mesure. */
.carrousel .tile .v small{font-size:.30em;margin-left:9px;color:var(--gris);
  text-decoration:none;display:inline-block}
.carrousel .tile .t{font-size:16px;line-height:1.55;color:var(--gris);margin:0;max-width:52ch}
@media(max-width:639px){.carrousel .tile{padding:26px 22px 28px;min-height:200px}}
.board-note{margin:22px 0 0;font-size:14px;line-height:1.6;color:#E3E3E3}
.board-note b{color:#fff}

/* ===========================================================
   6 · LA REASSURANCE. Le bloc sans lequel un responsable presse
   ne prend pas le rendez-vous.
   =========================================================== */
.rass{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.rass .r{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);padding:24px 22px}
.rass .r .ic{width:38px;height:38px;border-radius:50%;background:rgba(231,105,187,.12);border:1px solid var(--rose);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.rass .r .ic svg{width:19px;height:19px;stroke:var(--rose-txt);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rass .r h4{font-family:var(--titre);font-weight:400;font-size:16px;line-height:1.25;margin:0 0 9px;letter-spacing:-.01em}
.rass .r p{font-size:14px;line-height:1.55;color:var(--enc2);margin:0}
.rass .r p b{color:var(--enc)}

/* ===========================================================
   7 · LA MISE EN POSTE.
   =========================================================== */
.onb{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.onb .e{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);padding:26px 24px;
  border-top:4px solid var(--rose)}
.onb .e .q{font-family:var(--corps);font-weight:700;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris-clair);margin:0 0 11px}
.onb .e h3{font-size:21px;line-height:1.25;margin:0 0 12px}
.onb .e ul{list-style:none;margin:0;padding:0}
.onb .e li{position:relative;padding:0 0 9px 22px;font-size:14px;line-height:1.5;color:var(--enc2)}
.onb .e li:last-child{padding-bottom:0}
.onb .e li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--rose)}
.onb .e li b{color:var(--enc)}
.onb-sortie{margin-top:18px;background:var(--surface);color:#fff;border-radius:var(--r);
  padding:26px 28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.onb-sortie img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none}
.onb-sortie div{flex:1 1 380px}
.onb-sortie b{font-family:var(--titre);font-weight:400;font-size:21px;display:block;margin-bottom:7px}
.onb-sortie p{margin:0;color:#E3E3E3;font-size:16px;line-height:1.6}
.onb-sortie p em{font-style:normal;color:var(--blanc);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--rose);
  text-decoration-thickness:3px;text-underline-offset:.16em;
  text-decoration-skip-ink:none}

/* ===========================================================
   8 · LES INTEGRATIONS.
   =========================================================== */
.integ{display:flex;flex-direction:column;gap:20px;margin-top:28px}
.fam{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start;
  padding-top:20px;border-top:1px solid var(--ligne)}
.fam:first-child{border-top:none;padding-top:0}
.fam .fn{font-family:var(--titre);font-size:16px;line-height:1.25}
.fam .fs{font-size:12px;color:var(--enc2);margin-top:5px;line-height:1.45}
.fam .fr{display:flex;flex-wrap:wrap;gap:8px}

.cta-ligne{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.cta-ligne .txt{font-size:14px;color:var(--enc2);max-width:46ch;line-height:1.55}

.final{background:var(--surface);color:#fff;border-radius:var(--r-l);padding:52px 30px;text-align:center;margin:0 22px;
  position:relative;overflow:hidden}
.final h2{color:#fff;margin-bottom:16px}
.final p{color:#E3E3E3;max-width:620px;margin:0 auto 28px}

@media(max-width:1040px){
  .hero3-grid{grid-template-columns:1fr;gap:0;min-height:0}
  .hero3-txt{padding-bottom:30px}
  .hero3 h1{max-width:none}
  .hero3-perso{max-width:400px;margin:0 auto}
  .perso-carte{left:auto;right:0;bottom:14px}
  .av-row{grid-template-columns:1fr 1fr}
  .cas{grid-template-columns:repeat(2,1fr)}
  .cas .c,.cas .c:nth-child(4),.cas .c:nth-child(5){grid-column:span 1}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .rass{grid-template-columns:1fr}
  .onb{grid-template-columns:1fr}
  .fam{grid-template-columns:1fr;gap:11px}
}
@media(max-width:760px){
  .duel{grid-template-columns:1fr}
  .av-row{grid-template-columns:1fr}
  .cas{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .board{padding:26px 20px}
  /* La barre debordait a 390 : le bouton passe sous le nom. */
  .top{flex-wrap:wrap;row-gap:10px}
  .brand small{display:none}
  .lien-nav{width:100%;text-align:center}
}

/* ============================================================
   LES FILS WHATSAPP. Refaits le 26/07 : la version precedente
   etait des bulles stylisees, pas une capture. Ce qui fait qu'un
   fil WhatsApp est reconnu comme vrai, dans l'ordre d'importance :
   la QUEUE de la bulle, la barre d'etat, la pastille de date, le
   bandeau jaune de chiffrement, l'heure DANS la bulle en bas a
   droite, les deux coches bleues, et la barre de saisie en bas.
   Aucun de ces sept elements n'y etait.
   Teintes relevees sur l'application iOS, pas inventees.
   ============================================================ */
.fils{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:38px;align-items:stretch}
.fil-bloc{display:flex;flex-direction:column}
/* Trois telephones de tailles differentes se lisent comme trois produits
   differents. La coque impose la taille, la conversation s'y loge — et la
   largeur est FIXE, pas heritee de la colonne : une colonne un peu plus
   large donnait un telephone un peu plus gros, ce qui est exactement ce
   qu'on ne veut pas. */
.fil-bloc .tel2{flex:1;display:flex;flex-direction:column;
  width:100%;max-width:296px;margin-inline:auto}
.fil-bloc .tel2-ecran{flex:1;display:flex;flex-direction:column}
.fil-bloc .wa-fond{flex:1}
.fil-bloc .quand{font-family:var(--corps);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-clair);margin:0 0 14px;text-align:center}

/* ============================================================
   LA MAQUETTE DE TELEPHONE — HORS CHARTE, ET C'EST VOULU.
   charte-exception: maquette d'une application tierce, valeurs reelles
   Ce bloc represente une application tierce sur un ecran allume.
   Ce n'est pas une surface de la marque : c'est l'image d'un objet
   du monde. Les lois 3 (un seul accent) et 6 (trois rayons) ne s'y
   appliquent donc pas, exactement comme elles ne s'appliquent pas
   au contenu d'une photographie.
   Le 28/07/2026 une passe avait repeint cette maquette aux couleurs
   de la charte : l'ecran est devenu noir en gardant son texte noir,
   et plus rien ne se lisait. Les valeurs ci-dessous sont celles de
   l'application reelle, et elles ne se remplacent pas par des jetons.
   ============================================================ */

/* Le telephone. Coque sombre, ile dynamique, ecran arrondi.
   Le rayon est ici une mesure physique, pas un choix graphique. */
.tel2{background:#1a191a;border-radius:44px;padding:10px;
  position:relative;max-width:340px;margin:0 auto}
.tel2-ecran{border-radius:35px;overflow:hidden;position:relative;background:#efe7de}
/* L'ile dynamique : sans elle, l'ecran ne ressemble a rien de connu. */
.tel2-ecran::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:78px;height:22px;border-radius:14px;background:#1a191a;z-index:6}

/* La barre d'etat. */
.wa-etat{display:flex;align-items:center;justify-content:space-between;background:#f6f6f6;
  padding:13px 20px 5px;font-size:12px;font-weight:700;color:#000;letter-spacing:.01em}
.wa-etat .sig{display:flex;align-items:center;gap:4px}
.wa-etat svg{height:11px;width:auto;fill:#000}

/* L'en-tete de conversation : chevron de retour, photo, nom, appels. */
.wa-tete{display:flex;align-items:center;gap:9px;background:#f6f6f6;padding:6px 14px 9px;
  border-bottom:1px solid rgba(0,0,0,.12)}
.wa-tete .ret{width:11px;height:11px;flex:none;border-left:2.2px solid #007aff;
  border-bottom:2.2px solid #007aff;transform:rotate(45deg);margin-right:1px}
.wa-tete .ph{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.wa-tete .id{flex:1;min-width:0;display:block}
.wa-tete .nm{display:block;font-size:14px;font-weight:700;color:#000;line-height:1.2;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-tete .et{display:block;font-size:11px;color:#8e8e93;line-height:1.2;margin-top:1px}
.wa-tete .ico{display:flex;gap:15px;flex:none}
.wa-tete .ico svg{width:17px;height:17px;stroke:#007aff;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Le fond. Le motif de l'application, approche par des points doux :
   un aplat uni est le premier detail qui trahit une fausse capture. */
.wa-fond{background:#efe7de;padding:12px 9px 8px;display:flex;flex-direction:column;gap:2px;
  background-image:
    radial-gradient(rgba(120,105,90,.075) 1.1px,transparent 1.1px),
    radial-gradient(rgba(120,105,90,.055) 1.1px,transparent 1.1px);
  background-size:26px 26px,26px 26px;
  background-position:0 0,13px 13px}

/* La pastille de date et le bandeau de chiffrement. */
.wa-jour{align-self:center;background:#ffffff;color:#54656f;font-size:11px;font-weight:700;
  border-radius:7px;padding:4px 11px;margin:2px 0 7px;
  text-transform:uppercase;letter-spacing:.03em}
.wa-chiffre{align-self:center;background:#fdf4c5;color:#54656f;font-size:10px;line-height:1.4;
  border-radius:7px;padding:6px 11px;margin-bottom:9px;text-align:center;max-width:94%;
  box-shadow:none}

/* LA BULLE, et sa queue. La queue est LE detail qui fait la difference
   entre « des bulles » et « WhatsApp ». Elle ne se pose que sur le
   premier message d'un groupe, comme dans l'application. */
.wa-fond .b{max-width:85%;padding:6px 9px 7px;border-radius:7px;font-size:14px;line-height:1.42;
  color:#111b21;position:relative;margin-bottom:3px;
  word-wrap:break-word}
.wa-fond .b.r{background:#ffffff;align-self:flex-start}
.wa-fond .b.e{background:#e7ffdb;align-self:flex-end}
.wa-fond .b.q{margin-top:5px}
.wa-fond .b.r.q{border-radius:0 7px 7px 7px}
.wa-fond .b.e.q{border-radius:7px 0 7px 7px}
.wa-fond .b.r.q::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;
  background:#ffffff;clip-path:polygon(100% 0,100% 100%,0 0)}
.wa-fond .b.e.q::before{content:"";position:absolute;top:0;right:-8px;width:8px;height:13px;
  background:#e7ffdb;clip-path:polygon(0 0,0 100%,100% 0)}
.wa-fond .b strong{font-weight:700}
.wa-fond .b em{font-style:normal;font-weight:700;color:#017561}
/* L'heure vit DANS la bulle, en bas a droite, et le texte lui laisse
   la place : c'est pour ca que WhatsApp reserve un creux en fin de ligne. */
.wa-fond .b .m{float:right;margin:6px -2px -3px 8px;font-size:10.5px;color:rgba(17,27,33,.45);
  line-height:1;white-space:nowrap;display:flex;align-items:center;gap:2px}
.wa-fond .b .m svg{width:14px;height:11px;fill:none;stroke:#53bdeb;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.wa-fond .b .m.env svg{stroke:rgba(17,27,33,.4)}

/* La piece jointe. */
.wa-fond .b .pj{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.045);border-radius:7px;
  padding:8px 9px;margin:1px 0 5px}
.wa-fond .b .pj .fic{width:32px;height:38px;flex:none;border-radius:4px;background:#ffffff;
  display:flex;align-items:center;justify-content:center;box-shadow:none}
.wa-fond .b .pj .fic svg{width:16px;height:16px;stroke:#d64541;fill:none;stroke-width:1.9}
.wa-fond .b .pj .t{display:block;font-size:12px;font-weight:700;color:#111b21;line-height:1.25}
.wa-fond .b .pj .s{display:block;font-size:10.5px;color:#667781;margin-top:2px}

/* Le message vocal, avec sa forme d'onde. Personne ne met ca dans une
   fausse capture, et c'est exactement pour ca qu'il faut le mettre. */
.wa-fond .b .voc{display:flex;align-items:center;gap:9px;min-width:190px;padding:2px 0 3px}
.wa-fond .b .voc .pl{width:26px;height:26px;flex:none;border-radius:50%;background:#54656f;
  display:flex;align-items:center;justify-content:center}
.wa-fond .b .voc .pl svg{width:11px;height:11px;fill:#fff}
.wa-fond .b .voc .onde{flex:1;display:flex;align-items:center;gap:1.8px;height:22px}
.wa-fond .b .voc .onde i{flex:1;background:#a8b4bb;border-radius:2px;display:block}
.wa-fond .b .voc .onde i.j{background:#54656f}
.wa-fond .b .voc .dur{font-size:10.5px;color:#667781;flex:none}

/* La reponse citee. */
.wa-fond .b .cit{border-left:3px solid #017561;background:rgba(0,0,0,.04);border-radius:5px;
  padding:5px 8px;margin-bottom:4px}
.wa-fond .b .cit .qui{display:block;font-size:11px;font-weight:700;color:#017561;line-height:1.2}
.wa-fond .b .cit .txt{display:block;font-size:11.5px;color:#667781;line-height:1.3;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* La barre de saisie. Sans elle, l'ecran s'arrete dans le vide. */
.wa-bas{display:flex;align-items:center;gap:9px;background:#f6f6f6;padding:8px 12px 15px;
  border-top:1px solid rgba(0,0,0,.09)}
.wa-bas .plus{font-size:21px;color:#8e8e93;line-height:.8;flex:none;font-weight:300}
.wa-bas .champ{flex:1;background:#ffffff;border:1px solid rgba(0,0,0,.13);border-radius:16px;
  height:30px;display:flex;align-items:center;padding:0 11px;font-size:12px;color:#b8b8bd}
.wa-bas .mic{width:17px;height:17px;flex:none;stroke:#8e8e93;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.fil-note{margin:16px 0 0;font-size:14px;line-height:1.55;color:#D4D4D4;text-align:center;
  /* Trois lignes reservees : sans ca, la legende la plus longue rognait
     son telephone et les trois coques n'avaient plus la meme taille. */
  min-height:calc(3 * 1.55em)}

@media(max-width:1000px){
  .fils{grid-template-columns:1fr;gap:44px}
}

/* charte-fin-exception */

/* ============================================================
   LE BLOC DE CADRE JURIDIQUE, SORTI DES CARTES.
   Le squelette en conserve, c'est quatre grilles de cartes qui
   s'enchainent : tableau de bord, cadre, mise en poste, outils.
   Celle-ci devient une FICHE TECHNIQUE, en deux colonnes, filets
   entre les lignes, picto en ligne. On lit une annexe de contrat,
   pas une plaquette. C'est le seul endroit de la page ou c'est
   exactement ce qu'on veut faire ressentir.
   ============================================================ */
.rass{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e-6,48px);margin-top:32px;
  border-top:2px solid var(--enc)}
.rass .r{background:none;border-radius:0;padding:22px 0 20px;
  border-bottom:1px solid rgba(255,255,255,.16);display:grid;
  grid-template-columns:auto 1fr;column-gap:16px;row-gap:6px;align-items:start}
.rass .ic{width:30px;height:30px;border-radius:50%;background:none;margin:0;
  grid-row:1 / span 2;display:flex;align-items:flex-start;justify-content:center;padding-top:2px}
.rass .ic svg{width:22px;height:22px;stroke:var(--enc);stroke-width:1.6}
.rass h4{margin:0;font-size:16px;line-height:1.3;letter-spacing:-.01em;align-self:center}
.rass p{margin:0;font-size:14px;line-height:1.6;color:var(--gris);grid-column:2}
.rass p b{color:var(--enc)}
/* Les deux dernieres lignes n'ont pas besoin de filet : le bloc suivant
   fait la separation. */
.rass .r:nth-last-child(-n+2){border-bottom:none}

/* Le socle qui suit reprend le meme registre : une clause, pas une carte. */
.socle{border-radius:0;border-top:2px solid var(--enc);background:none;color:var(--enc2);
  padding:22px 0 0;margin-top:0;font-size:16px;line-height:1.65;max-width:78ch}
.socle b{color:var(--enc)}

@media(max-width:820px){
  .rass{grid-template-columns:1fr}
  .rass .r:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
  .rass .r:last-child{border-bottom:none}
}

/* Restes de l'ancien traitement en cartes : le cadre rose autour du picto
   et la boite du socle. Une fiche technique n'a ni l'un ni l'autre. */
.rass .ic{border:none !important;box-shadow:none}
.rass .ic svg{stroke:var(--enc) !important}
.socle{border-left:none;border-right:none;border-bottom:none;box-shadow:none}

/* ===========================================================
   TÉMOIGNAGES — carrousel sur mobile (26/07/2026).
   Neuf avis en colonne, c'est neuf écrans de pouce avant la
   suite de la page : la preuve sociale devient un mur, et le
   mur se saute. En carrousel, les neuf tiennent dans la
   hauteur d'UN avis, et on choisit d'en lire deux ou huit.
   Sur grand écran la grille reste : là, quatre par ligne se
   lisent d'un regard, un carrousel n'apporterait que des clics.
   =========================================================== */
@media (max-width:760px){
  .av-row{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* Le débord latéral rend le geste évident : on VOIT qu'une carte
       commence à droite, donc on pousse. Sans ça, un carrousel plein
       cadre se lit comme un bloc fixe et personne ne le fait glisser. */
    gap:12px;
    padding:2px 34px 12px 2px;
    margin-right:-16px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .av-row::-webkit-scrollbar{display:none}
  .av-row .a{
    flex:0 0 82%;
    scroll-snap-align:start;
    /* Hauteur commune : des cartes de tailles différentes qui défilent
       font sauter la page à chaque glissement. */
    min-height:100%;
  }
}

/* Les points. Ils ne servent pas à naviguer (le doigt fait ça très bien),
   ils disent COMBIEN il en reste — la seule information qui manque à un
   carrousel, et celle qui décide si on continue. */
.av-points{display:none}
@media (max-width:760px){
  .av-points{
    display:flex;justify-content:center;align-items:center;gap:7px;
    margin:14px 0 0;padding:0;list-style:none;
  }
  .av-points li{
    width:6px;height:6px;border-radius:50%;
    background:rgba(0,0,0,.26);
    transition:background .2s ease,width .2s ease;
  }
  .av-points li.actif{width:20px;border-radius:0;background:var(--rose)}
}


/* ------------------------------------------------------------
   LA HIERARCHIE D'ENTREE DE SECTION. Trois niveaux, trois
   traitements : l'etiquette technique en monospace, le titre en
   Archivo Black blanc, le chapeau en encre de legende et plus
   petit. Ecrits tous les trois en blanc, ils se lisaient comme
   un seul pave et plus rien ne guidait l'oeil.
   ------------------------------------------------------------ */
.eyebrow{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:400;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris-clair);margin:0 0 18px}
.eyebrow::before{content:"// ";color:var(--rose)}
section > .wrap > h2{margin-bottom:20px}
.lead{font-size:19px;line-height:1.6;color:var(--gris-clair);max-width:64ch;margin:0 0 var(--e-7,64px)}
.lead b{color:var(--enc)}


/* ------------------------------------------------------------
   LE TROISIEME EMPLACEMENT TOURNE.
   Deux clientes du produit restent fixes, et le troisieme cadre
   fait defiler les recommandations de la maison. Neuf cartes
   affichees d'un coup, personne n'en lit une seule ; trois
   cadres dont un vivant, on les lit toutes.
   ------------------------------------------------------------ */
/* Les cartes s'empilent en grille au lieu d'etre posees en absolu : le cadre
   prend alors la hauteur de la PLUS HAUTE, et plus rien n'est coupe. En
   absolu, il fallait deviner cette hauteur, et la photo et le metier de la
   personne passaient sous le pied. */
.av-row .a.rotative{position:relative;display:grid;grid-template-rows:1fr auto;
  padding:22px}
.av-row .a.rotative .rot-pile{display:grid}
.av-row .a.rotative .rot-carte{
  grid-area:1/1;background:none;border:0;padding:0;
  display:flex;flex-direction:column;justify-content:flex-start;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .38s ease,transform .38s ease,visibility 0s linear .38s}
.av-row .a.rotative .rot-carte[data-on]{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* Le pied est une ligne, pas un panneau : il compte et il propose, il ne
   prend pas la place d'un avis. */
.rot-pied{display:flex;align-items:center;gap:14px;
  margin-top:16px;padding-top:10px;border-top:1px solid var(--ligne)}
.rot-cpt{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10px;
  letter-spacing:.12em;color:var(--gris-clair)}
/* La cible tactile reste a 44 px (loi 10) mais elle est INVISIBLE : le
   bouton se voit petit, il se touche grand. */
.rot-suite{margin-left:auto;font:inherit;font-family:var(--corps);font-weight:700;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  background:transparent;border:0;border-bottom:2px solid var(--rose);
  color:var(--gris-clair);padding:2px 2px;transition:color .15s ease;
  position:relative}
.rot-suite::before{content:"";position:absolute;inset:-14px -10px;}
.rot-suite:hover{color:var(--enc)}

/* La barre de progression du cadre vivant : elle dit qu'il tourne tout seul,
   et elle s'arrete quand on le survole ou qu'on lui donne le clavier. */
.av-row .a.rotative > .barre-avance{position:absolute;left:0;bottom:0;height:2px;
  width:var(--rot-avance,0%);background:var(--rose);transition:width .2s linear}

@media(max-width:900px){.av-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .av-row .a.rotative .rot-carte{transition:none}
  .av-row .a.rotative::after{display:none}
}


/* La fréquence n'est plus le libellé de l'onglet — un libellé doit dire ce
   qu'on y gagne — mais elle reste une information utile : elle revient dans
   la carte, en étiquette technique, au niveau de gris des légendes. */
.cas .c .h{position:relative}
.cas .c .h[data-freq]::after{
  content:attr(data-freq);margin-left:auto;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11px;letter-spacing:.14em;color:var(--gris-clair)}