/* « Notre méthode », layout F. Needs the site tokens (tokens.css, polices.css). */
/* Design system: one amber highlight, the lit step; numbers in the text font (CH3). */
.m-f{margin:36px 0 40px;background:var(--papier-2);border-left:4px solid var(--encre);padding:20px 20px 24px}
.m-f .t{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:500 var(--taille-1)/1 var(--police-chiffres);letter-spacing:var(--interlettre-etiquette);text-transform:uppercase;color:var(--encre)}
.m-f .t::before{content:"";width:8px;height:8px;background:var(--encre)}
.m-f ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}  /* TINDER's watch point: « Comprendre » touched its arrow at 1440 */
.m-f li{position:relative;display:block;margin:0;padding:12px 7px 14px;background:var(--papier);border:1px solid var(--trait);transition:border-color var(--duree) var(--courbe)}
.m-f li::before{content:"";position:absolute;left:-1px;top:-1px;width:8px;height:8px;margin:0;background:var(--ambre);opacity:0;transition:opacity var(--duree) var(--courbe)}
.m-f li.on{border-color:var(--encre)}
.m-f li.on::before{opacity:1}
.m-f li:not(:last-child)::after{content:"";position:absolute;top:calc(50% - 5px);right:-15px;width:16px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2710%27 shape-rendering=%27crispEdges%27 fill=%27%236C8096%27%3E%3Crect x=%270%27 y=%274%27 width=%2710%27 height=%272%27/%3E%3Crect x=%2710%27 y=%271%27 width=%272%27 height=%278%27/%3E%3Crect x=%2712%27 y=%272.5%27 width=%272%27 height=%275%27/%3E%3Crect x=%2714%27 y=%274%27 width=%272%27 height=%272%27/%3E%3C/svg%3E")}
.m-f .n{display:block;font:500 12px/1 var(--police-texte);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--texte-doux);margin-bottom:8px}
.m-f .nom{display:block;font-size:15px;font-weight:500;line-height:1.2;letter-spacing:-.01em;transition:color var(--duree) var(--courbe)}
.m-f li.on .nom{color:var(--encre)}
.m-f .p{display:block;font-size:13.5px;line-height:1.3;color:var(--texte-doux);margin-top:4px}
.m-f .bd{position:relative;margin:8px calc((100% - 56px) / 10 - 1px) 0;border:2px solid var(--ardoise);border-top:0;padding:30px 7% 30px;transition:border-color var(--duree) var(--courbe)}
.m-f .bd::before{content:"";position:absolute;left:-6px;top:-8px;width:10px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%278%27 shape-rendering=%27crispEdges%27 fill=%27%236C8096%27%3E%3Crect x=%274%27 y=%270%27 width=%272%27 height=%272%27/%3E%3Crect x=%272.5%27 y=%272%27 width=%275%27 height=%272%27/%3E%3Crect x=%271%27 y=%274%27 width=%278%27 height=%272%27/%3E%3Crect x=%270%27 y=%276%27 width=%2710%27 height=%272%27/%3E%3C/svg%3E")}
.m-f .bd.on{border-color:var(--encre)}
.m-f .bd.on::before{background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%278%27 shape-rendering=%27crispEdges%27 fill=%27%23263C4D%27%3E%3Crect x=%274%27 y=%270%27 width=%272%27 height=%272%27/%3E%3Crect x=%272.5%27 y=%272%27 width=%275%27 height=%272%27/%3E%3Crect x=%271%27 y=%274%27 width=%278%27 height=%272%27/%3E%3Crect x=%270%27 y=%276%27 width=%2710%27 height=%272%27/%3E%3C/svg%3E")}
.m-f .bd::after{content:"";position:absolute;right:-2px;top:-8px;width:2px;height:8px;background:var(--ardoise);transition:background var(--duree) var(--courbe)}
.m-f .bd.on::after{background:var(--encre)}
.m-f .c{margin:0;font-size:16px;line-height:1.55;text-align:center;color:var(--texte)}
.m-f .c.attente{font:13px/1.5 var(--police-texte);color:var(--texte-doux);text-decoration:underline dashed 1px;text-underline-offset:5px}
.m-f .rm{display:none}
.m-f.anim li,.m-f.anim .bd{opacity:0;transform:translateY(6px);transition:opacity var(--duree-apparition) var(--courbe-douce),transform var(--duree-apparition) var(--courbe-douce),border-color var(--duree) var(--courbe)}
.m-f.anim.vu li,.m-f.anim.vu .bd{opacity:1;transform:none}
@media(max-width:700px){.m-f{padding:16px 14px 20px}
.m-f .rail{position:relative;padding-right:52px}
.m-f ol{grid-template-columns:1fr;gap:14px}
.m-f li{display:grid;grid-template-columns:28px 1fr;align-content:center;align-items:baseline;column-gap:6px;row-gap:2px;padding:0 12px;height:60px}
.m-f .n{margin:0;grid-row:span 2}
.m-f .nom{font-size:16px}
.m-f .p{margin:0;grid-column:2}
.m-f li:not(:last-child)::after{top:auto;right:auto;bottom:-15px;left:14px;width:10px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2714%27 shape-rendering=%27crispEdges%27 fill=%27%236C8096%27%3E%3Crect x=%274%27 y=%270%27 width=%272%27 height=%278%27/%3E%3Crect x=%271%27 y=%278%27 width=%278%27 height=%272%27/%3E%3Crect x=%272.5%27 y=%2710%27 width=%275%27 height=%272%27/%3E%3Crect x=%274%27 y=%2712%27 width=%272%27 height=%272%27/%3E%3C/svg%3E")}
.m-f .rm{display:block;position:absolute;right:14px;top:30px;bottom:30px;width:38px;border:2px solid var(--ardoise);border-left:0;transition:border-color var(--duree) var(--courbe)}
.m-f .rm::before{content:"";position:absolute;left:-8px;top:-6px;width:8px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%278%27 height=%2710%27 shape-rendering=%27crispEdges%27 fill=%27%236C8096%27%3E%3Crect x=%270%27 y=%274%27 width=%272%27 height=%272%27/%3E%3Crect x=%272%27 y=%272.5%27 width=%272%27 height=%275%27/%3E%3Crect x=%274%27 y=%271%27 width=%272%27 height=%278%27/%3E%3Crect x=%276%27 y=%270%27 width=%272%27 height=%2710%27/%3E%3C/svg%3E")}
.m-f .rm.on::before{background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%278%27 height=%2710%27 shape-rendering=%27crispEdges%27 fill=%27%23263C4D%27%3E%3Crect x=%270%27 y=%274%27 width=%272%27 height=%272%27/%3E%3Crect x=%272%27 y=%272.5%27 width=%272%27 height=%275%27/%3E%3Crect x=%274%27 y=%271%27 width=%272%27 height=%278%27/%3E%3Crect x=%276%27 y=%270%27 width=%272%27 height=%2710%27/%3E%3C/svg%3E")}
.m-f .rm::after{content:"";position:absolute;right:-28px;top:calc(50% - 4px);width:8px;height:8px;background:var(--ambre)}
.m-f .rm.on{border-color:var(--encre)}
.m-f .bd{margin:20px 0 0;border:0;border-top:1px solid var(--trait);padding:14px 0 0}
.m-f .bd::before,.m-f .bd::after{display:none}
.m-f .c{text-align:left;font-size:15px}
.m-f .c::before{content:"";display:inline-block;width:8px;height:8px;background:var(--ambre);margin-right:10px;vertical-align:1px}
}
@media(prefers-reduced-motion:reduce){.m-f *,.m-f *::before{transition:none!important}
}
/* CONTRÔLE QUALITÉ 16/10 on salon-v16: « Comprendre » overflowed its cell (by 5 px at 108 px, out of the frame from 640 px down, over
   its arrow at 600 px). The row of five now starts above 700 px (the column below, a phone held sideways included), the verb is
   15 px and the cell's side padding 7 px in the row; the column keeps 16 px. */