/* Typographic and Opentype Default Stylesheet [TODS]. For details and credits see Github. */


/*
1. Reset
*/

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, h5, h6, address, p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, table, caption, form, fieldset {
  margin: 0;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}


/*
2. Web fonts
*/

@font-face {
    font-family: 'CoText';
    src:    url('Co-Text.otf') format('opentype');
    font-weight: 1 1000;
    font-style: normal;
}
@font-face {
    font-family: 'CoTextBold';
    src:    url('Co-Text-Bold.otf') format('opentype');
    font-weight: 1 1000;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src:    url('Montserrat/Montserrat-VariableFont_wght.ttf') format('ttf') tech(variations),
            url('Montserrat/Montserrat-VariableFont_wght.ttf') format('ttf-variations');
    font-weight: 1 1000;
    font-stretch: 50% 200%;
    font-style: normal;
    font-display: swap;
}

/*
3. Global defaults
*/

body {
    line-height: 1.5;
    text-decoration-skip-ink: auto;
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
    font-kerning: normal;
}

button, input, label {
    line-height: 1.1;
}


/*
4. Block spacing
*/

.flow > * + * {
  margin-block-start: var(--flow-space, 1.5em);
}

.prose {
  --flow-space: 1.5em;
}

/* Fluid type sizing.
@link https://utopia.fyi/type/calculator?c=320,17,1.2,1240,21,1.333,4,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--1: clamp(0.8854rem, 0.8509rem + 0.1725vw, 0.9846rem);
  --step-0: clamp(1.0625rem, 0.9755rem + 0.4348vw, 1.3125rem);
  --step-1: clamp(1.275rem, 1.1099rem + 0.8253vw, 1.7496rem);
  --step-2: clamp(1.53rem, 1.251rem + 1.3951vw, 2.3322rem);
  --step-3: clamp(1.836rem, 1.3933rem + 2.2135vw, 3.1088rem);
  --step-4: clamp(2.2032rem, 1.5281rem + 3.3753vw, 4.144rem);
    --body-font-family : "Montserrat", Avenir, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
}
body {
    /*margin-inline: 3vw;*/
    line-height: 1.5;
    font-family: "Montserrat", Avenir, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    font-size: var(--step-0);
}
h1, h2, h3, h4 {
    line-height: 1.1;
}
h1 {
    font-size: var(--step-3);
}
h2 {
    font-size: var(--step-2);
}
h3 {
    font-size: var(--step-1);
}

code {
    font-family: "Inconsolata", ui-monospace, monospace;
}

table {
  border-collapse: collapse;
font-size: var(--step--1);
}

tbody {
  border-top: 0.125em solid #ddd;
  border-bottom: 0.125em solid #ddd;
}

th, td {
  padding: .25em .75em;
  vertical-align: top;
    text-align: left;
  border-bottom: 0.0625em solid #ddd;
}

th:first-child, td:first-child {
  padding-left: 0.25em;
}

th:last-child, td:last-child {
  padding-right: 0.25em;
}

td.nums, th.nums, tr.nums th, tr.nums td {
  text-align: right;
}


/*
5. OpenType utility classes
Deleted a bunc of stuff see https://github.com/clagnut/TODS/blob/main/tods.css:96
*/


:root {
    --opentype-case: off;
    --opentype-sinf: off;
}
.case { --opentype-case: on; }
.sinf { --opentype-sinf: on; }

* {
    font-feature-settings: "case" var(--opentype-case, off), "sinf" var(--opentype-sinf, off);
}


/*
6. Generic helper classes
*/

.centered {
    text-align: center;
    text-wrap: balance;
}

.uppercase {
    text-transform: uppercase;
    --opentype-case: on;
}

.smallcaps {
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;
}


/*
7. Prose styling defaults
*/

.prose {
    text-wrap: pretty;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-size-adjust: 0.507;
}

strong, b, th {
    font-weight: bold;
    font-size-adjust: 0.514; /* Check for the different weights you may be using */
}


/*
8. Headings
*/

h1, h2, h3, h4 {
    line-height: 1.1;
    font-size-adjust: 0.514;
    font-variant-numeric: lining-nums;
}

h1 {
    font-variant-ligatures: discretionary-ligatures;
    font-size-adjust: 0.521; /* check if this changes with an optical sizing axis */
}

h1.uppercase {
    font-variant-caps: titling-caps;
}

/*
9. Sup and sub
*/

@supports ( font-variant-position: sub ) {
    sub, .sub {
        vertical-align: baseline;
        font-size: 100%;
        line-height: inherit;
        font-variant-position: sub;
    }
}
@supports ( font-variant-position: super ) {
    sup, .sup {
        vertical-align: baseline;
        font-size: 100%;
        line-height: inherit;
        font-variant-position: super;
    }
}

.chemical {
    --opentype-sinf: on;
}

/*
10. Tables, times and maths
*/

td, math, time[datetime*=":"] {
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
}


/*
11. Quotes
*/

/* :lang(en) > * { quotes: '“' '”' '‘' '’'  ; } /* “Generic English ‘style’” */
:lang(fr) > * { quotes: '«\00202F' '\00202F»' '“' '”'; } /* « French “style” » */
:lang(en-GB) > * { quotes: '‘' '’' '“' '”' ; } /* ‘British “style”’ */

q::before { content: open-quote }
q::after  { content: close-quote }

.quoted p:first-of-type::before {
    content: '“';
}
.quoted p:last-of-type::after  {
    content: '”';
}

.quoted p:first-of-type::before {
    margin-inline-start: -0.87ch;
}
.quoted p {
    hanging-punctuation: first last;
}
@supports(hanging-punctuation: first last) {
    .quoted p:first-of-type::before {
        margin-inline-start: 0;
    }
}


/*
12. Hyphenation
Remember to set lang
*/

.prose {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-lines: 2;

    hyphens: auto;
    hyphenate-limit-chars: 7 4 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-zone: 8%;
    hyphenate-limit-last: always;
}

.prose pre, .prose code, .prose var, .prose samp, .prose kbd,
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    -webkit-hyphens: manual;
    hyphens: manual;
}

/*
== ACCESSIBILITY
 */
/*https://css-tricks.com/inclusively-hidden/*/
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
@media screen {
    .skip-link {
        position: absolute;
        z-index: 2;
        top: 1px;
        left: 1px;
        padding: 0.25em 0.5em;
        transform: translateY(-5em);
        transition: transform 0.25s ease-in-out;
        background-color: var(--yellow2);
        color: var(--logo-indigo);
    }

    .skip-link:focus, .skip-link:active {
        transform: translateY(0);
    }
}
@media (width < 760px){
    .skip-link {
        position: static;
    }
}

/*
== COLOURS
 */

:root{

--primary-blue: #15467C;
--primary-light: #446B96;
--blue-light: #CEE9F2;
--green-light: hsl(98.95deg 52.29% 78.63%);
--colisactiv: hsl(186, 36%, 37%);
--danger: #F03D3D;
--success : hsl(160, 51%, 49%);
--warning: hsl(20, 100%, 77%);
--info: rgb(153 203 235 / 40%);
--gray-50: #F5F7FA;
--gray-100: #EEF1F6;
--gray-200: #E0E5EB;
--gray-300: #CAD0D9;
--gray-400: #9CA3AF;
--gray-600: #4E5562;
--gray-700: #333D4C;
--gray-800: #1D2735;
--gray-900: #111827;
--gray-950: #030712;
--badge-green: hsl(156deg 57% 61% / 50%);
--badge-red: hsl(13deg 57% 61% / 50%);
--badge-blue: hsl(204deg 100% 40% / 50%);
--body-color: var(--gray-900);

--shadow-large: 0px 18px 48px -6px rgba(103, 111, 123, 0.12);
--shadow-medium: 0px 8px 32px -4px rgba(103, 111, 123, 0.1);
--shadow-small: 0px 6px 24px rgba(103, 111, 123, 0.06);
    --btn-primary : var(--primary-blue);
--radius: 1.5em; /* 24px */
    --radius8: .5em;
--padding12 : .75em;
--padding16 : 1em;
--padding24 : 1.5em;
--gap24: 1.5em;

--blue1: rgb(37, 122, 200);
--blue2: rgb(0, 125, 206);
--blue3: rgb(0, 115, 170);
--blue4: rgba(37, 122, 200, 0.95);
--gray0: rgba(239, 239, 239, 0.5);
--gray1: rgb(238, 238, 238);
--gray2: rgb(212, 231, 236);
--gray5: rgba(50, 50, 50, 0.7);
--gray6: rgb(54, 57, 68);
--gray7: rgba(61, 61, 61, 0.9);
--gray8: rgb(34, 34, 34);
--gray9: rgb(70, 70, 70);
--green5: rgb(97, 212, 166);
--green7: rgb(0, 128, 0);
--red1: rgb(255, 0, 0);
--flex-gap: .85em;
}

html, body{
    margin: 0;
    height: 100%;
}
body{
    color: var(--body-color);
}
h1, h2, h3, h4 {
    font-family: "CoTextBold", Avenir, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    color: var(--primary-blue);
}
.h-regular {
    font-family: var(--body-font-family);
}
.h-smaller{
    font-size: var(--step-2);
}
.dropimage, button, .button, [type=submit], .label, [data-tooltip]:after{
    background: var(--btn-primary);
    color: white;
}
button, .button, [type=submit], .label {
    padding: .75rem 1.5rem; /* 12px 24px */
    border-radius: var(--radius);
    margin: 0;
}
button:hover, .button:hover, [type=submit]:hover{
    background: var(--primary-light);
}
.pseudo.button{
    background: white;
    border: 1px solid var(--primary-blue);
    color:  var(--primary-blue);
}
button.pseudo:hover, .pseudo.button:hover {
    background: var(--gray-100);
}
.btn-small{
    font-size: var(--step--1);
    padding: .625em 1.25em; /* 10px 20px */
}
button.small, .button.small {
    padding: .25em .5em;
    background: var(--gray-200);
    color: var(--primary-blue);
}
/*button.add-block{
    margin-bottom: var(--step--1);
}*/
.bg-white{
    border: 1px solid var(--gray-300);
}
.bg-primary-blue{
    background: var(--primary-blue);
}
.bg-primary-blue, .bg-primary-blue.card h3{
    color: white;
}
.badge, span[data-flux]{
    padding: 2px 8px;
    border-radius: 4px;
}
.badge.green, span[data-flux=COLIS_B2C], span[data-flux=COURSE_EXPRESS], span[data-flux=FRAIS_FROID], span[data-flux=COURRIER]{
    background: var(--badge-green);
}
.badge.red, span[data-flux=COLIS_B2B], span[data-flux=SORTIE_CAISSE], span[data-flux=COLLECTE_DECHETS], span[data-flux=LUXE]{
    background: var(--badge-red);
}
.badge.blue, span[data-flux=PALETTES], span[data-flux=REPAS_PREPARES], span[data-flux=DEMENAGEMENT]{
    background: var(--badge-blue);
}
.badge.colisactiv {
    background: url("img/badge.svg") 4px center no-repeat,  var(--colisactiv);
    color: white;
    padding-left: 24px;
}
.badge.visibility {
    width: fit-content;
    font-size: var(--step--1);
    background: var(--gray-100);
    cursor: help;
}
.w80rem{
    max-width: 80rem;
}
.w65rem{
    max-width: 65rem;
}
.w80rem, .w65rem{
    margin-right: auto;
    margin-left: auto;
}
.message{
    padding: var(--padding12);
    /*font-size: var(--step--1);*/
    border-radius: var(--radius8);
    max-width: max-content;
    /*white-space: pre-line;*/ /* will add new line if tags in content */
}
.info {
    background: var(--info);
}
.error, .danger {
    background: hsl(360, 100%, 97%);
    box-shadow: 0 0 2px hsl(356, 75%, 53%);
}
.success{
    background: var(--success);
}
.warning{
    background: var(--warning);
}
.no-wrap{
 white-space: nowrap;
}
summary h3 {
    display: inline;
}
.cta{
    width: fit-content;
    padding: var(--padding12);
    border-radius: var(--radius8);
    box-shadow: var(--shadow-medium);
    background: var(--blue-light);
}
/*
==Layout
*/
#page-header{
    max-width: 80rem;
    margin-right: auto;
    margin-left: auto;
}
.header-nav,
.footer-nav,
.page-nav,
.global-menu,
.page-operateur header,
.etab-container,
#creer-compte,
.header-search form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.header-nav{
    align-items: center;
    gap: 3vw;
}
.header-nav,.global-menu a{
    color: var(--primary-blue);
}
.header-logo a {
    display: flex;
    align-items: center;
    gap: .5em;
    color: inherit;
}
.header-logo a span {
    font-family: CoTextBold, var(--body-font-family);
    font-size: 32px;
}
.header-logo a img {
    margin-bottom: 7px;
}
.global-menu a{
    padding: var(--padding12);
}
.login-info>button {
    display: flex;
}
.login-info>button>svg {
    width: 24px;
    fill: var(--primary-blue);
}
#usermenu {
    top: calc(anchor(bottom));
    justify-self: anchor-center;
    border: 1px solid var(--gray-200);
    padding: var(--padding12);
    border-radius: var(--radius8);
    box-shadow: var(--shadow-medium);
    max-width: 12em;
}
#usermenu a {
    display: inline-block;
    padding: 0 4px;
    border-radius: 4px;
}
#usermenu a:hover{
    color: var(--gray-600);
    background: var(--gray-200);
}
/* link */


.fil-ariane{
    display: flex;
    font-size: var(--step--1);
}
nav{
    position: static;
    background: transparent;
    height: auto;
    padding: 0;
    box-shadow: none;
}
#page-container{
    display: grid;
    grid-template-areas: "header"
        "main"
        "footer";
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    grid-gap: 0;
}

#page-header {
    grid-area: header;
    /*background: var(--blue1);*/
}
#page-footer {
    grid-area: footer;
    padding-block-end: var(--step-0);
    background: var(--primary-blue);
    color: white;
}
#page-footer h4 {
    color: white;
}
#page-footer .footer-nav {
    justify-content: center;
    gap: 5vw;
}
#page-footer nav a {
    color: var(--gray-300);
    font-size: var(--step--1);
    display: block;
    line-height: 2;
}

.footer-logo {
    display: flex;
    align-items: center;
    font-family: CoTextBold, var(--body-font-family);
}
.footer-logo img{
    margin-bottom: 7px;
}
.footer-logo + p{
    color: var(--gray-200);
    font-weight: 600;
}
.footer-villes-nav nav ul {
    display: grid;
    grid-template: repeat(8, 1fr) / repeat(2, 1fr);
    grid-auto-flow: column;
    column-gap: 3em;
}
.identite{
    display: flex;
    flex-direction: column;
}
.colophon {
    color: var(--gray-300);
    font-size: var(--step--1);
    margin-block-start: auto;
    max-width: 24vw;
}
.colophon a{
    color: var(--gray-300);
}
nav ul, ul.no-style {
    padding-left: 0;
    list-style: none;
}
nav a {
    color: var(--primary-blue);
}
nav a:hover, nav a.active, .active a {
    color: var(--primary-light);
}
main:not(:has(>table)), main:not(:has(.is-table-searchable)){
    margin-inline: 3vw;
}
main:has(.is-table-searchable), main.home {
    margin-inline: 0;
}
main:not(.home){
    margin-block-end: var(--step-4);
}
/*
==Form
*/
.record-form legend {
    font-family: 'CoTextBold', var(--body-font-family);
    color: var(--gray-400);
}
.record-form legend:has(+ fieldset) {
    font-size: var(--step-1);
    color: var(--primary-blue);
}
label{
    display: block;
}
label.checkable {
    line-height: inherit;
}
input {
    padding: .75rem 1.125rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    max-width: 28em;
}

input:focus, textarea:focus, .select select:focus {
    border: 1px solid var(--gray-950);
}
input:user-invalid, textarea:user-invalid, .select select:user-invalid {
    border: 1px solid var(--danger);
}
.help-text {
    width: fit-content;
    padding: 4px;
    font-size: .85em;
    white-space: pre-line;
    background: var(--info);
    border-radius: var(--radius8);
}

/* we need this so that the invalid tooltip shows */
input[type=checkbox]:invalid, input[type=radio]:invalid {
    width: auto;
}
.header-search form{
    justify-content: center;
    align-items: end;
    gap: var(--flex-gap);
}
.header-search form > div:first-child {
    min-width: 16em;
}
input, optgroup, select, textarea{
    color: var(--gray6);
}
input[type=number], input[size="4"]{
    width: 8em;
}
.form-control:not([hidden]) {
/*    display: grid;
    grid-template-columns: 7em 20em 1fr;
    gap: .5em;*/
    margin-block-end: .5em;
}
.form-control.radio-list:not([hidden]), .form-control.locvm-details:not([hidden]) {
    display: flex;
    flex-direction: column;
}
.form-control.hub-details:not([hidden]) {
    display: grid;
    align-items: center;
    grid-template-columns: 9em 4em 4em 15em;
}
.form-control.hub-details:not([hidden]):has([id$=SurfaceHub]) {
    grid-template-columns: 9em 9em 5em;
}
.form-control.cyclo-details:not([hidden]).three-options {
    display: grid;
    align-items: center;
    grid-template-columns: 6em 7em 5em 9em auto;
    margin-block: 1em;
}
.form-control.hub-details:not([hidden]).four-options{
    grid-template-columns: 9em 5em 5em 5em 5em auto;
}
.form-control.cyclo-details:not([hidden]) {
    grid-template-columns: 14em 8em 1fr;
}
.position-data .form-control{
    display: block;
}
#full-record i {
    font-size: var(--step--1);
}
.form-control input[name$="[CodeDepartement]"] {
    width: 5em;
}
.form-control input[name$="[AdresseRue]"] {
    width: 45%;
}
.netteFormsModal{
    border: 2px solid var(--gray-600);
    border-radius: var(--radius);
}
.form-steps-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step-3);
}
.record-form {
    flex: 1;
}
nav#record-step a {
    width: 100%;
    display: inline-flex;
    gap: .25em;
    align-items: center;
    padding: var(--padding12);
    border-radius: var(--radius8);
}
nav#record-step a::before {
    display: inline-block;
    content: url(img/circle-empty.svg);
    width: 24px;
    height: 24px;
}
nav#record-step .active a, nav#record-step  a:hover {
    background: var(--gray-50);
}
nav#record-step .active a::before, nav#record-step  a:hover::before {
    content: url(img/arrow-right-circle.svg);
}
progress {
  opacity: 0;
}
nav.tab-nav {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    margin-block-end: 1em;
}
nav.tab-nav a {
    padding: .25em;
    border-radius: .25em;
    box-shadow: 0 0 2px var(--gray-400);
}
nav.tab-nav a.active {
    background: var(--gray-100);
}
/*
 https://nikitahl.com/progress-bar-css#cross-browser-friendly-solution */
.progress-container {
    position: relative;
    display: inline-block;
    background: var(--gray-50);
    height: 4px;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}
.progress-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: hsl(211deg 71% 44% / 80%);
}
.progress-container:has([value="30"])::before {
  width: 30%;
}
.progress-container:has([value="66"])::before {
  width: 66%;
}
.progress-container:has([value="100"])::before {
  width: 100%;
}
.progress-state-container .actions{
    display: flex;
}
.progress-state-container a.end {
    margin-left: auto;
    margin-right: 1em;
}
.progress-state-container a.start {
    margin-right: auto;
    margin-left: 1em;
}
/*
==list grid
*/
.auto-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.list-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 1rem;
}
.grid-list-annuaire{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-auto-rows: max-content;
}
section.grid-list-annuaire>div {
    padding-right: 1em;
}
.mobile-list-annuaire {
    display: grid;
    grid-template-columns: 3fr 1fr 50px;
    grid-auto-rows: max-content;
}
.grid-list-annuaire>*, .mobile-list-annuaire>* {
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-200);
    /*align-content: end;*/
}
.list-title {
    text-transform: uppercase;
    color: var(--gray-600);
    font-size: var(--step--1);
}
.pro-link a {
    color: var(--primary-blue);
    font-weight: bold;
    white-space: nowrap;
}
.pro-link a::before {
    display: inline-block;
    padding: 8px 8px 2px;
    margin-right: .5rem;
    border-radius: 4px;
}
.pro-link.CYCLOLOGISTICIEN a::before{
    background: var(--primary-blue);
    content: url('img/picto-bicycle.png');
}
.pro-link:not(.CYCLOLOGISTICIEN) a::before{
    background: var(--green-light);
    content: url('img/picto-bicycle_bleu.png');
}
.grid-list-annuaire, .mobile-list-annuaire {
}
.grid-list-annuaire>*:first-letter, .mobile-list-annuaire>*:first-letter {
        text-transform: uppercase;
}
.mobile-list-annuaire .address {
    display: inline-block;
    font-size: var(--step--1);
    padding-inline-start: 3.5em;
}
.mobile-next-page {
    padding-left: 1em;
}
/*
==list table
*/
.datatable-wrapper.datatable-empty {
    text-align: inherit;
}
.datatable-wrapper th,.datatable-wrapper td{
    border-bottom: 0;
    border-top: 0.0625em solid var(--gray-200);
}
th{
    background: var(--gray-200);
    color: var(--gray-600);
}
th>button{
    padding: 0;
}
.datatable-input {
    border-radius: 3px;
}
#full-record-list td:nth-child(5) { /* website */
    max-width: 10em;
    overflow-wrap: break-word;
}
.badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 15em;
}
span[data-flux=SORTIE_CAISSE] {
    white-space: nowrap;
}
#flux-selector{
    display: none;
}
.datatable-wrapper #flux-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
/*
==home
*/
.home-container, .hero, .hero h1, .hero h2{
    color: var(--primary-blue);
}
.hero{
    text-align: center;
    background: var(--blue-light);
    padding: 3vh 0 8vh;
}
.hero:not(.mobile){
    background: url('img/CA_header_full_v2.webp') no-repeat center , var(--blue-light);
    background-size: cover;
}
.hero h1{
    max-width: 15em;
    margin: auto;
}
.hero:not(.mobile) h1{
    color: white;
}
.hero h2 {
    font-size: var(--step-0);
    font-weight: 400;
    padding: 1rem 0 2rem;
}
#page-footer h4, .hero h1, .register-card h3, .partenaires h3, .home-a-propos h3, .soutien h3{
    font-family: "CoTextBold", Avenir, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
}
.header-search {
    padding: var(--padding12) var(--padding24);
}
.hero .header-search {
    text-align: left;
    background: white;
    max-width: fit-content;
    margin: auto;
    border-radius: var(--radius);
    display: block;
}
#creer-compte, .partenaires {
    padding-top: var(--step-4);
    background: var(--gray-50);
}
#creer-compte {
    justify-content: center;
    gap: var(--step-0);
}
.card h3 {
    font-size: var(--step-2);
    color: var(--primary-blue);
    white-space: nowrap;
}
#creer-compte .register-card{
    max-width: fit-content;
    border-radius: var(--radius);
    box-shadow: var(--shadow-medium);
    padding: var(--padding16);
}

.register-card.pro-reference{
background: var(--primary-blue) url('img/tricycle_femme.png') no-repeat bottom -24px right -8px;
}
.register-card.visiteur-pro {
    background: white url('img/rencontre.png') no-repeat bottom -44px right -2px;
    background-size: 41%;
}
.register-card .button {
    width: fit-content;
    padding: 10px 20px;
    font-size: var(--step--1);
}
.register-card span {
    width: 14em;
    line-height: 1.1;
    padding-bottom: var(--gap24);
}
.partenaires, .home-a-propos, .soutien{
    padding-block-end: var(--step-4);
}
.home-a-propos, .soutien{
    padding-block-start: var(--step-4);
}

.home-a-propos {
    position: relative;
    /*padding-inline-start: 12vw;*/
    background-image:
            linear-gradient(
            rgba(187, 235, 216, .4),
            rgba(187, 235, 216, .4)),
    linear-gradient(
            var(--gray-50),
            var(--gray-50)
    );
    padding-block-end: 32vh;
}
.home-a-propos::after{
    display: block;
    position: absolute;
    content: "";
    width: 770px;
    height: 405px;
        bottom: 0;
    left: 39rem;
    background: url("img/remorque_homme.png") no-repeat center;
}
.partenaires, .soutien{
    text-align: center;
}
.partenaires h3, .home-a-propos h3, .soutien h3{
    color: var(--primary-blue);
}
.partenaires ul, .soutien ul{
        display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--step-4);
}

@media (max-width: 500px) {
    .partenaires ul, .soutien ul {
        gap: var(--step--1);
    }

    .partenaires img, .soutien img {
        max-width: 24vw;
        height: auto;
    }
    .card h3{
        white-space: normal;
    }

    .register-card.pro-reference {
        background-size: 52%;
    }

    .register-card.visiteur-pro {
        background-position: bottom -30px right -2px;
    }

    .home-a-propos {
        padding-inline-start: 7vw;
        padding-block-end: 19vh;
    }

    .home-a-propos::after {
        width: 57vw;
        height: 17vh;
        background-size: contain;
        bottom: 4vh;
        left: 33vw;
    }
}
 .soutien ul{
     flex-wrap: wrap;
 }


/*
==view record
*/
.page-operateur{
    margin-block-start: var(--step-1);
}
.page-operateur header{
    justify-content: space-between;
    margin-block-start: var(--step-0);
}
.page-operateur header h1,
.page-operateur h2,
.page-operateur h3
{
    font-size: var(--step-0);
    color: var(--gray-700);
}
.page-operateur .name {
    position: relative;
    padding-left: calc(80px +  var(--padding24));
}
.page-operateur .name::before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
}
.page-operateur .name.CYCLOLOGISTICIEN::before {
    content: url('img/picto-bicycle_blanc_44.png');
    background: var(--primary-blue);
}
.page-operateur .name:not(.CYCLOLOGISTICIEN)::before {
    background: var(--green-light);
    content: url('img/picto-bicycle_bleu_44.png');
}
.page-operateur header h1 {
    font-variant: all-small-caps;
    padding-block-start: 0;
    padding-block-end: .2em;
    font-size: var(--step-2);
    line-height: .5;
}
.page-operateur .meta {
    display: flex;
    gap: var(--step-0);
    flex-wrap: wrap;
}
.page-operateur .orga-villes {
    font-variant: all-small-caps;
}
.orga-coord,
.contacts-container
{
    background: var(--gray-50);
    padding: var(--padding16);
    border-radius: var(--radius8);
    min-width: 17em;
}
.orga-dl, .contact-dl, .etab-dl {
    display: grid;
    grid-template-columns: 17em 1fr; /*  17em is what is needed for longest dt */
}
.orga-dl{
    grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
}
.orga-dl dt{
    font-weight: 600;
    color: var(--gray-600);
}
dl.orga-dl > *:nth-child(4n + 1), dl.orga-dl > *:nth-child(4n + 2) {
    background: var(--gray-100);
}
.field-not-available {
    background: var(--gray1);
    padding: .25em;
    border-radius: 3px;
    font-size: var(--step--1);
    color: var(--gray5);
}
.contact, .etab-adresse {
    display: flex;
    flex-direction: column;
}
.contact-nom {
    font-weight: 600;
    color: var(--gray-700);
}
.contact-email>i, .contact-tel>i {
    padding-right: .25em;
}
.flux {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .15em;
}
.flux>span {
    line-height: 1;
    color: var(--gray-700);
}