/* Cocon « Ouvrir un CHR » — Formations aux Meilleurs Prix * Feuille unique du cocon, à charger dans le des seules pages du * cocon. Toutes les classes portent le préfixe fmp-, aucune ne peut hériter * des styles du thème ni les écraser. Aucun script : le sommaire, la FAQ et * le quiz sont en HTML seul. */ .fmp-ai{background:linear-gradient(135deg,#f4f7f9,#f4f7f9);border:1px solid #e4e6e7;border-radius:12px;padding:1.3rem 1.5rem;margin:1.5rem 0 2rem} .fmp-ai-label{font-size:.95rem;font-weight:600;color:#111213;margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem} .fmp-ai-label::before{content:"\2728";font-size:1.1rem} .fmp-ai-btns{display:flex;flex-wrap:wrap;gap:.5rem} .fmp-ai-btn.chatgpt:hover{border-color:#0e6ba8;color:#0e6ba8} .fmp-ai-btn.perplexity:hover{border-color:#0e6ba8;color:#0e6ba8} .fmp-ai-btn.claude:hover{border-color:#0e6ba8;color:#0e6ba8} .fmp-ai-btn.gemini:hover{border-color:#0e6ba8;color:#0e6ba8} .fmp-ai-btn.grok:hover{border-color:#000;color:#000} .fmp-ai-btn.copilot:hover{border-color:#0e6ba8;color:#0e6ba8} .fmp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;font-size:.88rem;color:#424646;margin:.6rem 0 1.2rem} .fmp-meta-av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#0e6ba8;color:#fff;font-size:.75rem;font-weight:700;margin-right:.3rem} .fmp-meta strong{color:#111213} .fmp-sep{color:#e4e6e7} .fmp-layout{display:flow-root}.fmp-layout::after{content:"";display:block;clear:both} .fmp-colonne{float:right;width:300px;margin:.2rem 0 1.6rem 2.5rem} /* La ligne de texte est bornée à 85 caractères, et les figures prennent la même largeur : le regard revient toujours au même bord gauche. */ .fmp-main>*,.fmp-main figure,.fmp-main section,.fmp-main ul,.fmp-main ol,.fmp-main table{max-width:85ch} .fmp-main figure{margin-left:0;margin-right:0} .fmp-main figure img,.fmp-main figure svg{max-width:100%;width:auto;height:auto;display:block;margin:0 auto} .fmp-main p,.fmp-main li{max-width:85ch} @media (max-width:900px){.fmp-colonne{float:none;width:auto;margin:0 0 1.5rem}.fmp-aside{padding:.7rem .9rem}.fmp-aside ol{max-height:11rem;overflow-y:auto}} .fmp-aside{background:#fff;border:1px solid #e4e6e7;border-radius:12px;padding:1.1rem 1.2rem} .fmp-aside h2{font-size:.95rem;margin:0 0 .7rem} .fmp-aside ol{list-style:none;margin:0;padding:0;counter-reset:s} .fmp-aside li{counter-increment:s;margin:.35rem 0;font-size:.86rem;line-height:1.35;display:flex;gap:.55rem} .fmp-aside li::before{content:counter(s,decimal-leading-zero);color:#818a8f;font-variant-numeric:tabular-nums;font-size:.78rem;padding-top:.1rem} .fmp-aside a{color:#111213;text-decoration:none} .fmp-aside a:hover{color:#0e6ba8} .fmp-cta:focus-visible{outline:3px solid #111;outline-offset:2px} .fmp-cta-sous{display:block;margin-top:.5rem;font-size:.78rem;color:#818a8f;text-align:center} .fmp-auteur{margin:2.5rem 0 1rem;padding-top:1.5rem;border-top:1px solid #e4e6e7} .fmp-auteur-carte{display:flex;gap:1.2rem;align-items:flex-start} .fmp-auteur-photo,.fmp-auteur-mono{width:96px;height:96px;border-radius:50%;flex:0 0 96px} .fmp-auteur-attente{border-radius:0} .fmp-auteur-mono{display:inline-flex;align-items:center;justify-content:center;background:#0e6ba8;color:#fff;font-size:1.9rem;font-weight:700} .fmp-auteur-nom{margin:0;font-size:1.15rem;font-weight:700;color:#111213} .fmp-auteur-titre{margin:.15rem 0 .5rem;color:#0e6ba8;font-weight:600;font-size:.95rem} .fmp-auteur-bio{margin:0 0 .4rem;color:#424646} .fmp-auteur-preuves{margin:0 0 .7rem;font-size:.88rem;color:#818a8f} .fmp-auteur-demo{margin:.6rem 0 0;font-size:.8rem;color:#0a4f7d;font-style:italic} .fmp-source{color:#818a8f;font-size:.78rem;margin:1.2rem 0 0} .fmp-auteur-texte{min-width:0} .fmp-auteur-texte p{margin:.15rem 0} .fmp-faq{border:1px solid #e4e6e7;border-radius:8px;margin:.7rem 0;background:#fff} .fmp-faq summary{cursor:pointer;padding:.85rem 1rem;font-weight:600;list-style:none;line-height:1.4} .fmp-faq summary::-webkit-details-marker{display:none} .fmp-faq summary::after{content:"+";float:right;font-weight:400;color:#0e6ba8;font-size:1.15rem;line-height:1.2} .fmp-faq[open] summary::after{content:"\2013"} .fmp-faq summary:focus-visible{outline:2px solid #0e6ba8;outline-offset:2px} .fmp-answer{padding:0 1rem .9rem} .fmp-answer p{margin:.4rem 0} .fmp-quiz{border:1px solid #e4e6e7;border-radius:10px;padding:1.1rem 1.2rem;margin:2rem 0;background:#f4f7f9} .fmp-quiz-q{border:0;margin:0 0 1.1rem;padding:0} .fmp-quiz-q legend{font-weight:600;padding:0;margin-bottom:.4rem;line-height:1.4} .fmp-quiz-q label{display:block;padding:.3rem 0;cursor:pointer} .fmp-quiz-q input{margin-right:.5rem} .fmp-quiz-r{margin:.35rem 0 0;padding:.55rem .75rem;border-left:3px solid #0e6ba8;background:#fff;font-size:.92rem} /* Tableau de contenu : les 7 principes, un cas déroulé. Il défile seul sur petit écran, la page ne défile jamais latéralement. */ .fmp-tableau-cadre{overflow-x:auto;margin:1.4rem 0} .fmp-tableau{width:100%;min-width:32rem;border-collapse:collapse;font-size:.93rem;line-height:1.45} .fmp-tableau th,.fmp-tableau td{border:1px solid #e2ebf0;padding:.55rem .7rem;text-align:left;vertical-align:top} .fmp-tableau thead th{background:#e2ebf0;font-weight:600;color:#0e6ba8} .fmp-tableau tbody tr:nth-child(even){background:#f4f7f9} a.fmp-ai-btn,.fmp-ai-btn{display:inline-flex;align-items:center;padding:.45rem .9rem;background:#fff;border:1px solid #d7dad9;border-radius:8px;font-size:.85rem;font-weight:600;color:#111213;text-decoration:none;transition:all .15s} a.fmp-ai-btn:hover,.fmp-ai-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(17,18,19,.1);border-color:#111213} /* La ligne de texte est bornée à 85 caractères, et les figures prennent la même largeur : le regard revient toujours au même bord gauche. */ /* Une figure garde sa taille naturelle. « width:100% » étirait un SVG de 720 px à 850, et surtout : un élément remplacé plus large que la place laissée par l'encart flottant descend sous lui, en laissant un trou de 428 px au milieu de la page. Vu le 17/09/2026 sur la démonstration de France ProFormation. */ a.fmp-cta,.fmp-cta{display:block;margin-top:1rem;padding:.375rem 1.5rem;background:#0e6ba8;outline:1px solid #0e6ba8;color:#fff;font-family:"Barlow Condensed",sans-serif;font-size:1.125rem;font-weight:600;line-height:1.25rem;text-align:center;border:none;border-radius:1.5rem;text-decoration:none;transition:all .5s ease-out;cursor:pointer} a.fmp-cta:hover,.fmp-cta:hover{filter:drop-shadow(0 4px 0 #111213);text-decoration:none} a.fmp-auteur-lien,.fmp-auteur-lien{display:inline-block;padding:.4rem .9rem;border:1px solid #0e6ba8;border-radius:6px;color:#0e6ba8;font-weight:600;font-size:.88rem;text-decoration:none} a.fmp-auteur-lien:hover,.fmp-auteur-lien:hover{background:#0e6ba8;color:#fff} /* Tableau de contenu : les 7 principes, un cas déroulé. Il défile seul sur petit écran, la page ne défile jamais latéralement. */ /* ---- page récapitulative du cocon ---- */ .fmp-recap-chapo{font-size:1.08rem;color:#424646;max-width:70ch;margin:0 0 1.6rem} .fmp-recap-jalons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin:0 0 2.4rem} .fmp-recap-jalon{display:flex;align-items:center;gap:.55rem;padding:.7rem .8rem;background:#fff;border:1px solid #e4e6e7;border-radius:10px;text-decoration:none;color:#111213;border-top:3px solid var(--teinte,#0e6ba8);transition:transform .12s ease,box-shadow .12s ease} .fmp-recap-jalon:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(14,107,168,.13)} .fmp-recap-jalon .fmp-recap-icone{color:var(--teinte,#0e6ba8);flex:0 0 auto} .fmp-recap-jalon-nom{font-weight:600;font-size:.92rem;line-height:1.25} .fmp-recap-jalon-n{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:.8rem;color:#fff;background:var(--teinte,#0e6ba8);border-radius:999px;padding:.1rem .5rem} .fmp-recap-socle{background:#e2ebf0;border:1px solid #e2ebf0;border-radius:14px;padding:1.4rem 1.5rem;margin:0 0 2.2rem} .fmp-recap-socle h2{margin-top:0;border:0;padding:0} a.fmp-recap-pilier,.fmp-recap-pilier{display:block;background:#0e6ba8;color:#fff;border-radius:10px;padding:.9rem 1.1rem;text-decoration:none;margin-top:1rem;box-shadow:0 4px 14px rgba(14,107,168,.28)} a.fmp-recap-pilier:hover,.fmp-recap-pilier:hover{background:#0a4f7d} .fmp-recap-pilier-eyebrow{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;opacity:.82;margin-bottom:.15rem} .fmp-recap-pilier-titre{display:block;font-weight:700;font-size:1.05rem;line-height:1.3} .fmp-recap-carte{background:#fff;border:1px solid #e4e6e7;border-top:4px solid var(--teinte,#0e6ba8);border-radius:14px;padding:1.3rem 1.4rem 1.5rem;margin:0 0 1.3rem} .fmp-recap-entete{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap} .fmp-recap-entete .fmp-recap-icone{color:var(--teinte,#0e6ba8);flex:0 0 auto} .fmp-recap-entete h2{margin:0;border:0;padding:0;font-size:1.3rem;color:var(--teinte,#0e6ba8)} .fmp-recap-compte{margin-left:auto;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#818a8f} .fmp-recap-intro{margin:.7rem 0 1rem;color:#424646;max-width:70ch} a.fmp-recap-tete,.fmp-recap-tete{display:block;background:var(--teinte,#0e6ba8);color:#fff;border-radius:8px;padding:.65rem .9rem;font-weight:700;text-decoration:none;margin-bottom:.8rem} a.fmp-recap-tete:hover,.fmp-recap-tete:hover{filter:brightness(1.12)} .fmp-recap-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.45rem} .fmp-recap-liste li{margin:0} .fmp-recap-liste a{display:block;padding:.55rem .8rem;border:1px solid #e4e6e7;border-radius:8px;color:#111213;text-decoration:none;font-size:.94rem;line-height:1.35;border-left:3px solid var(--teinte,#0e6ba8);background:#f4f7f9} .fmp-recap-liste a:hover{background:#fff;border-color:var(--teinte,#0e6ba8);box-shadow:0 3px 10px rgba(14,107,168,.1)} .fmp-recap-cta-bloc{background:#111213;border-radius:14px;padding:1.5rem;margin:2.4rem 0 1.4rem;text-align:center} .fmp-recap-cta-bloc p{color:#e4e6e7;margin:0 auto .9rem;max-width:52ch} .fmp-recap-cta-bloc .fmp-cta{display:inline-block;max-width:420px;margin:0 auto} .fmp-recap-total{color:#818a8f;font-size:.92rem;padding-top:1.1rem;border-top:1px solid #e4e6e7} @media (max-width:640px){ .fmp-recap-carte{padding:1.1rem 1rem 1.2rem} .fmp-recap-entete h2{font-size:1.15rem} .fmp-recap-compte{margin-left:0;flex-basis:100%} } /* Une ancre ne doit pas glisser son titre sous l'en-tête du site. La règle visait aussi « #la-question-commune », un identifiant global au milieu de classes toutes préfixées : chez le client, il aurait pu désigner n'importe quel élément de son thème. Le titre porte désormais sa classe. 17/09/2026. */ .fmp-recap-carte h2,.fmp-recap-ancre{scroll-margin-top:5rem} /* Un même anneau de focus partout, lisible sur fond clair comme sur teinte. */ .fmp-recap-jalon:focus-visible,.fmp-recap-pilier:focus-visible, .fmp-recap-tete:focus-visible,.fmp-recap-liste a:focus-visible, .fmp-recap-cta-second:focus-visible{outline:3px solid #a87a00;outline-offset:3px;border-radius:8px} /* Le lien secondaire du bloc de conversion reste discret face au bouton. */ a.fmp-recap-cta-second,.fmp-recap-cta-second{display:inline-block;margin-top:.9rem;color:#e4e6e7;font-size:.92rem;text-decoration:underline;text-underline-offset:3px} a.fmp-recap-cta-second:hover,.fmp-recap-cta-second:hover{color:#fff} /* Le compte annoncé aux lecteurs d'écran, sans doublon visible. */ .fmp-hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){ .fmp-recap-jalon,.fmp-recap-jalon:hover{transition:none;transform:none} .fmp-recap-liste a,.fmp-recap-tete,a.fmp-recap-pilier,.fmp-recap-pilier{transition:none} } .fmp-recap-secteur{background:#111213;border-radius:14px;padding:1.4rem 1.5rem;margin:0 0 2.2rem;color:#e4e6e7} .fmp-recap-secteur h2{margin:0 0 1rem;border:0;padding:0;font-size:1.2rem;color:#fff} .fmp-recap-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem} .fmp-recap-chiffre b{display:block;font-size:1.8rem;font-weight:700;color:#fdbd00;line-height:1.1;font-variant-numeric:tabular-nums} .fmp-recap-chiffre span{display:block;font-size:.95rem;color:#fff;margin-top:.15rem} .fmp-recap-chiffre .fmp-recap-precision{font-size:.82rem;color:#b2b8b8;margin-top:.35rem;line-height:1.45} .fmp-recap-secteur .fmp-source{color:#818a8f;font-size:.78rem;margin:1.2rem 0 0} @media (max-width:640px){.fmp-recap-secteur{padding:1.1rem 1rem}}