/* ════════════════════════════════
   AJOUTS skeletonV2
   styles.css est la copie CONFORME du projet skeleton : ne pas y toucher.
   Tout style propre à skeletonV2 (sans équivalent skeleton) vit ici,
   dans une section commentée par module.
════════════════════════════════ */

/* ── Menu d'export : chez skeleton, React monte/démonte la liste ;
      ici elle est dans le DOM et bascule via la classe .open ── */
.export-menu .export-menu-list { display: none; }
.export-menu.open .export-menu-list { display: block; }

/* ── Accessibilité : lien d'évitement (absent de skeleton/App.jsx) ── */
.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;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 14px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 2000;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* ── Navbar : chez skeleton (Navbar.jsx) le dropdown avatar et le menu mobile
      sont montés/démontés en React ; ici ils restent dans le DOM et sont
      masqués via l'attribut [hidden], piloté par public/js/app.js ── */
.nav-dropdown .dropdown-menu[hidden] { display: none; }
.navbar-mobile-menu[hidden] { display: none; }

/* ── Bouton oeil du champ mot de passe : skeleton (PasswordInput.jsx) échange
      l'icône en React ; ici les deux SVG sont présents et bascule via la
      classe .visible posée par public/js/form-ajax.js ── */
.password-toggle .eye-off { display: none; }
.password-toggle.visible .eye-on { display: none; }
.password-toggle.visible .eye-off { display: block; }

/* ── Modale légale (register) : skeleton monte/démonte la modale ; ici elle
      reste dans le DOM, masquée via [hidden] et pilotée par legal-modal.js ── */
.modal-overlay[hidden] { display: none; }

/* ── Logo d'en-tête des cartes d'auth (partial _auth_logo, vues hors
      périmètre) : skeleton n'affiche pas de logo sur ses pages d'auth ── */
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.auth-logo img,
.auth-logo svg {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
}
.auth-logo svg {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
}

/* ── Erreurs de champ en AJAX (form-ajax.js) : skeleton signale les erreurs par
      toast ; ici on conserve l'affichage inline sous le champ, sans équivalent
      dans styles.css ── */
.form-errors {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.form-errors li {
  color: var(--danger);
  font-size: 0.85rem;
  line-height: 1.4;
}
input.input--error,
textarea.input--error,
select.input--error {
  border-color: var(--danger);
}

/* ════════════════════════════════
   Espace client (profil + paramètres)
════════════════════════════════ */

/* La coquille du back office reproduit AdminLayout.jsx de skeleton : nav fixe
   pleine largeur (--nav-h) + aside fixe à gauche + contenu décalé. Or
   base.html.twig enferme le bloc body dans <main class="container">
   (max-width 1080px, centré, padding). On neutralise cette contrainte
   uniquement quand cette coquille est présente pour qu'elle occupe toute la
   largeur ; la nav et l'aside étant en position fixe, ils sont relatifs au
   viewport et non au conteneur.

   L'espace client utilisait la même coquille ; il est passé à la coquille
   publique MGO (voir « ESPACE CLIENT » en fin de fichier) et ne dépend plus
   de cette règle. Seul `templates/admin/_layout.html.twig` la déclenche. */
main.container:has(> .client-shell) {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ════════════════════════════════
   Coquille admin (back office)
════════════════════════════════ */

/* La coquille du back office (AdminLayout.jsx) réutilise la même coquille skeleton
   que l'espace client (.client-shell : nav fixe + aside fixe + contenu). Le
   .container de base est donc déjà neutralisé par la règle ci-dessus, et toutes
   les classes de la coquille (.navbar, .sidebar, .client-main, .client-content,
   .kpi-*, .help-*, .breadcrumb, .activity-*…) vivent dans styles.css. Il ne
   reste ici que deux ajouts propres au back office : le masquage des éléments de
   recherche montés côté serveur, et les styles des deux partials adm-* conservés
   (pagination + export), dont les règles vivaient dans l'ancien admin.css
   désormais non chargé. */

/* Recherche globale : chez skeleton (AdminSearch.jsx) le menu de résultats et le
   bouton d'effacement sont montés/démontés en React ; ici ils restent dans le
   DOM, masqués via l'attribut [hidden] (piloté par public/js/admin-layout.js). */
.admin-search-results[hidden],
.admin-search-clear[hidden] {
  display: none;
}

/* Pagination serveur et menu d'export (partials admin/_pagination.html.twig et
   admin/_export_menu.html.twig, conservés en classes adm-*). Styles repris de
   l'ancien public/css/admin.css et réalignés sur les tokens skeleton
   (--primary / --text / --text-light / --border). */
.adm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border);
}
.adm-pag-info {
  font-size: 0.8rem;
  color: var(--text-light);
}
.adm-pag-info strong {
  color: var(--text);
  font-weight: 600;
}
.adm-pag-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.adm-pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-light);
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.adm-pag-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #eff6ff;
}
.adm-pag-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.adm-pag-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.adm-pag-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.adm-pag-dots {
  width: 30px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-light);
}

.adm-export-menu {
  position: relative;
  display: inline-flex;
}
/* Le bouton du partial garde des classes adm-btn non chargées : on le rend
   autonome (bouton contour, tokens skeleton). */
.adm-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}
.adm-export-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #eff6ff;
}
.adm-export-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.adm-export-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 150px;
  padding: 4px;
  display: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}
.adm-export-menu.open .adm-export-list {
  display: block;
}
.adm-export-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.adm-export-item:hover {
  background: #eff6ff;
  color: var(--primary);
}

/* ════════════════════════════════
   CRUD users / contact / social / erreurs
   Écarts propres au rendu serveur (Twig) : chez skeleton ces états sont pilotés
   par l'état React ; ici ils sont déduits du DOM statique.
════════════════════════════════ */

/* ── Interrupteurs (Toggle) : skeleton pose la classe .toggle-on selon l'état
      React. En rendu serveur, l'état « coché » vient de l'input : on reproduit
      l'apparence « on » depuis :checked (réponse anonyme du contact, section et
      switches des réseaux sociaux). ── */
.toggle:has(input:checked) {
  background: var(--primary);
}
.toggle:has(input:checked) .toggle-knob {
  left: 23px;
}

/* ── Modales de confirmation, fenêtre de recadrage et aperçu agrandi : skeleton
      les monte/démonte en React ; ici elles restent dans le DOM, masquées via
      l'attribut [hidden] (piloté par les JS admin-*). Ces conteneurs portent un
      display explicite (flex/grid) qui l'emporte sur le [hidden] natif : on
      rétablit donc le masquage. (.modal-overlay[hidden] est déjà couvert plus
      haut.) ── */
.crop-modal[hidden],
.media-zoom[hidden],
.media-empty[hidden],
.media-actions[hidden] {
  display: none;
}

/* ════════════════════════════════
   SEO / pages légales / pages d'erreur / cookies RGPD / paramètres
   Migration skeleton de ces modules. styles.css reste la copie conforme de
   skeleton : rien n'y est modifié.
════════════════════════════════ */

/* ── Champs image (MediaField) : l'aperçu, le placeholder et la barre
      d'actions restent dans le DOM et sont masqués via la classe .hidden
      posée par les JS de crop (admin-seo-edit / admin-error-edit /
      admin-parameters / admin-crop). skeleton les monte/démonte en React. ── */
.hidden { display: none !important; }

/* ── Contenu de l'éditeur WYSIWYG (Tiptap) : styles.css fournit les classes
      rte-* et .rte .ProseMirror (base, h2, h3, citation, lien, tableaux).
      Les éléments enrichis restants (H1/H4, listes, checklist, filet, code,
      surlignage, exposant/indice, images, alignements) sont repris de l'ancien
      public/css/tiptap.css et portés sur .rte .ProseMirror. ── */
.rte .ProseMirror h1 { font-size: 1.6rem; font-weight: 600; margin: 24px 0 10px; }
.rte .ProseMirror h4 { font-size: 0.95rem; font-weight: 600; margin: 14px 0 6px; }
.rte .ProseMirror p { margin-bottom: 10px; }
.rte .ProseMirror ul,
.rte .ProseMirror ol { padding-left: 20px; margin: 8px 0; }
.rte .ProseMirror li { margin-bottom: 4px; }
.rte .ProseMirror li[data-checked] { list-style: none; position: relative; padding-left: 6px; }
.rte .ProseMirror li[data-checked]::before { content: '\2610'; position: absolute; left: -18px; }
.rte .ProseMirror li[data-checked="true"]::before { content: '\2611'; color: var(--primary); }
.rte .ProseMirror hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.rte .ProseMirror code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 0.84rem; font-family: monospace; }
.rte .ProseMirror pre { background: var(--bg); padding: 14px; border-radius: 8px; overflow-x: auto; margin: 12px 0; }
.rte .ProseMirror pre code { background: none; padding: 0; font-size: 0.82rem; }
.rte .ProseMirror mark { background: #fef08a; padding: 1px 2px; border-radius: 2px; }
.rte .ProseMirror sub { font-size: 0.75em; }
.rte .ProseMirror sup { font-size: 0.75em; }
.rte .ProseMirror img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; }
.rte .ProseMirror .has-text-align-center { text-align: center; }
.rte .ProseMirror .has-text-align-right { text-align: right; }
.rte .ProseMirror .has-text-align-justify { text-align: justify; }

/* ── Barre de navigation publique : reproduction de la maquette Figma
      « MGO Construction » (frame « Home ver 2 »). Elle remplace .navbar sur le
      site public ; .navbar reste en place, le back office s'en sert encore
      (templates/admin/_layout.html.twig).

      Repères de la maquette (largeur 1440) : barre blanche de 98 px prolongée
      par un décrochement triangulaire de 27 px (25 % → 50 % → 75 %) qui loge le
      logo centré de 120 px ; liens de 18 px espacés de 80 px ; bouton pilule de
      173x55, rayon 45.

      Les couleurs viennent de la maquette et non des tokens du projet : elles
      restent confinées à ce bloc via des variables locales. La maquette est
      composée en Gilroy (police commerciale) et Urbanist (Google Fonts) : le
      projet interdisant les polices distantes, on garde la pile système. ── */
.mgo-nav {
  --mgo-nav-h: 98px;
  --mgo-nav-dip: 27px;
  --mgo-nav-gap: 80px;
  --mgo-nav-surface: #fff;
  --mgo-nav-line: #ededed;
  --mgo-nav-text: #2c2c2c;
  --mgo-nav-cta-bg: #333;
  --mgo-nav-cta-bg-hover: #1a1a1a;

  position: relative;
  /* le décrochement fait partie de la boîte : aucune page ne voit son contenu
     recouvert. Dans la maquette la nav est posée sur le visuel du hero ; une
     future page d'accueil pourra refaire cet effet avec une marge négative. */
  height: calc(var(--mgo-nav-h) + var(--mgo-nav-dip));
}

/* Fond : SVG étiré (preserveAspectRatio="none") plutôt qu'un clip-path, pour
   que le liseré de 1 px suive le décrochement. */
.mgo-nav-shape {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mgo-nav-shape svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mgo-nav-shape-fill { fill: var(--mgo-nav-surface); }

.mgo-nav-shape-line {
  fill: none;
  stroke: var(--mgo-nav-line);
  stroke-width: 1;
}

.mgo-nav-inner {
  position: relative;
  z-index: 1;
  /* 1440 - 2 x 100 : marges de la grille 12 colonnes de la maquette */
  max-width: 1240px;
  height: var(--mgo-nav-h);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mgo-nav-menu {
  display: flex;
  align-items: center;
  gap: var(--mgo-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La maquette décale les liens de gauche de 40 px après la marge de grille */
.mgo-nav-menu--left { padding-left: 40px; }

.mgo-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  color: var(--mgo-nav-text);
  text-decoration: none;
  white-space: nowrap;
}

.mgo-nav-link:hover { color: #000; }

.mgo-nav-link.is-active { font-weight: 600; }

.mgo-nav-caret { flex: 0 0 auto; }

/* Logo : 169x120 dans la maquette, il déborde la barre de 98 px et vient se
   loger dans le décrochement. Positionné en absolu pour rester exactement
   centré quelle que soit la largeur des deux groupes de liens. */
.mgo-nav-logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--mgo-nav-text);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.mgo-nav-logo img {
  height: 120px;
  width: auto;
  max-width: 169px;
  object-fit: contain;
  border-radius: 25px;
}

.mgo-nav-right {
  /* écart maquette entre « Contact » et le bouton ; en variable pour que
     l'avatar du compte connecté puisse s'en détacher (voir .mgo-nav-account) */
  --mgo-right-gap: 59px;

  display: flex;
  align-items: center;
  gap: var(--mgo-right-gap);
}

.mgo-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 55px;
  padding: 0 30px;
  border-radius: 45px;
  background: var(--mgo-nav-cta-bg);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mgo-nav-cta:hover { background: var(--mgo-nav-cta-bg-hover); }

.mgo-nav-cta svg { flex: 0 0 auto; }

.mgo-nav-link:focus-visible,
.mgo-nav-logo:focus-visible,
.mgo-nav-cta:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Le burger n'apparaît qu'en dessous de 900 px (voir plus bas) */
.mgo-nav-burger { z-index: 2; }

/* Paliers intermédiaires : on resserre avant de basculer sur le burger. */
@media (max-width: 1320px) {
  .mgo-nav { --mgo-nav-gap: 48px; }
  .mgo-nav-menu--left { padding-left: 0; }
  .mgo-nav-right { --mgo-right-gap: 32px; }
}

@media (max-width: 1100px) {
  .mgo-nav { --mgo-nav-gap: 28px; }
  .mgo-nav-link { font-size: 16px; }
  .mgo-nav-right { --mgo-right-gap: 20px; }
  .mgo-nav-cta { height: 48px; padding: 0 22px; font-size: 15px; }
}

/* En dessous de 900 px : logo centré + burger, les deux groupes de liens
   passent dans le menu plein écran. La hauteur reprend --nav-h (62 px) du
   projet et le décrochement est ramené à 17 px pour garder la proportion du
   pli (98/125 ≈ 62/79). */
@media (max-width: 900px) {
  .mgo-nav {
    --mgo-nav-h: var(--nav-h);
    --mgo-nav-dip: 17px;
  }

  .mgo-nav-inner {
    justify-content: flex-end;
    padding: 0 20px;
  }

  .mgo-nav-menu,
  .mgo-nav-right { display: none; }

  .mgo-nav-logo { height: 76px; }

  .mgo-nav-logo img {
    height: 76px;
    max-width: 108px;
    border-radius: 16px;
  }

  .mgo-nav-burger { display: flex; }
}

/* styles.css masque .navbar-mobile-menu au-dessus de 720 px (nav publique
   d'origine) : on le rétablit sur la plage où le burger MGO est visible. */
@media (min-width: 721px) and (max-width: 900px) {
  .mgo-nav .navbar-mobile-menu { display: flex; }
  .mgo-nav .navbar-mobile-menu[hidden] { display: none; }
}

/* Bouton « Votre devis » dans le menu plein écran : pleine largeur, sous les
   liens, séparé par un filet comme les autres groupes du tiroir. */
.mgo-nav-cta--mobile {
  justify-content: center;
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}

/* ── Pied de page public : reproduction de la maquette Figma
      « MGO Construction » (frame « Home ver 2 », groupe 4:2646). Il remplace
      .footer sur le site public ; .footer reste dans styles.css (copie conforme
      de skeleton) mais n'est plus utilisé, le back office et l'espace client
      neutralisant le block footer.

      Repères de la maquette (largeur 1440) : bandeau #333333 de 499 px ; quatre
      colonnes démarrant à x = 104 / 422 / 662 / 988 ; logo blanchi de 237x182 à
      y = 50 ; intitulés de colonne à y = 107 ; filet #1e1e1e à y = 423 suivi
      d'une barre de 76 px.

      Comme pour la nav, les couleurs sortent de la maquette et non des tokens du
      projet : elles restent confinées à ce bloc via des variables locales, et la
      composition (Gilroy, Montserrat, Lato, Poppins, Urbanist) est rendue avec
      la pile système, le projet interdisant les polices distantes. ── */
.mgo-footer {
  --mgo-footer-bg: #333;
  --mgo-footer-text: #fff;
  --mgo-footer-rule: #1e1e1e;

  background: var(--mgo-footer-bg);
  color: var(--mgo-footer-text);
}

.mgo-footer a {
  color: inherit;
  text-decoration: none;
}

.mgo-footer a:hover { text-decoration: underline; }

.mgo-footer a:focus-visible,
.mgo-footer button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 1440 - 2 x 100 : marges de la grille 12 colonnes de la maquette. La quatrième
   colonne de la maquette portait la newsletter, retirée.
   Les pistes en `fr` de la maquette ne conviennent plus à trois colonnes : elles
   étiraient les pistes sans étirer leur contenu, et tout le vide se retrouvait
   à droite du bloc Contact. Les colonnes sont donc dimensionnées sur leur
   contenu et `space-between` répartit le vide EN GOUTTIÈRES : la marque reste
   calée à gauche, le contact vient buter à droite, l'écart est le même partout. */
.mgo-footer-top {
  max-width: 1240px;
  margin: 0 auto;
  padding: 50px 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 320px) max-content max-content;
  justify-content: space-between;
  column-gap: 40px;
  align-items: start;
}

/* Les trois colonnes de droite démarrent 57 px plus bas que le logo (y = 107) */
.mgo-footer-col { margin-top: 57px; }

/* La maquette masque son logo en blanc, parce que le sien est un tracé sur
   fond transparent. Ce masque (filter: brightness(0) invert(1)) détruit en
   revanche tout logo OPAQUE : chaque pixel vire au blanc, fond et dessin
   confondus, et il ne reste qu'un rectangle uni.
   Le logo est donc posé tel quel sur une pastille blanche : lisible quel que
   soit le fichier envoyé au back office, transparent ou non. */
.mgo-footer-logo {
  display: inline-block;
  margin-bottom: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mgo-footer-bg);
}

.mgo-footer-logo img {
  display: block;
  height: 152px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.mgo-footer-tagline {
  max-width: 305px;
  margin: 0;
  font-size: 18px;
  line-height: 29.6px;
  font-weight: 400;
}

.mgo-footer-tagline strong { font-weight: 600; }

/* Réseaux sociaux : cibles de 45x45 (pas de 58 px dans la maquette), glyphes
   ramenés au blanc comme le logo. */
.mgo-footer-social {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 8px;
}

.mgo-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  font-weight: 700;
}

/* Pas de blanchiment ici : les icônes téléversées au back office sont des
   logos de marque en couleur, souvent opaques (le Facebook est un disque à
   dégradé). Le filtre les réduirait à des pastilles blanches, comme il le
   faisait pour le logo. Elles sont donc affichées telles quelles : sur le
   bandeau sombre, les couleurs de marque restent parfaitement lisibles. */
.mgo-footer-social img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.mgo-footer-heading {
  margin: 0 0 13px;
  font-size: 19px;
  line-height: 23px;
  font-weight: 600;
  text-transform: uppercase;
}

.mgo-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
  /* interligne de 41,5 px de la maquette */
  line-height: 41.5px;
}

.mgo-footer-contact {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 17px;
  line-height: 24px;
}

.mgo-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mgo-footer-contact svg {
  flex: 0 0 auto;
  /* aligne l'icône sur la première ligne de texte */
  margin-top: 5px;
}

.mgo-footer-address { margin-top: 4px; }

.mgo-footer-bottom {
  max-width: 1240px;
  /* le filet part à y = 423, la barre fait 76 px */
  margin: 31px auto 0;
  padding: 0 16px;
  border-top: 1px solid var(--mgo-footer-rule);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 18px;
}

.mgo-footer-legal {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}

.mgo-footer-legal .active { text-decoration: underline; }

.mgo-footer-legal button {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mgo-footer-legal button:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .mgo-footer-top {
    grid-template-columns: 1fr 1fr;
    row-gap: 44px;
  }

  .mgo-footer-col { margin-top: 0; }

  .mgo-footer-logo img { height: 140px; }

  .mgo-footer-list { line-height: 34px; }
}

@media (max-width: 640px) {
  .mgo-footer-top {
    grid-template-columns: 1fr;
    padding-top: 36px;
    row-gap: 36px;
  }

  .mgo-footer-logo img { height: 110px; }

  .mgo-footer-tagline { max-width: none; }

  .mgo-footer-heading { font-size: 17px; }

  .mgo-footer-list,
  .mgo-footer-contact { font-size: 16px; }

  .mgo-footer-list { line-height: 32px; }

  .mgo-footer-bottom {
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL - reproduction de la frame « Home ver 2 » de la maquette
   Figma « MGO Construction » (fichier 6dE8ZGZZmLJzy33wGkU5pZ, noeud 1:9).

   Toutes les valeurs (positions, tailles, rayons, couleurs) sont relevées sur
   la frame de 1440 px de large et transposées en fluide. Les couleurs sortent
   de la maquette, pas des tokens du projet : elles sont confinées ici via des
   variables locales portées par .mgo-page.

   La composition d'origine (Montserrat, Gilroy, Lato, Poppins) est rendue avec
   la pile système du projet, qui interdit les polices distantes.
   ════════════════════════════════════════════════════════════════════════ */

/* Sortie du conteneur centré de base.html.twig (voir le block main_class) */
.container.container-full {
  max-width: none;
  padding: 0;
}

.mgo-page {
  --mgo-blue: #033a89;
  --mgo-blue-deep: #010f23;
  --mgo-ink: #000;
  --mgo-muted: #2c2c2c;
  --mgo-line: #ededed;
  --mgo-hero-bg: #fafafa;
  --mgo-band: #f1f1f1;
  --mgo-star: #faab00;
  --mgo-float-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);

  color: var(--mgo-ink);
  /* Le fond de la frame est blanc ; le gris du projet (--bg) ferait ressortir
     les cartes blanches que la maquette laisse volontairement invisibles. */
  background: #fff;
}

.mgo-wrap {
  /* 1280 - 2 x 20 de rembourrage = 1240 de contenu, soit exactement la grille
     12 colonnes de la maquette (1440 - 2 x 100). */
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}

/* ── Typographie commune aux sections ── */
.mgo-title {
  margin: 0;
  /* 69 px dans la maquette, interligne 78,8 et approche -2,76 */
  font-size: clamp(2rem, 4.8vw, 4.3125rem);
  line-height: 1.14;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mgo-ink);
}

.mgo-title--center {
  /* Largeur du bloc de titre dans la maquette (809 px) : c'est elle qui décide
     du passage à la ligne des titres longs. */
  max-width: 810px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mgo-lead {
  margin: 0;
  font-size: 18px;
  line-height: 29.6px;
  color: var(--mgo-muted);
}

.mgo-lead + .mgo-lead {
  margin-top: 14px;
}

.mgo-lead--center {
  margin-left: auto;
  margin-right: auto;
  max-width: 780px;
  text-align: center;
}

.mgo-card-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mgo-ink);
}

.mgo-card-text {
  margin: 8px 0 0;
  font-size: 19px;
  line-height: 29.6px;
  color: var(--mgo-muted);
}

/* ── Boutons pilule (55 px, rayon 45) ── */
.mgo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 55px;
  padding: 0 30px;
  border-radius: 45px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mgo-btn svg {
  flex: 0 0 auto;
}

.mgo-btn-primary {
  background: var(--mgo-blue);
  color: #fff;
}

.mgo-btn-primary:hover {
  background: #05307a;
}

.mgo-btn-light {
  background: #fff;
  color: var(--mgo-ink);
  border: 1px solid var(--mgo-line);
}

.mgo-btn-light:hover {
  background: #f4f4f4;
}

.mgo-btn-ghost {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.mgo-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.28);
}

.mgo-page a:focus-visible,
.mgo-page button:focus-visible {
  outline: 2px solid var(--mgo-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ══════════════════ HERO (1:759 → 1:774) ══════════════════ */
/* La maquette pose la nav SUR le fond du hero : la marge négative fait
   remonter la section derrière la barre (125 px), le padding la compense. */
.mgo-hero {
  margin-top: -125px;
  padding: 125px 0 44px;
  background: var(--mgo-hero-bg);
}

/* Quand le bandeau de maintenance s'intercale entre la nav et <main>, le hero
   ne doit plus remonter : il passerait sous le bandeau. */
.maintenance-banner + main .mgo-hero {
  margin-top: 0;
  padding-top: 32px;
}

.mgo-hero-inner {
  padding-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 571px;
  gap: 45px;
  align-items: start;
}

.mgo-hero-text {
  padding-top: 46px;
}

/* La maquette pose ici deux mots très espacés (« Construire des », approche de
   14 px). Le badge affiche maintenant les trois publics servis : à cette
   approche il ferait trois fois la largeur de la colonne. Même pilule, texte
   resserré, hauteur laissée libre pour qu'un retour à la ligne sur petit écran
   ne déborde pas de la bordure. */
.mgo-hero-eyebrow {
  display: inline-block;
  margin: 0;
  padding: 9px 20px;
  border: 1px solid #e4e4e4;
  border-radius: 44px;
  background: #fff;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #0b0b0b;
}

/* La maquette titre en 83,5 px sur trois lignes de deux mots. L'accroche
   commerciale en fait dix : à cette taille elle occuperait cinq lignes et
   pousserait les boutons hors de l'écran. Taille ramenée à 54 px au plus
   large, interligne un peu ouvert pour rester lisible sur trois lignes. */
.mgo-hero-title {
  margin: 16px 0 0;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-transform: uppercase;
  color: #0b0b0b;
}

/* Trait bleu tracé à la main sous la zone d'intervention (noeud 1:808).
   `nowrap` garantit que le segment souligné tient sur une ligne : coupé en
   deux, le trait se retrouverait tiré en travers du bloc. */
.mgo-hero-title-underlined {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.mgo-hero-title-underlined::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 295 8' preserveAspectRatio='none'%3E%3Cpath d='M2.5 6C60 1.6 235 1 292.5 5' fill='none' stroke='%23033a89' stroke-width='4.9' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mgo-hero-lead {
  max-width: 649px;
  margin: 11px 0 0;
  font-size: 18px;
  line-height: 29.6px;
  color: var(--mgo-muted);
}

.mgo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 22px;
}

.mgo-hero-media {
  position: relative;
}

.mgo-hero-img {
  display: block;
  width: 100%;
  height: 580px;
  object-fit: cover;
  border-radius: 15px;
}

/* Vignettes flottantes décoratives (1:787 et 1:779) */
.mgo-hero-badge {
  position: absolute;
  left: -45px;
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: var(--mgo-float-shadow);
}

.mgo-hero-badge img {
  flex: 0 0 auto;
}

.mgo-hero-badge-lines {
  display: flex;
  flex-direction: column;
}

.mgo-hero-bar {
  display: block;
  border-radius: 40px;
}

.mgo-hero-bar--dark { background: #131b2b; }
.mgo-hero-bar--muted { background: #8f9aac; }

.mgo-hero-badge--1 {
  top: 415px;
  width: 291px;
  height: 65px;
  padding: 0 18px;
  gap: 17px;
  border-radius: 70px;
}

.mgo-hero-badge--1 img { width: 27px; height: 27px; }
.mgo-hero-badge--1 .mgo-hero-badge-lines { gap: 9px; }
.mgo-hero-badge--1 .mgo-hero-bar { height: 8px; }

.mgo-hero-badge--2 {
  top: 486px;
  width: 214px;
  height: 47px;
  padding: 0 16px;
  gap: 14px;
  border-radius: 52px;
}

.mgo-hero-badge--2 img { width: 15px; height: 15px; }
.mgo-hero-badge--2 .mgo-hero-badge-lines { gap: 6px; }
.mgo-hero-badge--2 .mgo-hero-bar { height: 6px; }

/* Indicateur de diaporama décoratif (1:773) : une seule vue existe */
.mgo-hero-dots {
  position: absolute;
  top: 599px;
  left: 223px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 188px;
  height: 28px;
  padding: 0 18px;
  border-radius: 40px;
  background: #fff;
  box-shadow: var(--mgo-float-shadow);
}

.mgo-hero-dots span {
  height: 6px;
  width: 16px;
  border-radius: 40px;
  background: #d5d8de;
}

.mgo-hero-dots .is-active {
  width: 76px;
  background: var(--mgo-blue);
}

/* ══════════════════ CHIFFRES CLÉS (1:893) ══════════════════ */
.mgo-stats {
  padding: 42px 0 0;
}

.mgo-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px;
  /* rangée de 1224 px dans la maquette, centrée dans la grille */
  max-width: 1224px;
  margin: 0 auto;
}

.mgo-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 172px;
  padding: 0 16px;
  border: 1px solid #f8f8f8;
  border-radius: 46px;
  background: #fff;
  text-align: center;
}

.mgo-stat-value {
  font-size: clamp(2.6rem, 5.4vw, 4.8125rem);
  line-height: 1.1;
  font-weight: 600;
  /* #090909 à 22 % dans la maquette */
  color: rgba(9, 9, 9, 0.22);
}

/* Un « chiffre » qui n'en est pas un (« Île-de-France ») : à la taille des
   nombres il déborderait la carte. */
.mgo-stat-value--text {
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  letter-spacing: -0.02em;
}

.mgo-stat-label {
  font-size: 18px;
  font-weight: 500;
  color: var(--mgo-ink);
}

.mgo-stat.is-highlight {
  background: #023989;
  border-color: #023989;
}

.mgo-stat.is-highlight .mgo-stat-value,
.mgo-stat.is-highlight .mgo-stat-label {
  color: #fff;
}

/* ══════════════════ À PROPOS (4:1146 / 4:1139) ══════════════════ */
.mgo-about {
  padding: 141px 0 0;
}

.mgo-about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 42px;
  align-items: center;
}

/* Deux photos inclinées de 6,6° (relativeTransform des noeuds 4:1147/4:1148),
   chacune doublée d'un contour décalé de 15 px vers l'extérieur. */
.mgo-about-photos {
  position: relative;
  width: 100%;
  max-width: 694px;
  aspect-ratio: 694 / 630;
}

.mgo-about-photo {
  position: absolute;
  width: 44.24%;
  height: 86.67%;
  margin: 0;
}

.mgo-about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 31px;
}

.mgo-about-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #333;
  border-radius: 31px;
}

.mgo-about-photo--back {
  left: 5.4%;
  top: 11.19%;
  transform: rotate(-6.6deg);
}

.mgo-about-photo--back::before {
  transform: translateX(-15px);
}

.mgo-about-photo--front {
  left: 50.72%;
  top: 3.81%;
  transform: rotate(6.6deg);
}

.mgo-about-photo--front::before {
  transform: translateX(15px);
}

.mgo-about-text .mgo-lead {
  margin-top: 18px;
}

.mgo-about-points {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 36.6px;
  color: var(--mgo-muted);
}

.mgo-about-points strong {
  font-weight: 600;
  color: var(--mgo-ink);
}

.mgo-about-text .mgo-btn {
  margin-top: 30px;
}

/* ══════════════════ SERVICES (carrousel, 4:1140) ══════════════════ */
.mgo-services {
  padding: 160px 0 0;
}

.mgo-services-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

.mgo-services-aside {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.mgo-carousel-nav {
  display: flex;
  align-self: flex-end;
  gap: 15px;
}

.mgo-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 11.5px;
  background: #fff;
  color: var(--mgo-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.mgo-carousel-btn[data-carousel-prev] svg {
  transform: scaleX(-1);
}

.mgo-carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Piste : le rembourrage latéral aligne la première carte sur le conteneur
   tout en laissant les suivantes déborder jusqu'au bord de l'écran. */
.mgo-services-track {
  --mgo-track-pad: max(20px, calc((100% - 1280px) / 2 + 20px));

  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--mgo-track-pad);
  padding: 4px var(--mgo-track-pad) 28px;
  scrollbar-width: none;
}

.mgo-services-track::-webkit-scrollbar {
  display: none;
}

.mgo-service {
  flex: 0 0 400px;
  max-width: 400px;
  scroll-snap-align: start;
}

.mgo-service-link {
  display: block;
  height: 100%;
  padding: 9px 9px 24px;
  border: 1px solid var(--mgo-line);
  border-radius: 33px;
  background: #fff;
  text-decoration: none;
}

.mgo-service-link:hover {
  border-color: #d8d8d8;
}

.mgo-service-img {
  display: block;
  width: 100%;
  height: 272px;
  object-fit: cover;
  border-radius: 33px;
}

.mgo-service .mgo-card-title {
  margin: 20px 8px 0;
}

.mgo-service .mgo-card-text {
  margin: 6px 8px 0;
}

/* ══════════════════ L'EXCELLENCE COMME STANDARD (4:1179) ══════════════════ */
.mgo-features {
  padding: 160px 0 0;
}

.mgo-features .mgo-lead--center {
  margin-top: 10px;
}

.mgo-features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.mgo-feature {
  min-height: 249px;
  padding: 34px 21px 21px;
  border-radius: 33px;
  background: #fff;
}

.mgo-feature-icon {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.mgo-feature .mgo-card-title {
  margin-top: 16px;
}

.mgo-feature.is-highlight {
  background: var(--mgo-blue);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}

.mgo-feature.is-highlight .mgo-card-title,
.mgo-feature.is-highlight .mgo-card-text {
  color: #fff;
}

/* ══════════════════ PROCESSUS (4:1177) ══════════════════ */
/* Bande pleine largeur : la section sort du conteneur, son fond couvre donc
   déjà toute la largeur de <main>. */
.mgo-process {
  margin-top: 138px;
  padding: 147px 0 169px;
  background: var(--mgo-band);
}

.mgo-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin: 58px 0 0;
  padding: 0;
  list-style: none;
}

/* Contour bleu ouvert de la maquette, simplifié en cadre continu : la carte
   blanche est encastrée dedans avec le décalage relevé (12 / 11 / 13 / 12). */
.mgo-step {
  position: relative;
  padding: 11px 13px 12px 12px;
}

.mgo-step::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--mgo-blue);
  border-radius: 34px;
}

.mgo-step.is-last::before {
  border-color: #323232;
}

.mgo-step-card {
  position: relative;
  min-height: 302px;
  padding: 76px 18px 22px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.mgo-step-num {
  position: absolute;
  top: 8px;
  right: 18px;
  font-size: clamp(2.6rem, 4.6vw, 4.3125rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.1);
}

.mgo-step .mgo-card-text {
  margin-top: 22px;
}

.mgo-step-arrow {
  position: absolute;
  top: 132px;
  right: -21px;
  z-index: 1;
  color: var(--mgo-blue);
}

/* ══════════════════ PROJETS RÉCENTS (4:1141) ══════════════════ */
.mgo-projects {
  padding: 87px 0 0;
}

.mgo-projects-mark {
  display: block;
  width: auto;
  height: 137px;
  margin: 0 auto 8px;
  object-fit: contain;
}

/* Boîte de titre de 1189 px dans la maquette */
.mgo-projects .mgo-title--center {
  max-width: 1189px;
}

.mgo-projects .mgo-lead--center {
  margin-top: 10px;
}

.mgo-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 31px;
  margin-top: 41px;
}

.mgo-project {
  position: relative;
  display: block;
  aspect-ratio: 393 / 474;
  border-radius: 28px;
  overflow: hidden;
  background: #c8cdd6;
  text-decoration: none;
}

.mgo-project-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mgo-project-veil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 152px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
}

.mgo-project-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 0 27px 26px;
  color: #fff;
}

.mgo-project-category {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.mgo-project-title {
  margin-top: 4px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.mgo-project-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
}

.mgo-project:hover .mgo-project-more {
  text-decoration: underline;
}

/* ══════════════════ APPEL À L'ACTION (4:1399) ══════════════════ */
/* 103 px d'écart avec la section précédente + 97 px de débord de la photo */
.mgo-cta {
  padding: 200px 0 0;
}

.mgo-cta-panel {
  position: relative;
  max-width: 1105px;
  min-height: 379px;
  margin: 0 auto;
  padding: 42px 40px 41px;
  border-radius: 50px;
  background: linear-gradient(155deg, var(--mgo-blue) 0%, var(--mgo-blue-deep) 100%);
}

.mgo-cta-text {
  max-width: 626px;
}

.mgo-cta-panel .mgo-title,
.mgo-cta-panel .mgo-lead {
  color: #fff;
}

.mgo-cta-panel .mgo-lead {
  margin-top: 18px;
}

.mgo-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

/* La photo déborde le panneau par le haut, comme dans la maquette */
.mgo-cta-photo {
  position: absolute;
  right: 43px;
  bottom: 0;
  width: auto;
  height: 476px;
  object-fit: contain;
  object-position: bottom;
}

/* ══════════════════ TÉMOIGNAGES (carrousel, 4:1181) ══════════════════ */
.mgo-reviews {
  padding: 169px 0 0;
}

/* Boîte de titre de 1103 px dans la maquette : le titre tient sur une ligne */
.mgo-reviews .mgo-title--center {
  max-width: 1103px;
}

.mgo-reviews-shell {
  position: relative;
  margin-top: 44px;
}

.mgo-reviews-prev,
.mgo-reviews-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.mgo-reviews-prev { left: -58px; }
.mgo-reviews-next { right: -58px; }

.mgo-reviews-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 6px 2px 24px;
  scrollbar-width: none;
}

.mgo-reviews-track::-webkit-scrollbar {
  display: none;
}

.mgo-review {
  flex: 0 0 400px;
  max-width: 400px;
  min-height: 317px;
  margin: 0;
  padding: 23px;
  border-radius: 20px;
  background: #fafafa;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

/* Dans la maquette, seule la carte centrale est blanche et détachée */
.mgo-review.is-raised {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.mgo-review-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  color: var(--mgo-star);
}

.mgo-review-quote {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: #333;
}

.mgo-review-author {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mgo-review-name {
  font-size: 19px;
  font-weight: 600;
  color: var(--mgo-ink);
}

.mgo-review-place {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.55);
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width: 1420px) {
  .mgo-reviews-prev { left: 4px; }
  .mgo-reviews-next { right: 4px; }
}

@media (max-width: 1180px) {
  .mgo-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 32px;
  }

  .mgo-hero-img { height: 480px; }
  .mgo-hero-badge { left: -24px; }
  .mgo-hero-badge--1 { top: 320px; }
  .mgo-hero-badge--2 { top: 391px; }
  .mgo-hero-dots { top: 500px; left: auto; right: 0; }

  .mgo-stats-grid { gap: 24px; }

  .mgo-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mgo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .mgo-step-arrow { display: none; }

  .mgo-cta-photo { height: 400px; right: 12px; }
  .mgo-cta-text { max-width: 60%; }
}

@media (max-width: 900px) {
  /* La nav bascule elle aussi à 900 px : le débord du hero suit sa hauteur */
  .mgo-hero {
    margin-top: calc(-1 * (var(--nav-h) + 17px));
    padding-top: calc(var(--nav-h) + 41px);
  }

  .mgo-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .mgo-hero-text { padding-top: 12px; }
  .mgo-hero-eyebrow { font-size: 13px; letter-spacing: 0.04em; padding: 8px 16px; }
  .mgo-hero-img { height: 380px; }
  .mgo-hero-badge { left: 12px; }
  .mgo-hero-badge--1 { top: 240px; }
  .mgo-hero-badge--2 { top: 311px; }
  .mgo-hero-dots { top: 330px; right: 12px; }

  .mgo-stats { padding-top: 32px; }
  .mgo-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mgo-stat { height: 148px; border-radius: 32px; }

  .mgo-about { padding-top: 90px; }
  .mgo-about-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .mgo-about-photos { margin: 0 auto; }

  .mgo-services,
  .mgo-features { padding-top: 90px; }

  .mgo-services-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mgo-services-aside { gap: 20px; }
  .mgo-carousel-nav { align-self: flex-start; }

  .mgo-process { margin-top: 90px; padding: 80px 0 90px; }
  .mgo-steps { margin-top: 40px; }

  .mgo-projects { padding-top: 60px; }
  .mgo-projects-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mgo-projects-mark { height: 96px; }

  .mgo-cta { padding-top: 90px; }
  .mgo-cta-panel { padding: 32px 24px; border-radius: 32px; }
  .mgo-cta-text { max-width: none; }
  /* Sous 900 px la photo mangerait le texte : la maquette n'a pas ce palier */
  .mgo-cta-photo { display: none; }

  .mgo-reviews { padding-top: 90px; }
  .mgo-reviews-prev,
  .mgo-reviews-next { display: none; }
  .mgo-reviews-track { padding-left: 0; padding-right: 0; }
}

@media (max-width: 640px) {
  .mgo-wrap { padding: 16px; }

  .mgo-lead,
  .mgo-hero-lead { font-size: 17px; line-height: 27px; }

  .mgo-card-text { font-size: 17px; line-height: 27px; }

  .mgo-btn { height: 50px; padding: 0 22px; font-size: 16px; }

  .mgo-hero-actions .mgo-btn { flex: 1 1 100%; justify-content: center; }

  .mgo-hero-img { height: 300px; }
  .mgo-hero-badge--1 { width: auto; max-width: calc(100% - 24px); }
  .mgo-hero-badge--1 .mgo-hero-bar,
  .mgo-hero-badge--2 .mgo-hero-bar { max-width: 100%; }
  .mgo-hero-badge--2 { display: none; }
  .mgo-hero-dots { top: 250px; }

  .mgo-features-grid { grid-template-columns: minmax(0, 1fr); }
  .mgo-feature { min-height: 0; }

  .mgo-steps { grid-template-columns: minmax(0, 1fr); }
  .mgo-step-card { min-height: 0; padding-top: 68px; }

  .mgo-service { flex-basis: 300px; }
  .mgo-service-img { height: 200px; }

  .mgo-review { flex-basis: 300px; min-height: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGES DE FORMULAIRE (connexion, inscription, mot de passe oublié,
   réinitialisation, renvoi de vérification, mot de passe forcé, contact).

   ATTENTION : la maquette Figma « MGO Construction » ne contient AUCUNE page
   de formulaire (ses frames se limitent à l'accueil et aux services). Ce bloc
   EXTRAPOLE son langage visuel, relevé sur la frame « Home ver 2 » :
     - fond `#fafafa` du hero, passant derrière la nav
     - pastille de surtitre à filet `#e4e4e4`, très espacée (noeud 1:762)
     - titre en capitales, approche négative
     - carte blanche à rayon 33 et filet `#ededed` (cartes de services, 4:1153)
     - contrôles en pilule de 55 px, rayon 45 (boutons 1:764, champ 4:1353)
     - bleu `#033a89` et son survol `#05307a`
   Le panneau de la page de contact reprend le bloc d'appel à l'action (4:1399,
   dégradé `#033a89 → #010f23`, rayon 50) et la colonne « Contact » du pied de
   page.

   Rien n'est touché côté balisage des champs : identifiants, divs data-error,
   honeypots, jetons CSRF et classes attendues par les scripts sont d'origine.
   ════════════════════════════════════════════════════════════════════════ */

/* Le fond gris remplace le blanc posé par .mgo-page */
.mgo-page.mgo-form {
  background: var(--mgo-hero-bg);
}

.mgo-formpage {
  /* même débord que le hero de l'accueil : le fond passe derrière la nav */
  margin-top: -125px;
  padding: 125px 0 100px;
}

/* Avec le bandeau de maintenance intercalé, plus de débord possible */
.maintenance-banner + main .mgo-formpage {
  margin-top: 0;
  padding-top: 32px;
}

/* Page bloquante du mot de passe forcé : nav réduite, sans décrochement */
.mgo-page.mgo-form--lock .mgo-formpage {
  margin-top: 0;
  padding: 48px 0 80px;
}

.mgo-formpage-inner {
  padding-top: 40px;
}

.mgo-formpage-head {
  margin: 0 auto 32px;
  text-align: center;
}

.mgo-formpage-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 0 16px;
  height: 34px;
  line-height: 32px;
  border: 1px solid #e4e4e4;
  border-radius: 40px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: #0b0b0b;
}

/* 69 px sur les sections de la maquette : trop haut au-dessus d'un formulaire,
   ramené à 52 px. */
.mgo-formpage-title {
  font-size: clamp(1.8rem, 3.4vw, 3.25rem);
}

.mgo-formpage-head .mgo-lead {
  max-width: 580px;
  margin-top: 14px;
}

/* ── La carte ── */
.mgo-form .auth-card,
.mgo-form .contact-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 36px;
  border: 1px solid var(--mgo-line);
  border-radius: 33px;
  background: #fff;
}

/* Inscription : deux champs par ligne, il faut plus de large */
.mgo-form--wide .auth-card {
  max-width: 720px;
}

/* ── Champs ── */
.mgo-form form label {
  display: block;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mgo-muted);
}

.mgo-form form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.mgo-form form select {
  display: block;
  width: 100%;
  height: 55px;
  margin-top: 8px;
  padding: 0 22px;
  border: 1px solid #e4e4e4;
  border-radius: 45px;
  background: #fff;
  color: var(--mgo-ink);
  font-family: inherit;
  font-size: 16px;
}

.mgo-form form textarea {
  display: block;
  width: 100%;
  min-height: 160px;
  margin-top: 8px;
  padding: 16px 22px;
  border: 1px solid #e4e4e4;
  /* un champ long ne peut pas être une pilule : rayon des cartes, adouci */
  border-radius: 26px;
  background: #fff;
  color: var(--mgo-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
}

.mgo-form form input:focus,
.mgo-form form select:focus,
.mgo-form form textarea:focus {
  outline: none;
  border-color: var(--mgo-blue);
  box-shadow: 0 0 0 3px rgba(3, 58, 137, 0.12);
}

.mgo-form form input::placeholder,
.mgo-form form textarea::placeholder {
  color: #9ca3af;
}

.mgo-form form input:disabled,
.mgo-form form textarea:disabled {
  background: #f4f4f4;
  color: #6b7280;
}

/* Le sélecteur des champs est plus spécifique que `input.input--error` de
   extra.css : on rétablit explicitement le filet d'erreur. */
.mgo-form form input.input--error,
.mgo-form form select.input--error,
.mgo-form form textarea.input--error {
  border-color: var(--danger);
}

.mgo-form .form-errors li {
  font-size: 0.85rem;
}

.mgo-form .required-mark {
  color: var(--danger);
}

/* Deux champs par ligne : l'écart vertical vient déjà du margin des labels */
.mgo-form .form-row {
  gap: 0 18px;
}

/* ── Champ mot de passe (oeil afficher/masquer) ── */
.mgo-form .password-field {
  margin-top: 8px;
}

.mgo-form .password-field input {
  margin-top: 0;
  padding-right: 56px;
}

.mgo-form .password-toggle {
  right: 14px;
  color: #6b7280;
}

.mgo-form .password-toggle:hover {
  color: var(--mgo-ink);
}

/* ── Boutons ── */
.mgo-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 55px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 45px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

.mgo-form .btn-block {
  width: 100%;
}

.mgo-form .btn-primary {
  background: var(--mgo-blue);
  color: #fff;
}

.mgo-form .btn-primary:hover:not(:disabled) {
  background: #05307a;
}

.mgo-form .btn-outline {
  background: #fff;
  border-color: #e4e4e4;
  color: var(--mgo-ink);
}

.mgo-form .btn-outline:hover:not(:disabled) {
  background: #f4f4f4;
}

.mgo-form form button[type="submit"] {
  margin-top: 8px;
}

/* ── Liens, séparateur, alertes ── */
.mgo-form a {
  color: var(--mgo-blue);
}

.mgo-form .link-button {
  color: var(--mgo-blue);
}

.mgo-form .auth-links {
  margin-top: 16px;
  font-size: 15px;
  color: var(--mgo-muted);
  text-align: center;
}

.mgo-form .auth-divider {
  margin: 22px 0 16px;
  font-size: 14px;
  color: #6b7280;
}

.mgo-form .auth-divider::before,
.mgo-form .auth-divider::after {
  background: var(--mgo-line);
}

.mgo-form .alert {
  margin: 0 0 18px;
  padding: 14px 20px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.5;
}

.mgo-form .hint {
  font-size: 15px;
  color: #6b7280;
}

/* ── Case à cocher ──
   `form label { display: block }` ci-dessus l'emporterait sur le flex de
   .checkbox-row : il faut le rétablir. */
.mgo-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--mgo-muted);
}

.mgo-form .checkbox-box {
  width: 20px;
  height: 20px;
  border: 1.5px solid #d8d8d8;
  border-radius: 6px;
}

.mgo-form .checkbox-row:hover .checkbox-box {
  border-color: var(--mgo-blue);
}

.mgo-form .checkbox-input:checked + .checkbox-box {
  background: var(--mgo-blue);
  border-color: var(--mgo-blue);
}

.mgo-form .checkbox-input:focus-visible + .checkbox-box {
  outline: 2px solid var(--mgo-blue);
}

/* ── Nav réduite de la page de mot de passe forcé ── */
.mgo-lock-nav {
  padding: 14px 24px;
  border-bottom: 1px solid var(--mgo-line, #ededed);
}

.mgo-lock-nav .navbar-brand {
  color: #033a89;
}

.mgo-lock-nav .nav-avatar {
  background: #033a89;
}

.mgo-lock-nav .nav-avatar:hover {
  background: #05307a;
}

/* ══════════════════ PAGE DE CONTACT ══════════════════ */
.mgo-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-top: 40px;
}

/* Panneau repris du bloc d'appel à l'action de la maquette (noeud 4:1399) */
.mgo-contact-side {
  padding: 44px 40px;
  border-radius: 50px;
  background: linear-gradient(155deg, var(--mgo-blue) 0%, var(--mgo-blue-deep) 100%);
  color: #fff;
}

.mgo-contact-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 0 16px;
  height: 34px;
  line-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 40px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: #fff;
}

.mgo-contact-title {
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  color: #fff;
}

.mgo-contact-lead {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.85);
}

.mgo-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
  line-height: 24px;
}

.mgo-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mgo-contact-list li svg {
  flex: 0 0 auto;
  margin-top: 4px;
}

.mgo-contact-list li a {
  color: #fff;
  text-decoration: none;
}

.mgo-contact-list li a:hover {
  text-decoration: underline;
}

.mgo-contact-social {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.mgo-contact-side .mgo-contact-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* Même raison que dans le pied de page : icônes de marque affichées telles quelles */
.mgo-contact-social img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* La carte occupe toute la colonne de droite */
.mgo-form--contact .contact-card {
  max-width: none;
  margin: 0;
}

.mgo-contact-formwrap {
  margin: 0;
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width: 900px) {
  .mgo-formpage {
    margin-top: calc(-1 * (var(--nav-h) + 17px));
    padding-top: calc(var(--nav-h) + 41px);
  }

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

  .mgo-contact-side {
    padding: 32px 26px;
    border-radius: 32px;
  }
}

@media (max-width: 640px) {
  .mgo-formpage {
    padding-bottom: 64px;
  }

  .mgo-formpage-inner,
  .mgo-contact-grid {
    padding-top: 24px;
  }

  .mgo-form .auth-card,
  .mgo-form .contact-card {
    padding: 24px 20px;
    border-radius: 26px;
  }

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

  .mgo-formpage-eyebrow,
  .mgo-contact-eyebrow {
    font-size: 12px;
    letter-spacing: 4px;
  }

  .mgo-form .btn {
    height: 50px;
    font-size: 16px;
  }
}

/* ── Checklist de mot de passe en direct (partials/_password_check.html.twig)
      Ces classes n'avaient AUCUN style : la liste s'affichait en puces nues et
      l'état `pc-ok` posé par public/js/password-check.js ne se voyait pas. Le
      style est volontairement global (la checklist sert aussi dans l'espace
      client), avec une variante sur les pages de formulaire MGO. ── */
.pc-panel {
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}

.pc-info {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-light);
}

.pc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-item {
  position: relative;
  padding-left: 22px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-light);
}

.pc-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 1.5px solid #d1d5db;
  border-radius: 50%;
}

.pc-item.pc-ok {
  color: #15803d;
}

.pc-item.pc-ok::before {
  border-color: #15803d;
  background: #15803d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1.5 5 4.5 8 10.5 1.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 7px no-repeat;
}

.mgo-form .pc-panel {
  border-color: var(--mgo-line);
  border-radius: 20px;
  background: var(--mgo-hero-bg);
}

/* ════════════════════════════════════════════════════════════════════════
   BANNIÈRE DE CONSENTEMENT COOKIES, habillée comme le reste du site.

   La bannière vit HORS de <main> (block cookie_banner de base.html.twig) :
   les variables de .mgo-page ne l'atteignent pas, les couleurs de la maquette
   sont donc redéclarées localement.

   Le balisage n'est pas touché : les boutons, les cartes de catégorie, les
   interrupteurs et les badges sont construits par public/js/cookie-consent.js
   avec les classes du projet (.btn, .cookie-category, .toggle, .badge). On ne
   fait que les restyler.
   ════════════════════════════════════════════════════════════════════════ */
.cookie-banner {
  --ck-blue: #033a89;
  --ck-blue-hover: #05307a;
  --ck-ink: #000;
  --ck-muted: #2c2c2c;
  --ck-line: #ededed;

  bottom: 20px;
  max-width: 384px;
  padding: 26px 26px 22px;
  border: 1px solid var(--ck-line);
  /* même rayon que les cartes de la maquette, ombre des éléments flottants */
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}

.cookie-banner > strong {
  display: block;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ck-ink);
}

.cookie-banner p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ck-muted);
}

.cookie-banner a {
  color: var(--ck-blue);
}

/* ── Boutons ──
   Le JS produit, dans l'ordre : « Tout accepter », « Tout refuser »
   (facultatif) puis « Personnaliser » ; en mode réglages : « Enregistrer »
   puis « Annuler ». Le premier prend toute la largeur, les suivants se
   partagent la ligne suivante. */
.cookie-banner #cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.cookie-banner .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc(50% - 4px);
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 40px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.cookie-banner .btn:first-child {
  flex-basis: 100%;
}

.cookie-banner .btn-primary {
  background: var(--ck-blue);
  color: #fff;
}

.cookie-banner .btn-primary:hover {
  background: var(--ck-blue-hover);
}

.cookie-banner .btn-outline {
  background: #fff;
  border-color: #e4e4e4;
  color: var(--ck-ink);
}

.cookie-banner .btn-outline:hover {
  background: #f4f4f4;
}

.cookie-banner .btn:focus-visible {
  outline: 2px solid var(--ck-blue);
  outline-offset: 2px;
}

/* ── Panneau « Personnaliser » ── */
/* .cookie-categories porte display:flex, qui l'emportait sur l'attribut
   [hidden] : le conteneur restait dans le flux (vide) avec ses marges. */
.cookie-categories[hidden] {
  display: none;
}

.cookie-banner .cookie-categories {
  margin: 18px 0 0;
  gap: 8px;
}

.cookie-banner .cookie-category {
  padding: 14px 16px;
  border: 1px solid var(--ck-line);
  border-radius: 18px;
  background: #fafafa;
}

.cookie-banner .cookie-category-head strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ck-ink);
}

.cookie-banner .cookie-category .badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: #eaf0fa;
  color: var(--ck-blue);
  font-size: 12px;
}

.cookie-banner .cookie-category p.hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.cookie-banner .cookie-list {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
}

.cookie-banner .cookie-list code {
  padding: 1px 6px;
  border-radius: 6px;
  background: #eceff3;
  color: var(--ck-muted);
  font-size: 11px;
}

/* Interrupteur de catégorie au bleu de la maquette */
.cookie-banner .toggle-on {
  background: var(--ck-blue);
}

/* ── Variantes de position (réglables au back office) ──
   Le gabarit compose la classe `cookie-{{ position }}`, donc
   cookie-bottom-center / cookie-bottom-left / cookie-bottom-right.
   styles.css ne définit que .cookie-bottom-left, .cookie-bottom-right et un
   .cookie-bottom qui ne correspond à aucune valeur : le réglage « Bas centré »
   ne posait donc AUCUNE règle et la bannière restait collée à droite. La règle
   manquante est ajoutée ici. */
.cookie-bottom-right { right: 20px; }
.cookie-bottom-left { left: 20px; }

.cookie-bottom-center {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

@media (max-width: 720px) {
  .cookie-banner,
  .cookie-banner.cookie-bottom-left,
  .cookie-banner.cookie-bottom-right,
  .cookie-banner.cookie-bottom-center {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    padding: 22px 20px 20px;
    border-radius: 24px;
    transform: none;
  }
}

/* ── Foire aux questions (back office) : la réponse est du texte simple,
      les sauts de ligne saisis doivent rester visibles sur la fiche. ── */
.faq-answer-text {
  margin: 6px 0 0;
  white-space: pre-wrap;
}

/* ════════════════════════════════════════════════════════════════════════
   RÉALISATIONS
   - page publique /realisations : mêmes cartes que la section « Projets
     récents » de la maquette, mais toute la liste et avec les descriptions ;
   - compléments back office : vignette de la liste, visuel de la fiche,
     zone de dépôt au format portrait.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Page publique ── */
/* Même bandeau clair passant derrière la nav que les pages de formulaire */
.mgo-projects--page {
  margin-top: -125px;
  padding: 125px 0 100px;
  background: var(--mgo-hero-bg);
}

.maintenance-banner + main .mgo-projects--page {
  margin-top: 0;
  padding-top: 32px;
}

.mgo-projects-head {
  padding-top: 40px;
  margin-bottom: 44px;
  text-align: center;
}

.mgo-projects-head .mgo-formpage-eyebrow {
  margin-bottom: 18px;
}

.mgo-projects-head .mgo-lead {
  margin-top: 14px;
}

/* La grille de toutes les réalisations reprend le gabarit de l'accueil */
.mgo-projects-grid--all {
  margin-top: 0;
  align-items: start;
}

.mgo-project-item {
  display: flex;
  flex-direction: column;
}

/* Variante non cliquable : la carte n'est plus un lien sur cette page */
.mgo-project--static {
  cursor: default;
}

.mgo-project-desc {
  margin: 16px 2px 0;
  font-size: 17px;
  line-height: 27px;
  color: var(--mgo-muted);
}

.mgo-projects-empty {
  padding: 48px 0;
}

.mgo-projects-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ── Back office ── */
/* Vignette de la colonne « Visuel » de la liste */
.project-thumb img {
  display: block;
  width: 44px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
}

/* Visuel de la fiche projet */
.project-show-image {
  margin-bottom: 20px;
}

.project-show-image img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 12px;
}

/* La zone de dépôt des icônes est carrée : celle des projets est portrait */
.media-dropzone-project {
  aspect-ratio: 393 / 474;
  max-width: 220px;
}

.media-dropzone-project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .mgo-projects--page {
    margin-top: calc(-1 * (var(--nav-h) + 17px));
    padding-top: calc(var(--nav-h) + 41px);
  }

  .mgo-projects-head {
    padding-top: 24px;
    margin-bottom: 32px;
  }
}

/* ── Champs de formulaire masqués par l'attribut [hidden] ──
      styles.css pose `form input, form select { display: block }`. Or une
      déclaration d'AUTEUR l'emporte toujours sur la feuille du navigateur,
      quelle que soit la spécificité : le `display:none` natif de [hidden]
      était donc écrasé et le champ fichier des zones de dépôt (icônes de
      réseaux sociaux, logo et favicon des paramètres, visuel des
      réalisations) s'affichait en clair, doublonnant avec la zone cliquable. ── */
form input[hidden],
form select[hidden] {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE NOS SERVICES
   Cartes de prestations : même carte blanche que le carrousel de services de
   la maquette (rayon 33, filet #ededed, .mgo-card-title + .mgo-card-text),
   sans visuel et complétée par la liste des prestations.
   ════════════════════════════════════════════════════════════════════════ */
.mgo-services-page {
  /* même bandeau clair passant derrière la nav que les autres pages internes */
  margin-top: -125px;
  padding: 125px 0 100px;
  background: var(--mgo-hero-bg);
}

.maintenance-banner + main .mgo-services-page {
  margin-top: 0;
  padding-top: 32px;
}

.mgo-prestations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.mgo-prestation {
  padding: 30px 28px;
  border: 1px solid var(--mgo-line);
  border-radius: 33px;
  background: #fff;
  /* ancre depuis le pied de page : le titre ne passe pas sous la nav */
  scroll-margin-top: 150px;
}

.mgo-prestation .mgo-card-text {
  margin-top: 12px;
}

.mgo-prestation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 24px;
  color: var(--mgo-muted);
}

.mgo-prestation-list li {
  position: relative;
  padding-left: 26px;
}

/* Puce en coche bleue, dans le ton des listes de la maquette */
.mgo-prestation-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--mgo-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1.5 5 4.5 8 10.5 1.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px 8px no-repeat;
}

/* Les deux boutons de bas de page se placent côte à côte */
.mgo-projects-cta {
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1100px) {
  .mgo-prestations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mgo-services-page {
    margin-top: calc(-1 * (var(--nav-h) + 17px));
    padding-top: calc(var(--nav-h) + 41px);
  }
}

@media (max-width: 640px) {
  .mgo-prestations-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mgo-prestation {
    padding: 24px 22px;
    border-radius: 26px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE À PROPOS
   Assemblage de blocs déjà définis (duo de photos, chiffres clés, cartes
   d'atouts, panneau d'appel à l'action). Ne restent ici que les espacements
   propres à cette page : les blocs d'origine portent des paddings calés sur
   l'enchaînement de la page d'accueil, qu'il faut neutraliser.
   ════════════════════════════════════════════════════════════════════════ */
.mgo-aboutpage {
  /* même bandeau clair passant derrière la nav que les autres pages internes */
  margin-top: -125px;
  padding: 125px 0 100px;
  background: var(--mgo-hero-bg);
}

.maintenance-banner + main .mgo-aboutpage {
  margin-top: 0;
  padding-top: 32px;
}

.mgo-aboutpage-intro {
  margin-top: 12px;
}

.mgo-aboutpage-stats {
  margin-top: 90px;
}

.mgo-aboutpage-block {
  margin-top: 100px;
}

.mgo-aboutpage-block .mgo-lead--center {
  margin-top: 10px;
}

.mgo-aboutpage-block .mgo-features-grid {
  margin-top: 40px;
}

/* Sur fond clair, les cartes d'atouts ont besoin d'un filet pour exister
   (sur l'accueil elles sont blanches sur blanc, volontairement invisibles). */
.mgo-aboutpage-block .mgo-feature {
  border: 1px solid var(--mgo-line);
}

.mgo-aboutpage-garanties {
  margin-top: 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mgo-aboutpage-cta {
  margin-top: 100px;
  /* la photo de l'ouvrier déborde le panneau par le haut */
  padding-top: 97px;
}

@media (max-width: 1100px) {
  .mgo-aboutpage-garanties {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mgo-aboutpage {
    margin-top: calc(-1 * (var(--nav-h) + 17px));
    padding-top: calc(var(--nav-h) + 41px);
  }

  .mgo-aboutpage-stats,
  .mgo-aboutpage-block {
    margin-top: 64px;
  }

  .mgo-aboutpage-cta {
    margin-top: 64px;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .mgo-aboutpage-garanties {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FOIRE AUX QUESTIONS (bas de la page Services)
   Accordéon en <details>/<summary> natifs, habillé comme les cartes du site :
   fond blanc, rayon 33, filet #ededed.
   ════════════════════════════════════════════════════════════════════════ */
.mgo-faq {
  margin-top: 100px;
}

.mgo-faq .mgo-lead--center {
  margin-top: 10px;
}

.mgo-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  margin: 40px auto 0;
}

.mgo-faq-item {
  border: 1px solid var(--mgo-line);
  border-radius: 33px;
  background: #fff;
}

.mgo-faq-item[open] {
  border-color: #d8dde6;
}

/* Le triangle natif du <summary> est remplacé par le chevron du gabarit */
.mgo-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 30px;
  list-style: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  color: var(--mgo-ink);
}

.mgo-faq-question::-webkit-details-marker {
  display: none;
}

.mgo-faq-question:hover {
  color: var(--mgo-blue);
}

.mgo-faq-question:focus-visible {
  outline: 2px solid var(--mgo-blue);
  outline-offset: -4px;
  border-radius: 33px;
}

.mgo-faq-chevron {
  flex: 0 0 auto;
  color: var(--mgo-blue);
  transition: transform 0.2s ease;
}

.mgo-faq-item[open] .mgo-faq-chevron {
  transform: rotate(180deg);
}

.mgo-faq-answer {
  padding: 0 30px 26px;
  font-size: 17px;
  line-height: 27px;
  color: var(--mgo-muted);
  /* réponse en texte simple : les sauts de ligne saisis restent visibles */
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  .mgo-faq-chevron {
    transition: none;
  }
}

@media (max-width: 640px) {
  .mgo-faq {
    margin-top: 64px;
  }

  .mgo-faq-item {
    border-radius: 26px;
  }

  .mgo-faq-question {
    padding: 20px 22px;
    font-size: 17px;
    line-height: 25px;
  }

  .mgo-faq-answer {
    padding: 0 22px 22px;
    font-size: 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   NAV : AVATAR DU COMPTE CONNECTÉ
   N'apparaît que si un utilisateur est authentifié (site vitrine : ce sont
   les comptes de l'équipe). Le balisage réutilise .nav-dropdown / .nav-avatar /
   .dropdown-* du projet, donc public/js/app.js le pilote tel quel ; il ne reste
   ici que l'habillage aux couleurs de la maquette.
   ════════════════════════════════════════════════════════════════════════ */
/* La rangée de droite sépare largement les liens du bouton de devis ;
   l'avatar, lui, doit rester collé au bouton : on annule l'écart de la rangée
   pour ne garder que 14 px, quel que soit le palier responsive. */
.mgo-nav-account {
  flex: 0 0 auto;
  margin-left: calc(14px - var(--mgo-right-gap));
}

/* Bleu de la marque plutôt que le noir du bouton de devis : deux pastilles
   sombres côte à côte alourdissaient le coin, et le bleu distingue l'accès au
   compte de l'appel à l'action. */
.mgo-nav-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #033a89;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mgo-nav-avatar:hover {
  background: #05307a;
}

.mgo-nav-avatar:focus-visible {
  outline: 2px solid var(--mgo-blue, #033a89);
  outline-offset: 3px;
}

/* Panneau déroulant : mêmes rayons et filets que les cartes du site */
.mgo-nav-dropdown {
  top: calc(100% + 14px);
  min-width: 260px;
  padding: 10px;
  border: 1px solid var(--mgo-nav-line);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}

.mgo-nav-dropdown .dropdown-item {
  border-radius: 14px;
  font-size: 0.95rem;
}

.mgo-nav-dropdown .dropdown-item:hover {
  background: #f4f6fa;
}

.mgo-nav-dropdown .dropdown-item.active {
  color: var(--mgo-blue, #033a89);
}

/* Sous 900 px la nav passe au burger : le compte vit dans le menu plein écran */
@media (max-width: 900px) {
  .mgo-nav-account {
    display: none;
  }
}

/* ── Module Services (back office) ──
      Mêmes composants que les Réalisations, au format paysage du carrousel. ── */
.service-thumb img {
  display: block;
  width: 64px;
  height: 46px;
  object-fit: cover;
  border-radius: 6px;
}

.service-show-image {
  margin-bottom: 20px;
}

.service-show-image img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 12px;
}

/* Zone de dépôt au format paysage des cartes du carrousel */
.media-dropzone-service {
  aspect-ratio: 382 / 272;
  max-width: 300px;
}

.media-dropzone-service img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prestations sur la fiche : une par ligne, comme à la saisie */
.service-show-items {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
}

/* ════════════════════════════════════════════════════════════════════════
   PAGES LÉGALES
   Habillage aux couleurs de la maquette. La structure (grille sommaire +
   contenu) et le JS qui construit le sommaire sont ceux d'origine : tout se
   joue ici en présentation, styles.css n'est pas touché.
   ════════════════════════════════════════════════════════════════════════ */
.mgo-legalpage {
  /* même bandeau clair passant derrière la nav que les autres pages internes */
  margin-top: -125px;
  padding: 125px 0 100px;
  background: var(--mgo-hero-bg);
}

.maintenance-banner + main .mgo-legalpage {
  margin-top: 0;
  padding-top: 32px;
}

/* Largeur alignée sur .mgo-wrap (1280 - 2 x 20 = 1240 de contenu) */
.mgo-legalpage .legal-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 20px 0;
}

.mgo-legalpage .legal-layout {
  gap: 32px;
  grid-template-columns: 280px minmax(0, 1fr);
}

.mgo-legalpage .legal-layout-solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
  margin: 0 auto;
}

/* ── Contenu : une carte blanche comme partout ailleurs ── */
.mgo-legalpage .legal-main {
  --legal-card-pad: 48px;

  padding: var(--legal-card-pad);
  border: 1px solid var(--mgo-line);
  border-radius: 33px;
  background: #fff;
}

.mgo-legalpage #legal-title {
  margin: 0 0 28px;
  font-size: clamp(1.7rem, 3vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mgo-ink);
}

.legal-updated {
  margin: 36px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--mgo-line);
  font-size: 15px;
  color: #6b7280;
}

/* ── Colonne de gauche : sommaire et liens, en cartes ── */
/* Le JS décale le sommaire de la hauteur du H1 ; la carte ajoute son propre
   rembourrage, qu'il faut compenser pour rester aligné sur le texte. */
.mgo-legalpage .legal-aside {
  top: 24px;
  margin-top: calc(var(--legal-title-h, 0px) + 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mgo-legalpage .legal-toc,
.mgo-legalpage .legal-seealso {
  padding: 22px 24px;
  border: 1px solid var(--mgo-line);
  border-radius: 24px;
  background: #fff;
}

.mgo-legalpage .legal-seealso {
  margin-top: 0;
}

.mgo-legalpage .legal-aside-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mgo-muted);
}

.mgo-legalpage .legal-toc a {
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--mgo-muted);
  text-decoration: none;
}

.mgo-legalpage .legal-toc a:hover {
  background: var(--mgo-hero-bg);
  color: var(--mgo-ink);
}

.mgo-legalpage .legal-toc li.active > a {
  background: #eaf0fa;
  color: var(--mgo-blue);
  font-weight: 600;
}

.mgo-legalpage .legal-toc .toc-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--mgo-blue);
  opacity: 0.55;
}

.mgo-legalpage .legal-toc li.active .toc-num {
  opacity: 1;
}

.mgo-legalpage .legal-toc .toc-l3 a {
  padding-left: 34px;
  font-size: 14px;
}

.mgo-legalpage .legal-seealso a {
  display: block;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--mgo-blue);
  text-decoration: none;
}

.mgo-legalpage .legal-seealso a:hover {
  background: var(--mgo-hero-bg);
  text-decoration: underline;
}

/* ── Contenu riche saisi au back office ── */
.mgo-legalpage .rich-html {
  font-size: 17px;
  line-height: 29px;
  color: var(--mgo-muted);
  /* Le contenu est saisi au back office : une URL ou un jeton sans espace
     débordait de la colonne sur les petits écrans (à 320 px,
     « https://ec.europa.eu/consumers/odr » des mentions légales). */
  overflow-wrap: break-word;
}

.mgo-legalpage .rich-html > :first-child {
  margin-top: 0;
}

.mgo-legalpage .rich-html h2 {
  margin: 40px 0 14px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mgo-ink);
  /* la nav n'est pas fixe : une petite marge suffit à l'ancrage du sommaire */
  scroll-margin-top: 32px;
}

.mgo-legalpage .rich-html h3 {
  margin: 28px 0 10px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--mgo-ink);
  scroll-margin-top: 32px;
}

/* Le contenu saisi enveloppe les titres dans <strong><em> : l'italique d'un
   titre relève de la mise en page, pas de la rédaction, et détonne face aux
   titres droits du reste du site. Retirer ces deux règles pour rendre la main
   à l'éditeur, ou retirer les <em> depuis le back office. */
.mgo-legalpage .rich-html h2 em,
.mgo-legalpage .rich-html h3 em {
  font-style: normal;
}

.mgo-legalpage .rich-html p {
  margin: 0 0 16px;
}

.mgo-legalpage .rich-html ul,
.mgo-legalpage .rich-html ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.mgo-legalpage .rich-html li {
  margin-bottom: 8px;
}

.mgo-legalpage .rich-html a {
  color: var(--mgo-blue);
}

.mgo-legalpage .rich-html strong {
  color: var(--mgo-ink);
}

.mgo-legalpage .rich-html blockquote {
  margin: 22px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--mgo-blue);
  color: var(--mgo-ink);
}

.mgo-legalpage .rich-html hr {
  margin: 32px 0;
  border: none;
  border-top: 1px solid var(--mgo-line);
}

/* Les tableaux ne doivent jamais élargir la page */
.mgo-legalpage .rich-html table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 15px;
}

.mgo-legalpage .rich-html th,
.mgo-legalpage .rich-html td {
  padding: 10px 14px;
  border: 1px solid var(--mgo-line);
  text-align: left;
}

.mgo-legalpage .rich-html th {
  background: var(--mgo-hero-bg);
  color: var(--mgo-ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .mgo-legalpage {
    margin-top: calc(-1 * (var(--nav-h) + 17px));
    padding-top: calc(var(--nav-h) + 41px);
  }

  .mgo-legalpage .legal-page {
    padding-top: 24px;
  }

  .mgo-legalpage .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* Le sommaire repasse au-dessus du contenu : plus de décalage à compenser */
  .mgo-legalpage .legal-aside {
    position: static;
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .mgo-legalpage .legal-main {
    --legal-card-pad: 24px;

    border-radius: 26px;
  }

  .mgo-legalpage .legal-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mgo-legalpage .rich-html {
    font-size: 16px;
    line-height: 27px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CORRECTIFS RESPONSIVE (back office)
   ════════════════════════════════════════════════════════════════════════ */

/* Interrupteur actif/inactif des listes : la case à cocher est superposée à la
   piste en `position: absolute` sans `left`/`top`, donc placée à sa position
   statique - juste APRÈS la piste, et non par-dessus. Invisible (opacity: 0),
   elle décalait la zone cliquable de 44 px et faisait dépasser la carte de 5 px
   en affichage mobile (toutes les listes du back office sous 720 px).
   On l'épingle sur sa piste. */
.toggle input {
  left: 0;
  top: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   ESPACE CLIENT (/mon-espace-client)
   L'ancienne coque skeleton (navbar propre + aside fixe repliable) est
   remplacée par la coque publique : la nav et le pied de page du site, un
   en-tête à pastille, des onglets et des cartes blanches à rayon 33 px.
   La classe `mgo-form` du gabarit apporte déjà tout l'habillage des champs
   et des boutons : on ne décrit ici que la mise en page propre au compte.
   ════════════════════════════════════════════════════════════════════════ */

.mgo-account-inner {
  max-width: 860px;
  padding-top: 40px;
}

/* ── Bandeau d'identité ── */
.mgo-account-id {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto 26px;
  padding: 18px 24px;
  border: 1px solid var(--mgo-line);
  border-radius: 33px;
  background: #fff;
}

.mgo-account-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--mgo-blue);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.mgo-account-id-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.mgo-account-id-text strong {
  font-size: 17px;
  font-weight: 600;
  color: var(--mgo-ink);
}

.mgo-account-mail {
  font-size: 14px;
  color: var(--mgo-muted);
  overflow-wrap: anywhere;
}

.mgo-account-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* ── Onglets ── */
.mgo-account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.mgo-account-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--mgo-line);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--mgo-muted);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.mgo-account-tabs a:hover {
  border-color: #d6d6d6;
  color: var(--mgo-ink);
}

.mgo-account-tabs a.is-active {
  border-color: var(--mgo-blue);
  background: var(--mgo-blue);
  color: #fff;
}

/* Le lien vers le back office n'est pas une section du compte : poussé à
   droite et rendu discret pour ne pas se lire comme un troisième onglet. */
.mgo-account-tab--aside {
  margin-left: auto;
}

/* ── Cartes ── */
.mgo-account .card {
  margin-bottom: 20px;
  padding: 32px;
  border: 1px solid var(--mgo-line);
  border-radius: 33px;
  background: #fff;
  box-shadow: none;
}

.mgo-account .card h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mgo-ink);
}

.mgo-account .card > .hint {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--mgo-muted);
}

.mgo-account .card form .hint {
  font-size: 14px;
  color: var(--mgo-muted);
}

/* ── Champ non modifiable (l'e-mail sur la fiche profil) ── */
.mgo-account .field-static {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mgo-muted);
}

.mgo-account .input-disabled {
  display: flex;
  align-items: center;
  height: 55px;
  margin-top: 8px;
  padding: 0 22px;
  border: 1px solid var(--mgo-line);
  border-radius: 40px;
  background: var(--mgo-hero-bg);
  color: var(--mgo-muted);
  font-weight: 400;
}

/* ── Repères du compte ── */
.mgo-account .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.mgo-account .info-box {
  padding: 16px 20px;
  border: 1px solid var(--mgo-line);
  border-radius: 20px;
  background: var(--mgo-hero-bg);
}

.mgo-account .info-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mgo-muted);
}

.mgo-account .info-box code {
  font-size: 12px;
  overflow-wrap: anywhere;
  color: var(--mgo-muted);
}

/* ── Compte à rebours des fenêtres d'identité ── */
.mgo-account .window-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--mgo-band);
  font-size: 13px;
  font-weight: 600;
  color: var(--mgo-muted);
}

/* ── Demande de changement d'e-mail en attente ── */
.mgo-account .pending-request {
  padding: 20px 22px;
  border: 1px solid #fde68a;
  border-radius: 20px;
  background: #fef3c7;
}

.mgo-account .pending-request .hint {
  margin-top: 0;
  color: #78350f;
}

/* ── Zone de danger ── */
.mgo-account .card-danger {
  border-color: #fecaca;
  background: #fef2f2;
}

.mgo-account .card-danger .danger-title,
.mgo-account .danger-text {
  color: #b91c1c;
}

.mgo-account .card-danger .hint {
  color: #7f1d1d;
}

/* ── Boutons en pilule, comme les pages de formulaire ── */
/* Largeur au contenu : sur une page de connexion le bouton pleine largeur est
   l'action unique, ici ce sont des actions parmi d'autres dans une fiche. */
.mgo-account .btn {
  width: auto;
  align-self: flex-start;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}

/* Boutons de la zone de danger : ni .mgo-form ni .mgo-account ne les
   habillaient, le bouton de suppression se lisait comme un simple lien. */
.mgo-account .btn-outline-danger {
  background: #fff;
  border-color: #fecaca;
  color: #b91c1c;
}

.mgo-account .btn-outline-danger:hover:not(:disabled) {
  background: #fef2f2;
}

.mgo-account .btn-danger {
  background: #dc2626;
  color: #fff;
}

.mgo-account .btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

.mgo-account .btn-small {
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
}

.mgo-account .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 720px) {
  .mgo-account-inner {
    padding-top: 24px;
  }

  .mgo-account-id {
    flex-wrap: wrap;
    padding: 18px;
    border-radius: 24px;
  }

  .mgo-account-tags {
    justify-content: flex-start;
    width: 100%;
  }

  /* Les onglets prennent toute la largeur, le lien back office repasse
     dessous plutôt que de rester collé à droite. */
  .mgo-account-tabs a {
    flex: 1 1 auto;
    justify-content: center;
  }

  .mgo-account-tab--aside {
    margin-left: 0;
    flex-basis: 100%;
  }

  .mgo-account .card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .mgo-account .btn {
    width: 100%;
  }
}

/* ══════════════════ PAGE DE CONFIRMATION ══════════════════
   Page de remerciement affichée après l'envoi du formulaire de contact
   (templates/confirmation/index.html.twig). Elle reprend le fond gris et la
   carte blanche des pages de formulaire, mais centrée et sans champs. */
.mgo-form--confirm .mgo-formpage-inner {
  padding-top: 20px;
}

.mgo-confirm-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 40px 44px;
  border: 1px solid var(--mgo-line);
  border-radius: 33px;
  background: #fff;
  text-align: center;
}

/* Pastille de validation, reprise du bleu des panneaux de la maquette */
.mgo-confirm-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--mgo-blue) 0%, var(--mgo-blue-deep) 100%);
  color: #fff;
}

.mgo-confirm-card .mgo-formpage-eyebrow {
  margin-bottom: 16px;
}

.mgo-confirm-lead {
  max-width: 480px;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
}

.mgo-confirm-note {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--mgo-muted);
}

.mgo-confirm-note a {
  color: var(--mgo-blue);
  font-weight: 600;
  text-decoration: none;
}

.mgo-confirm-note a:hover {
  text-decoration: underline;
}

.mgo-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

@media (max-width: 640px) {
  .mgo-confirm-card {
    padding: 32px 22px 30px;
    border-radius: 26px;
  }

  .mgo-confirm-check {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }

  .mgo-confirm-actions .mgo-btn {
    width: 100%;
    justify-content: center;
  }
}