/* layout-tarifs.css · géométrie seule de la page « Deux façons d'avancer ».
   Aucune couleur littérale, aucune police, aucune ombre, aucune casse.
   Seule exception, comme dans layout.css : border-color:var(--line) pour que
   les bordures restent visibles avant application de la peau. */

/* ---- Ouverture : les deux portes ---- */
.of-hero{padding:clamp(56px,8vh,96px) 0 clamp(32px,4vw,52px);text-align:center}
.of-hero-inner{padding-left:1.1rem;padding-right:1.1rem;box-sizing:border-box}
.of-hero h1{margin:0 0 .7rem}
.of-lead{max-width:64ch;margin:0 auto clamp(30px,4vw,48px)}
.of-doors{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);max-width:960px;margin:0 auto;text-align:left}
.of-door{display:flex;flex-direction:column;gap:.6rem;padding:clamp(22px,3vw,32px);border:1px solid;border-color:var(--line);min-height:100%}
.of-door-title{margin:0}
.of-door-text{margin:0;flex:1}
.of-door-price{margin:.4rem 0 0;display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.of-door-link{margin-top:.2rem}
@media (max-width:720px){.of-doors{grid-template-columns:1fr}}

/* ---- Sections ---- */
.of-section{padding:clamp(46px,7vw,92px) 0}
.of-section-head{max-width:70ch;margin:0 0 clamp(26px,3.4vw,42px)}
.of-section-head h2{margin:0 0 .6rem}
.of-section-head p{margin:0}
.of-note{margin:clamp(18px,2.4vw,28px) 0 0;max-width:70ch}

/* ---- Trois formats de lecture ---- */
.of-formats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);align-items:stretch}
.of-formats > article{margin-top:0}
@media (max-width:900px){.of-formats{grid-template-columns:1fr}}

/* ---- Déroulé d'une consultation ---- */
.of-steps{display:grid;gap:0;border-left:1px solid;border-left-color:var(--line);margin:clamp(24px,3vw,40px) 0 0 20px}
.of-step{display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,2.4vw,32px);padding:clamp(20px,3vw,34px) 0 clamp(20px,3vw,34px) 32px;position:relative}
.of-step + .of-step{border-top:1px solid;border-top-color:var(--line)}
.of-step-num{position:relative}
.of-step h4{margin:0 0 .4rem}
.of-step p{margin:0;max-width:62ch}
@media (max-width:640px){.of-step{grid-template-columns:1fr;gap:.4rem;padding-left:22px}}

/* ---- Réservation ---- */
.of-booking{margin-top:clamp(28px,4vw,48px)}
.of-booking-head{max-width:66ch;margin:0 0 clamp(18px,2.4vw,28px)}
.of-booking-head h3{margin:0 0 .5rem}
.of-booking-head p{margin:0}
.of-calendly{min-width:320px;height:760px;border:1px solid;border-color:var(--line);overflow:hidden}
.of-booking-alt{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:clamp(14px,2vw,20px) 0 0;padding:clamp(14px,2vw,20px);border:1px solid;border-color:var(--line)}
.of-booking-alt p{margin:0;flex:1;min-width:240px}
.of-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(18px,2.4vw,28px)}
.of-tip{margin:0;padding:clamp(14px,2vw,20px);border:1px solid;border-color:var(--line)}

/* ---- Trois formules d'accès ---- */
.of-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);align-items:stretch}
.of-plan{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:clamp(24px,3vw,34px);border:1px solid;border-color:var(--line)}
.of-plan + .of-plan{margin-top:0}
.of-plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:6px 14px;line-height:1.2;white-space:nowrap}
.of-plan-name{margin:0}
.of-plan-price{margin:0;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.of-plan-pitch{margin:0}
.of-plan-list{list-style:none;margin:auto 0 0;padding:clamp(14px,2vw,18px) 0;display:flex;flex-direction:column;gap:.55rem;border-top:1px solid;border-top-color:var(--line)}
.of-plan-list li{display:grid;grid-template-columns:18px 1fr;gap:.55rem;align-items:start}
.of-plan-cta{display:block;text-align:center;padding:14px 20px;min-height:48px;box-sizing:border-box}
@media (max-width:900px){.of-plans{grid-template-columns:1fr}.of-plan-badge{position:static;transform:none;align-self:flex-start;margin-bottom:.2rem}}

/* ---- Tableau comparatif ---- */
.of-compare{width:100%;border-collapse:collapse;margin-top:clamp(26px,3.4vw,42px)}
.of-compare caption{text-align:left;padding-bottom:.8rem}
.of-compare th,.of-compare td{padding:.8rem .6rem;text-align:left;border-bottom:1px solid;border-bottom-color:var(--line)}
.of-compare td:not(:first-child),.of-compare thead th:not(:first-child){text-align:center;width:16%}
@media (max-width:640px){.of-compare{font-size:.9rem}.of-compare th,.of-compare td{padding:.6rem .3rem}}

/* ---- Questions fréquentes ---- */
.of-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.of-faq-col h3{margin:0 0 1rem}
.of-faq-item{padding:.9rem 0;border-bottom:1px solid;border-bottom-color:var(--line)}
.of-faq-item summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:.6rem}
.of-faq-item p{margin:.6rem 0 0;max-width:62ch}
@media (max-width:760px){.of-faq{grid-template-columns:1fr}}

/* ---- Contact de fin ---- */
.of-end{text-align:center;padding:clamp(34px,5vw,64px) clamp(18px,3vw,32px);border:1px solid;border-color:var(--line);max-width:720px;margin:0 auto}
.of-end h2{margin:0 0 .6rem}
.of-end p{margin:0 auto 1.2rem;max-width:52ch}

/* ---- Cartes de format (rendues par js/render.js) ---- */
.of-format{display:flex;flex-direction:column;gap:1rem;padding:clamp(24px,3vw,34px);border:1px solid;border-color:var(--line);margin-top:0}
.of-format .pack-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:14px;margin:0;border-bottom:1px solid;border-bottom-color:var(--line);flex-wrap:wrap}
.of-format .pack-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.of-format h3{margin:0}
.of-format .pack-pitch{margin:0}
.of-format .pack-features{list-style:none;margin:auto 0 0;padding:16px 0;display:flex;flex-direction:column;gap:.5rem;border-top:1px solid;border-top-color:var(--line)}
.of-format .pack-features li{padding-left:18px;position:relative}
.of-format .btn-arrow{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;border:none;padding:0}
.of-steps-title{margin:clamp(38px,5vw,62px) 0 0}

/* ---- Formulaire de contact ---- */
.of-contact{margin-top:clamp(34px,5vw,64px);padding:clamp(22px,3.4vw,40px);border:1px solid;border-color:var(--line)}
.of-contact-head{max-width:66ch;margin:0 0 clamp(18px,2.4vw,26px)}
.of-contact-head h3{margin:0 0 .5rem}
.of-contact-head p{margin:0}
.of-contact-form{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.8vw,20px)}
.of-contact-full{grid-column:1 / -1}
.of-contact-form .form-group{display:flex;flex-direction:column;gap:.35rem}
.of-contact-form label{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.of-contact-form input,.of-contact-form textarea{width:100%;padding:12px 14px;min-height:46px;box-sizing:border-box;border:1px solid;border-color:var(--line)}
.of-contact-form textarea{min-height:132px;resize:vertical}
.of-contact-submit{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.of-contact-submit .btn{min-height:48px}
.of-contact-legal{margin:0;max-width:62ch}
.of-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:700px){.of-contact-form{grid-template-columns:1fr}}