/* Cocon villes France ProFormation * Feuille unique pour les 271 pages du cocon, à charger dans le * des seules pages du cocon. Toutes les classes portent le préfixe fpf-, * 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. */ .fpf-ai{background:linear-gradient(135deg,#f1f1f1,#f1f1f1);border:1px solid #d2d2d2;border-radius:12px;padding:1.3rem 1.5rem;margin:1.5rem 0 2rem} .fpf-ai-label{font-size:.95rem;font-weight:600;color:#1d1d1b;margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem} .fpf-ai-label::before{content:"\2728";font-size:1.1rem} .fpf-ai-btns{display:flex;flex-wrap:wrap;gap:.5rem} .fpf-ai-btn.chatgpt:hover{border-color:#0e6ba8;color:#0e6ba8} .fpf-ai-btn.perplexity:hover{border-color:#0e6ba8;color:#0e6ba8} .fpf-ai-btn.claude:hover{border-color:#0e6ba8;color:#0e6ba8} .fpf-ai-btn.gemini:hover{border-color:#0e6ba8;color:#0e6ba8} .fpf-ai-btn.grok:hover{border-color:#000;color:#000} .fpf-ai-btn.copilot:hover{border-color:#0e6ba8;color:#0e6ba8} .fpf-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;font-size:.88rem;color:#707070;margin:.6rem 0 1.2rem} .fpf-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} .fpf-meta strong{color:#1d1d1b} .fpf-sep{color:#d2d2d2} .fpf-layout{display:flow-root}.fpf-layout::after{content:"";display:block;clear:both} .fpf-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. */ .fpf-main>*,.fpf-main figure,.fpf-main section,.fpf-main ul,.fpf-main ol,.fpf-main table{max-width:85ch} .fpf-main figure{margin-left:0;margin-right:0} .fpf-main figure img,.fpf-main figure svg{max-width:100%;width:auto;height:auto;display:block;margin:0 auto} .fpf-main p,.fpf-main li{max-width:85ch} @media (max-width:900px){.fpf-colonne{float:none;width:auto;margin:0 0 1.5rem}.fpf-aside{padding:.7rem .9rem}.fpf-aside ol{max-height:11rem;overflow-y:auto}} .fpf-aside{background:#fff;border:1px solid #d2d2d2;border-radius:12px;padding:1.1rem 1.2rem} .fpf-aside h2{font-size:.95rem;margin:0 0 .7rem} .fpf-aside ol{list-style:none;margin:0;padding:0;counter-reset:s} .fpf-aside li{counter-increment:s;margin:.35rem 0;font-size:.86rem;line-height:1.35;display:flex;gap:.55rem} .fpf-aside li::before{content:counter(s,decimal-leading-zero);color:#9c9c9c;font-variant-numeric:tabular-nums;font-size:.78rem;padding-top:.1rem} .fpf-aside a{color:#1d1d1b;text-decoration:none} .fpf-aside a:hover{color:#0e6ba8} .fpf-cta:focus-visible{outline:3px solid #111;outline-offset:2px} .fpf-cta-sous{display:block;margin-top:.5rem;font-size:.78rem;color:#9c9c9c;text-align:center} .fpf-auteur{margin:2.5rem 0 1rem;padding-top:1.5rem;border-top:1px solid #d2d2d2} .fpf-auteur-carte{display:flex;gap:1.2rem;align-items:flex-start} .fpf-auteur-photo,.fpf-auteur-mono{width:96px;height:96px;border-radius:50%;flex:0 0 96px} .fpf-auteur-attente{border-radius:0} .fpf-auteur-mono{display:inline-flex;align-items:center;justify-content:center;background:#0e6ba8;color:#fff;font-size:1.9rem;font-weight:700} .fpf-auteur-nom{margin:0;font-size:1.15rem;font-weight:700;color:#1d1d1b} .fpf-auteur-titre{margin:.15rem 0 .5rem;color:#0e6ba8;font-weight:600;font-size:.95rem} .fpf-auteur-bio{margin:0 0 .4rem;color:#707070} .fpf-auteur-preuves{margin:0 0 .7rem;font-size:.88rem;color:#9c9c9c} .fpf-auteur-demo{margin:.6rem 0 0;font-size:.8rem;color:#074f7e;font-style:italic} .fpf-source{color:#9c9c9c;font-size:.78rem;margin:1.2rem 0 0} .fpf-auteur-texte{min-width:0} .fpf-auteur-texte p{margin:.15rem 0} .fpf-faq{border:1px solid #d2d2d2;border-radius:8px;margin:.7rem 0;background:#fff} .fpf-faq summary{cursor:pointer;padding:.85rem 1rem;font-weight:600;list-style:none;line-height:1.4} .fpf-faq summary::-webkit-details-marker{display:none} .fpf-faq summary::after{content:"+";float:right;font-weight:400;color:#0e6ba8;font-size:1.15rem;line-height:1.2} .fpf-faq[open] summary::after{content:"\2013"} .fpf-faq summary:focus-visible{outline:2px solid #0e6ba8;outline-offset:2px} .fpf-answer{padding:0 1rem .9rem} .fpf-answer p{margin:.4rem 0} .fpf-quiz{border:1px solid #d2d2d2;border-radius:10px;padding:1.1rem 1.2rem;margin:2rem 0;background:#f1f1f1} .fpf-quiz-q{border:0;margin:0 0 1.1rem;padding:0} .fpf-quiz-q legend{font-weight:600;padding:0;margin-bottom:.4rem;line-height:1.4} .fpf-quiz-q label{display:block;padding:.3rem 0;cursor:pointer} .fpf-quiz-q input{margin-right:.5rem} .fpf-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. */ .fpf-tableau-cadre{overflow-x:auto;margin:1.4rem 0} .fpf-tableau{width:100%;min-width:32rem;border-collapse:collapse;font-size:.93rem;line-height:1.45} .fpf-tableau th,.fpf-tableau td{border:1px solid #ebeff2;padding:.55rem .7rem;text-align:left;vertical-align:top} .fpf-tableau thead th{background:#ebeff2;font-weight:600;color:#0e6ba8} .fpf-tableau tbody tr:nth-child(even){background:#f1f1f1} a.fpf-ai-btn,.fpf-ai-btn{display:inline-flex;align-items:center;padding:.45rem .9rem;background:#fff;border:1px solid #d2d2d2;border-radius:8px;font-size:.85rem;font-weight:600;color:#1d1d1b;text-decoration:none;transition:all .15s} a.fpf-ai-btn:hover,.fpf-ai-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(29,29,27,.1);border-color:#1d1d1b} /* 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.fpf-cta,.fpf-cta{display:block;margin-top:1rem;padding:.5rem 1.5rem;background:#0e6ba8;color:#fff;font-size:1rem;font-weight:900;font-style:italic;line-height:1rem;text-align:center;border:none;border-radius:1.5rem;text-decoration:none;transition:background .5s ease-out;cursor:pointer} a.fpf-cta:hover,.fpf-cta:hover{background:#074f7e} a.fpf-auteur-lien,.fpf-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.fpf-auteur-lien:hover,.fpf-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. */ /* --- récapitulative du cocon fpf-metiers --- */ .fpf-recap-chapo{font-size:1.08rem;color:#707070;max-width:70ch;margin:0 0 1.6rem} .fpf-recap-jalons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin:0 0 2.4rem} .fpf-recap-jalon{display:flex;align-items:center;gap:.55rem;padding:.7rem .8rem;background:#fff;border:1px solid #d2d2d2;border-radius:10px;text-decoration:none;color:#1d1d1b;border-top:3px solid var(--teinte,#0e6ba8);transition:transform .12s ease,box-shadow .12s ease} .fpf-recap-jalon:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(14,107,168,.13)} .fpf-recap-jalon .fpf-recap-icone{color:var(--teinte,#0e6ba8);flex:0 0 auto} .fpf-recap-jalon-nom{font-weight:600;font-size:.92rem;line-height:1.25} .fpf-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} .fpf-recap-socle{background:#ebeff2;border:1px solid #ebeff2;border-radius:14px;padding:1.4rem 1.5rem;margin:0 0 2.2rem} .fpf-recap-socle h2{margin-top:0;border:0;padding:0} a.fpf-recap-pilier,.fpf-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.fpf-recap-pilier:hover,.fpf-recap-pilier:hover{background:#074f7e} .fpf-recap-pilier-eyebrow{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;opacity:.82;margin-bottom:.15rem} .fpf-recap-pilier-titre{display:block;font-weight:700;font-size:1.05rem;line-height:1.3} .fpf-recap-carte{background:#fff;border:1px solid #d2d2d2;border-top:4px solid var(--teinte,#0e6ba8);border-radius:14px;padding:1.3rem 1.4rem 1.5rem;margin:0 0 1.3rem} .fpf-recap-entete{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap} .fpf-recap-entete .fpf-recap-icone{color:var(--teinte,#0e6ba8);flex:0 0 auto} .fpf-recap-entete h2{margin:0;border:0;padding:0;font-size:1.3rem;color:var(--teinte,#0e6ba8)} .fpf-recap-compte{margin-left:auto;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9c9c9c} .fpf-recap-intro{margin:.7rem 0 1rem;color:#707070;max-width:70ch} a.fpf-recap-tete,.fpf-recap-tete{display:block;background:var(--teinte,#0e6ba8);color:#fff;border-radius:8px;padding:.65rem .9rem;font-weight:700;text-decoration:none} a.fpf-recap-tete:hover,.fpf-recap-tete:hover{filter:brightness(1.12)} .fpf-recap-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.45rem} .fpf-recap-liste li{margin:0} .fpf-recap-liste a{padding:.55rem .8rem;border:1px solid #d2d2d2;border-radius:8px;color:#1d1d1b;text-decoration:none;font-size:.94rem;line-height:1.35;border-left:3px solid var(--teinte,#0e6ba8);background:#f1f1f1} .fpf-recap-liste a:hover{background:#fff;border-color:var(--teinte,#0e6ba8);box-shadow:0 3px 10px rgba(14,107,168,.1)} .fpf-recap-cta-bloc{background:#1d1d1b;border-radius:14px;padding:1.5rem;margin:2.4rem 0 1.4rem;text-align:center} .fpf-recap-cta-bloc p{color:#d2d2d2;margin:0 auto .9rem;max-width:52ch} .fpf-recap-cta-bloc .fpf-cta{display:inline-block;max-width:420px;margin:0 auto} .fpf-recap-total{color:#9c9c9c;font-size:.92rem;padding-top:1.1rem;border-top:1px solid #d2d2d2} @media (max-width:640px){ .fpf-recap-carte{padding:1.1rem 1rem 1.2rem} .fpf-recap-entete h2{font-size:1.15rem} .fpf-recap-compte{margin-left:0;flex-basis:100%} } .fpf-recap-carte h2,.fpf-recap-ancre{scroll-margin-top:5rem} .fpf-recap-jalon:focus-visible,.fpf-recap-pilier:focus-visible, .fpf-recap-tete:focus-visible,.fpf-recap-liste a:focus-visible, .fpf-recap-cta-second:focus-visible{outline:3px solid #074f7e;outline-offset:3px;border-radius:8px} a.fpf-recap-cta-second,.fpf-recap-cta-second{display:inline-block;margin-top:.9rem;color:#d2d2d2;font-size:.92rem;text-decoration:underline;text-underline-offset:3px} a.fpf-recap-cta-second:hover,.fpf-recap-cta-second:hover{color:#fff} .fpf-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){ .fpf-recap-jalon,.fpf-recap-jalon:hover{transition:none;transform:none} .fpf-recap-liste a,.fpf-recap-tete,a.fpf-recap-pilier,.fpf-recap-pilier{transition:none} } .fpf-recap-secteur{background:#1d1d1b;border-radius:14px;padding:1.4rem 1.5rem;margin:0 0 2.2rem;color:#d2d2d2} .fpf-recap-secteur h2{margin:0 0 1rem;border:0;padding:0;font-size:1.2rem;color:#fff} .fpf-recap-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem} .fpf-recap-chiffre b{display:block;font-size:1.8rem;font-weight:700;color:#b2e5f3;line-height:1.1;font-variant-numeric:tabular-nums} .fpf-recap-chiffre span{display:block;font-size:.95rem;color:#fff;margin-top:.15rem} .fpf-recap-chiffre .fpf-recap-precision{font-size:.82rem;color:#d2d2d2;margin-top:.35rem;line-height:1.45} .fpf-recap-secteur .fpf-source{color:#9c9c9c;font-size:.78rem;margin:1.2rem 0 0} @media (max-width:640px){.fpf-recap-secteur{padding:1.1rem 1rem}} /* --- récapitulative du cocon villes --- */ .fpf-recap-dep{margin:0 0 1.2rem} .fpf-recap-dep:last-child{margin-bottom:0} .fpf-recap-dep h3{margin:0 0 .5rem;font-size:1rem;color:#707070;display:flex;align-items:center;gap:.45rem} .fpf-recap-code{font-size:.7rem;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--teinte,#0e6ba8);border-radius:4px;padding:.1rem .35rem;font-variant-numeric:tabular-nums} .fpf-recap-liste a{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem} .fpf-recap-offre{font-size:.72rem;color:#9c9c9c;white-space:nowrap;flex:0 0 auto} .fpf-recap-jalon{justify-content:space-between} a.fpf-recap-tete,.fpf-recap-tete{margin-bottom:.6rem} .fpf-recap-cta-bloc .fpf-recap-cta-second{display:block}