/* Specific to the comment-ca-marche page.
   Extracted from the mockups by pilotage/extract-css.ts.
   Do not edit by hand while the theme is incomplete: the mockups are still
   the source, and an edit here would be overwritten on the next run. */

.step{list-style:none;padding:2rem 1.8rem 2.2rem;border-left:1px solid var(--line)}

/* T12 : fourchette tarifaire et protections legales */
  /* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
     The price sentence now inherits var(--body). Was 1.1rem (17.6 px). */
  .price-line{color:var(--ink);margin-block:1.1rem}

/* 06/10: « là, il y a du rose, c'est pas très joli » : the box leaves the
   pink-beige --warm for the near-white surface, the page keeps no pink at all. */
.protections{margin-block:1.6rem;padding:1.4rem 1.6rem;background:var(--surface);
    border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0}

.protections .p-title{font-family:"Source Serif 4",Georgia,serif;font-size:1.15rem;
    font-weight:600;color:var(--ink);margin-bottom:.9rem}

.p-list{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}

.p-list li{padding-left:1.4rem;position:relative;color:var(--ink-2);max-width:var(--measure)}

.p-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
    border-radius:50%;background:var(--accent)}

.p-note{margin-top:1rem;font-size:.86rem;color:var(--muted)}

.p-label{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);
    color:var(--ink-2);max-width:var(--measure)}

/* T14 a T16 : micro-conversions */
  .micro{margin-top:2.2rem;padding:1.6rem 1.7rem;border:1px solid var(--line);
    border-radius:var(--r);background:var(--surface)}

.micro h3{font-size:1.2rem;margin-bottom:.6rem}

.micro p{color:var(--ink-2);max-width:var(--measure)}

.micro form{margin-top:1.1rem;display:grid;gap:.9rem}

.micro .m-row{display:flex;flex-wrap:wrap;gap:.8rem}

.micro input[type=text],.micro input[type=email],.micro textarea{
    flex:1;min-width:13rem;min-height:var(--target);padding:.7rem .9rem;
    border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);
    font:inherit;color:var(--ink)}

.micro textarea{min-height:110px;width:100%}

@media (hover:hover){.micro input:hover,.micro textarea:hover{border-color:var(--muted)}}

.micro .m-note{font-size:.9rem;color:var(--muted)}

.micro .m-neutral{font-weight:600;color:var(--ink)}

/* Numerotation des stages. Le <ol> porte deja l'ordre pour les lecteurs
     d'ecran ; ce compteur ne fait que le rendre visible. */
  .steps{counter-reset:etape;list-style:none;padding:0;margin:0}

.step{counter-increment:etape}

/* 06/10, « un, deux, trois, ça fait un peu strict » : the big serif numerals
   become small circles, the home page's own (« Ma façon de vous accompagner »,
   .steps-5 in pages/accueil.css), with the step title beside it as she asked.
   Three columns stay on desktop. Lucas's call: the circles only, the titles keep
   the text colour (no pink). The paragraph takes the full column below: beside
   the circle, three columns would leave it about 28 characters wide. */
.step{display:grid;grid-template-columns:2.6rem 1fr;column-gap:1rem;align-items:center;align-content:start}

.step::before{content:counter(etape);width:2.6rem;height:2.6rem;border:1px solid var(--accent);
    border-radius:50%;display:grid;place-items:center;color:var(--accent);
    font-size:1.05rem;font-weight:600;line-height:1}

.steps .step h3{margin:0}

.step p{grid-column:1/-1;margin-top:.9rem}

/* Puces visibles sur "Ce qui est compris". La liste etait deja un <ul> mais
     en list-style:none : la structure etait juste, elle ne se voyait pas. */
  .incl li{position:relative;padding-left:1.9rem}

/* La puce se cale sur le TITRE et non sur le <li> : le li porte un padding
     vertical, la puce se retrouvait 25px trop haut. En l'ancrant sur le h3 avec
     un top en em, elle reste centree sur la premiere ligne quelle que soit la
     taille de police. */
  .incl h3{position:relative}

.incl h3::before{content:"";position:absolute;left:-1.9rem;top:.55em;
    width:9px;height:9px;border-radius:50%;background:var(--accent)}

@media (max-width:900px){
    .hero-grid,.founder-grid,.cv-grid{grid-template-columns:1fr}
    .founder-photo{aspect-ratio:16/11;max-width:520px}
    .steps{grid-template-columns:1fr}
    .step{border-left:0;border-top:1px solid var(--line);padding:1.8rem 0}
    .step:first-child{padding-top:0;border-top:0}
    .quotes{grid-template-columns:1fr}
    .cities{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }

/* ============ PAGE : COMMENT ÇA MARCHE ============ */
  .faq{border-top:1px solid var(--line)}

.faq details{border-bottom:1px solid var(--line)}

.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
    padding:1.6rem 0;min-height:var(--target);font-family:"Source Serif 4",Georgia,serif;font-weight:500;
    font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);letter-spacing:-.005em;color:var(--ink)}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{content:"+";font-family:Figtree;font-weight:400;font-size:1.8rem;color:var(--accent);line-height:1;flex:none}

.faq details[open] summary::after{content:"-"}

@media (hover:hover){.faq summary:hover{color:var(--accent)}}

.faq .a{padding:0 0 1.8rem;color:var(--ink-2)}

.faq .a p{max-width:60ch}

.faq .a p + p{margin-top:1rem}

/* liste éditoriale « ce qui est compris » */
  .incl{list-style:none;border-top:1px solid var(--line)}

.incl li{display:grid;grid-template-columns:1fr;gap:1.2rem 1.5rem;align-items:baseline;
    padding:1.6rem 0;border-bottom:1px solid var(--line)}

.incl h3{margin-bottom:.4rem}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   « Ce qui est compris » (the taupe band, « Vous êtes suivi·e par une seule et
   même personne... ») now inherits var(--body). Was 1.05rem (16.8 px). */
.incl p{color:var(--ink-2);max-width:52ch}

/* 06/10: « L'accompagnement » moves to the taupe band (base.css), as on the home
   page. The list's own dark colours follow it. */
.band-taupe .incl p{color:#E3DBD0}

/* 21/10: no pink left; the decorative marker takes the logo's exact red. */
.band-taupe .incl h3::before{background:var(--logo-red)}

/* 24/10: the video section's size and centring now come from the shared rule in
   base.css (.wrap > .video), extended from this page to every page. */