/* Site public AuriaCertified.
 *
 * Les couleurs sont échantillonnées directement dans le logo de la marque
 * (`img/logo-auria.png`) : le bleu nuit du lettrage et le terracotta de la
 * vague. Elles ne sont pas « inspirées de » la charte, elles en sont extraites.
 *
 * Deux contraintes dictent des choix qu'on ne devinerait pas sinon :
 *
 * 1. La politique de sécurité du contenu n'autorise aucune ressource distante.
 *    Pas de Google Fonts : la typographie s'appuie sur les polices système, un
 *    serif pour les titres — en écho au lettrage du logo — et une sans-serif
 *    pour le texte courant.
 * 2. Le vivier ne stocke aucune photographie de consultant. Les cartes de
 *    profil portent des initiales, pas des portraits.
 */

:root {
  /* Marque, relevée au pixel dans le logo */
  --navy: #0e2c47;
  --navy-profond: #082032;
  --navy-clair: #1d4a70;
  --terracotta: #e29a79;
  --terracotta-fonce: #c87a54;
  --terracotta-pale: #fbf2ed;
  --terracotta-bord: #f1d9cb;

  /* Neutres chauds : un gris bleuté froid jure avec le terracotta */
  --creme: #faf8f5;
  --creme-fonce: #f4f0ea;
  --blanc: #ffffff;
  --bord: #e8e3db;
  --bord-fort: #d6cfc4;
  --texte: #1a2b3b;
  --texte-doux: #5e7084;
  --texte-tres-doux: #8d9aa8;
  --navy-texte-doux: #9fb3c4;

  --rayon: 10px;
  --rayon-large: 16px;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --transition: .18s ease;
  --mesure: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; color: var(--navy); }
a { color: var(--terracotta-fonce); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--terracotta-fonce); outline-offset: 3px; border-radius: 3px; }

.contenant { max-width: var(--mesure); margin: 0 auto; padding: 0 28px; }

/* --- En-tête ---------------------------------------------------------------
   Fond clair et logo d'origine, plutôt qu'une barre sombre : la marque a un
   logo bleu nuit sur fond clair, l'inverser demanderait la version blanche et
   ferait perdre le contraste de la vague terracotta. */

.entete { background: var(--blanc); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 50; }
.entete__interieur {
  max-width: var(--mesure); margin: 0 auto; padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.marque { display: inline-flex; align-items: center; }
.marque img { height: 40px; width: auto; }
/* `flex-wrap` et non une largeur fixe : l'en-tête porte deux liens, le
 * sélecteur de langue et un bouton. Sans repli, la rangée dépasse la
 * fenêtre sous 380 px et toute la page défile latéralement. */
.entete__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.entete__lien {
  color: var(--navy); text-decoration: none; font-size: .94rem; font-weight: 500;
  padding: 9px 4px; border-bottom: 2px solid transparent; transition: var(--transition);
}
.entete__lien:hover { border-bottom-color: var(--terracotta); }

/* --- Boutons --------------------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 26px; border-radius: 6px; border: 1px solid transparent;
  font: inherit; font-size: .94rem; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: var(--transition); white-space: nowrap; line-height: 1.2;
}
.bouton--primaire { background: var(--navy); color: var(--blanc); }
.bouton--primaire:hover { background: var(--navy-clair); }
.bouton--terracotta { background: var(--terracotta); color: var(--navy); }
.bouton--terracotta:hover { background: var(--terracotta-fonce); color: var(--blanc); }
.bouton--contour { background: transparent; border-color: var(--bord-fort); color: var(--navy); }
.bouton--contour:hover { border-color: var(--navy); background: var(--creme); }
.bouton--texte { background: none; border: 0; color: var(--terracotta-fonce); padding: 0; font-weight: 600; }
.bouton--texte:hover { text-decoration: underline; }
.bouton--large { padding: 15px 34px; font-size: 1rem; }
.bouton--bloc { width: 100%; }

/* --- Hero ------------------------------------------------------------------
   Deux colonnes : la promesse à gauche, une photographie réelle à droite.
   Pas de dégradé ni de halo — une page de cabinet de conseil n'en a pas. */

.hero { background: var(--creme); border-bottom: 1px solid var(--bord); padding: 76px 0; }
.hero__grille {
  max-width: var(--mesure); margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
}
.hero__surtitre {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracotta-fonce); margin-bottom: 18px;
}
.hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.14; margin-bottom: 20px; }
.hero__accroche { font-size: 1.1rem; color: var(--texte-doux); max-width: 46ch; margin-bottom: 30px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__visuel { position: relative; }
.hero__visuel img {
  width: 100%; border-radius: var(--rayon-large); object-fit: cover; aspect-ratio: 16 / 10;
  border: 1px solid var(--bord);
  /* Au-dessus du filet décoratif : sans empilement explicite, `z-index: -1` sur
     le filet le ferait passer derrière le fond de la section, donc invisible. */
  position: relative; z-index: 1;
}
/* Filet terracotta décalé : un rappel discret de la vague du logo. */
.hero__visuel::after {
  content: ''; position: absolute; inset: 20px -20px -20px 20px;
  border: 1px solid var(--terracotta); border-radius: var(--rayon-large); z-index: 0;
}

/* --- Bandeau de chiffres --------------------------------------------------- */

.chiffres { border-bottom: 1px solid var(--bord); }
.chiffres__grille {
  max-width: var(--mesure); margin: 0 auto; padding: 36px 28px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.chiffre { text-align: center; }
.chiffre__valeur { font-family: var(--serif); font-size: 2.3rem; line-height: 1.1; color: var(--navy); }
.chiffre__valeur--accent { color: var(--terracotta-fonce); }
.chiffre__libelle {
  font-size: .78rem; color: var(--texte-doux); margin-top: 6px;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}

/* --- Sections -------------------------------------------------------------- */

.section { padding: 84px 0; }
.section--creme { background: var(--creme); border-block: 1px solid var(--bord); }
.section__entete { max-width: 660px; margin: 0 auto 52px; text-align: center; }
.section__surtitre {
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracotta-fonce); margin-bottom: 12px;
}
.section__titre { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; }
.section__chapeau { color: var(--texte-doux); margin-top: 14px; font-size: 1.02rem; }

.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

/* --- Blocs d'argument ------------------------------------------------------ */

.argument { }
.argument__icone {
  width: 42px; height: 42px; margin-bottom: 18px; color: var(--terracotta-fonce);
}
.argument__icone svg { width: 100%; height: 100%; stroke-width: 1.4; }
.argument h3 { font-size: 1.18rem; margin-bottom: 10px; }
.argument p { color: var(--texte-doux); font-size: .97rem; }

/* --- Parcours de certification --------------------------------------------- */

.parcours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.palier { padding: 0 30px; position: relative; }
.palier:not(:last-child) { border-right: 1px solid var(--bord); }
.palier__rang {
  font-family: var(--serif); font-size: 2.6rem; line-height: 1;
  color: var(--terracotta-bord); margin-bottom: 14px;
}
.palier--final .palier__rang { color: var(--terracotta); }
.palier h3 { font-size: 1.14rem; margin-bottom: 8px; }
.palier p { color: var(--texte-doux); font-size: .95rem; }

/* --- Références clientes --------------------------------------------------- */

.references { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 44px; }
.reference {
  font-family: var(--serif); font-size: 1.22rem; color: var(--texte-tres-doux);
  letter-spacing: .02em; transition: var(--transition);
}
.reference:hover { color: var(--navy); }

/* --- Cartes de profil ------------------------------------------------------ */

.profil {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 28px 24px; transition: var(--transition);
}
.profil:hover { border-color: var(--terracotta); }
.profil__tete { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.profil__initiales {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.15rem;
  background: var(--terracotta-pale); color: var(--terracotta-fonce);
  border: 1px solid var(--terracotta-bord); letter-spacing: .04em;
}
.profil__nom { font-family: var(--serif); font-size: 1.1rem; color: var(--navy); }
.profil__statut {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--terracotta-fonce); margin-top: 3px;
}
.profil__metier { font-size: .95rem; color: var(--texte); margin-bottom: 6px; }
.profil__meta { font-size: .88rem; color: var(--texte-doux); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.etiquette {
  border: 1px solid var(--bord); border-radius: 4px; padding: 3px 10px;
  font-size: .78rem; color: var(--texte-doux);
}
.etiquette--accent { background: var(--terracotta-pale); border-color: var(--terracotta-bord); color: var(--terracotta-fonce); }

/* --- Page de recherche ----------------------------------------------------- */

.recherche { flex-grow: 1; background: var(--creme); padding: 64px 0; }
.recherche__boite {
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon-large);
  padding: 48px 44px; max-width: 760px; margin: 0 auto;
}
.recherche h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 10px; }
.recherche__chapeau { color: var(--texte-doux); margin-bottom: 30px; }

.demarche { list-style: none; counter-reset: pas; margin-bottom: 30px; }
.demarche li {
  counter-increment: pas; position: relative; padding-left: 34px; margin-bottom: 12px;
  font-size: .96rem; color: var(--texte-doux);
}
.demarche li::before {
  content: counter(pas) "."; position: absolute; left: 0; top: 0;
  font-family: var(--serif); color: var(--terracotta-fonce); font-size: 1rem;
}

.zone-saisie {
  border: 1px solid var(--bord-fort); border-radius: var(--rayon); padding: 18px;
  transition: var(--transition); background: var(--blanc);
}
.zone-saisie:focus-within { border-color: var(--terracotta); }
.zone-saisie textarea {
  width: 100%; border: 0; outline: 0; resize: vertical; min-height: 130px;
  font: inherit; font-size: .98rem; line-height: 1.65; color: var(--texte); background: transparent;
}
.suggestions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .88rem; color: var(--texte-doux); margin: 20px 0 30px;
}

/* --- Résultats ------------------------------------------------------------- */

.resultats { max-width: var(--mesure); margin: 52px auto 0; padding: 0 28px; }
.criteres { border-left: 2px solid var(--terracotta); padding: 4px 0 4px 20px; margin-bottom: 32px; }
.criteres__titre {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--texte-doux); margin-bottom: 10px;
}
.resultats__compte { font-size: 1.35rem; margin-bottom: 24px; }

/* --- Messages -------------------------------------------------------------- */

.message { padding: 13px 18px; border-radius: 6px; font-size: .93rem; margin-bottom: 20px; }
.message--erreur { background: #fdf0ee; color: #a8391f; border: 1px solid #f3d2ca; }
.message--info { background: var(--terracotta-pale); color: var(--terracotta-fonce); border: 1px solid var(--terracotta-bord); }
.message--vide {
  background: var(--creme); color: var(--texte-doux); border: 1px solid var(--bord);
  text-align: center; padding: 44px 28px; border-radius: var(--rayon);
}

/* --- Modale ---------------------------------------------------------------- */

.modale { position: fixed; inset: 0; background: rgba(8, 32, 50, .55); display: none;
  align-items: center; justify-content: center; padding: 20px; z-index: 100; }
.modale.est-ouverte { display: flex; }
.modale__boite {
  background: var(--blanc); border-radius: var(--rayon-large); padding: 36px;
  width: 100%; max-width: 420px; box-shadow: 0 24px 60px rgba(8, 32, 50, .22);
}
.modale__logo { height: 32px; width: auto; margin-bottom: 22px; }
.modale__titre { font-size: 1.32rem; margin-bottom: 5px; }
.modale__chapeau { font-size: .92rem; color: var(--texte-doux); margin-bottom: 24px; }
.onglets { display: flex; gap: 24px; border-bottom: 1px solid var(--bord); margin-bottom: 24px; }
.onglet {
  padding: 0 0 11px; border: 0; background: none; font: inherit; font-size: .92rem;
  font-weight: 600; color: var(--texte-doux); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--transition);
}
.onglet[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--terracotta); }

.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: .82rem; font-weight: 600; color: var(--texte); margin-bottom: 6px; }
.champ input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--bord-fort); border-radius: 6px;
  font: inherit; font-size: .93rem; transition: var(--transition);
}
.champ input:focus { outline: 0; border-color: var(--terracotta); }

/* --- Pied de page ---------------------------------------------------------- */

footer { background: var(--navy-profond); color: var(--navy-texte-doux); padding: 60px 0 26px; margin-top: auto; }
.pied__grille {
  max-width: var(--mesure); margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.pied__logo { height: 36px; width: auto; margin-bottom: 14px; }
.pied__baseline { font-size: .9rem; line-height: 1.65; max-width: 34ch; }
.pied__colonne h4 {
  color: var(--blanc); font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 15px;
}
.pied__colonne ul { list-style: none; }
/* Pas de `margin` seule : ces liens sont une liste de navigation, pas de la
 * prose, et l'exemption « lien en ligne » du critère WCAG 2.5.8 ne s'y
 * applique donc pas. La hauteur cliquable doit atteindre 24 px. */
.pied__colonne li { margin-bottom: 4px; }
.pied__colonne a, .pied__colonne button {
  /* `inline-block` et une hauteur de remplissage : ces liens forment une liste
   * de navigation, pas de la prose, et l'exemption « lien en ligne » du critère
   * WCAG 2.5.8 ne s'y applique pas. La cible doit atteindre 24 px de haut. */
  display: inline-block; padding: 5px 0;
  color: var(--navy-texte-doux); text-decoration: none; font-size: .9rem;
  background: none; border: 0; font: inherit; cursor: pointer; transition: var(--transition);
}
.pied__colonne a:hover, .pied__colonne button:hover { color: var(--terracotta); }
.pied__bas {
  max-width: var(--mesure); margin: 24px auto 0; padding: 0 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-size: .82rem; color: #65798b; flex-wrap: wrap;
}

/* --- Largeurs réduites ----------------------------------------------------- */

@media (max-width: 980px) {
  .hero__grille { grid-template-columns: 1fr; gap: 44px; }
  .hero__visuel::after { display: none; }
  .grille-3, .parcours { grid-template-columns: 1fr; gap: 40px; }
  .palier { padding: 0; }
  .palier:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--bord); padding-bottom: 32px; }
  .chiffres__grille { grid-template-columns: 1fr; gap: 26px; }
  .pied__grille { grid-template-columns: 1fr; gap: 32px; }
  .pied__bas { flex-direction: column; text-align: center; }
}
@media (max-width: 620px) {
  .contenant, .entete__interieur, .hero__grille, .chiffres__grille, .pied__grille, .pied__bas, .resultats { padding-inline: 18px; }
  .hero { padding: 48px 0; }
  .section { padding: 56px 0; }
  .recherche__boite { padding: 30px 22px; }
  .entete__actions { width: 100%; justify-content: flex-start; row-gap: 12px; }
  .marque img { height: 34px; }
}

/* --- Connexion par fournisseur tiers ---------------------------------------
   Affichés uniquement quand la fonctionnalité est active : un bouton qui mène
   à une erreur de configuration est pire qu'un bouton absent. */

.social { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.social form { margin: 0; }
.social__bouton {
  width: 100%; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px; border: 1px solid var(--bord-fort); border-radius: 6px;
  background: var(--blanc); color: var(--texte); text-decoration: none;
  font-size: .92rem; font-weight: 600; transition: var(--transition);
}
.social__bouton:hover { background: var(--creme); border-color: var(--navy); }

.separateur {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-size: .8rem; color: var(--texte-tres-doux);
}
.separateur::before, .separateur::after {
  content: ''; flex: 1; height: 1px; background: var(--bord);
}

/* État connecté dans l'en-tête. */
.entete__compte {
  font-size: .92rem; font-weight: 600; color: var(--navy);
  padding: 9px 12px; background: var(--creme); border-radius: 6px;
}

/* Sélecteur de langue. */
.langues { display: inline-flex; align-items: center; gap: 6px; }
.langues select {
  border: 1px solid var(--bord); border-radius: 6px; padding: 8px 10px;
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--navy);
  background: var(--blanc); cursor: pointer;
}
.langues select:hover { border-color: var(--bord-fort); }
.langues__valider {
  border: 1px solid var(--bord); border-radius: 6px; padding: 7px 10px;
  font: inherit; font-size: .82rem; background: var(--creme); cursor: pointer;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Filtres de recherche -------------------------------------------------- */

.filtres { margin: 18px 0 22px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--blanc); }
.filtres__titre {
  cursor: pointer; padding: 13px 18px; font-size: .88rem; font-weight: 600;
  color: var(--navy); list-style: none;
}
.filtres__titre::marker, .filtres__titre::-webkit-details-marker { display: none; }
.filtres__titre::after { content: " +"; color: var(--texte-tres-doux); }
.filtres[open] .filtres__titre::after { content: " −"; }
.filtres__groupe { border: 0; border-top: 1px solid var(--bord); margin: 0; padding: 14px 18px; }
.filtres__groupe legend {
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texte-tres-doux); padding: 0;
}
.filtres__choix { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.filtres__ligne {
  display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px;
  border-top: 1px solid var(--bord); padding: 14px 18px;
}

.choix { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; }
/* 24 px au moins : c'est le minimum du critère WCAG 2.5.8 (niveau AA), et
 * une case de 15 px se rate une fois sur trois au pouce. La case garde sa
 * taille visuelle native, c'est la zone cliquable qui s'élargit. */
.choix input { accent-color: var(--navy); width: 24px; height: 24px; }
.choix--retenir { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bord); width: 100%; }
.choix--consentement { align-items: start; margin-bottom: 18px; line-height: 1.5; }
.choix--consentement input { margin-top: 3px; flex-shrink: 0; }

/* --- Champs de formulaire -------------------------------------------------- */

.champ select, .champ textarea {
  width: 100%; font: inherit; font-size: .94rem; color: var(--texte);
  padding: 10px 12px; border: 1px solid var(--bord-fort); border-radius: 6px;
  background: var(--blanc);
}
.champ select:focus, .champ textarea:focus { outline: 0; border-color: var(--terracotta); }
.champ textarea { resize: vertical; min-height: 110px; }
.champ--compact { margin-bottom: 0; min-width: 210px; }
.champ--en-erreur input, .champ--en-erreur select, .champ--en-erreur textarea { border-color: #d8674a; }
.champ__erreur { margin: 6px 0 0; font-size: .82rem; color: #a8391f; }

.formulaire { margin-top: 24px; }
.formulaire__ligne { display: flex; flex-wrap: wrap; gap: 0 18px; }
.formulaire__ligne > .champ { flex: 1 1 220px; }

/* Piège à robots : invisible à l'écran, hors du flux, et retiré de l'ordre de
   tabulation par le script. Un `display: none` serait reconnu par les robots. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Résultats et sélection ------------------------------------------------ */

.criteres__vide { margin: 0; color: var(--texte-doux); font-size: .94rem; }
.profil__raisons {
  margin: 14px 0 0; font-size: .82rem; color: var(--terracotta-fonce);
  background: var(--terracotta-pale); border: 1px solid var(--terracotta-bord);
  border-radius: 6px; padding: 8px 10px;
}
.selection__barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; margin-top: 26px; padding: 18px 22px;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.selection__compte { margin: 0; font-size: .9rem; color: var(--texte-doux); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.pagination__lien {
  padding: 9px 16px; border: 1px solid var(--bord-fort); border-radius: 6px;
  background: var(--blanc); color: var(--navy); text-decoration: none;
  font-size: .88rem; font-weight: 600; transition: var(--transition);
}
.pagination__lien:hover { border-color: var(--navy); background: var(--creme); }
.pagination__etat { font-size: .88rem; color: var(--texte-doux); }

/* --- Accusé de dépôt ------------------------------------------------------- */

.recherche__boite--centree { text-align: center; }
.reference-demande {
  font-family: var(--serif); font-size: 2rem; color: var(--terracotta-fonce);
  letter-spacing: .04em; margin: 18px 0 14px;
}

/* --- Panneau « Rejoindre le vivier » de la modale -------------------------- */

.modale__texte { font-size: .93rem; color: var(--texte-doux); margin-bottom: 20px; }
.modale__texte--fin { margin: 18px 0 0; font-size: .86rem; }

/* --- Espace indépendant et formulaires longs ------------------------------ */

.sous-titre { font-size: 1.05rem; margin: 26px 0 12px; }
.recherche__boite--centree { text-align: center; }

.cases { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 16px; }
.cases legend {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texte-tres-doux); padding: 0 6px;
}
.cases ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 0; padding: 0; }
.cases li label { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; cursor: pointer; }
.cases input { accent-color: var(--navy); width: 24px; height: 24px; }

.etapes { list-style: none; padding: 0; margin: 0; }
.etape {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--bord);
}
.etape__nom { font-weight: 600; color: var(--navy); font-size: .94rem; }
.etape__etat { font-size: .86rem; color: var(--texte-doux); }
.etape__etat--attente { color: var(--terracotta-fonce); font-weight: 600; }

.proprietes-publiques {
  display: grid; gap: 16px 26px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.propriete__cle {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte-tres-doux); font-weight: 700; margin-bottom: 5px;
}
.propriete__valeur { font-size: .93rem; }
.vide { color: var(--texte-tres-doux); font-style: italic; font-size: .88rem; }

/* Messages du site : centrés sur la largeur de lecture, comme le contenu. */
.messages-site { max-width: 760px; margin: 22px auto 0; padding: 0 16px; }
.message--success { background: #effaf3; color: #1b6b43; border: 1px solid #c6ebd5; }

/* --- Liens légaux du pied de page ------------------------------------------ */

.pied__legal {
  max-width: var(--mesure); margin: 0 auto; padding: 24px 28px 0;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.pied__legal a {
  /* Même raison que les autres liens du pied : liste de navigation, donc
   * 24 px de cible au minimum (WCAG 2.5.8). */
  display: inline-block; padding: 5px 0;
  color: var(--navy-texte-doux); text-decoration: none; font-size: .86rem;
  transition: var(--transition);
}
.pied__legal a:hover { color: var(--terracotta); }

/* --- Pages légales --------------------------------------------------------- */

.texte-legal { max-width: 74ch; }
.texte-legal__version {
  font-size: .82rem; color: var(--texte-tres-doux); margin-bottom: 26px;
  padding-bottom: 16px; border-bottom: 1px solid var(--bord);
}
.texte-legal__corps h2 {
  font-size: 1.05rem; margin: 30px 0 12px; color: var(--navy);
}
.texte-legal__corps h2:first-child { margin-top: 0; }
.texte-legal__corps p { margin-bottom: 13px; line-height: 1.65; }
.texte-legal__corps ul { margin: 0 0 16px 20px; }
.texte-legal__corps li { margin-bottom: 7px; line-height: 1.6; }
.texte-legal__autres {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--bord);
  font-size: .88rem;
}
.texte-legal__autres a { color: var(--navy); font-weight: 600; }

@media (max-width: 620px) {
  .pied__legal { padding-inline: 18px; }
}

/* --- Page de connexion ----------------------------------------------------- */

/* Deux colonnes de largeur égale, le visuel légèrement plus étroit : la colonne
   qui porte le formulaire doit rester la plus lisible des deux. */
.connexion {
  /* `width` plutôt qu'un `padding` sur le conteneur : le cadre doit s'arrêter
     avant le bord de l'écran, pas déborder sous une marge intérieure. */
  width: min(940px, 100% - 40px); margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1fr;
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--rayon-large); overflow: hidden;
}
.connexion__visuel { position: relative; background: var(--navy); }
.connexion__visuel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Assombrie, car le texte posé par-dessus doit rester lisible quelle que
     soit la photo. */
  opacity: .42;
}
.connexion__propos {
  position: absolute; inset: auto 0 0 0; padding: 32px 30px; color: var(--blanc);
  /* Voile dégradé : la photo peut être claire par endroits, et le surtitre
     terracotta posé dessus tomberait alors sous le seuil de contraste. */
  background: linear-gradient(to top, rgba(8, 32, 50, .95), rgba(8, 32, 50, 0));
}
.connexion__surtitre {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 10px;
}
.connexion__phrase {
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.45; color: var(--blanc);
}
.connexion__panneau { padding: 48px 44px; }
.connexion__panneau h1 { font-size: 1.65rem; margin-bottom: 10px; }
.connexion__valider { margin-top: 8px; }
.connexion__liens {
  margin-top: 22px; font-size: .88rem; color: var(--texte-doux); text-align: center;
  line-height: 1.9;
}

@media (max-width: 820px) {
  /* Le visuel passe en bandeau au-dessus du formulaire : conservé plutôt que
     masqué, c'est lui qui dit sur quel site on se trouve. */
  .connexion { grid-template-columns: 1fr; width: min(480px, 100% - 40px); }
  .connexion__visuel { height: 200px; }
  .connexion__propos { padding: 20px 24px; }
  .connexion__phrase { font-size: 1rem; }
  .connexion__panneau { padding: 36px 26px; }
}

/* Deux champs courts côte à côte (date et durée) : empilés, ils allongent le
   formulaire sans rien apporter. */
.paire-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .paire-champs { grid-template-columns: 1fr; } }

/* --- Parcours client : short-list, bon de commande, mission ---------------- */

.recherche__boite--large { max-width: 900px; }
.recherche__boite + .recherche__boite { margin-top: 24px; }
.recherche__boite--accent { border-color: var(--terracotta-bord); background: var(--terracotta-pale); }

/* Fil d'étapes : un repère, pas une navigation — les étapes ne sont pas des liens. */
.etapes-client {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 0 0 28px; padding: 0 0 18px; border-bottom: 1px solid var(--bord);
}
.etapes-client__etape { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; color: var(--texte-tres-doux); }
.etapes-client__num {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bord-fort); font-size: .78rem; background: var(--blanc);
}
.etapes-client__etape--active { color: var(--terracotta-fonce); }
.etapes-client__etape--active .etapes-client__num { background: var(--terracotta-fonce); border-color: var(--terracotta-fonce); color: var(--blanc); }
.etapes-client__etape--faite { color: var(--navy); }
.etapes-client__etape--faite .etapes-client__num { background: var(--navy); border-color: var(--navy); color: var(--blanc); }

.propositions { display: grid; gap: 16px; margin: 24px 0; }
.proposition { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 22px 24px; background: var(--blanc); }
.proposition--retenue { border-color: var(--terracotta); background: var(--terracotta-pale); }
.proposition__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.proposition__ref { font-size: 1.12rem; margin: 0 0 4px; }
.proposition__argumentaire { color: var(--texte-doux); font-size: .94rem; line-height: 1.6; margin: 14px 0; }
.proposition__pied {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--bord);
}
.proposition__prix { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); }

.decliner { margin-top: 8px; }
.decliner summary { cursor: pointer; color: var(--texte-doux); font-weight: 600; font-size: .92rem; padding: 8px 0; }
.decliner form { margin-top: 12px; }

.titre-et-statut { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.titre-et-statut h1 { margin-bottom: 0; }

.synthese {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--bord); border-radius: var(--rayon); margin: 22px 0 28px; overflow: hidden;
}
.synthese > div { padding: 14px 18px; border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.synthese > div:nth-child(3n) { border-right: 0; }
.synthese--deux { grid-template-columns: repeat(2, 1fr); }
.synthese--deux > div { border-bottom: 0; }
.synthese--deux > div:nth-child(3n) { border-right: 1px solid var(--bord); }
.synthese--deux > div:nth-child(2n) { border-right: 0; }
.synthese dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-tres-doux); font-weight: 700; margin-bottom: 4px; }
.synthese dd { margin: 0; font-weight: 600; color: var(--navy); }

.conditions { margin-bottom: 30px; }
.contrat {
  border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--creme);
  padding: 22px 24px; max-height: 420px; overflow-y: auto; margin: 14px 0 22px;
}
.contrat__titre { font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.signature .choix--consentement { margin: 6px 0 10px; }
.signature .bouton { margin-top: 10px; }
.empreinte { display: block; margin-top: 6px; font-size: .78rem; word-break: break-all; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }

.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }
.tuile { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px; text-align: center; }
.tuile__libelle { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-tres-doux); font-weight: 700; }
.tuile__valeur { display: block; margin-top: 6px; font-family: var(--serif); font-size: 1.25rem; color: var(--navy); }

@media (max-width: 620px) {
  .synthese, .synthese--deux, .tuiles { grid-template-columns: 1fr; }
  .synthese > div { border-right: 0; }
  .proposition { padding: 18px; }
  .proposition__pied .bouton, .signature .bouton { width: 100%; }
}

/* --- Candidature : préremplissage LinkedIn --------------------------------- */

.linkedin {
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px 18px;
  margin-bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.linkedin .champ__aide { margin: 0; flex: 1 1 240px; }
.linkedin--repris { background: var(--terracotta-pale); border-color: var(--terracotta-bord); justify-content: space-between; }
.linkedin--repris p { margin: 0; font-size: .92rem; color: var(--navy); flex: 1 1 280px; }
/* Bleu de la marque LinkedIn, tel qu'imposé par sa charte pour ce bouton. */
.bouton--linkedin { background: #0a66c2; color: #fff; border-color: #0a66c2; gap: 8px; }
.bouton--linkedin:hover { background: #004182; border-color: #004182; color: #fff; }