@charset "UTF-8";

/* ==========================================================================
   RestoConnect — la vitrine de la plateforme
   --------------------------------------------------------------------------
   Feuille distincte de celle des boutiques : la plateforme a sa propre
   identité, les restaurants ont la leur. Les mélanger obligerait à surcharger
   l'une pour obtenir l'autre.

   Posée sur Bootstrap, chargé juste avant : la remise à zéro, la grille et les
   composants interactifs viennent de lui, l'habillage vient d'ici.
   ========================================================================== */

:root {
  --nuit: #080d1a;
  --nuit-2: #111a2e;
  --nuit-3: #1c2942;

  --or: #f0b429;
  --or-clair: #fde9bd;

  --marque: #2563eb;
  --marque-fonce: #1d4ed8;
  --marque-clair: #eef4ff;

  --encre: #0d1526;
  --encre-2: #3c4759;
  --encre-3: #64748b;
  --encre-4: #97a3b6;

  --fond: #ffffff;
  --fond-2: #f7f9fc;
  --bordure: #e6eaf1;
  --bordure-forte: #d2d9e6;

  --vert: #12996b;
  --vert-clair: #e7f8ef;
  --rouge: #d92d20;
  --ambre: #d9820a;
  --ambre-clair: #fdf3e4;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --r-pilule: 999px;

  --ombre-s: 0 1px 3px rgba(13, 21, 38, .06);
  --ombre-m: 0 8px 24px rgba(13, 21, 38, .08);
  --ombre-l: 0 24px 56px rgba(13, 21, 38, .14);
  --ombre-marque: 0 14px 34px rgba(37, 99, 235, .3);

  --largeur: 1200px;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--encre);
  --bs-border-color: var(--bordure);
  --bs-border-radius: var(--r-s);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--fond);
  color: var(--encre);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` autant que `max-width` : c'est l'oubli qui déforme. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  line-height: 1.14; letter-spacing: -.032em; font-weight: 800;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.ligne { display: flex; align-items: center; }
.pile { display: flex; flex-direction: column; }
.centre { text-align: center; }
.enrobe { flex-wrap: wrap; }

.bi { display: inline-block; vertical-align: -.08em; }

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent; border-radius: var(--r-pilule);
  font-size: 15px; font-weight: 650; white-space: nowrap; line-height: 1.4;
  transition: transform .12s, background .16s, border-color .16s, box-shadow .16s, color .16s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primaire { background: var(--marque); color: #fff; box-shadow: var(--ombre-marque); }
.btn-primaire:hover { background: var(--marque-fonce); color: #fff; }

.btn-nuit, .btn-sombre { background: var(--nuit); color: #fff; }
.btn-nuit:hover, .btn-sombre:hover { background: var(--nuit-2); color: #fff; }

.btn-clair { background: #fff; color: var(--encre); border-color: var(--bordure-forte); box-shadow: var(--ombre-s); }
.btn-clair:hover { border-color: var(--encre-4); color: var(--encre); background: #fff; }

.btn-verre {
  background: rgba(255, 255, 255, .12); color: #fff;
  border-color: rgba(255, 255, 255, .26); backdrop-filter: blur(6px);
}
.btn-verre:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.btn-fantome { background: transparent; color: var(--encre-2); }
.btn-fantome:hover { background: var(--fond-2); color: var(--encre); }

.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 9px 17px; font-size: 14px; }
.btn-bloc { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* --------------------------------------------------------------- puces */

.puce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pilule);
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
}
.puce-bleue { background: var(--marque-clair); color: var(--marque-fonce); }
.puce-verte { background: var(--vert-clair); color: #0b7a53; }
.puce-ambre { background: var(--ambre-clair); color: #b45309; }
.puce-grise { background: #f1f4f9; color: var(--encre-3); }
.puce-rouge { background: #fdeceb; color: #b42318; }
.puce-or { background: rgba(240, 180, 41, .16); color: #a16207; }
.puce-point::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- entête */

.entete {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bordure);
}
.entete-interieur { display: flex; align-items: center; gap: 30px; height: 74px; }

.marque {
  display: flex; align-items: center; gap: 11px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800; font-size: 18px; letter-spacing: -.04em;
}
.marque-jeton {
  width: 38px; height: 38px; flex: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--marque), #6d3fe8);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .32);
}

.nav-site { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.nav-site a {
  padding: 9px 15px; border-radius: var(--r-pilule);
  font-size: 15px; font-weight: 500; color: var(--encre-2);
  transition: background .14s, color .14s;
}
.nav-site a:hover { background: var(--fond-2); color: var(--encre); }
.nav-site a.actif { color: var(--marque); font-weight: 650; }

.entete-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.burger {
  display: none; width: 42px; height: 42px; border-radius: var(--r-s);
  border: 1px solid var(--bordure); background: #fff; place-items: center; color: var(--encre-2);
}

/* ----------------------------------------------------------------- héros */

.heros {
  position: relative; overflow: hidden;
  background: var(--nuit); color: #fff;
  padding: 96px 0 120px;
}

/* Halos colorés : deux dégradés radiaux, aucun fichier image. */
.heros::before,
.heros::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
}
.heros::before {
  width: 660px; height: 660px; top: -290px; right: -180px;
  background: radial-gradient(circle, #2563eb, transparent 70%);
}
.heros::after {
  width: 540px; height: 540px; bottom: -310px; left: -160px;
  background: radial-gradient(circle, #6d3fe8, transparent 70%);
}

/* Une trame fine par-dessus les halos : elle donne au fond une matière, là où
   un dégradé seul paraît plat. */
.heros-voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 100%);
}

.heros-contenu { position: relative; z-index: 2; max-width: 740px; }

.heros-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; margin-bottom: 26px;
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .17);
  font-size: 13px; font-weight: 600; color: #dbe4f5;
  backdrop-filter: blur(8px);
}

.heros h1 { font-size: 60px; letter-spacing: -.045em; }
.heros h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #93b4fd, #c4b5fd 58%, var(--or));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.heros-texte { margin-top: 22px; font-size: 18.5px; color: #b0bdd4; max-width: 590px; }
.heros-actions { display: flex; gap: 13px; margin-top: 34px; flex-wrap: wrap; }
.heros-note { margin-top: 20px; font-size: 14px; color: #8492ae; }

/* Bandeau de chiffres, à cheval sur le héros */
.chiffres {
  position: relative; z-index: 3; margin-top: -60px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--bordure); border: 1px solid var(--bordure);
  border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombre-l);
}
.chiffre { background: #fff; padding: 28px 22px; text-align: center; }
.chiffre strong {
  display: block; font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px; letter-spacing: -.042em; font-variant-numeric: tabular-nums;
}
.chiffre span { font-size: 13.5px; color: var(--encre-3); }

/* --------------------------------------------------------------- sections */

.section { padding: 92px 0; }
.section-serree { padding: 56px 0; }
.section-fond { background: var(--fond-2); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.section-tete { max-width: 680px; margin: 0 auto 54px; text-align: center; }
.section-tete .puce { margin-bottom: 16px; }
.section-tete h2 { font-size: 41px; letter-spacing: -.042em; }
.section-tete p { margin-top: 16px; font-size: 17px; color: var(--encre-3); }

.section-tete-gauche { text-align: left; margin-left: 0; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* ---------------------------------------------------------- fonctionnalités */

.grille-fonctions { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 20px; }

.fonction, .atout {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-l);
  padding: 28px; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.fonction:hover, .atout:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); border-color: var(--bordure-forte); }
.fonction-icone, .atout-icone {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--marque-clair); color: var(--marque);
}
.fonction-icone.vert, .atout-icone.vert { background: var(--vert-clair); color: var(--vert); }
.fonction-icone.ambre, .atout-icone.ambre { background: var(--ambre-clair); color: var(--ambre); }
.fonction-icone.violet, .atout-icone.violet { background: #f2eeff; color: #6d3fe8; }
.fonction-icone.rose, .atout-icone.rose { background: #ffeef4; color: #db2777; }
.fonction-icone.nuit, .atout-icone.nuit { background: #eef1f7; color: var(--nuit); }
.fonction h3, .atout h3 { font-size: 18px; }
.fonction p, .atout p { margin-top: 9px; font-size: 15px; color: var(--encre-3); }

.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

/* --------------------------------------------------------------- étapes */

.etapes, .parcours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: etape; }
.etape { position: relative; padding-top: 20px; }
.etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; top: -14px; left: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--nuit); color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  display: grid; place-items: center; font-size: 17px; font-weight: 800;
  box-shadow: 0 8px 20px rgba(13, 21, 38, .18);
}
.etape h3 { font-size: 19px; margin-top: 36px; }
.etape p { margin-top: 9px; font-size: 15px; color: var(--encre-3); }

.parcours-barre, .parcours-rail { height: 2px; background: var(--bordure); margin: 0 0 30px; }
.parcours-point { width: 12px; height: 12px; border-radius: 50%; background: var(--marque); }
.parcours-texte { font-size: 15px; color: var(--encre-3); }

/* ---------------------------------------------------------------- offres */

.grille-offres, .choix-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); gap: 20px; align-items: start; }

.offre {
  position: relative; background: #fff;
  border: 1px solid var(--bordure); border-radius: var(--r-l);
  padding: 32px 26px; display: flex; flex-direction: column;
  transition: box-shadow .18s, border-color .18s;
}
.offre:hover { box-shadow: var(--ombre-m); }
.offre-phare {
  border: 2px solid var(--marque); box-shadow: var(--ombre-l);
  transform: scale(1.03); z-index: 2;
}
.offre-ruban, .ruban, .ruban-promo {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 5px 16px; border-radius: var(--r-pilule);
  background: var(--marque); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; box-shadow: var(--ombre-marque);
}
.offre h3 { font-size: 20px; }
.offre-accroche { margin-top: 7px; font-size: 14.5px; color: var(--encre-3); min-height: 44px; }
.offre-prix {
  margin: 22px 0 6px; font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 39px; letter-spacing: -.048em; font-weight: 800;
}
.offre-prix small { font-size: 15px; font-weight: 600; color: var(--encre-4); letter-spacing: 0; }
.offre-annuel { font-size: 13.5px; color: var(--encre-4); }
.offre ul { margin: 22px 0; display: grid; gap: 11px; flex: 1; }
.offre li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--encre-2); }
.offre li .bi { flex: none; margin-top: 3px; color: var(--vert); }

/* ------------------------------------------------------------- annuaire */

.annuaire-filtres {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-l);
  padding: 18px; box-shadow: var(--ombre-s);
  display: grid; grid-template-columns: 1fr 220px auto auto; gap: 12px; align-items: end;
}

.champ { margin-bottom: 18px; }
.champ label, .etiquette {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 650; color: var(--encre-2);
}
.saisie {
  width: 100%; padding: 12px 15px;
  border: 1px solid var(--bordure-forte); border-radius: var(--r-s);
  background: #fff; font: inherit; font-size: 15px; color: var(--encre);
  transition: border-color .15s, box-shadow .15s;
}
.saisie:focus { outline: none; border-color: var(--marque); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.saisie::placeholder { color: var(--encre-4); }
textarea.saisie { min-height: 110px; resize: vertical; }
select.saisie {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.aide { font-size: 13.5px; color: var(--encre-3); margin-top: 7px; }
.mini { font-size: 13px; color: var(--encre-3); }
.erreur-champ { font-size: 13px; color: var(--rouge); margin-top: 6px; }
.saisie.en-erreur { border-color: var(--rouge); }

.villes, .jetons { display: flex; gap: 9px; flex-wrap: wrap; margin: 22px 0 30px; }
.ville-jeton, .jeton-lieu {
  padding: 8px 17px; border-radius: var(--r-pilule);
  border: 1px solid var(--bordure); background: #fff;
  font-size: 14px; font-weight: 550; color: var(--encre-2);
  transition: border-color .14s, color .14s, background .14s;
}
.ville-jeton:hover, .jeton-lieu:hover { border-color: var(--marque); color: var(--marque); }
.ville-jeton.actif, .jeton-lieu.actif { background: var(--nuit); border-color: var(--nuit); color: #fff; }

.grille-restos { display: grid; grid-template-columns: repeat(auto-fill, minmax(294px, 1fr)); gap: 22px; }

.resto-carte {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-l);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.resto-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-l); border-color: var(--bordure-forte); }

.resto-banniere {
  height: 120px; position: relative;
  background: linear-gradient(135deg, var(--teinte, #2563eb), color-mix(in srgb, var(--teinte, #2563eb) 52%, #080d1a));
}
.resto-banniere img { width: 100%; height: 100%; object-fit: cover; }
.resto-logo {
  position: absolute; left: 22px; bottom: -26px;
  width: 58px; height: 58px; border-radius: 17px;
  background: #fff; border: 3px solid #fff; box-shadow: var(--ombre-m);
  display: grid; place-items: center; overflow: hidden;
  color: var(--teinte, #2563eb);
}
.resto-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.resto-distance {
  position: absolute; right: 14px; top: 14px;
  padding: 5px 11px; border-radius: var(--r-pilule);
  background: rgba(8, 13, 26, .6); color: #fff;
  font-size: 12px; font-weight: 650; backdrop-filter: blur(4px);
}

.resto-corps { padding: 38px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.resto-corps h3 { font-size: 18px; }
.resto-specialite { font-size: 14px; color: var(--encre-3); margin-top: 5px; min-height: 42px; }
.resto-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--encre-3); }
.resto-meta span { display: inline-flex; align-items: center; gap: 5px; }
.resto-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordure);
}

/* ---------------------------------------------------------- témoignages */

.grille-avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(304px, 1fr)); gap: 20px; }
.avis {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-l); padding: 30px;
}
.avis-etoiles { display: flex; gap: 3px; color: var(--or); margin-bottom: 16px; }
.avis p { font-size: 15.5px; color: var(--encre-2); line-height: 1.65; }
.avis-auteur { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.avis-initiales {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--marque-clair); color: var(--marque-fonce);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.avis-auteur strong { display: block; font-size: 14.5px; }
.avis-auteur span { font-size: 13px; color: var(--encre-4); }

/* ------------------------------------------------------------------- FAQ */

.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-m);
  padding: 20px 24px; transition: border-color .16s, box-shadow .16s;
}
.faq details[open] { border-color: var(--bordure-forte); box-shadow: var(--ombre-s); }
.faq summary {
  cursor: pointer; font-size: 16.5px; font-weight: 650; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 22px; font-weight: 400; color: var(--encre-4); line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq p { margin-top: 14px; font-size: 15.5px; color: var(--encre-3); }

/* ------------------------------------------------------------------- CTA */

.appel {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: 72px 40px; text-align: center;
  background: var(--nuit); color: #fff;
}
.appel::before {
  content: ''; position: absolute; width: 720px; height: 720px;
  top: -430px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, #2563eb, transparent 70%);
  filter: blur(80px); opacity: .55;
}
.appel > * { position: relative; z-index: 2; }
.appel h2 { font-size: 39px; max-width: 660px; margin: 0 auto; letter-spacing: -.042em; }
.appel p { margin: 18px auto 0; max-width: 570px; font-size: 17px; color: #b0bdd4; }
.appel-actions { display: flex; gap: 13px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

/* ----------------------------------------------------------- l'éditeur */
/*
   Le bloc du cabinet emprunte ses couleurs, relevées dans son logo. Il tranche
   volontairement avec le reste de la page : une signature se remarque parce
   qu'elle diffère, pas parce qu'elle crie.
*/

.editeur {
  --aaz-marine: #1f3357;
  --aaz-rouge: #b54040;

  padding: 76px 0;
  background: var(--aaz-marine);
  color: #dfe5ef;
  position: relative; overflow: hidden;
}

/* Un rappel du rouge de la marque, en biais, à peine perceptible. */
.editeur::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 62%, rgba(181, 64, 64, .3) 100%);
}
.editeur > * { position: relative; z-index: 2; }

.editeur-grille { display: grid; grid-template-columns: 220px 1fr; gap: 52px; align-items: start; }

.editeur-marque {
  background: #fff; border-radius: var(--r-l); padding: 26px;
  display: grid; place-items: center; box-shadow: 0 20px 44px rgba(0, 0, 0, .28);
}
.editeur-marque img { width: 100%; height: auto; }

.editeur-puce {
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: var(--r-pilule);
  background: var(--aaz-rouge); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

.editeur h2 {
  margin-top: 16px; font-size: 31px; color: #fff; letter-spacing: -.035em;
  line-height: 1.2;
}

.editeur-baseline {
  margin-top: 16px; font-size: 17.5px; line-height: 1.6;
  color: #c3cede; border-left: 3px solid var(--aaz-rouge); padding-left: 18px;
}

.editeur-domaines { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.editeur-domaines span {
  padding: 6px 14px; border-radius: var(--r-pilule);
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05);
  font-size: 13.5px; font-weight: 550; color: #c3cede;
}
/* Les deux métiers qui nous concernent ici ressortent : c'est l'argument. */
.editeur-domaines span.actif {
  background: var(--aaz-rouge); border-color: var(--aaz-rouge); color: #fff; font-weight: 650;
}

.editeur-atouts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 30px; }
.editeur-atouts h3 { font-size: 16px; color: #fff; }
.editeur-atouts p { margin-top: 8px; font-size: 14.5px; color: #a9b6cb; line-height: 1.6; }

.editeur-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 32px; }

.btn-editeur { background: var(--aaz-rouge); color: #fff; box-shadow: 0 12px 28px rgba(181, 64, 64, .34); }
.btn-editeur:hover { background: #a33838; color: #fff; }
.btn-editeur-clair {
  background: rgba(255, 255, 255, .09); color: #fff;
  border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(6px);
}
.btn-editeur-clair:hover { background: rgba(255, 255, 255, .17); color: #fff; }

/* La signature horizontale, dans les pieds de page et les écrans d'accès. */
.signature-editeur { display: inline-flex; align-items: center; gap: 12px; }
.signature-editeur img { height: 26px; width: auto; }
.signature-editeur span { font-size: 13px; line-height: 1.35; }

@media (max-width: 900px) {
  .editeur { padding: 56px 0; }
  .editeur-grille { grid-template-columns: 1fr; gap: 32px; justify-items: start; }
  .editeur-marque { width: 172px; padding: 20px; }
  .editeur h2 { font-size: 25px; }
  .editeur-atouts { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------------------------------------------------------- pied de page */

.pied { background: var(--nuit); color: #8fa0bb; padding: 70px 0 30px; }
.pied-grille { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.pied .marque { color: #fff; }
.pied-intro { margin-top: 16px; font-size: 14.5px; max-width: 310px; line-height: 1.65; }
.pied h4 {
  color: #fff; font-size: 13px; margin-bottom: 16px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.pied ul { display: grid; gap: 10px; }
.pied li, .pied a { font-size: 14.5px; }
.pied a:hover { color: #fff; }
.pied-editeur {
  display: flex; align-items: center; gap: 14px; margin-top: 22px;
  padding: 14px 16px; border-radius: var(--r-m);
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
  max-width: 330px; font-size: 13px; line-height: 1.45;
  transition: border-color .16s, background .16s;
}
.pied-editeur:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); }
.pied-editeur strong { color: #fff; font-weight: 700; }
.pied-editeur-logo {
  flex: none; background: #fff; border-radius: 9px; padding: 8px 10px;
  display: grid; place-items: center;
}
.pied-editeur-logo img { width: 76px; height: auto; }

.pied-social { display: flex; gap: 10px; margin-top: 20px; }
.pied-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
  display: grid; place-items: center; color: #cbd5e1;
  transition: background .14s, color .14s, border-color .14s;
}
.pied-social a:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.pied-contact { display: grid; gap: 8px; font-size: 14.5px; }
.pied-bas {
  margin-top: 54px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px;
}

/* --------------------------------------------------------------- divers */

.carte-blanche, .fiche {
  background: #fff; border: 1px solid var(--bordure);
  border-radius: var(--r-l); box-shadow: var(--ombre-s);
}
.carte-tete { padding: 22px 26px; border-bottom: 1px solid var(--bordure); }
.carte-tete h3 { font-size: 17px; }
.carte-corps { padding: 26px; }
.carte-pied { padding: 18px 26px; border-top: 1px solid var(--bordure); background: var(--fond-2); border-radius: 0 0 var(--r-l) var(--r-l); }

.alerte {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 18px; border-radius: var(--r-m);
  font-size: 14.5px; margin-bottom: 20px; border: 1px solid transparent;
}
.alerte .bi { flex: none; margin-top: 3px; font-size: 17px; }
.alerte-succes { background: var(--vert-clair); color: #0b5c40; border-color: #bfe9d5; }
.alerte-erreur { background: #fdeceb; color: #912018; border-color: #f6cbc7; }
.alerte-info { background: var(--marque-clair); color: #1e3a8a; border-color: #cfe0ff; }
.alerte-attention { background: var(--ambre-clair); color: #7a3c0a; border-color: #f8dcb2; }

.vide-etat {
  padding: 74px 24px; text-align: center; color: var(--encre-3);
  background: #fff; border: 1px dashed var(--bordure-forte); border-radius: var(--r-l);
}
.vide-etat h3 { font-size: 20px; color: var(--encre); margin-bottom: 10px; }

.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grille-champs-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
.case { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--encre-2); cursor: pointer; }
.case input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--marque); flex: none; }

.choix-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); gap: 11px; }
.choix-offre, .choix-mode {
  position: relative; padding: 16px 18px;
  border: 1px solid var(--bordure); border-radius: var(--r-m);
  cursor: pointer; background: #fff; display: block;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.choix-offre input, .choix-mode input { position: absolute; opacity: 0; pointer-events: none; }
.choix-offre strong, .choix-mode strong { display: block; font-size: 15px; }
.choix-offre span, .choix-mode span { font-size: 13.5px; color: var(--encre-3); }
.choix-offre:has(input:checked), .choix-mode:has(input:checked) {
  border-color: var(--marque); background: var(--marque-clair);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

.stat-tuile, .tuile {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--r-l);
  padding: 22px; box-shadow: var(--ombre-s);
}
.tuile-libelle { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-4); }
.tuile-valeur { font-family: "Plus Jakarta Sans", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.04em; margin-top: 5px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 18px; }

.mono { font-family: "SFMono-Regular", "Cascadia Mono", Consolas, monospace; font-size: 14px; }

.pagination { display: flex; justify-content: center; gap: 7px; margin-top: 40px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bordure); border-radius: var(--r-s);
  background: #fff; font-size: 14px; font-weight: 650; color: var(--encre-2);
}
.pagination a:hover { border-color: var(--marque); color: var(--marque); }
.pagination .actif { background: var(--marque); border-color: var(--marque); color: #fff; }
.pagination .inactif { opacity: .4; }

/* -------------------------------------------------------------- réactif */

@media (max-width: 1080px) {
  .heros h1 { font-size: 46px; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .etapes, .parcours { grid-template-columns: 1fr; gap: 36px; }
  .offre-phare { transform: none; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 34px; }
  .annuaire-filtres { grid-template-columns: 1fr 1fr; }
  .deux-colonnes { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  body { font-size: 15.5px; }
  .nav-site { display: none; }
  .burger { display: grid; }
  .entete-actions .btn-fantome { display: none; }
  .heros { padding: 66px 0 96px; }
  .heros h1 { font-size: 36px; }
  .heros-texte { font-size: 16.5px; }
  .section { padding: 64px 0; }
  .section-tete h2 { font-size: 30px; }
  .appel { padding: 50px 24px; }
  .appel h2 { font-size: 28px; }
  .grille-champs, .grille-champs-3 { grid-template-columns: 1fr; }
  .annuaire-filtres { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .conteneur { padding: 0 18px; }
}

/* Le menu mobile, replié par le tiroir de Bootstrap. */
.offcanvas { --bs-offcanvas-width: 300px; }
.offcanvas-header { border-bottom: 1px solid var(--bordure); padding: 20px 22px; }
.offcanvas-body { padding: 12px 22px 26px; }
.nav-mobile a {
  display: block; padding: 14px 4px; font-size: 16px; font-weight: 550;
  border-bottom: 1px solid var(--bordure);
}
.nav-mobile a:last-of-type { border-bottom: none; }