/* Workshop Formation IA — feuille propre au site.
   Se pose PAR-DESSUS site.css + compare.css, qui portent la charte rose
   (couleurs, polices, boutons, cartes) et le gabarit visuel repris de
   radarpresse.com. Aucune couleur, aucune police n'est redefinie.

   REFONTE 26/07 : meme systeme visuel que RadarPresse, pour que les quatre
   sites se ressemblent. Les bordures grises de 1 px sont remplacees par une
   elevation a deux ombres, les rayons sont plus genereux, et il y a beaucoup
   plus d'air. La bordure ne marque plus que ce qui est ACTIF. */

:root{
  --el-1:0 1px 2px rgba(36,35,36,.05), 0 6px 18px rgba(36,35,36,.055);
  --el-2:0 2px 4px rgba(36,35,36,.06), 0 14px 38px rgba(36,35,36,.09);
  --el-rose:0 2px 4px rgba(255,152,198,.14), 0 16px 42px rgba(255,152,198,.22);
  --r-c:20px;
  --r-p:14px;
}

/* ---------- LE BANDEAU DE PREUVE, juste sous l'accroche. C'est le bloc
     principal de ce domaine : la posture se donne par les clients, pas par
     l'argumentaire. Photo, temoignage ecrit, et l'etude de cas en video
     quand elle existe. ---------- */
.bande-preuve{background:var(--enc);padding:44px 0 48px}
.bande-preuve .wrap{position:relative}
.bp-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.bp-tete .lb{font-family:var(--corps);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rose);margin:0 0 9px}
.bp-tete h2{color:#fff;font-size:clamp(28px,3vw,38px);margin:0;line-height:1.2}
.bp-tete p{color:#a89ea6;font-size:14px;line-height:1.55;margin:0;max-width:38ch}

.bp-piste{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 22px 22px;margin:0 -22px;scrollbar-width:none}
.bp-piste::-webkit-scrollbar{display:none}
.bp-c{flex:0 0 405px;scroll-snap-align:center;background:var(--papier);border-radius:var(--r-c);
  padding:0 0 26px;box-shadow:var(--el-2);display:flex;flex-direction:column;overflow:hidden}
.bp-c.avec-video{flex:0 0 460px}

/* La vignette video : on ne charge PAS le lecteur YouTube au chargement de la
   page (400 Ko et trois requetes par video). On affiche l'image, et l'iframe
   ne se pose qu'au clic. */
.bp-video{position:relative;display:block;aspect-ratio:16/9;background:#1b1a1b;cursor:pointer;
  border:none;padding:0;width:100%;overflow:hidden}
.bp-video img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.bp-video:hover img{transform:scale(1.03);opacity:.85}
.bp-video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bp-video .play i{width:62px;height:62px;border-radius:50%;background:var(--rose);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,.4);transition:.2s}
.bp-video:hover .play i{transform:scale(1.09)}
.bp-video .play svg{width:24px;height:24px;fill:var(--enc);margin-left:3px}
.bp-video .etiq{position:absolute;left:12px;top:12px;background:rgba(36,35,36,.82);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:20px;padding:5px 12px}
.bp-video iframe{width:100%;height:100%;border:0;display:block}

.bp-corps{padding:24px 26px 0;display:flex;flex-direction:column;flex:1}
.bp-tete-p{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.bp-tete-p img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.bp-tete-p .nom{font-family:var(--titre);font-size:16px;line-height:1.2;letter-spacing:-.01em}
.bp-tete-p .fonc{font-size:12px;color:var(--gris);line-height:1.35;margin-top:3px}
.bp-tete-p .date{font-size:11px;color:var(--gris-clair);margin-top:3px}
.bp-c .cle{font-family:var(--titre);font-weight:400;font-size:21px;line-height:1.32;
  letter-spacing:-.01em;color:var(--enc);margin:0 0 14px}
.bp-c .cle em{font-style:normal;color:var(--rose-txt)}
.bp-c p{font-size:14px;line-height:1.62;color:var(--enc2);margin:0 0 12px}
.bp-c p:last-child{margin-bottom:0}
.bp-c p b{color:var(--enc)}

.bp-nav{display:flex;align-items:center;gap:10px;margin-top:4px}
.bp-b{width:44px;height:44px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.bp-b:hover{background:var(--rose)}
.bp-b svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bp-b:hover svg{stroke:var(--enc)}
.bp-cpt{font-size:12px;color:#a89ea6;margin-left:4px}
.bp-src{margin:18px 0 0;font-size:14px;color:#a89ea6;line-height:1.6}
.bp-src a{color:var(--rose)}

/* ---------- Les quatre livrables. « Ce que vous repartez avec », jamais
     « ce que je fais ». Les listes sont regroupees : une puce = une idee
     complete, pas un fragment. ---------- */
.livrables{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.liv{background:var(--blanc);border-radius:var(--r-c);padding:30px 28px;
  border-top:4px solid var(--rose);display:flex;flex-direction:column;box-shadow:var(--el-1)}
.liv .h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.liv .ic{width:44px;height:44px;flex:none;border-radius:13px;background:#fff2f7;
  display:flex;align-items:center;justify-content:center}
.liv .ic svg{width:21px;height:21px;stroke:var(--rose-txt);fill:none;stroke-width:1.95;
  stroke-linecap:round;stroke-linejoin:round}
.liv h3{font-size:21px;line-height:1.25}
.liv ul{list-style:none;margin:0;padding:0}
.liv li{position:relative;padding:0 0 12px 23px;font-size:14px;line-height:1.55;color:var(--gris)}
.liv li:last-child{padding-bottom:0}
.liv li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--rose)}
.liv li b{color:var(--enc)}

/* ---------- La bande des trois engagements : delai, rarete, garantie. ---------- */
.engage{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.eng{background:#fff2f7;border-radius:var(--r-c);padding:24px 26px;box-shadow:var(--el-rose)}
.eng b{display:block;font-family:var(--titre);font-weight:400;font-size:28px;color:var(--rose-txt);
  line-height:1;margin-bottom:10px}
.eng span{font-size:14px;line-height:1.55;color:var(--enc2);display:block}
.eng span em{font-style:normal;font-weight:700;color:var(--enc)}

/* ---------- La carte unique « vous gardez ». Quatre cartes pour quatre mots
     faisaient lourd : une carte, quatre lignes. ---------- */
.garde{margin-top:26px;background:var(--enc);border-radius:var(--r-c);padding:32px 34px;
  display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;box-shadow:var(--el-2)}
.garde .t{font-family:var(--titre);font-weight:400;font-size:clamp(21px,3vw,28px);line-height:1.15;
  color:#fff;letter-spacing:-.015em;margin:0}
.garde .t em{font-style:normal;color:var(--rose)}
.garde ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.garde li{position:relative;padding-left:27px;font-size:16px;line-height:1.5;color:#e2dce1}
.garde li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--rose);box-shadow:0 0 0 4px rgba(255,152,198,.2)}
.garde li b{color:#fff}

/* ---------- Les trois profils qui reviennent le plus. ---------- */
.profils{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.prof{background:var(--blanc);border-radius:var(--r-c);padding:28px 26px;box-shadow:var(--el-1)}
.prof .t{font-family:var(--titre);font-size:16px;line-height:1.25;margin-bottom:11px}
.prof .av{font-size:14px;line-height:1.55;color:var(--gris);margin-bottom:14px}
.prof .ap{font-size:14px;line-height:1.55;color:var(--enc);padding-top:14px;
  border-top:1px solid rgba(36,35,36,.08)}
.prof .ap b{color:var(--rose-txt)}

/* ---------- Ce qu'on ne fait pas. Mieux vaut perdre le mauvais client sur la
     page que trois semaines plus tard. ---------- */
.tri{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.tri .col{border-radius:var(--r-c);padding:30px 28px}
.tri .col.oui{background:var(--enc);color:#cfc8ce;box-shadow:var(--el-2)}
.tri .col.non{background:var(--doux);box-shadow:var(--el-1)}
.tri .col .l{font-family:var(--corps);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 18px}
.tri .col.oui .l{color:var(--rose)}
.tri .col.non .l{color:var(--gris)}
.tri ul{list-style:none;margin:0;padding:0}
.tri li{position:relative;padding:0 0 13px 27px;font-size:14px;line-height:1.55}
.tri li:last-child{padding-bottom:0}
.tri li::before{position:absolute;left:0;top:0;font-weight:700;line-height:1.55}
.tri .oui li::before{content:"\2713";color:var(--rose)}
.tri .non li{color:var(--gris)}
.tri .non li::before{content:"\2715";color:#b8524f}
.tri .oui li b{color:#fff}
.tri .non li b{color:var(--enc)}

@media(max-width:760px){
  /* La barre debordait de 89 px a 390 : « Nadir Imedjoubene Conseils » et
     « Reserver un rendez-vous » ne tiennent pas cote a cote. Le bouton passe
     sous le nom, sur toute la largeur. */
  .top{flex-wrap:wrap;row-gap:10px}
  .brand small{display:none}
  .lien-nav{width:100%;text-align:center;white-space:normal}
  .bp-c,.bp-c.avec-video{flex:0 0 86vw}
  .garde ul{grid-template-columns:1fr}
}

@media(max-width:980px){
  .livrables{grid-template-columns:1fr}
  .engage{grid-template-columns:1fr}
  .profils{grid-template-columns:1fr}
  .tri{grid-template-columns:1fr}
  .garde{grid-template-columns:1fr;gap:22px}
}

/* ============================================================
   PASSE ANTI-SLOP STRUCTURELLE — 26/07.
   Le systeme commun avait deja corrige le rythme, l'echelle typo,
   le mouvement et les bordures. Restait le tell le plus couteux des
   34 : le SQUELETTE EN CONSERVE, six grilles de cartes qui
   s'enchainaient du bandeau de preuve jusqu'a la FAQ.
   On casse trois de ces grilles. Aucune n'est retouchee en HTML :
   c'est la meme matiere, dans une forme qui n'est pas une carte.
   ============================================================ */

/* ---------- 1. LES QUATRE ETAGES DEVIENNENT UN ESCALIER.
     Quatre cartes egales pour dire « vous etes en bas, je vous
     emmene en haut » se contredisaient elles-memes : rien ne montait.
     Ici chaque etage part plus haut que le precedent, et le dernier
     est le seul plein. La forme dit ce que le texte dit. ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:38px;
  align-items:end;border-bottom:2px solid var(--enc)}
.step{position:relative;background:none;border:none;border-radius:0;
  padding:0 22px 26px;border-left:1px solid rgba(36,35,36,.13)}
.step:first-child{border-left:none;padding-left:0}
/* L'escalier : chaque marche demarre plus haut que la precedente. */
.step:nth-child(1){padding-top:96px}
.step:nth-child(2){padding-top:64px}
.step:nth-child(3){padding-top:32px}
.step:nth-child(4){padding-top:0}
.step .n{font-family:var(--titre);font-size:38px;color:rgba(36,35,36,.16);line-height:1;margin-bottom:14px}
.step .t{font-family:var(--titre);font-size:16px;line-height:1.25;margin-bottom:9px;letter-spacing:-.01em}
.step .dl{font-family:var(--titre);font-size:14px;line-height:1.35;color:var(--gris);margin-bottom:9px}
.step .d{font-size:14px;line-height:1.55;color:var(--gris)}
/* La marche cible : la seule qui porte de la couleur, et un trait epais
   sous elle pour dire ou on arrive. */
.step.on{background:none}
.step.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:5px;background:var(--rose)}
.step.on .n{color:var(--rose-txt)}
.step.on .dl{color:var(--rose-txt);font-weight:700}
.step.on .t{font-size:21px}
.step .badge{position:static;display:inline-block;background:var(--rose);color:var(--enc);
  font-family:var(--corps);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  border-radius:20px;padding:4px 11px;margin-bottom:14px}

/* ---------- 2. LES TROIS ENGAGEMENTS SORTENT DES CARTES.
     « Exactement trois cartes en ligne » est un tell nomme. Trois faits
     n'ont pas besoin de trois boites : une bande, trois colonnes, des
     filets. On lit des conditions, pas une plaquette. ---------- */
.engage{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;
  background:none;border-top:2px solid var(--enc);border-bottom:1px solid rgba(36,35,36,.13)}
.eng{background:none;box-shadow:none;border-radius:0;padding:26px 26px 26px 0;
  border-left:1px solid rgba(36,35,36,.13)}
.eng:first-child{border-left:none}
.eng:not(:first-child){padding-left:26px}
.eng b{font-size:38px;color:var(--enc);margin-bottom:12px}
.eng span{font-size:14px;color:var(--gris)}
.eng span em{color:var(--rose-txt)}

/* ---------- 3. LES TROIS PROFILS DEVIENNENT UNE LISTE NUMEROTEE.
     Meme raison. Et en liste, l'avant et l'apres se lisent sur la meme
     ligne au lieu d'etre empiles dans une boite. ---------- */
.profils{display:block;margin-top:32px;border-top:2px solid var(--enc)}
.prof{background:none;box-shadow:none;border-radius:0;padding:26px 0;
  border-bottom:1px solid rgba(36,35,36,.13);
  display:grid;grid-template-columns:minmax(200px,.9fr) 1fr 1fr;gap:0 34px;align-items:start}
.prof .t{font-family:var(--titre);font-size:21px;line-height:1.2;margin:0;letter-spacing:-.015em}
.prof .av{font-size:14px;line-height:1.6;color:var(--gris);margin:0}
.prof .ap{font-size:14px;line-height:1.6;color:var(--enc);padding-top:0;border-top:none;margin:0}
.prof .ap b{color:var(--rose-txt)}

@media(max-width:980px){
  /* L'escalier n'a aucun sens sur une colonne : il redevient une liste
     ou seule la marche cible est marquee. */
  .steps{grid-template-columns:1fr;border-bottom:none}
  .step,.step:nth-child(n){padding:20px 0;border-left:none;
    border-top:1px solid rgba(36,35,36,.13)}
  .step:first-child{border-top:none}
  .step.on::after{display:none}
  .step.on{border-left:3px solid var(--rose);padding-left:18px}
  .engage{grid-template-columns:1fr;border-bottom:none}
  .eng,.eng:not(:first-child){padding:22px 0;border-left:none;
    border-bottom:1px solid rgba(36,35,36,.13)}
  .profils{border-top-width:2px}
  .prof{grid-template-columns:1fr;gap:10px}
}