/* RECRUTABLE — « La mosaïque », direction retenue le 10 novembre 2026.
   Feuille des pages de démonstration complètes (accueil, dépôt).
   Une page couleur de l'encre du logo ; un seul accent, le bleu ciel du
   logo, sur les boutons ; des filets fins plutôt que des cadres.
   Règles ARTHEMIS : Carlito, corps justifié, puces et légendes à gauche,
   boutons centrés et phrase dessous centrée, photos toutes en 3:2,
   aucun JavaScript. */

@font-face { font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/carlito-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-style: italic; font-weight: 400; font-display: swap; src: url("polices/carlito-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 700; font-display: swap; src: url("polices/carlito-700-normal.woff2") format("woff2"); }

:root {
  --fond: #101C17; --surface: #16251E; --surface-2: #1C2E26; --encre: #E9EFEB; --gris: #A7B6AE;
  --filet: rgba(233, 239, 235, .16); --accent: #C8D6F7; --focus: #C8D6F7; --alerte: #F2B8AC;
  --mesure: 46rem; --large: 76rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 64rem) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
ul, ol, li, figcaption, label, legend { text-align: left; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -.012em; color: #fff; }
a { color: var(--encre); text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: rgba(200, 214, 247, .5); transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.evitement { position: absolute; left: -999px; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 20; background: #fff; color: #101C17; padding: .5rem 1rem; }

.demo { background: #FBF3E2; color: #101C17; border-bottom: 1px solid #7A5200; font-size: .85rem; padding: .45rem 16px; }
.demo p { margin: 0 auto; max-width: var(--large); text-align: left; }

/* ---------- En-tête ---------- */
.entete { border-bottom: 1px solid var(--filet); }
.entete-haut { max-width: var(--large); margin: 0 auto; padding: .75rem 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; }
.compte { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .95rem; }
.compte > a:not(.btn) { color: var(--gris); text-decoration: none; }
.compte > a:not(.btn):hover { color: var(--encre); text-decoration: underline; }
.vues { border-top: 1px solid var(--filet); }
.vues ul { list-style: none; margin: 0 auto; padding: 0 16px; max-width: var(--large); display: flex; gap: 0 1.75rem; overflow-x: auto; scrollbar-width: none; }
.vues ul::-webkit-scrollbar { display: none; }
.vues a { display: block; white-space: nowrap; padding: .7rem 0; color: var(--gris); text-decoration: none; border-bottom: 2px solid transparent; font-size: .95rem; }
.vues a:hover { color: var(--encre); border-bottom-color: var(--filet); }
.vues a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }

/* ---------- Boutons : centrés, la phrase dessous aussi ---------- */
.btn { display: inline-block; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2;
  background: var(--accent); color: #101C17; border: 0; border-radius: 999px; padding: .9em 2em; transition: background-color .2s, box-shadow .2s; }
.btn:hover { background: #fff; color: #101C17; box-shadow: 0 0 0 4px rgba(200, 214, 247, .25); }
.btn:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; background: var(--accent); }
.btn-petit { padding: .55em 1.2em; font-size: .9rem; }
.btn-second { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1px var(--accent); }
.btn-second:hover { background: var(--accent); color: #101C17; }
.action { text-align: center; margin: 2.25rem 0; }
.action p { text-align: center; hyphens: manual; margin: .8rem auto 0; max-width: 46ch; font-size: .92rem; color: var(--gris); }

/* ---------- L'ouverture : photos 3:2, titre ----------
   1024 px et plus : trois photos côte à côte, le titre posé dessus.
   768 à 1023 px  : les trois photos, le titre dessous.
   Sous 768 px    : UNE photo en pleine largeur, le titre dessous.     */
.ouverture { position: relative; }
.bandeau-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.bandeau-photos li { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; }
.bandeau-photos li:nth-child(n + 2) { display: none; }
.bandeau-photos img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.8) brightness(.62); transition: filter .7s ease, transform .7s ease; }
.bandeau-photos li:hover img { filter: grayscale(0) brightness(.9); transform: scale(1.03); }
@media (min-width: 48rem) {
  .bandeau-photos { grid-template-columns: repeat(3, 1fr); }
  .bandeau-photos li:nth-child(n + 2) { display: block; }
  .bandeau-photos li + li { border-left: 1px solid var(--fond); }
}
.titre-ouverture { padding: 2rem 16px 2.5rem; max-width: var(--large); margin: 0 auto; }
.titre-ouverture h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; letter-spacing: -.02em; max-width: 20ch; }
.titre-ouverture p { text-align: left; hyphens: manual; color: var(--gris); font-size: 1.15rem; max-width: 46ch; margin: 1rem 0 0; }
@media (min-width: 64rem) {
  .titre-ouverture { position: absolute; inset: 0; max-width: none; display: flex; flex-direction: column; justify-content: center; align-items: center;
    pointer-events: none; padding: 2rem; background: radial-gradient(ellipse at center, rgba(16, 28, 23, .78) 0%, rgba(16, 28, 23, .3) 72%); }
  .titre-ouverture h1 { font-size: clamp(2.6rem, 3.7vw, 4.4rem); max-width: 22ch; text-align: center; }
  .titre-ouverture p { text-align: center; color: rgba(255, 255, 255, .86); margin-inline: auto; }
}

/* ---------- Les deux portes ---------- */
.portes { display: grid; grid-template-columns: 1fr; border-block: 1px solid var(--filet); }
@media (min-width: 48rem) { .portes { grid-template-columns: 1fr 1fr; } .porte + .porte { border-left: 1px solid var(--filet); } }
.porte { padding: 3.5rem 16px 2.5rem; display: flex; flex-direction: column; align-items: center; transition: background-color .3s; }
@media (min-width: 48rem) { .porte { padding: 4rem 8% 3rem; } }
.porte + .porte { border-top: 1px solid var(--filet); }
@media (min-width: 48rem) { .porte + .porte { border-top: 0; } }
.porte:hover { background: var(--surface); }
.porte h2 { font-size: clamp(2rem, 3.6vw, 3rem); text-align: center; }
.porte .qui { text-align: center; hyphens: manual; font-size: 1.2rem; color: var(--gris); margin: 1rem 0 0; max-width: 30ch; }
.porte .action { margin-top: auto; padding-top: 1.5rem; margin-bottom: 0; }

/* ---------- Blocs : une colonne étroite, centrée ---------- */
.bloc { max-width: calc(var(--mesure) + 32px); margin: 0 auto; padding: 5.5rem 16px 0; }
.bloc.large { max-width: calc(var(--large) + 32px); }
.bloc > h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); text-align: center; margin-bottom: 2rem; }
.bloc > h2::after { content: ""; display: block; width: 3rem; height: 1px; background: var(--gris); margin: 1.5rem auto 0; }
.etroit { max-width: var(--mesure); margin-inline: auto; }
.note { font-size: .92rem; color: var(--gris); }
.independance > h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

.chiffres { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.5rem; margin-bottom: 1.5rem; }
.chiffres p { margin: 0; text-align: center; color: var(--gris); hyphens: manual; }
.chiffres b { display: block; font-size: 2.6rem; line-height: 1; color: #fff; }
.chiffres p:last-child:not(:first-child) b { font-size: 1.15rem; margin-top: 1.1rem; }

/* La légende des familles : une pastille par famille présente */
.legende { list-style: none; padding: 0; margin: 2rem auto 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; font-size: .9rem; color: var(--gris); }
.legende li { display: inline-flex; align-items: center; gap: .45rem; }
.legende b { color: #fff; }
.pastille { width: .7rem; height: .7rem; border-radius: 50%; background: var(--famille, var(--accent)); display: inline-block; }

/* Fiches : filets fins, la couleur de la famille au survol */
.fiches { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
@media (min-width: 40rem) { .fiches { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .fiches { grid-template-columns: repeat(3, 1fr); } }
.fiche { border-top: 1px solid var(--filet); }
.fiche a { display: block; padding: 1.1rem 0 1.25rem; text-decoration: none; color: var(--encre); box-shadow: inset 0 1px 0 transparent; transition: box-shadow .25s; }
.fiche a:hover { box-shadow: inset 0 2px 0 var(--famille, var(--accent)); color: var(--encre); }
.fiche a:hover b { text-decoration: underline; text-underline-offset: .2em; }
.fiche .famille { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--gris); }
.fiche .famille::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--famille, var(--accent)); }
.fiche b { display: block; font-size: 1.12rem; line-height: 1.25; margin: .25rem 0 .3rem; color: #fff; }
.fiche .details { display: block; font-size: .85rem; color: var(--gris); }

/* ---------- Le vérificateur ---------- */
.verifier { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin: 2rem 0 1rem; padding: 1.75rem; background: var(--surface); border-top: 1px solid var(--filet); }
@media (min-width: 48rem) { .verifier { grid-template-columns: 1.5fr 1.2fr auto; align-items: end; } }
.verifier .action { margin: 0; }
details.depliant { border-top: 1px solid var(--filet); padding-top: 1rem; margin-top: 1rem; }
details.depliant summary { cursor: pointer; font-weight: 700; }
details.depliant summary:hover { color: var(--accent); }
.liste-colonnes { list-style: none; padding: 0; columns: 1; }
@media (min-width: 40rem) { .liste-colonnes { columns: 2; } }
.liste-colonnes a { text-decoration: none; color: var(--gris); display: inline-block; padding: .2rem 0; }
.liste-colonnes a:hover { color: var(--encre); text-decoration: underline; }

/* ---------- Champs ---------- */
.champ { margin: 0 0 1.5rem; }
.champ label, .lab { display: block; font-weight: 700; margin: 0 0 .4rem; color: #fff; font-size: .95rem; }
.precision { font-weight: 400; color: var(--gris); }
input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], select {
  width: 100%; font: inherit; color: var(--encre); background: transparent; border: 0; border-bottom: 1px solid var(--gris); border-radius: 0; padding: .65em 0; }
select[multiple] { border: 1px solid var(--filet); padding: .4rem; background: var(--surface); }
select option { color: #101C17; background: #fff; }
input::placeholder { color: #7F8F87; }
input:hover, select:hover { border-bottom-color: var(--encre); }
input:focus, select:focus { outline: none; border-bottom: 2px solid var(--accent); }
input[type="file"] { width: 100%; font: inherit; font-size: .92rem; color: var(--gris); padding: .6rem 0; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 700; margin-right: 1rem; padding: .5em 1.1em; border: 0; border-radius: 999px;
  background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1px var(--accent); cursor: pointer; transition: background-color .2s, color .2s; }
input[type="file"]::file-selector-button:hover { background: var(--accent); color: #101C17; }
input.court { max-width: 14rem; }
.aide { font-size: .9rem; color: var(--gris); margin: .5rem 0 0; }
.grille { display: grid; grid-template-columns: 1fr; gap: 0 1.75rem; }
@media (min-width: 48rem) { .grille { grid-template-columns: 1fr 1fr; } .grille-3 { grid-template-columns: repeat(3, 1fr); } }
.grille-3 { gap: .75rem 1.25rem; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; flex: none; }
.case { display: flex; gap: .75rem; align-items: flex-start; margin: 1rem 0 0; cursor: pointer; font-weight: 400; color: var(--encre); }
.case span { text-align: left; }
.case-phare { padding: 1rem; background: var(--surface-2); border-left: 2px solid var(--accent); }
.radios { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .25rem 0 0; }
.radios label, .radios-col label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--encre); font-size: 1rem; }
.radios-col { flex-direction: column; }

/* ---------- Le formulaire de dépôt ---------- */
.formulaire { padding-top: 3rem; }
.sommaire-etapes { list-style: none; counter-reset: etape; padding: 0; margin: 2rem 0 .5rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--filet); }
.sommaire-etapes li { counter-increment: etape; }
.sommaire-etapes a { display: block; padding: .9rem .5rem .9rem 0; text-decoration: none; color: var(--encre); font-weight: 700; border-bottom: 2px solid transparent; }
.sommaire-etapes a::before { content: "Étape " counter(etape); display: block; font-weight: 400; font-size: .8rem; color: var(--gris); }
.sommaire-etapes a:hover { border-bottom-color: var(--accent); color: #fff; }
.depot fieldset { border: 0; border-top: 1px solid var(--filet); margin: 3rem 0 0; padding: 2rem 0 0; min-width: 0; scroll-margin-top: 1rem; }
.depot legend { float: left; width: 100%; padding: 0; margin: 0 0 2rem; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.1; color: #fff; }
.depot legend span { display: block; font-size: .85rem; font-weight: 400; color: var(--gris); margin-bottom: .35rem; letter-spacing: 0; }
.depot legend + * { clear: both; }
.encadre { background: var(--surface); border-top: 1px solid var(--filet); padding: 1.5rem; margin: 0 0 1.75rem; }
.encadre h3 { font-size: 1.15rem; margin: 0 0 .75rem; }
.encadre ul { padding-left: 1.2rem; margin: 0; }
.encadre li { margin: .45rem 0; text-align: left; }
.encadre li::marker { color: var(--accent); }
.encadre-fort { border-top: 2px solid var(--accent); }
.alerte { border-left: 2px solid var(--alerte); background: rgba(242, 184, 172, .08); padding: .9rem 1.1rem; margin: .5rem 0 1rem; font-size: .95rem; }
.alerte b { color: #fff; }
.doc-ligne { display: grid; grid-template-columns: 1fr; gap: .25rem 1.25rem; padding: .75rem 0; border-top: 1px solid var(--filet); }
@media (min-width: 48rem) { .doc-ligne { grid-template-columns: 1.2fr 1fr 1fr; align-items: end; } }
.voies { display: grid; gap: 0; border-top: 1px solid var(--filet); margin-top: .75rem; }
.voie { border-bottom: 1px solid var(--filet); padding: 1rem 0; }
.voie .choix { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; font-weight: 700; color: #fff; margin: 0; }
.voie .choix small { display: block; font-weight: 400; color: var(--gris); font-size: .9rem; margin-top: .2rem; }
.voie-corps { padding: 1rem 0 .25rem 1.85rem; }
.voie-corps label, .voie-corps .lab { margin-top: 1rem; }
.voie:has(input[name="niveau_voie"]:checked) { background: linear-gradient(90deg, rgba(200, 214, 247, .06), transparent); }
@supports selector(:has(*)) {
  .voie:not(:has(input[name="niveau_voie"]:checked)) .voie-corps { display: none; }
  .champ:has(.regions-toute input:checked) .regions-choix { display: none; }
}
.regions-choix { margin-top: .75rem; }
.antifraude { margin: 3rem 0 0; padding: 1.25rem 1.5rem; border-left: 2px solid var(--alerte); background: var(--surface); font-size: .95rem; }

/* ---------- Les métiers recherchés : photos 3:2 ---------- */
.photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2rem 1.5rem; align-items: start; }
@media (min-width: 40rem) { .photos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .photos { grid-template-columns: repeat(4, 1fr); } }
.photos li, figure.photo { margin: 0; }
.cadre-photo { overflow: hidden; aspect-ratio: 3 / 2; }
.cadre-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.85); transition: transform .6s ease, filter .6s ease; }
.photo:hover .cadre-photo img { filter: none; transform: scale(1.04); }
figure.photo figcaption { text-align: left; font-size: .85rem; line-height: 1.4; margin-top: .7rem; color: var(--gris); }
figure.photo figcaption b { display: block; font-size: 1rem; margin-bottom: .15rem; color: #fff; }

/* ---------- Pied ---------- */
.pied { background: #0B1410; border-top: 1px solid var(--filet); margin-top: 6rem; padding: 3.5rem max(16px, calc((100% - var(--large)) / 2)) 3rem; }
.pied-cols { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .pied-cols { grid-template-columns: repeat(3, 1fr); } }
.pied h2 { font-size: 1rem; margin-bottom: .6rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin: .35rem 0; }
.pied a { text-decoration: none; color: var(--gris); }
.pied a:hover { color: var(--encre); text-decoration: underline; }
.pied-legal, .pied-editeur { font-size: .82rem; color: var(--gris); margin: 2rem 0 0; max-width: 60rem; }
.pied-editeur { margin-top: .75rem; }

.fam-sante { --famille: #6F8FF0; } .fam-agriculture { --famille: #4CB873; } .fam-hotellerie { --famille: #F08A3E; }
.fam-batiment { --famille: #A985DB; } .fam-industrie { --famille: #E0745C; } .fam-transport { --famille: #3DB7C2; }
.fam-commerce { --famille: #E070A6; } .fam-bureau { --famille: #9C97E0; } .fam-autre { --famille: #A7B6AE; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Le logo officiel (identique sur les quatre pages de démonstration) ----------
   Le fichier SVG du site, tel quel ; « par ARTHEMIS » dessous, sous le mot,
   à hauteur de la dernière rangée de carrés. De l'air tout autour. */
.logo-demo { --l: 11.5rem; display: inline-block; text-decoration: none; padding: .75rem .5rem .75rem 0; line-height: 1; }
.logo-demo img { display: block; width: var(--l); height: auto; max-width: none; border-radius: 0; background: none; padding: 0; }
.logo-demo .par { display: block; margin: calc(var(--l) * -0.075) 0 0 calc(var(--l) * 0.3464);
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; font-weight: 400; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
.logo-clair .par { color: #46574F; }
.logo-sombre .par { color: #C9D3CD; }
@media (max-width: 30rem) { .logo-demo { --l: 9.5rem; } }