/* =========================================================
   HABILLAGE TF FORMATION — chargé après lp.css
   Reprise du design de tf-formation.fr (accueil + fiche formation) :
   barre du haut en pilule blanche flottante, fiche « produit » (photo à gauche arrondie, infos en pilules),
   surlignage bleu en pilule inclinée, cartes blanches arrondies 32 px, blocs marine, chiffres en Outfit.
   ========================================================= */

body{font-weight:300;font-size:15px;line-height:1.7;color:var(--marine)}
h1,h2,h3{font-family:var(--font-head);font-weight:700;font-stretch:100%;color:var(--marine)}
h1,h2{text-wrap:balance}
strong,b{font-weight:400;color:var(--marine)}
a{color:var(--bleu)}
.container{max-width:1172px}
.section{padding:56px 0}
.section__title{font-size:clamp(22px,2.3vw,30px);line-height:1.4;margin:0 0 28px}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}

/* ---------- Boutons (pilules Poppins comme le site) ---------- */
.btn{min-height:44px;padding:.55em 1.5em;border:0;border-radius:var(--radius-btn);font-weight:400;font-size:15px;letter-spacing:.5px;gap:.55em}
.btn svg{width:18px;height:18px}
.btn--gris{background:#6b7189;color:#fff}
.btn--gris:hover{background:#585e75}
.btn--ghost{border:1.5px solid var(--marine);color:var(--marine);background:transparent}
.btn--ghost:hover{background:var(--marine);color:#fff}
.btn--outline-light{border:1.5px solid rgba(255,255,255,.8);color:#fff;background:transparent}
.btn--outline-light:hover{background:#fff;color:var(--marine)}

/* ---------- Barre du haut : pilule blanche flottante ---------- */
.topbar{position:absolute;top:14px;left:0;right:0;z-index:5;background:none;border:0}
.topbar__in{background:#fff;border-radius:40px;min-height:62px;padding:8px 10px 8px 20px}
.topbar__logo img{width:134px}
.topbar__phone{gap:10px;color:var(--marine);font-weight:400;font-size:15px}
.topbar__phone svg{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--bleu);color:#fff}
.topbar__cta{background:var(--marine);min-height:42px}
.topbar__cta:hover{background:#18246a}

/* ---------- Fiche formation (hero) ---------- */
.produit{display:grid}
.produit__media{height:300px}
.produit__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:0 0 48px 48px}
.produit__body{padding:28px 16px 8px}
.produit h1{font-size:clamp(26px,3vw,38px);line-height:1.2;margin:0 0 .5em}
.highlight{display:inline-block;margin-top:.15em;padding:.18em .5em 0;border-radius:125px;background:var(--bleu);color:#fff;transform:rotate(-2deg)}
.produit__intro{font-size:15px;margin-bottom:18px}

/* Pilules d'infos et champs du formulaire : même dessin que les sélecteurs de la fiche du site */
.ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--rond-icone);color:var(--marine);flex:none}
.ico svg{width:20px;height:20px}
.infos{display:grid;gap:10px;margin:0 0 12px}
.infos li{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--radius);padding:8px 18px 8px 8px;font-weight:400;color:#000;line-height:1.3}
.infos small{display:block;font-size:13px;color:var(--muted)}

.dates{display:flex;gap:14px;align-items:center;background:var(--marine);color:#c9cde0;border-radius:var(--radius-s);padding:14px 18px 14px 14px;margin:0 0 16px;font-size:14px;line-height:1.5}
.dates .ico{background:rgba(255,255,255,.12);color:#fff}
.dates p{margin:0}
.dates strong{display:block;font-family:var(--font-head);font-weight:700;font-size:16px;color:#fff;margin-bottom:2px}

.form-card{background:none;box-shadow:none;border-radius:0;padding:0;scroll-margin-top:90px}
.row{gap:10px}
.field{margin-bottom:10px}
.pill{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center;background:#fff;border-radius:var(--radius);padding:8px 20px 8px 8px;border:1.5px solid transparent;transition:border-color .15s}
.pill .ico{grid-row:1/3}
.pill>label{grid-column:2;margin:0;font-size:13px;font-weight:400;color:var(--muted);line-height:1.3}
.pill input,.pill textarea{grid-column:2;width:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:16px;font-weight:400;color:#000;line-height:1.5}
.pill input:focus,.pill textarea:focus{box-shadow:none;outline:0}
.pill input::placeholder,.pill textarea::placeholder{color:#a3a8ba;font-weight:300}
.pill:focus-within{border-color:var(--bleu)}
.pill:has([aria-invalid=true]){border-color:var(--error)}
.pill .field__err{grid-column:2;margin:2px 0 0}
.pill--msg{align-items:start;border-radius:24px}
.pill--msg .ico{grid-row:1/3}
.pill--msg textarea{min-height:46px;resize:vertical}
.field__opt{color:#a3a8ba}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.form-actions .btn[type=submit]{flex:1 1 240px}
.form-legal{font-size:12px;margin-top:10px}
.form-msg.is-error{border-radius:var(--radius-s)}

/* ---------- Chiffres (comme l'accueil) ---------- */
.chiffres{padding:40px 0 8px}
.chiffres__in{display:grid;grid-template-columns:1fr 1fr;gap:24px 0}
.chiffres__in p{margin:0;padding:0 16px;font-weight:400;font-size:15px;line-height:1.5;border-left:1px solid #c9ccd6}
.chiffres__in p:nth-child(odd){border-left:0;padding-left:0}
.chiffres__in strong{display:block;font-family:var(--font-num);font-weight:700;font-size:40px;line-height:1.5;color:var(--marine)}

/* ---------- Toutes les informations : onglets ---------- */
.infos-cqp__grid{display:grid;gap:28px}
.tabs__nav{display:flex;flex-wrap:wrap;gap:4px;background:#fff;border-radius:var(--radius);padding:6px;width:fit-content;max-width:100%}
.tabs__nav button{border:1.5px solid transparent;background:none;border-radius:var(--radius);padding:7px 16px;font:400 14px var(--font);color:var(--bleu);cursor:pointer}
.tabs__nav button[aria-selected=true]{border-color:var(--bleu);background:#e7f0fe}
.tabs__panel{background:#fff;border-radius:var(--radius);padding:24px 22px;margin-top:10px}
.tabs.is-ready .tabs__panel[hidden]{display:none}
.tabs__panel h3{font-family:var(--font);font-weight:700;font-size:18px;margin-bottom:14px}
.tabs__lead{font-weight:400;font-size:14px}
.tabs__panel p,.tabs__panel li{font-size:14px;color:var(--muted)}
.tabs__cta{margin:16px 0 0}
.liste li{padding:10px 0;border-top:1px solid var(--line)}
.liste b{display:block;font-weight:700;font-size:13px;color:var(--bleu)}
.liste--check li{position:relative;padding-left:28px}
.liste--check li::before{content:"";position:absolute;left:0;top:13px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230766ec' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/contain}
.infos-cqp__media img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}

/* ---------- Financement : accordéon ---------- */
.financement__grid{display:grid;gap:28px;align-items:center}
.financement__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.accordeon details{background:#fff;border-radius:var(--radius);margin-bottom:10px}
.accordeon summary{display:flex;align-items:center;gap:14px;padding:14px 20px 14px 14px;cursor:pointer;list-style:none;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--marine)}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon summary .ico{width:34px;height:34px;background:none;border:1.5px solid var(--bleu);color:var(--bleu)}
.accordeon summary .ico svg{width:17px;height:17px}
.accordeon .chev{width:18px;height:18px;margin-left:auto;transition:transform .2s}
.accordeon details[open] .chev{transform:rotate(90deg)}
.accordeon details p{margin:0;padding:0 24px 20px 62px;font-size:14px;color:var(--muted)}
.financement__note{font-size:14px;font-weight:400;margin:14px 0 0}

/* ---------- Blocs texte + image ---------- */
.bloc{padding-top:24px;padding-bottom:24px}
.bloc__grid{display:grid;gap:24px;align-items:center}
.bloc__text p{font-size:14.5px;color:var(--muted)}
.bloc__grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}

/* ---------- Parcours ---------- */
.parcours__steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:p}
.parcours__steps li{counter-increment:p;background:#fff;border-radius:var(--radius);padding:20px 22px 20px 74px;position:relative}
.parcours__steps li::before{content:counter(p);position:absolute;left:20px;top:20px;width:40px;height:40px;border-radius:50%;background:var(--bleu);color:#fff;display:grid;place-items:center;font-family:var(--font-num);font-weight:700;font-size:20px}
.parcours__steps h3{font-size:16px;line-height:1.35;margin:0 0 4px}
.parcours__steps p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- Avis (bloc marine 64 px) + Qualiopi ---------- */
.confiance__grid{display:grid;gap:36px;align-items:center}
.avis{position:relative;background:var(--marine);color:#c9cde0;border-radius:var(--radius-l);padding:44px 28px 30px;text-align:center;overflow:hidden}
.avis__quote{position:absolute;left:24px;top:-14px;font-family:Georgia,serif;font-size:170px;line-height:1;color:rgba(255,255,255,.08)}
.avis blockquote{margin:0;position:relative}
.avis[data-ready] blockquote:not(.is-active){display:none}
.avis footer{font-family:var(--font);font-weight:700;font-size:18px;color:#fff;text-transform:uppercase;margin-bottom:10px}
.avis blockquote p{font-size:14px;max-width:30em;margin:0 auto 10px}
.avis__note{display:flex;justify-content:center;align-items:center;gap:8px;color:#8f97b8;font-family:var(--font-num)}
.avis__note b{font-weight:700;font-size:22px;color:#fff}
.avis__note span{display:inline-flex;gap:2px;color:#fff}
.avis__note svg{width:16px;height:16px}
.avis__note .off{color:#4a5383}
.avis__dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.avis__dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#2c3666;cursor:pointer}
.avis__dots button[aria-pressed=true]{background:#fff}
.qualiopi__head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.qualiopi__head img{width:96px;background:#fff;border-radius:12px;padding:6px}
.qualiopi__head .section__title{margin:0}
.qualiopi p{font-size:14px;color:var(--muted)}

/* ---------- CTA final (bloc marine) ---------- */
.final__box{background:var(--marine);color:#c9cde0;border-radius:var(--radius);padding:32px 26px;display:grid;gap:20px;align-items:center}
.final h2{color:#fff;font-size:clamp(20px,2.2vw,26px);line-height:1.3;margin-bottom:.4em}
.final p{margin:0;font-size:14.5px}
.final__btns{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Pied de page ---------- */
.footer{background:var(--marine);color:#aab3cf;border-radius:var(--radius-l) var(--radius-l) 0 0;padding:44px 0 24px;margin-top:24px}
.footer a{color:#fff;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer strong{display:block;color:#fff;font-weight:400;margin-bottom:4px}
.footer__logo{width:170px;filter:none}
.footer__legal{border-top-color:rgba(255,255,255,.12)}

.sticky-bar{border-radius:24px 24px 0 0}
.cookie{border-radius:var(--radius-s)}

/* ---------- Mobile ---------- */
@media (max-width:639px){
  .topbar{top:10px}
  .topbar .container{padding:0 10px}
  .topbar__in{min-height:56px;padding:6px 8px 6px 16px}
  .topbar__logo img{width:118px}
  .topbar__phone .num{display:none}
  .topbar__phone svg{width:38px;height:38px}
  .row--2{grid-template-columns:1fr}
}

/* ---------- Tablette / desktop ---------- */
@media (min-width:640px){
  .infos{grid-template-columns:1fr 1fr}
  .chiffres__in{grid-template-columns:repeat(4,1fr)}
  .chiffres__in p,.chiffres__in p:nth-child(odd){border-left:1px solid #c9ccd6;padding:0 24px}
  .chiffres__in p:first-child{border-left:0;padding-left:0}
  .parcours__steps{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:960px){
  .section{padding:72px 0}
  .topbar{top:22px}
  .topbar__in{min-height:68px;padding:10px 14px 10px 24px}
  .topbar__logo img{width:155px}
  .produit{grid-template-columns:45% 1fr;min-height:100vh}
  .produit__media{height:auto}
  .produit__media img{border-radius:0 0 var(--radius-l) 0}
  .produit__body{padding:112px max(16px,calc((100vw - 1140px) / 2)) 32px 48px;max-width:none}
  .produit__body>*{max-width:600px}
  .infos-cqp__grid{grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
  .infos-cqp__media{padding-top:64px}
  .financement__grid{grid-template-columns:1fr 1fr;gap:40px}
  .bloc__grid{grid-template-columns:1.25fr 1fr;gap:48px}
  .bloc__grid--rev{grid-template-columns:1fr 1.25fr}
  .bloc__grid--rev img{order:-1}
  .parcours__steps{grid-template-columns:repeat(5,1fr)}
  .parcours__steps li{padding:74px 20px 22px}
  .confiance__grid{grid-template-columns:1fr 1fr;gap:56px}
  .avis{padding:56px 48px 36px}
  .final__box{grid-template-columns:1.4fr auto;padding:40px 44px}
}