@font-face { font-family: "IBM Plex Sans"; src: url("polices/IBMPlexSans-variable-latin.e2291e.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
:root {
    color-scheme: light dark;
    --fond: light-dark(#F4F6F9, #0E1420);
    --surface: light-dark(#FFFFFF, #131A28);
    --surface2: light-dark(#EDF0F5, #1C2740);
    --bordure: light-dark(#D9DEE7, #263044);
    --texte: light-dark(#131A28, #E8ECF2);
    --texte2: light-dark(#414D66, #A9B4C9);
    --texte3: light-dark(#5D6A85, #8091AC);
    --accent: light-dark(#2C3E5E, #5C7BAB);
    --lien: light-dark(#3D5687, #8FA6C9);
    --corps: "IBM Plex Sans", system-ui, sans-serif;
    --titre: "IBM Plex Sans", system-ui, sans-serif;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: var(--graisse, 300) 1rem / 1.6 var(--corps); -webkit-font-smoothing: antialiased; }
/* le pied se tient en bas de la fenêtre quand la page est plus courte qu'elle, et suit le contenu sinon :
   le corps est une colonne d'au moins la hauteur de la fenêtre, le contenu s'étire, le pied ne recouvre rien */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; }
.pied { flex-shrink: 0; }
a { color: var(--lien); text-underline-offset: .18em; }
a:hover { color: var(--texte); }
:focus-visible { outline: 2px solid var(--lien); outline-offset: 2px; }
.wrap { max-width: 65rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.evitement { position: absolute; left: -999rem; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 1; padding: .5rem .75rem; background: var(--surface); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sep { color: var(--texte3); margin: 0 .25rem; }

/* barre */
.barre { border-bottom: 1px solid var(--bordure); }
.barre .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding-top: 1.5rem; padding-bottom: 1.125rem; }
.marque { color: var(--texte); font-size: .9375rem; font-weight: 500; letter-spacing: .02em; text-decoration: none; }
.barre__liens { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .875rem; }
#theme { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--bordure); border-radius: 50%; background: transparent; color: var(--texte3); cursor: pointer; }
#theme:hover { color: var(--lien); border-color: var(--lien); background: var(--surface2); }
#theme svg { width: 1rem; height: 1rem; }
#theme .soleil, :root[data-theme="dark"] #theme .lune { display: none; }
:root[data-theme="dark"] #theme .soleil { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #theme .soleil { display: block; }
    :root:not([data-theme="light"]) #theme .lune { display: none; }
}

/* page de texte : mentions légales, 404 */
.texte { max-width: 46rem; padding: clamp(2.5rem, 6vw, 4rem) 0 3rem; }
.texte h1 { margin: 0 0 1.5rem; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.texte h2 { margin: 2.5rem 0 .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--bordure); font-size: 1.125rem; font-weight: 500; }
.texte p, .texte li { color: var(--texte2); }
.texte strong { color: var(--texte); font-weight: 500; }
.texte dl { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .375rem 1.5rem; margin: 0; }
.texte dt { color: var(--texte3); font-size: .9375rem; }
.texte dd { margin: 0; color: var(--texte2); }
.a-fournir { padding: 0 .25rem; background: #FFD84D; color: #131A28; font-weight: 600; }
@media (max-width: 38rem) {
    .texte dl { grid-template-columns: 1fr; gap: 0; }
    .texte dd { margin-bottom: .625rem; }
}

/* pied */
.pied { border-top: 1px solid var(--bordure); }
.pied .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-top: 1.5rem; padding-bottom: 2rem; color: var(--texte3); font-size: .875rem; }
.pied a { color: var(--texte3); }
.pied a:hover { color: var(--lien); }

/* la toile : le tissage couvre l'en-tête, dense en haut, et s'efface avant le texte courant */
.tel-hero { position: relative; isolation: isolate; padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--bordure); overflow: hidden; }
.tel-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); opacity: .16;
    mask-image: url("toile.4d6982.svg"), linear-gradient(180deg, #000 0%, rgb(0 0 0 / .5) 50%, transparent 100%);
    mask-size: 18px 18px, 100% 100%; mask-repeat: repeat, no-repeat; mask-composite: intersect; }
/* la lisière : une bande tissée pleine, à droite, comme le bord d'une pièce de toile ; elle disparaît
   quand la gouttière n'a plus la place de la tenir à distance du texte */
.tel-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: clamp(2rem, 6vw, 4.5rem); background: var(--accent); opacity: .36;
    mask-image: url("toile.4d6982.svg"); mask-size: 18px 18px; }
@media (max-width: 60rem) { .tel-hero::after { display: none; } }
.surtitre { margin: 0 0 1.25rem; color: var(--lien); font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.tel-hero h1 { margin: 0; font-size: clamp(3.25rem, 10vw, 7rem); font-weight: 200; letter-spacing: -.045em; line-height: .9; }
.tel-hero h1::after { content: ""; display: block; width: 4.5rem; height: 3px; margin: 1.5rem 0; background: var(--accent); }
.accroche { max-width: 30ch; margin: 0 0 1.25rem; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 300; line-height: 1.3; letter-spacing: -.01em; }
.second { max-width: 58ch; margin: 0; color: var(--texte2); }
.tel-corps { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.tel-bloc { padding-top: 3rem; }
.label { margin: 0 0 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--bordure); color: var(--texte3); font-size: .6875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.produit { position: relative; padding: 1.75rem 2rem 1.75rem 2.25rem; background: var(--surface); border: 1px solid var(--bordure); }
.produit::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 9px; background: var(--accent); mask-image: url("toile.4d6982.svg"); mask-size: 18px 18px; }
.produit h3 { margin: 0 0 .375rem; font-size: 1.625rem; font-weight: 400; letter-spacing: -.015em; }
.produit p { margin: 0; max-width: 60ch; color: var(--texte2); }
.produit__lien { margin-top: 1rem; font-size: .9375rem; font-weight: 500; }
/* les métiers : une liste, un filet entre chaque, le numéro en tête */
.metier { padding: 1.25rem 0; border-bottom: 1px solid var(--bordure); }
.metier:last-child { padding-bottom: 0; border-bottom: 0; }
.metier h3 { display: flex; align-items: baseline; gap: .625rem; margin: 0 0 .5rem; font-size: 1rem; font-weight: 500; }
.metier h3 span { color: var(--lien); font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.metier p { margin: 0; max-width: 60ch; color: var(--texte2); font-size: .9375rem; }
.tel-contact p { margin: 0; font-size: 1.25rem; }
/* grand écran : deux colonnes ; Heuria puis le contact à gauche, les métiers à droite sur toute la hauteur ;
   le contact se cale au pied de sa colonne, au niveau où les métiers finissent */
@media (min-width: 60rem) {
    .tel-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 6vw, 5rem); }
    .tel-edite { grid-column: 1; grid-row: 1; }
    .tel-contact { grid-column: 1; grid-row: 2; align-self: end; }
    .tel-fait { grid-column: 2; grid-row: 1 / 3; }
}