/* ============================================================
   KIPURA — Page Conférences
   ------------------------------------------------------------
   Complément de styles.css, jamais un remplacement : variables,
   en-tête, pied de page, boutons et grille viennent de là.
   Ici, uniquement ce qui n'existe pas encore.

   Principe de lecture : beaucoup de vide, un filet or pour
   séparer, un numéro de section façon magazine, et une seule
   idée par écran.
   ============================================================ */

/* ---------- Repères communs ---------- */
.cf-num{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.24em;color:var(--or);
  display:block;margin-bottom:14px}
.cf-rule{height:1px;background:linear-gradient(90deg,var(--or),rgba(184,144,47,0));margin:22px 0 0;max-width:120px}
.cf-sec{padding:110px 0}
.cf-sec--dark{background:var(--noir);color:#fff}
.cf-sec--creme{background:var(--creme)}
.cf-sec h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,4.2vw,52px);line-height:1.04;margin:0 0 18px;letter-spacing:.005em;text-wrap:balance}
.cf-sec--dark h2{color:#fff}
.cf-lead{font-size:clamp(17px,1.7vw,21px);line-height:1.6;max-width:760px;font-weight:300;color:var(--gris);
  text-wrap:pretty}
.cf-sec--dark .cf-lead{color:#b6b6bf}

/* Chaque section se termine par un chemin vers le formulaire */
.cf-vers{display:inline-flex;align-items:center;gap:10px;margin-top:38px;
  font-family:'Anton',sans-serif;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);border-bottom:1px solid rgba(184,144,47,.4);padding-bottom:6px;transition:.3s var(--ease)}
.cf-vers:hover{color:var(--or-clair);border-bottom-color:var(--or-clair);gap:16px}

/* ---------- 1. Premier écran ----------
   La photo porte le regard, le dégradé porte le texte. Duotone or/noir
   obtenu par superposition : l'image reste un JPEG neutre, réutilisable. */
.cf-hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;
  padding:150px 0 64px;background:var(--noir);color:#fff;overflow:hidden}
.cf-hero__img{position:absolute;inset:0;z-index:0}
.cf-hero__img img{width:100%;height:100%;object-fit:cover;object-position:62% 22%;
  filter:grayscale(1) contrast(1.08)}
.cf-hero__duo{position:absolute;inset:0;z-index:1;mix-blend-mode:color;
  background:linear-gradient(120deg,rgba(184,144,47,.42),rgba(184,144,47,.12) 55%,transparent)}
.cf-hero__grad{position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(11,11,13,.95),rgba(11,11,13,.72) 44%,rgba(11,11,13,.24) 74%,rgba(11,11,13,.5)),
             linear-gradient(to top,rgba(11,11,13,.97),rgba(11,11,13,.3) 34%,rgba(11,11,13,0) 66%)}
.cf-hero .wrap{position:relative;z-index:3}
.cf-hero h1{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(46px,8.5vw,110px);line-height:.94;margin:12px 0 0;letter-spacing:-.01em}
.cf-hero__accroche{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,2.2vw,29px);line-height:1.22;margin:26px 0 0;max-width:740px;color:var(--or-clair);
  letter-spacing:.01em}
.cf-hero__sous{font-size:clamp(15px,1.5vw,18px);line-height:1.65;max-width:620px;margin:22px 0 0;
  color:#cfcfd6;font-weight:300}
.cf-reperes{display:flex;flex-wrap:wrap;gap:12px 34px;margin:34px 0 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16)}
.cf-reperes span{font-family:'Anton',sans-serif;font-size:13.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff}
.cf-reperes span b{color:var(--or-clair);font-weight:400}
.cf-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:36px 0 0}
.cf-hero__cta .btn{box-shadow:0 20px 44px -18px rgba(184,144,47,.7)}

/* ---------- 2. Le problème ---------- */
.cf-pb{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;margin-top:48px;
  background:rgba(184,144,47,.25)}
.cf-pb__item{background:var(--noir);padding:34px 30px 36px}
.cf-pb__item b{display:block;font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or-clair);margin-bottom:14px}
.cf-pb__item p{margin:0;font-size:15px;line-height:1.75;color:#b6b6bf;font-weight:300}

/* ---------- 3. Sur le terrain → dans votre organisation ---------- */
.cf-trad{margin-top:52px;border-top:1px solid var(--trait)}
.cf-trad__ligne{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;gap:0;
  border-bottom:1px solid var(--trait);transition:background .3s var(--ease)}
.cf-trad__ligne:hover{background:rgba(184,144,47,.05)}
.cf-trad__g{padding:24px 26px 24px 0;font-size:15.5px;line-height:1.55;color:var(--gris)}
.cf-trad__f{text-align:center;color:var(--or);font-size:17px;line-height:1}
.cf-trad__d{padding:24px 0 24px 26px;font-size:16px;line-height:1.55;color:var(--txt);font-weight:500}
.cf-trad__tete{display:grid;grid-template-columns:1fr 46px 1fr;font-family:'Anton',sans-serif;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);padding-bottom:12px}
.cf-trad__tete span:last-child{padding-left:26px}

/* ---------- 4. Le conférencier ---------- */
.cf-bio{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.cf-bio__photo{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--noir2)}
.cf-bio__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;
  filter:grayscale(1) contrast(1.04);transition:filter .7s var(--ease),transform .9s var(--ease)}
.cf-bio__photo:hover img{filter:grayscale(.15) contrast(1);transform:scale(1.03)}
.cf-bio__photo::after{content:"";position:absolute;inset:0;mix-blend-mode:color;
  background:linear-gradient(160deg,rgba(184,144,47,.34),transparent 62%);pointer-events:none}
.cf-bio p{font-size:16px;line-height:1.85;color:var(--gris);margin:0 0 18px;max-width:640px}
.cf-refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;margin-top:38px;
  background:var(--trait)}
.cf-refs div{background:var(--creme);padding:22px 20px}
.cf-refs b{display:block;font-family:'Anton',sans-serif;font-size:clamp(21px,2.4vw,30px);
  color:var(--or);line-height:1;margin-bottom:8px}
.cf-refs span{display:block;font-size:12.5px;line-height:1.5;color:var(--gris)}
.cf-cit{margin:56px 0 0;padding:34px 0 0;border-top:1px solid var(--trait);max-width:760px}
.cf-cit p{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(19px,2.3vw,28px);
  line-height:1.3;color:var(--txt);margin:0;text-transform:none}
.cf-cit cite{display:block;margin-top:16px;font-style:normal;font-family:'Anton',sans-serif;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}

/* ---------- 5. Les conférences ---------- */
.cf-phares{display:grid;gap:1px;margin-top:52px;background:rgba(184,144,47,.25)}
.cf-phare{background:var(--noir);display:grid;grid-template-columns:1.5fr .85fr;gap:48px;
  padding:44px 40px 46px;transition:background .4s var(--ease)}
.cf-phare:hover{background:#121216}
.cf-phare__no{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.2em;color:var(--or);
  display:block;margin-bottom:12px}
.cf-phare h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;color:#fff;
  font-size:clamp(23px,2.9vw,36px);line-height:1.06;margin:0 0 14px}
.cf-phare__angle{font-size:16px;line-height:1.6;color:var(--or-clair);margin:0 0 18px;font-weight:300}
.cf-phare p{font-size:15px;line-height:1.8;color:#a8a8b2;margin:0;font-weight:300;max-width:620px}
.cf-phare__cles{list-style:none;padding:0;margin:0 0 22px}
.cf-phare__cles li{position:relative;padding-left:20px;margin-bottom:12px;font-size:14px;
  line-height:1.55;color:#d4d4dc}
.cf-phare__cles li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;
  background:var(--or)}
.cf-phare__pour{font-size:13px;line-height:1.6;color:#8a8a94;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12)}
.cf-phare__pour b{display:block;font-family:'Anton',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);margin-bottom:6px;font-weight:400}
.cf-phare .btn{margin-top:26px;width:100%;justify-content:center}

/* Thèmes complémentaires : mêmes informations, moins d'emphase */
.cf-plus{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1px;background:rgba(184,144,47,.25)}
.cf-plus__item{background:var(--noir);padding:38px 36px 40px}
.cf-plus__item h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;color:#fff;
  font-size:20px;line-height:1.12;margin:10px 0 12px}
.cf-plus__item .cf-phare__angle{font-size:14.5px;margin-bottom:14px}
.cf-plus__item p{font-size:14.5px;line-height:1.75;color:#a8a8b2;font-weight:300;margin:0 0 18px}
.cf-plus__mots{font-family:'Anton',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);margin-bottom:22px}
.cf-plus__item .btn{width:100%;justify-content:center}

/* ---------- 6. Formats ---------- */
.cf-formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;margin-top:48px;
  background:var(--trait)}
.cf-format{background:var(--blanc);padding:34px 30px 36px;position:relative}
.cf-format--reco{background:var(--noir);color:#fff}
.cf-format__duree{font-family:'Anton',sans-serif;font-size:clamp(27px,3.2vw,40px);line-height:1;
  color:var(--or);display:block;margin-bottom:8px}
.cf-format__nom{font-family:'Anton',sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);display:block;margin-bottom:18px}
.cf-format--reco .cf-format__nom{color:var(--or-clair)}
.cf-format p{font-size:14.5px;line-height:1.7;color:var(--gris);margin:0;font-weight:300}
.cf-format--reco p{color:#b6b6bf}
.cf-format__tag{position:absolute;top:0;right:0;background:var(--or);color:var(--noir);
  font-family:'Anton',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px}
.cf-atelier{margin-top:1px;background:var(--noir);color:#fff;padding:44px 40px;
  display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.cf-atelier h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:24px;
  margin:10px 0 14px;color:#fff}
.cf-atelier p{font-size:15px;line-height:1.8;color:#a8a8b2;margin:0;font-weight:300}
.cf-atelier dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:13.5px}
.cf-atelier dt{font-family:'Anton',sans-serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or);align-self:center}
.cf-atelier dd{margin:0;color:#d4d4dc}
.cf-surmesure{margin-top:36px;font-size:15px;line-height:1.7;color:var(--gris);
  border-left:2px solid var(--or);padding-left:20px;max-width:640px}

/* ---------- 7. Pour qui ---------- */
.cf-publics{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;margin-top:48px;
  background:rgba(184,144,47,.25)}
.cf-public{background:var(--noir);padding:34px 28px 36px;position:relative}
.cf-public::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--or);opacity:.85}
.cf-public h3{font-family:'Anton',sans-serif;font-weight:400;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or-clair);margin:0 0 14px}
.cf-public p{font-size:14.5px;line-height:1.75;color:#a8a8b2;margin:0;font-weight:300}

/* ---------- 8. Déroulement ---------- */
.cf-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;margin-top:52px}
.cf-etape{position:relative;padding-top:30px;border-top:1px solid var(--trait)}
.cf-etape__no{position:absolute;top:-1px;left:0;width:36px;height:2px;background:var(--or)}
.cf-etape b{display:block;font-family:'Anton',sans-serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);margin-bottom:12px}
.cf-etape h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:17px;
  line-height:1.15;margin:0 0 10px;color:var(--txt)}
.cf-etape p{font-size:14.5px;line-height:1.7;color:var(--gris);margin:0;font-weight:300}

/* ---------- 9. Pourquoi faire intervenir Gilles ----------
   Quatre raisons numérotées, sans cadre : la numérotation suffit à
   séparer. Puis le bloc résultat, en or plein — c'est le seul endroit
   de la page où l'on parle de ce que les équipes emportent. */
.cf-raisons{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:48px;background:rgba(184,144,47,.25)}
.cf-raison{background:var(--noir);padding:34px 32px 36px}
.cf-raison__no{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.2em;color:var(--or);
  display:block;margin-bottom:14px}
.cf-raison h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;color:#fff;
  font-size:18px;line-height:1.14;margin:0 0 12px}
.cf-raison p{font-size:14.5px;line-height:1.78;color:#a8a8b2;margin:0;font-weight:300}

.cf-resultat{margin-top:1px;background:var(--or);color:var(--noir);padding:48px 44px 50px;
  display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start}
.cf-resultat__kick{font-family:'Anton',sans-serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(11,11,13,.62);padding-top:6px;white-space:nowrap}
.cf-resultat h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.7vw,32px);line-height:1.1;margin:0 0 24px;color:var(--noir);grid-column:2}
.cf-resultat ul{list-style:none;padding:0;margin:0;grid-column:2;max-width:640px}
.cf-resultat li{position:relative;padding-left:26px;margin-bottom:14px;font-size:16px;
  line-height:1.6;color:rgba(11,11,13,.86)}
.cf-resultat li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:2px;
  background:var(--noir)}
.cf-resultat li:last-child{margin-bottom:0}

/* ---------- 10. Questions fréquentes ---------- */
.cf-faq{margin-top:48px;max-width:840px;border-top:1px solid var(--trait)}
.cf-faq details{border-bottom:1px solid var(--trait)}
.cf-faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;
  font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(15px,1.7vw,19px);
  text-transform:uppercase;color:var(--txt);line-height:1.3;transition:color .3s var(--ease)}
.cf-faq summary::-webkit-details-marker{display:none}
.cf-faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:'Anton',sans-serif;font-size:22px;color:var(--or);transition:transform .3s var(--ease)}
.cf-faq details[open] summary{color:var(--or)}
.cf-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.cf-faq p{margin:0 0 26px;font-size:15.5px;line-height:1.8;color:var(--gris);max-width:700px;font-weight:300}

/* ---------- 11. Le formulaire ---------- */
.cf-form-sec{background:var(--noir);color:#fff;padding:110px 0}
.cf-form{max-width:780px;margin:44px auto 0;background:#121216;border:1px solid rgba(184,144,47,.28);
  padding:0}
.cf-prog{display:flex;border-bottom:1px solid rgba(255,255,255,.1)}
.cf-prog__e{flex:1;padding:18px 16px;text-align:center;font-family:'Anton',sans-serif;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#6b6b74;position:relative;transition:.3s var(--ease)}
.cf-prog__e.on{color:var(--or)}
.cf-prog__e.fait{color:#b6b6bf}
.cf-prog__e::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--or);
  transition:width .45s var(--ease)}
.cf-prog__e.on::after,.cf-prog__e.fait::after{width:100%}
.cf-etape-form{display:none;padding:38px 40px 42px}
.cf-etape-form.on{display:block}
.cf-form h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:20px;
  color:#fff;margin:0 0 26px}
.cf-form label{display:block;font-family:'Anton',sans-serif;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#8a8a94;margin:22px 0 9px}
.cf-form label:first-of-type{margin-top:0}
.cf-form input[type=text],.cf-form input[type=email],.cf-form input[type=tel],
.cf-form input[type=date],.cf-form select,.cf-form textarea{
  width:100%;padding:14px 15px;background:#191920;border:1px solid rgba(255,255,255,.14);
  color:#fff;font:inherit;font-size:16px;border-radius:0;transition:border-color .25s var(--ease)}
.cf-form textarea{min-height:110px;resize:vertical;line-height:1.6}
.cf-form select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8a8a94 50%),linear-gradient(135deg,#8a8a94 50%,transparent 50%);
  background-position:calc(100% - 21px) 52%,calc(100% - 15px) 52%;background-size:6px 6px;
  background-repeat:no-repeat;padding-right:44px}
.cf-form input:focus,.cf-form select:focus,.cf-form textarea:focus{outline:none;border-color:var(--or)}
.cf-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cf-choix{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px}
.cf-choix label{display:inline-flex;align-items:center;gap:9px;margin:0;padding:12px 16px;
  border:1px solid rgba(255,255,255,.16);cursor:pointer;font-family:'Montserrat',sans-serif;
  font-size:14px;letter-spacing:0;text-transform:none;color:#d4d4dc;transition:.25s var(--ease)}
.cf-choix label:hover{border-color:rgba(184,144,47,.6)}
.cf-choix input{accent-color:var(--or);width:16px;height:16px;flex:0 0 16px}
.cf-choix input:checked + span{color:var(--or-clair)}
.cf-coche{display:flex;gap:12px;align-items:flex-start;margin-top:26px;
  font-size:13.5px;line-height:1.65;color:#a8a8b2;font-weight:300}
.cf-coche input{accent-color:var(--or);width:18px;height:18px;flex:0 0 18px;margin-top:2px}
.cf-coche a{color:var(--or);text-decoration:underline}
.cf-nav{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.cf-nav .btn{flex:1;justify-content:center;min-width:150px}
.cf-retour{background:transparent;color:#8a8a94;border-color:rgba(255,255,255,.2)}
.cf-retour:hover{background:transparent;border-color:#fff;color:#fff}
.cf-err{margin-top:18px;padding:13px 16px;background:rgba(158,43,37,.16);
  border:1px solid rgba(214,110,110,.45);color:#f0c9c9;font-size:14px;line-height:1.6}
.cf-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Écran de confirmation */
.cf-merci{display:none;padding:56px 40px 60px;text-align:center}
.cf-merci.on{display:block}
.cf-merci h3{font-size:clamp(23px,3vw,34px);margin-bottom:18px}
.cf-merci p{font-size:16px;line-height:1.75;color:#b6b6bf;max-width:520px;margin:0 auto 14px;font-weight:300}
.cf-merci .cf-ref{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.18em;color:var(--or);
  margin-top:24px}
.cf-merci__liens{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:34px;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.cf-merci__liens a{font-family:'Anton',sans-serif;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);border-bottom:1px solid transparent;padding-bottom:4px;transition:.3s}
.cf-merci__liens a:hover{border-bottom-color:var(--or)}

/* ---------- 12. Appel final ---------- */
.cf-final{background:var(--noir);color:#fff;text-align:center;padding:120px 0}
.cf-final__rule{width:60px;height:2px;background:var(--or);margin:0 auto 34px}
.cf-final h2{font-size:clamp(30px,5vw,62px);margin-bottom:22px}
.cf-final p{font-size:17px;line-height:1.7;color:#b6b6bf;max-width:560px;margin:0 auto 38px;font-weight:300}
.cf-contact{margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
  display:inline-flex;gap:26px;flex-wrap:wrap;justify-content:center;
  font-size:13.5px;color:#8a8a94}
.cf-contact a{color:#b6b6bf;transition:color .3s}
.cf-contact a:hover{color:var(--or)}

/* ---------- Barre fixe du mobile ---------- */
.cf-barre{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:12px 16px;
  background:rgba(11,11,13,.95);backdrop-filter:blur(8px);border-top:1px solid rgba(184,144,47,.3);
  display:none;transform:translateY(105%);transition:transform .35s var(--ease)}
.cf-barre.on{transform:none}
.cf-barre .btn{width:100%;justify-content:center}

/* ---------- Apparition au défilement ---------- */
.cf-rv{opacity:0;transform:translateY(18px)}
.cf-rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .75s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .cf-rv,.cf-rv.in{opacity:1;transform:none;transition:none}
  .cf-barre{transition:none}
}

/* ---------- Écrans intermédiaires ---------- */
@media(max-width:1000px){
  .cf-bio{grid-template-columns:1fr;gap:38px}
  .cf-bio__photo{max-width:420px;aspect-ratio:4/5}
  .cf-phare{grid-template-columns:1fr;gap:30px;padding:38px 30px 40px}
  .cf-atelier{grid-template-columns:1fr;gap:30px;padding:38px 30px}
  .cf-plus{grid-template-columns:1fr}
  .cf-resultat{grid-template-columns:1fr;gap:20px;padding:38px 30px 40px}
  .cf-resultat h3,.cf-resultat ul{grid-column:1}
}

/* ---------- Téléphone ----------
   La page se lit d'abord sur un écran de 375 px, souvent depuis
   LinkedIn. Rien ne déborde, aucun texte sous 14 px. */
@media(max-width:700px){
  .cf-sec{padding:74px 0}
  .cf-hero{min-height:auto;padding:118px 0 44px}
  .cf-hero__img img{object-position:66% 18%}
  .cf-hero__accroche{font-size:19px;line-height:1.28;margin-top:20px}
  .cf-hero__sous{font-size:15px;margin-top:18px}
  .cf-reperes{gap:10px 22px;margin-top:26px;padding-top:20px}
  .cf-reperes span{font-size:12px}
  .cf-hero__cta{flex-direction:column;gap:10px;margin-top:28px}
  .cf-hero__cta .btn{width:100%;justify-content:center}
  /* Le tableau devient deux blocs empilés, jamais un tableau tassé */
  .cf-trad__tete{display:none}
  .cf-trad__ligne{grid-template-columns:1fr;gap:0;padding:20px 0}
  .cf-trad__g{padding:0 0 10px;font-size:14.5px}
  .cf-trad__f{text-align:left;padding:0 0 8px}
  .cf-trad__f::after{content:" "}
  .cf-trad__d{padding:0;font-size:15.5px}
  .cf-refs{grid-template-columns:1fr 1fr}
  .cf-phare{padding:32px 22px 34px;gap:26px}
  .cf-plus__item{padding:30px 22px 32px}
  .cf-format{padding:28px 22px 30px}
  .cf-atelier{padding:32px 22px}
  .cf-atelier dl{grid-template-columns:1fr;gap:4px 0}
  .cf-atelier dd{margin-bottom:12px}
  .cf-public{padding:28px 22px 30px}
  .cf-raisons{grid-template-columns:1fr}
  .cf-raison{padding:28px 22px 30px}
  .cf-resultat{padding:34px 22px 38px;gap:16px}
  .cf-resultat li{font-size:15px;padding-left:22px}
  .cf-etapes{gap:28px;margin-top:38px}
  .cf-etape-form{padding:28px 22px 32px}
  .cf-form{margin-top:32px}
  .cf-duo{grid-template-columns:1fr;gap:0}
  .cf-prog__e{font-size:9.5px;letter-spacing:.1em;padding:15px 6px}
  .cf-nav{flex-direction:column-reverse}
  .cf-nav .btn{width:100%}
  .cf-merci{padding:44px 22px 48px}
  .cf-final{padding:80px 0}
  .cf-contact{flex-direction:column;gap:10px}
  .cf-barre{display:block}
  body{padding-bottom:80px}
}