/* FEUILLE DE LA PAGE /professionnels (27.10.2026), chargee par elle seule ($pageCss = ['pro'], assets/components/head.php),
   APRES coc.css. Sortie de coc.css le 27.10.2026 au soir : coc.css porte aussi le lot en cours d'une autre session, et un
   fichier part en entier au push ; la page pro devait partir seule. Les puces « Prix pro » du catalogue, de la page marque,
   du tunnel et du recapitulatif restent dans coc.css (bloc « COMPTES PRO ET TARIF PRO »). */
/* PAGE PROFESSIONNELS, v2 (27.10.2026, Florian sur la v1 : « a vomir la page »). Elle repond aux questions d'un garage :
   combien (le tableau des vrais prix public et pro), comment (trois etapes reliees), quoi (compris ou non), et si
   (questions). Pas de grille d'icones, pas de fond sombre (direction refusee), un seul rouge : le bouton.
   Contrastes calcules : #047857 sur blanc 5,5 ; #047857 sur #ECFDF5 5,2 ; #D01216 sur blanc 5,4 (titre) ; #065F46 sur #ECFDF5 7,1 (economie) ; #475569 sur blanc 7,6 ; #475569 sur #F4F2EE 6,8 ; #0F172A sur #F4F2EE 16,0.
   Plancher 12,8 px sur telephone. */
.coc-pro-hero { padding: 1.25rem 0 3.25rem; background: #fff; border-bottom: 1px solid var(--coc-border); }
.coc-pro-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; align-items: center; margin-top: 1.5rem; }
.coc-pro-hero__grid > *, .coc-pro-couvre > * { min-width: 0; }
.coc-pro-hero__titre { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.15rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; color: var(--coc-text); margin: .55rem 0 1.1rem; }
.coc-pro-hero__lead { font-size: 1.12rem; line-height: 1.6; color: var(--coc-text-muted); margin: 0 0 1.6rem; max-width: 34rem; }
.coc-pro-hero__lead strong { display: block; color: var(--coc-text); font-weight: 700; margin-bottom: .2rem; }
.coc-pro-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.6rem; }
.coc-pro-hero__chiffre { color: var(--coc-primary); white-space: nowrap; }
.coc-pro-prix__badge { display: inline-block; margin-left: .45rem; padding: .18rem .6rem; border-radius: 999px; background: #ECFDF5; color: #047857; font-size: max(.8rem, 13px); font-weight: 700; vertical-align: .1em; white-space: nowrap; }
.coc-pro-hero__garanties { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .5rem; color: var(--coc-text); font-size: .95rem; }
.coc-pro-hero__garanties i { color: #047857; margin-right: .3rem; }
.coc-pro-prix { background: #fff; border: 1px solid var(--coc-card-border); border-radius: 16px; box-shadow: var(--coc-card-shadow); padding: 1.25rem 1.35rem .9rem; }
.coc-pro-prix__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--coc-border); }
.coc-pro-prix__titre { font-size: 1.05rem; font-weight: 700; margin: 0; }
.coc-pro-prix__sous { font-size: max(.85rem, 13px); color: var(--coc-text-muted); }
.coc-pro-prix__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.coc-pro-prix__table thead th { font-size: max(.75rem, 12.8px); text-transform: uppercase; letter-spacing: .06em; color: var(--coc-text-muted); font-weight: 600; padding: .8rem 0 .4rem; text-align: left; }
.coc-pro-prix__table .num { text-align: right; white-space: nowrap; padding-left: 1rem; }
.coc-pro-prix__table tbody th, .coc-pro-prix__table tbody td { padding: .6rem 0; border-top: 1px solid var(--coc-border-soft); vertical-align: middle; }
.coc-pro-prix__table tbody th { text-align: left; font-weight: 600; }
.coc-pro-prix__table tbody th a { display: flex; align-items: center; gap: .7rem; color: var(--coc-text); text-decoration: none; min-height: 44px; }
.coc-pro-prix__table tbody th a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.coc-pro-prix__logo { width: 36px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.coc-pro-prix__logo img { max-width: 36px; max-height: 26px; width: auto; height: auto; }
.coc-pro-prix__public { color: var(--coc-text-muted); }
.coc-pro-prix__public s { text-decoration-thickness: 1px; }
.coc-pro-prix__table td strong { font-size: 1.08rem; font-weight: 700; color: var(--coc-text); }
.coc-pro-prix__eco { display: block; font-size: max(.78rem, 12.8px); color: #047857; font-weight: 600; line-height: 1.2; }
.coc-pro-prix__pied { font-size: max(.85rem, 13px); line-height: 1.5; color: var(--coc-text-muted); margin: .7rem 0 0; padding-top: .8rem; border-top: 1px solid var(--coc-border); }
.coc-pro-prix__pied a { color: var(--coc-text); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
/* Plus fort que body:not(.adm-body) .coc-eyebrow (12 px) : plancher 12,8 px de la page. */
body:not(.adm-body) main.coc-pro .coc-eyebrow { font-size: max(.75rem, 12.8px); }
.coc-pro-prix__logo .coc-brand-logo__init { font-size: 12.8px !important; }   /* brand_logo_html ecrit 11.2px en style en ligne */
.coc-pro-bande { background: var(--coc-bg-soft); padding: 3.5rem 0; }
.coc-pro-h2 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.95rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--coc-text); margin: 0 0 1.6rem; }
.coc-pro-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; }
.coc-pro-etapes li { position: relative; text-align: center; }
.coc-pro-bande .coc-pro-h2 { text-align: center; }
/* Centre (27.10.2026, Florian : « les chiffres devraient pas etre centres ? ») : le trait va du bord du cercle au bord du
   suivant, d'une colonne a l'autre (gap de 2.25rem, rayon 1.2rem + .4rem d'air). */
.coc-pro-etapes li:not(:last-child)::after { content: ""; position: absolute; top: 1.2rem; left: calc(50% + 1.6rem); right: calc(-50% - .65rem); height: 1px; background: var(--coc-border-strong); }
.coc-pro-etapes__n { position: relative; z-index: 1; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; border: 1px solid var(--coc-border-strong); color: var(--coc-text); display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto; }
.coc-pro-etapes h3 { font-size: 1.12rem; font-weight: 700; color: var(--coc-text); margin: 1rem 0 .4rem; }
.coc-pro-etapes p { margin: 0 auto; max-width: 22rem; color: var(--coc-text-muted); line-height: 1.6; }
.coc-pro-section { padding: 3.5rem 0 4rem; }
.coc-pro-note { font-size: .9rem; line-height: 1.55; color: var(--coc-text-muted); margin: 1.2rem 0 0; }
/* « Ce que couvre le tarif pro » (27.10.2026, « mieux stp ») : trois phrases a gauche, un ticket chiffre a droite. */
.coc-pro-couvre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; margin-bottom: 4rem; }
.coc-pro-couvre__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.coc-pro-couvre__points li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.05rem; line-height: 1.55; color: var(--coc-text); }
.coc-pro-couvre__points i { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #ECFDF5; color: #047857; font-size: 1rem; margin-top: .05rem; }
.coc-pro-couvre__non { color: var(--coc-text-muted); }
.coc-pro-couvre__points .coc-pro-couvre__non { color: var(--coc-text-muted); }
.coc-pro-couvre__non i { background: #F1F5F9; color: var(--coc-text-muted); }
.coc-pro-ticket { background: #fff; border: 1px solid var(--coc-card-border); border-radius: 16px; box-shadow: var(--coc-card-shadow); padding: 1.35rem 1.5rem 1.2rem; }
.coc-pro-ticket__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--coc-border); }
.coc-pro-ticket__tete h3 { font-size: 1.05rem; font-weight: 700; color: var(--coc-text); margin: 0; }
.coc-pro-ticket__tete span { font-size: max(.85rem, 13px); color: var(--coc-text-muted); }
.coc-pro-ticket__lignes { margin: 0; font-variant-numeric: tabular-nums; }
.coc-pro-ticket__lignes > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--coc-border-soft); }
.coc-pro-ticket__lignes dt { color: var(--coc-text); font-weight: 500; }
.coc-pro-ticket__lignes dt small { display: block; font-size: max(.78rem, 12.8px); color: var(--coc-text-muted); font-weight: 500; margin-top: .1rem; }
.coc-pro-ticket__lignes dt small.coc-pro-ticket__pro { color: #047857; font-weight: 600; }
.coc-pro-ticket__lignes dd { margin: 0; white-space: nowrap; color: var(--coc-text); }
.coc-pro-ticket__lignes dd s { color: var(--coc-text-muted); margin-right: .45rem; text-decoration-thickness: 1px; }
.coc-pro-ticket__total { border-bottom: 0 !important; border-top: 1px dashed var(--coc-border-strong); margin-top: .1rem; }
.coc-pro-ticket__total dt { font-weight: 700; }
.coc-pro-ticket__total dd strong { font-size: 1.3rem; font-weight: 800; }
.coc-pro-ticket__eco { margin: .3rem 0 0; padding: .6rem .8rem; border-radius: 10px; background: #ECFDF5; color: #065F46; font-weight: 600; font-size: .95rem; }
.coc-pro-questions { display: grid; gap: .55rem; max-width: 52rem; margin-bottom: 3.25rem; }
.coc-pro-questions details { border: 1px solid var(--coc-border); border-radius: 12px; background: #fff; }
.coc-pro-questions summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: .85rem 1.25rem; font-weight: 600; color: var(--coc-text); }
.coc-pro-questions summary::-webkit-details-marker { display: none; }
.coc-pro-questions summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.35rem; line-height: 1; color: var(--coc-text-muted); }
.coc-pro-questions details[open] summary::after { content: "\2212"; }
.coc-pro-questions summary:focus-visible { outline: 2px solid var(--coc-text); outline-offset: 2px; border-radius: 12px; }
.coc-pro-questions details p { margin: 0; padding: 0 1.25rem 1.1rem; color: var(--coc-text-muted); line-height: 1.6; }
.coc-pro-questions details p a { color: var(--coc-text); }
.coc-pro-fin { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem 2rem; padding: 2rem 2.25rem; border-radius: 16px; background: var(--coc-bg-soft); border: 1px solid var(--coc-border); }
.coc-pro-fin h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; color: var(--coc-text); margin: 0 0 .3rem; }
.coc-pro-fin p { margin: 0; color: var(--coc-text-muted); }
@media (max-width: 960px) {
    .coc-pro-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}
@media (max-width: 760px) {
    .coc-pro-hero { padding-bottom: 2.5rem; }
    .coc-pro-bande, .coc-pro-section { padding: 2.5rem 0; }
    .coc-pro-etapes { grid-template-columns: 1fr; gap: 1.6rem; }
    .coc-pro-bande .coc-pro-h2 { text-align: left; }
    .coc-pro-etapes li { padding-left: 3.3rem; min-height: 2.4rem; text-align: left; }
    .coc-pro-etapes p { margin: 0; max-width: none; }
    .coc-pro-etapes__n { position: absolute; left: 0; top: 0; margin: 0; }
    .coc-pro-etapes h3 { margin-top: .3rem; }
    .coc-pro-etapes li:not(:last-child)::after { top: 2.6rem; bottom: -1.4rem; left: 1.2rem; right: auto; width: 1px; height: auto; }
    .coc-pro-fin { padding: 1.5rem 1.25rem; }
    .coc-pro-couvre { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin-bottom: 3rem; }
    .coc-pro-ticket { padding: 1.1rem 1rem 1rem; }
    .coc-pro-fin .btn-coc-primary { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
    .coc-pro-prix { padding: 1rem .9rem .7rem; }
    /* Telephone (27.10.2026, mesure : la carte faisait 342 px a 375 comme a 320) : les en-tetes passent a la ligne, la
       marque aussi, les montants jamais ; moins d'air entre les colonnes. */
    .coc-pro-prix__table thead th, .coc-pro-prix__table thead th.num { white-space: normal; letter-spacing: .03em; line-height: 1.25; vertical-align: bottom; }
    .coc-pro-prix__table .num { padding-left: .6rem; }
    .coc-pro-prix__table td.num { white-space: nowrap; }
    .coc-pro-prix__table tbody th a { gap: .5rem; overflow-wrap: anywhere; }
    .coc-pro-hero__actions .btn-coc-primary { width: 100%; justify-content: center; }
}
@media (max-width: 340px) {
    .coc-pro-prix__logo { display: none; }
    .coc-pro-prix__table tbody th a { gap: 0; }
}