/* ============================================================
   L'emploi du temps — thème du site
   Interface blanche, filets gris, violet du logo comme seule
   couleur d'interface. Rose et orange restent des accents.
   ============================================================ */

/* ----------------------------------------------------------
   1. POLICE
   ---------------------------------------------------------- */

/* Inter en variable, hébergée avec le site : une police servie depuis un
   domaine tiers ajoute une connexion, une requête et un traceur pour un
   fichier qui ne change jamais. Deux sous-ensembles suffisent au français —
   le latin étendu n'est téléchargé que si un caractère hors du latin de base
   apparaît, ce qui n'arrive pas en français.

   `optional` plutôt que `swap` : le texte ne change plus d'apparence en cours
   de route. Le navigateur laisse à la police un court instant pour arriver ;
   passé ce délai il s'en tient à la police de repli pour cet affichage et ne
   bascule pas — le fichier finit de se télécharger dans le cache et servira
   dès la page suivante. Le gabarit précharge la police pour qu'elle arrive
   presque toujours à temps. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Police de repli recalibrée sur les mesures d'Inter.

   Mesuré à 100 px sur un échantillon du site : Inter occupe 4700 px de large
   contre 4436 px pour Arial, soit 5,96 % de plus, et ses hauteurs de ligne
   valent 97 % et 24 % du cadratin contre 91 % et 21 %. Sans correction, le
   repli compose plus serré et tout le texte se re-dispose au moment où Inter
   prend le relais : c'est ce saut que l'on voit.

   `size-adjust` rétablit la largeur, les deux `*-override` la hauteur de
   ligne — divisés par le même facteur, puisqu'ils s'appliquent après lui.
   Résultat : un repli qui occupe exactement la même place qu'Inter. */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 105.96%;
    ascent-override: 91.54%;
    descent-override: 22.65%;
    line-gap-override: 0%;
}

/* ----------------------------------------------------------
   2. VARIABLES
   ---------------------------------------------------------- */
:root {
    --violet: #72246c;
    --violet-hover: #5b1d56;
    --violet-pale: #f7f2f6;
    --rose: #e31c79;
    --orange: #dc4405;

    --text: #222222;
    --text-2: #666666;
    --rule: #e5e5e5;
    --bg-2: #f6f6f6;
    --white: #ffffff;

    --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --container: 1200px;
    --gutter: 40px;
    --section: 88px;
    --radius: 4px;

    /* Icônes d'interface. Décrites une fois ici et posées en masque, elles
       suivent `currentColor` : la même flèche sert en violet dans un lien, en
       blanc dans un bouton plein, en gris quand elle est désactivée. */
    --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
    --i-case: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
    --i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7Z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E");
    --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
    --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
    --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a1 1 0 0 1-1 1A17 17 0 0 1 4 4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-11'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------
   3. BASE
   ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 126px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    padding-top: 104px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img,
svg,
picture {
    max-width: 100%;
}

img {
    height: auto;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.5em;
    color: var(--text);
    line-height: 1.2;
    text-wrap: balance;
}

h1 {
    font-size: 46px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 24px;
    font-weight: 600;
}

h4 {
    font-size: 18px;
    font-weight: 600;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--violet);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--violet-hover);
}

ul,
ol {
    padding-left: 1.2em;
}

hr {
    height: 0;
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

blockquote {
    margin: 0 0 1em;
    padding-left: 20px;
    border-left: 2px solid var(--violet);
    color: var(--text-2);
}

/* Une bordure de focus visible partout, y compris sur fond violet. */
:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 2px;
}

.button.primary:focus-visible,
.violet-bg :focus-visible {
    outline-color: var(--white);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 200;
    padding: 10px 18px;
    background: var(--violet);
    color: var(--white);
    text-decoration: none;
    transition: top 0.15s;
}

.skip-link:focus {
    top: 12px;
    color: var(--white);
}

/* ----------------------------------------------------------
   4. GABARIT
   ---------------------------------------------------------- */
.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container.narrow {
    max-width: calc(760px + 2 * var(--gutter));
}

.section {
    padding: var(--section) 0;
}

.section.tight {
    padding: 56px 0;
}

.section.grey {
    background: var(--bg-2);
    &:last-of-type{
        border-bottom:2px solid #aaa;
        background: #fdf3ee;
    }
}

.section.pale {
    background: var(--violet-pale);
}

/* Deux sections de même fond qui se suivent doivent lire comme une seule :
   sans cela le rythme de 88 px se joue deux fois au même endroit. */
.section.grey + .section.grey,
.section.pale + .section.pale {
    padding-top: 0;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
}

.section-head h2,
.section-head h1 {
    margin: 0;
}

.section-head .intro {
    flex-basis: 100%;
    max-width: 640px;
    margin: 0;
    color: var(--text-2);
}

.lead {
    max-width: 620px;
    font-size: 18px;
    color: var(--text-2);
}

.meta {
    font-size: 14px;
    color: var(--text-2);
}

.eyebrow {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--violet);
}

/* ----------------------------------------------------------
   5. LIENS ET BOUTONS
   ---------------------------------------------------------- */

/* Flèche posée en masque plutôt qu'en caractère : « → » manque dans certaines
   polices système et s'y affiche en rectangle vide. */
.arrow-after::after,
.arrow-before::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-bottom: -0.15em;
    background: currentColor;
    mask: var(--i-arrow) no-repeat center / contain;
}

.arrow-after::after {
    margin-left: 0.5em;
}

.arrow-before::before {
    margin-right: 0.5em;
    transform: scaleX(-1);
}

.link {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--violet);
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

.link.arrow-after::after {
    transition: transform 0.15s;
}

.link.arrow-after:hover::after {
    transform: translateX(3px);
}

.button,
button.button,
.btn,
input[type='submit'],
button[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 48px;
    padding: 12px 26px;
    border: 1px solid var(--violet);
    border-radius: var(--radius);
    background: var(--violet);
    color: var(--white);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.button:hover,
.btn:hover,
input[type='submit']:hover,
button[type='submit']:hover {
    background: var(--violet-hover);
    border-color: var(--violet-hover);
    color: var(--white);
}

.button.secondary {
    background: var(--white);
    color: var(--violet);
}

.button.secondary:hover {
    background: var(--violet-pale);
    border-color: var(--violet);
    color: var(--violet-hover);
}

.button.ghost {
    background: transparent;
    border-color: var(--rule);
    color: var(--text);
}

.button.ghost:hover {
    background: var(--bg-2);
    border-color: var(--text-2);
    color: var(--text);
}

.button.small {
    min-height: 40px;
    padding: 8px 18px;
    font-size: 15px;
}

.button[disabled],
.button.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

/* ----------------------------------------------------------
   6. EN-TÊTE
   ---------------------------------------------------------- */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
}

/* Logo à gauche, menu et LinkedIn groupés à droite. `space-between` répartirait
   les trois blocs à égalité et laisserait le menu flotter au milieu, loin de
   l'icône : c'est la marge automatique du logo qui absorbe tout le vide. */
#header > .container {
    display: flex;
    align-items: center;
    gap: 80px;
    min-height: 104px;
}

.navbar-brand {
    display: block;
    flex: none;
    margin-right: auto;
    line-height: 0;
}

.navbar-brand svg,
.navbar-brand img {
    display: block;
    width: auto;
    height: 100px;
}

#menu {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu a {
    display: block;
    padding: 4px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

#menu a:hover {
    color: var(--violet);
}

#menu a.active,
#menu .active > a {
    color: var(--violet);
    border-bottom-color: var(--violet);
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text);
}

.social-link:hover {
    color: var(--violet);
}

.social-link svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Hamburger */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: var(--text);
    transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

#mobile-nav {
    display: none;
    border-top: 1px solid var(--rule);
    background: var(--white);
}

#mobile-nav ul {
    margin: 0;
    padding: 8px 0 20px;
    list-style: none;
}

#mobile-nav a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}

#mobile-nav .mobile-social {
    display: flex;
    gap: 12px;
    padding: 20px 0 4px;
}

body.no-scroll {
    overflow: hidden;
}

/* ----------------------------------------------------------
   7. ACCUEIL — ACCROCHE
   ---------------------------------------------------------- */
#hero {
    padding: 72px 0 56px;
}

#hero .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

#hero h1 {
    margin-bottom: 24px;
}

#hero .lead {
    max-width: 44ch;
}

.hero-visual {
    position: relative;
}

/* Les silhouettes courent devant un rideau de barres verticales — le motif du
   logo, repris ici en fond. Décoratif : masqué aux lecteurs d'écran. */
.hero-visual .bars {
    position: absolute;
    inset: 6% 12% 22% 26%;
    background: repeating-linear-gradient(
        to right,
        var(--violet-pale) 0 14px,
        transparent 14px 30px
    );
}

.hero-visual svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.hero-baseline {
    display: block;
    margin-top: 8px;
    text-align: right;
    font-size: 22px;
    font-style: italic;
    font-weight: 500;
    color: var(--violet);
}

/* ----------------------------------------------------------
   8. BARRE DE RECHERCHE
   ---------------------------------------------------------- */
.search-panel {
    padding: 28px 32px 24px;
    background: var(--bg-2);
}

.search-panel h2 {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
}

.search-form {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 12px;
    align-items: stretch;
}

/* La page des offres ajoute le type de contrat : une colonne de plus, sans
   quoi le bouton passerait seul à la ligne. */
.search-form.with-contrat {
    /* « Domaine d'activité » est le plus long des intitulés : sa colonne prend
       la part que le champ « Lieu », plus court, peut céder. */
    grid-template-columns: 1.2fr 0.9fr 1.2fr 1fr auto;
}

.search-field {
    position: relative;
    display: flex;
}

/* Sélecteur volontairement plus spécifique que la règle générique des champs
   de formulaire, plus bas : elle rend sinon le retrait qui laisse la place au
   pictogramme, et le texte se pose dessus. */
.search-form .search-field input,
.search-form .search-field select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px 12px 42px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
    font-family: var(--font);
    font-size: 16px;
    color: var(--text);
    appearance: none;
}

.search-form .search-field select {
    padding-right: 38px;
    cursor: pointer;
    /* Le chevron du thème est posé en pseudo-élément sur le champ ; celui que
       la règle générique des <select> peint en fond ferait doublon. */
    background-image: none;
    font-size:12px;
    option:checked{
        color:#aaa;
    }
    &:default{
        color:blue;
    }
    option:nth-child(n+2){
    font-size:16px;
    }
}

.search-field input::placeholder {
    color: var(--text-2);
    font-size:12px;
}

.search-field input:focus,
.search-field select:focus {
    border-color: var(--violet);
}

/* Pictogramme du champ : masque coloré en gris, posé sur le bord gauche. */
.search-field::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: var(--text-2);
    pointer-events: none;
}

.search-field.f-q::before {
    mask: var(--i-search) no-repeat center / contain;
}

.search-field.f-lieu::before {
    mask: var(--i-pin) no-repeat center / contain;
}

.search-field.f-domaine::before {
    mask: var(--i-case) no-repeat center / contain;
}

.search-field.f-domaine::after,
.search-field.f-contrat::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--text-2);
    mask: var(--i-chevron) no-repeat center / contain;
    pointer-events: none;
}

.search-field.f-contrat::before {
    mask: var(--i-doc) no-repeat center / contain;
}

.search-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 18px;
    font-size: 14px;
    color: var(--text-2);
}

.search-shortcuts ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-shortcuts a {
    color: var(--violet);
    text-decoration: none;
}

.search-shortcuts a:hover {
    text-decoration: underline;
}

.search-shortcuts .tous {
    font-weight: 500;
}

/* ----------------------------------------------------------
   9. LISTE DES OFFRES
   ---------------------------------------------------------- */

/* Une offre est une ligne, pas une carte : filets gris, pas de cadre, pas
   d'ombre, et le titre comme seule zone cliquable évidente. */
.postes-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.poste-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px 32px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
}

/* Survol : une bande violet très clair, exactement de la largeur de la ligne.
   Pas d'ombre ni de cadre — la charte les exclut, et les filets suffisent à
   séparer les offres. */
.poste-row:hover {
    background: var(--violet-pale);
}

.poste-row h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.poste-row h3 a {
    color: var(--text);
    text-decoration: none;
}

.poste-row:hover h3 a {
    color: var(--violet);
}

.poste-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--text-2);
}

.poste-facts li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.poste-facts li::before {
    content: '';
    flex: none;
    width: 15px;
    height: 15px;
    background: var(--text-2);
}

/* Cellule sans valeur : elle tient la colonne pour que l'alignement survive à
   une offre dont le domaine ou la référence manque, sans rien afficher. */
.poste-facts .vide::before {
    display: none;
}

.poste-facts .lieu::before {
    mask: var(--i-pin) no-repeat center / contain;
}

.poste-facts .contrat::before {
    mask: var(--i-doc) no-repeat center / contain;
}

.poste-facts .date::before {
    mask: var(--i-clock) no-repeat center / contain;
}

.poste-facts .domaine::before {
    mask: var(--i-case) no-repeat center / contain;
}

.poste-facts .reference::before {
    mask: var(--i-check) no-repeat center / contain;
}

.poste-row .voir {
    justify-self: end;
    white-space: nowrap;
    font-size: 15px;
}

.empty-state {
    padding: 48px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--text-2);
}

/* Colonnes alignées d'une offre à l'autre ------------------------------------

   Chaque ligne est une grille indépendante : ses colonnes se dimensionnent sur
   son seul contenu, et « Genève » ne tombe donc pas au même endroit que
   « Lausanne ». `subgrid` règle cela — la liste entière porte les colonnes, et
   chaque ligne, puis chaque bloc de critères, s'y raccroche au lieu d'en créer
   de nouvelles. Les colonnes se calent alors sur la plus large des valeurs,
   toutes offres confondues.

   Isolé dans un @supports : là où subgrid manque, la disposition en flux
   ci-dessus reste en place, simplement non alignée. */
@supports (grid-template-columns: subgrid) {

    .postes-list {
        display: grid;
        column-gap: 32px;
        /* Titre · critères · lien. `max-content` par critère : la colonne
           prend la largeur de sa plus longue valeur, et pas un pixel de plus. */
        grid-template-columns: minmax(0, 1fr) repeat(4, max-content) max-content;
    }

    .postes-list[data-facts='3'] {
        grid-template-columns: minmax(0, 1fr) repeat(3, max-content) max-content;
    }

    .postes-list[data-facts='5'] {
        grid-template-columns: minmax(0, 1fr) repeat(5, max-content) max-content;
    }

    .poste-row {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        column-gap: 32px;
    }

    /* De la deuxième colonne à l'avant-dernière : entre le titre et le lien,
       quel que soit le nombre de critères affichés.

       Sélecteur descendant obligatoire : les mêmes critères sont repris seuls
       en tête d'une offre et dans la fenêtre de candidature, où il n'y a
       aucune grille parente. `subgrid` y vaudrait `none` et les empilerait. */
    .postes-list .poste-facts {
        display: grid;
        grid-column: 2 / -2;
        grid-template-columns: subgrid;
        gap: 10px 32px;
    }

    .empty-state {
        grid-column: 1 / -1;
    }

    /* Écrans intermédiaires : les critères ne tiennent plus sur une ligne. Ils
       passent en deux colonnes — donc en deux rangées — sans quitter la
       grille : deux colonnes de critères au lieu de quatre, et les valeurs
       restent alignées d'une offre à l'autre.

       Seuil : les critères et le lien occupent environ 730 px incompressibles
       (les colonnes sont en `max-content`), et un intitulé de poste demande
       300 px pour tenir sur une ligne. En dessous de ~1120 px de fenêtre, le
       titre se replierait sur deux lignes à chaque offre. */
    @media (min-width: 721px) and (max-width: 1119px) {
        .postes-list,
        .postes-list[data-facts='3'],
        .postes-list[data-facts='5'] {
            grid-template-columns: minmax(0, 1fr) repeat(2, max-content) max-content;
        }
    }
}

.results-count {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-2);
}

/* Filtres actifs, rappelés au-dessus de la liste. */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--violet);
    border-radius: 100px;
    font-size: 14px;
    color: var(--violet);
    text-decoration: none;
}

.filter-chip:hover {
    background: var(--violet-pale);
}

.filter-chip::after {
    content: '';
    width: 11px;
    height: 11px;
    background: currentColor;
    mask: var(--i-close) no-repeat center / contain;
}

.filter-chip.reset::after {
    display: none;
}

/* ----------------------------------------------------------
   10. CHIFFRES
   ---------------------------------------------------------- */
.chiffres {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.chiffres li + li {
    border-left: 1px solid var(--rule);
}

.chiffres strong {
    display: block;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--violet);
    font-variant-numeric: tabular-nums;
}

.chiffres span {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: var(--text-2);
}

/* ----------------------------------------------------------
   11. DEUX PARCOURS (candidat / recruteur)
   ---------------------------------------------------------- */
.parcours-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.parcours-card {
    display: flex;
    gap: 24px;
    padding: 32px;
    background: var(--violet-pale);
}

.parcours-card.orange {
    background: #fdf3ee;
}

.parcours-card h3 {
    margin-bottom: 8px;
}

.parcours-card p {
    color: var(--text-2);
}

.parcours-card .icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--violet);
    color: var(--white);
    font-size: 30px;
}

.parcours-card.orange .icon {
    background: var(--orange);
}

.parcours-card .icon svg {
    width: 1em;
    height: 1em;
}

.parcours-card .icon img {
    width: 1em;
    height: 1em;
    filter: brightness(0) invert(1);
}

/* ----------------------------------------------------------
   12. TÉMOIGNAGES
   ---------------------------------------------------------- */
.temoignages {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.temoignage-track {
    flex: 1;
    min-width: 0;
}

.temoignage {
    display: flex;
    gap: 24px;
}

.temoignage[hidden] {
    display: none;
}

.temoignage .quote-mark {
    flex: none;
    width: 32px;
    height: 32px;
    background: var(--violet);
    opacity: 0.25;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V12C0 5.4 4.6 0 12 0v5c-3.6 0-6 2.6-6 6h5v13H0Zm18 0V12C18 5.4 22.6 0 30 0v5c-3.6 0-6 2.6-6 6h5v13H18Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.temoignage blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 19px;
    line-height: 1.55;
    color: var(--text);
}

.temoignage cite {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    font-size: 14px;
    font-style: normal;
    color: var(--text-2);
}

.temoignage cite::before {
    content: '';
    width: 36px;
    height: 2px;
    background: var(--violet);
}

.carousel-nav {
    display: flex;
    flex: none;
    gap: 10px;
}

.carousel-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: var(--white);
    color: var(--text);
    cursor: pointer;
}

.carousel-nav button:hover:not([disabled]) {
    border-color: var(--violet);
    color: var(--violet);
}

.carousel-nav button[disabled] {
    color: var(--rule);
    cursor: default;
}

.carousel-nav button::before {
    content: '';
    width: 15px;
    height: 15px;
    background: currentColor;
    mask: var(--i-arrow) no-repeat center / contain;
}

.carousel-nav button.prev::before {
    transform: scaleX(-1);
}

/* ----------------------------------------------------------
   13. PIED DE PAGE
   ---------------------------------------------------------- */
footer {
    padding: 56px 0 24px;
    background: var(--bg-2);
    font-size: 15px;
    /* border-top: 2px solid #999; */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 40px;
}

footer h4 {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 600;
}

footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer li + li {
    margin-top: 8px;
}

footer a {
    color: var(--text);
    text-decoration: none;
}

footer a:hover {
    color: var(--violet);
    text-decoration: underline;
}

.footer-address {
    margin: 0;
    color: var(--text-2);
    font-style: normal;
    line-height: 1.7;
}

.footer-address a {
    color: var(--text-2);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 24px;
    font-size: 14px;
}

.footer-legal a {
    color: var(--text-2);
}

.eco-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-2);
    text-decoration: none;
}

.eco-badge span {
    display: block;
    max-width: 12ch;
    line-height: 1.35;
}

.eco-badge::before {
    content: '';
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: #4c8b5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c8 0 15-4 15-15c-4 0-13 0-13 7.5c0 2.8 1.9 4.7 4.7 4.7M5 19c0-3.7 1.9-6.6 4.7-7.5'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    margin: 40px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--text-2);
}

.footer-meta a {
    color: var(--text-2);
    text-decoration: underline;
}

/* ----------------------------------------------------------
   14. PAGES INTÉRIEURES
   ---------------------------------------------------------- */
.page-head {
    padding: 56px 0 40px;
    border-bottom: 1px solid var(--rule);
}

.page-head .intro {
    max-width: 680px;
    margin-top: 16px;
    font-size: 18px;
    color: var(--text-2);
}

.page-head .intro p:last-child {
    margin-bottom: 0;
}

.page-content > :first-child {
    margin-top: 0;
}

.page-content > :last-child {
    margin-bottom: 0;
}

.page-content h2 {
    margin-top: 1.5em;
}

.page-content h3 {
    margin-top: 1.4em;
}

.page-content ul,
.page-content ol {
    margin: 0 0 1em;
}

.page-content li {
    margin-bottom: 6px;
}

.page-content img {
    display: block;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
}

.page-content th,
.page-content td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}

.page-content th {
    font-weight: 600;
}

/* Sommaire interne (« Aller au processus »). */
.anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 0;
    list-style: none;
}

/* Blocs de contenu -------------------------------------------------------- */
.bloc-imgbox .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.bloc-imgbox.img-left .content {
    order: 2;
}

.bloc-imgbox img {
    display: block;
    width: 100%;
}

.bloc-columns .cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.bloc-columns h3 {
    font-size: 20px;
}

.bloc-columns p {
    color: var(--text-2);
    margin-bottom: 0;
}

.bloc-columns .icon {
    display: block;
    margin-bottom: 16px;
    font-size: 32px;
    line-height: 1;
    color: var(--violet);
}

.bloc-columns .icon svg {
    width: 1em;
    height: 1em;
}

.bloc-columns .icon img {
    width: 1em;
    height: 1em;
}

/* Processus : deux parcours en étapes numérotées. */
.parcours-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
}

/* Étapes alignées d'une colonne à l'autre -----------------------------------

   Sans cela, chaque parcours empile ses étapes à sa propre cadence : une
   description sur deux lignes d'un côté décale tout ce qui suit, et l'étape 3
   ne fait plus face à l'étape 3. Même remède que pour la liste des offres —
   la grille porte les rangées (titre, étapes, bouton), les deux parcours puis
   leurs listes s'y raccrochent par `subgrid`.

   L'écart entre rangées passe à zéro : les étapes se séparent par leur propre
   retrait et leur filet, pas par le `gap`. Une rangée restée vide — un
   parcours plus court, ou sans bouton — ne coûte alors rien.

   Réservé à l'affichage en deux colonnes : empilés, les deux parcours se
   retrouveraient dans les mêmes cellules, donc superposés. */
@media (min-width: 921px) {
    @supports (grid-template-rows: subgrid) {

        .parcours-grid {
            row-gap: 0;
        }

        /* `repeat()` n'accepte pas une variable CSS comme compteur : le nombre
           d'étapes vient du gabarit, en attribut. */
        .parcours-grid[data-etapes='3'] { grid-template-rows: auto repeat(3, auto) auto; }
        .parcours-grid[data-etapes='4'] { grid-template-rows: auto repeat(4, auto) auto; }
        .parcours-grid[data-etapes='5'] { grid-template-rows: auto repeat(5, auto) auto; }
        .parcours-grid[data-etapes='6'] { grid-template-rows: auto repeat(6, auto) auto; }
        .parcours-grid[data-etapes='7'] { grid-template-rows: auto repeat(7, auto) auto; }
        .parcours-grid[data-etapes='8'] { grid-template-rows: auto repeat(8, auto) auto; }

        .parcours-grid[data-etapes] .parcours {
            display: grid;
            grid-row: 1 / -1;
            grid-template-rows: subgrid;
            /* Le titre prend la première rangée, le bouton la dernière ;
               entre les deux, la liste réclame explicitement sa place. */
            align-content: start;
        }

        .parcours-grid[data-etapes] .parcours ol {
            display: grid;
            grid-row: 2 / -2;
            grid-template-rows: subgrid;
        }
    }
}

.parcours h3 {
    padding-bottom: 14px;
    border-bottom: 2px solid var(--violet);
}

.parcours.recruteur h3 {
    border-bottom-color: var(--orange);
}

.parcours ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.parcours li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
}

.parcours li::before {
    counter-increment: etape;
    content: counter(etape);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--violet);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
}

.parcours.recruteur li::before {
    background: var(--orange);
}

.parcours li strong {
    display: block;
    font-weight: 600;
}

.parcours li span {
    color: var(--text-2);
}

/* Collaborations : bande de logos, sans cadre. */
.logos {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 56px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.logos img {
    display: block;
    max-height: 56px;
    width: auto;
}

/* Encart d'engagement, sur fond violet très clair. */
.encart {
    padding: 40px;
    background: var(--violet-pale);
}

.encart > :last-child {
    margin-bottom: 0;
}

/* Équipe */
.equipe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.equipe img {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.equipe strong {
    display: block;
    font-weight: 600;
}

.equipe .role,
.equipe a {
    display: block;
    font-size: 14px;
    color: var(--text-2);
}

/* ----------------------------------------------------------
   15. OFFRE INDIVIDUELLE
   ---------------------------------------------------------- */
.poste-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}

.poste-aside {
    position: sticky;
    top: 128px;
    padding: 28px;
    background: var(--bg-2);
}

.poste-aside h2 {
    margin-bottom: 18px;
    font-size: 18px;
}

.poste-aside dl {
    margin: 0 0 24px;
}

.poste-aside dt {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-2);
}

.poste-aside dd {
    margin: 2px 0 16px;
    font-weight: 500;
}

.poste-aside dd:last-of-type {
    margin-bottom: 0;
}

.poste-aside .button {
    width: 100%;
}

.poste-aside .partage {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--text-2);
}

.back-link {
    margin: 0 0 24px;
    font-size: 15px;
}

.back-link a {
    display: inline-flex;
    align-items: center;
    color: var(--text-2);
    text-decoration: none;
}

.back-link a:hover {
    color: var(--violet);
}

/* ----------------------------------------------------------
   16. FENÊTRE DE CANDIDATURE
   ---------------------------------------------------------- */
.modal {
    width: min(640px, calc(100vw - 32px));
    max-height: min(860px, calc(100vh - 48px));
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
}

.modal::backdrop {
    background: rgba(34, 34, 34, 0.55);
}

.modal-head {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--rule);
}

.modal-head h2 {
    margin: 0 0 10px;
    font-size: 24px;
}

.modal-close {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    cursor: pointer;
}

.modal-close:hover {
    border-color: var(--violet);
    color: var(--violet);
}

.modal-close::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    background: currentColor;
    mask: var(--i-close) no-repeat center / contain;
}

.modal-body {
    padding: 24px 32px 32px;
    overflow-y: auto;
}

.linkedin-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
    background: #0a66c2;
    border-color: #0a66c2;
}

.linkedin-apply:hover {
    background: #08528f;
    border-color: #08528f;
}

.linkedin-apply svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Séparateur « ou », filet gris interrompu par le mot. */
.or-separator {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--text-2);
}

.or-separator::before,
.or-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
}

.privacy-note {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--text-2);
}

/* ----------------------------------------------------------
   17. FORMULAIRES
   ---------------------------------------------------------- */
.form-group,
.form-field {
    margin-bottom: 18px;
}

.form-label,
label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 500;
}

.form-label .required,
label .required {
    color: var(--rose);
}

.form-input,
.form-select,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='password'],
input[type='date'],
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
}

textarea {
    min-height: 130px;
    resize: vertical;
}

select {
    appearance: none;
    padding-right: 38px;
    background-image: var(--i-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--violet);
    outline-offset: 0;
}

input[type='checkbox'],
input[type='radio'] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin-right: 8px;
    accent-color: var(--violet);
}

.form-field-checkbox label,
.checkboxes label,
.form-data label {
    font-weight: 400;
}

.checkboxes label,
.radios label {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.45;
}

.form-input-file,
input[type='file'] {
    width: 100%;
    padding: 14px;
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
    background: var(--bg-2);
    font-family: var(--font);
    font-size: 15px;
}

.dropzone,
.dz-default {
    border: 1px dashed var(--rule) !important;
    border-radius: var(--radius) !important;
    background: var(--bg-2) !important;
}

.form-field-help,
.form-help,
.field-help {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-2);
}

.button-wrapper,
.buttons-wrapper {
    margin-top: 24px;
}

.form-errors,
.form-message.error {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-left: 3px solid var(--rose);
    background: var(--bg-2);
    font-size: 15px;
}

.form-messages,
#messages {
    margin-bottom: 24px;
}

.toast,
.form-message {
    padding: 14px 18px;
    border-left: 3px solid var(--violet);
    background: var(--bg-2);
    font-size: 15px;
}

.toast + .toast {
    margin-top: 10px;
}

/* Retour du plugin Form : remerciement après envoi, ou échec de validation.
   Ses classes portent une couleur (green / red / yellow) que le thème
   retraduit dans sa palette — le vert et le jaune n'y existent pas. */
.notices {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-left: 3px solid var(--violet);
    background: var(--violet-pale);
    font-size: 15px;
}

.notices p {
    margin: 0;
}

.notices.red {
    border-left-color: var(--rose);
    background: var(--bg-2);
}

.notices.yellow {
    border-left-color: var(--orange);
    background: var(--bg-2);
}

.toast.error {
    border-left-color: var(--rose);
}

.toast.warning {
    border-left-color: var(--orange);
}

/* ----------------------------------------------------------
   18. CONTACT
   ---------------------------------------------------------- */
.contact-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.contact-details {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.contact-details li {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
}

.contact-details li::before {
    content: '';
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: var(--violet);
}

.contact-details .adresse::before {
    mask: var(--i-pin) no-repeat center / contain;
}

.contact-details .tel::before {
    mask: var(--i-phone) no-repeat center / contain;
}

.contact-details .email::before {
    mask: var(--i-mail) no-repeat center / contain;
}

.contact-details .horaires::before {
    mask: var(--i-clock) no-repeat center / contain;
}

.contact-details strong {
    display: block;
    font-weight: 600;
}

.contact-details a {
    color: var(--text);
    text-decoration: none;
}

.contact-details a:hover {
    color: var(--violet);
    text-decoration: underline;
}

.map-embed {
    margin-top: 32px;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--rule);
}

.map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ----------------------------------------------------------
   19. ACTUALITÉS
   ---------------------------------------------------------- */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
}

.post-card img {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.post-card h3 {
    margin-bottom: 8px;
    font-size: 20px;
}

.post-card h3 a {
    color: var(--text);
    text-decoration: none;
}

.post-card h3 a:hover {
    color: var(--violet);
}

.post-card p {
    color: var(--text-2);
}

.post-card time {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-2);
}

.post-body {
    max-width: 720px;
}

.post-body img {
    display: block;
    margin: 32px 0;
}

/* ----------------------------------------------------------
   20. PAGINATION
   ---------------------------------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 15px;
    color: var(--text);
    text-decoration: none;
}

.pagination a:hover {
    border-color: var(--violet);
    color: var(--violet);
}

.pagination .active {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--white);
    font-weight: 500;
}

.pagination .disabled {
    color: var(--rule);
}

.pagination .gap {
    border: 0;
    color: var(--text-2);
}

.pagination .prev::before,
.pagination .next::before {
    content: '';
    width: 15px;
    height: 15px;
    background: currentColor;
    mask: var(--i-arrow) no-repeat center / contain;
}

.pagination .prev::before {
    transform: scaleX(-1);
}

/* ----------------------------------------------------------
   21. ERREUR
   ---------------------------------------------------------- */
#error {
    padding: 96px 0;
    text-align: center;
}

#error h1 {
    font-size: 72px;
    color: var(--violet);
}

#error .buttons {
    justify-content: center;
}

.results {
    margin-top: 40px;
}

/* ----------------------------------------------------------
   22. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 1080px) {
    :root {
        --gutter: 28px;
        --section: 72px;
    }

    #menu {
        gap: 24px;
    }

    .poste-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 40px;
    }

    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    .footer-grid .footer-eco {
        grid-column: 1 / -1;
    }
}

@media (max-width: 920px) {
    body {
        padding-top: 72px;
    }

    html {
        scroll-padding-top: 88px;
    }

    #header > .container {
        min-height: 72px;
        gap: 16px;
    }

    .navbar-brand svg,
    .navbar-brand img {
        height: 50px;
    }

    #menu,
    .header-tools .social-link {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    #mobile-nav.open {
        display: block;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    #hero {
        padding: 48px 0 40px;
    }

    #hero .container {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .hero-visual {
        max-width: 460px;
    }

    /* La variante « avec contrat » est plus spécifique que ce sélecteur : sans
       la nommer ici, ses cinq colonnes survivraient jusque sur mobile. */
    .search-form,
    .search-form.with-contrat {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-form .search-submit {
        grid-column: 1 / -1;
    }

    .search-submit .button {
        width: 100%;
    }

    .parcours-cards,
    .parcours-grid,
    .bloc-imgbox .container {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .bloc-imgbox.img-left .content {
        order: 0;
    }

    .poste-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .poste-aside {
        position: static;
        order: -1;
    }

    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .chiffres {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 0;
    }

    .chiffres li:nth-child(odd) {
        border-left: 0;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}

@media (max-width: 720px) {
    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 20px;
    }

    .lead,
    .page-head .intro {
        font-size: 17px;
    }

    .search-panel {
        padding: 22px 20px 20px;
    }

    .search-form,
    .search-form.with-contrat {
        grid-template-columns: minmax(0, 1fr);
    }

    .search-shortcuts {
        flex-direction: column;
    }

    /* La ligne d'offre se replie : titre, critères, puis le lien devient la
       ligne entière — le pointeur n'a plus à viser un petit « Voir l'offre ».
       Une seule colonne : la grille alignée n'a plus d'objet, on la démonte. */
    .postes-list {
        display: block;
    }

    .poste-row {
        display: block;
        padding: 20px 0;
    }

    .poste-row h3 {
        margin-bottom: 10px;
    }

    .postes-list .poste-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 24px;
        margin-bottom: 10px;
    }

    .poste-facts .vide {
        display: none;
    }

    .poste-row .voir {
        justify-self: start;
    }

    /* Au doigt, le survol n'existe pas : la teinte ne ferait que persister
       après le tap. */
    .poste-row:hover {
        background: transparent;
    }

    .parcours-card {
        flex-direction: column;
        gap: 18px;
        padding: 26px 22px;
    }

    .temoignages {
        flex-direction: column;
    }

    .carousel-nav {
        align-self: flex-end;
    }

    .modal-head,
    .modal-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .encart {
        padding: 26px 22px;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-meta {
        justify-content: flex-start;
    }
}

/* ----------------------------------------------------------
   23. IMPRESSION
   ---------------------------------------------------------- */
@media print {
    body {
        padding-top: 0;
        color: #000;
    }

    #header,
    #mobile-nav,
    footer,
    .search-panel,
    .carousel-nav,
    .back-link,
    .poste-aside .button {
        display: none;
    }

    .poste-layout {
        grid-template-columns: 1fr;
    }

    a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: 12px;
    }
}