/* ==========================================================================
   OH MY GUY — CSS du thème
   Charge APRÈS omg-tokens.css, qui apporte la base, les composants communs,
   les animations et les trois seuils. Ce fichier n'ajoute que ce qui manque :
   mise en page, barre desktop, barre mobile, tiroir, pied de page.

   Aucune couleur ni police en dur. Uniquement var(--omg-*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Enveloppes de page
   -------------------------------------------------------------------------- */

.omg-page {
  width: 100%;
  max-width: var(--omg-page-max);
  margin: 0 auto;
  background: var(--omg-paper);
}

.omg-main { display: block; }

.omg-section { padding-block: var(--omg-pad-y); }

.omg-wrap {
  padding-inline: var(--omg-pad-x);
}

.omg-section__tete { max-width: 760px; margin-bottom: clamp(28px, 3vw, 48px); }
.omg-section__tete h1 { margin: 14px 0 0; }
.omg-section__tete h2 { margin: 14px 0 0; }

.omg-lede {
  margin: 18px 0 0;
  font: var(--omg-body);
  color: var(--omg-text);
  max-width: 62ch;
}

.omg-prose { font: var(--omg-body); color: var(--omg-text); max-width: 68ch; }
.omg-prose > * + * { margin-top: 1.1em; }
.omg-prose h2 { font-size: var(--omg-h3); margin-top: 1.6em; }
.omg-prose h3 { font-size: var(--omg-h4); margin-top: 1.4em; }
.omg-prose a { border-bottom: 1px solid var(--omg-line); }
.omg-prose a:hover { border-bottom-color: var(--omg-accent); }

/* Média : le cadre et le crédit viennent des tokens, on complète le figure. */
.omg-media { margin: 0; }
.omg-media__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   BARRE DESKTOP
   La règle .omg-nav (position, fond, flou, états compact et masqué) est déjà
   dans les tokens. Ici : la structure interne relevée dans la maquette.
   -------------------------------------------------------------------------- */

.omg-nav__logo { display: block; flex: none; transition: transform .4s var(--omg-ease); }
.omg-nav__logo:hover { transform: scale(1.05); }

.omg-nav__droite {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
}

/* Bloc encadré « Univers sur mesure » : le libellé chevauche le filet. */
.omg-nav__univers {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  padding: 9px clamp(12px, 1.4vw, 20px) 8px;
  border: 1px solid rgba(14, 59, 78, .22);
}

.omg-nav__univers-titre {
  position: absolute;
  top: -7px;
  left: 16px;
  padding: 0 7px;
  background: var(--omg-paper);
  font: 600 9px/1 var(--omg-sans);
  letter-spacing: var(--omg-ls-eyebrow);
  text-transform: uppercase;
  color: var(--omg-accent);
}

.omg-nav .omg-link-under.is-courant { border-bottom-color: var(--omg-accent); }

/* Menus déroulants : la zone de survol déborde vers le bas pour que le
   pointeur puisse descendre dans le panneau sans le refermer. */
.omg-nav__groupe {
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: -14px;
}

.omg-nav__declencheur {
  border: 0;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  padding-top: 5px;
  padding-bottom: 5px;
}

.omg-dropdown--maison { width: 240px; }

/* Les tokens posent display:flex sur .omg-dropdown, ce qui l'emporte sur le
   display:none implicite de l'attribut hidden. On le rétablit. */
.omg-dropdown[hidden] { display: none; }

.omg-nav__reseaux {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 6px;
}

.omg-nav__reseaux a {
  display: block;
  color: var(--omg-blue);
  transition: transform .35s var(--omg-ease), color .35s ease;
}
.omg-nav__reseaux a:hover { transform: scale(1.4); color: var(--omg-accent); }

/* Demande de Marie du 14 septembre 2026 : le menu passe de 11,5 à 12,5 px,
   il paraissait très petit. (L'essai du bloc Univers en blanc sur bleu a
   été retiré le 15/09 : non retenu.) */
.omg-nav .omg-link-under { font-size: 12.5px; }
.omg-nav__univers-titre { font-size: 10px; }

/* --------------------------------------------------------------------------
   BARRE MOBILE
   Masquée au-dessus de 1024 px ; les tokens la révèlent en dessous.
   -------------------------------------------------------------------------- */

.omg-nav-mobile {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 14px 7px 10px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--omg-line-soft);
}

.omg-nav-mobile__img { height: 39px; width: auto; display: block; }

.omg-nav-mobile__util {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2vw, 22px);
}

.omg-nav-mobile__reseaux {
  display: flex;
  align-items: center;
  gap: clamp(13px, 3vw, 18px);
}
.omg-nav-mobile__reseaux a { display: block; color: var(--omg-blue); }

.omg-nav-mobile__cta {
  height: 42px;
  padding: 0 clamp(14px, 3.4vw, 20px);
  flex: none;
  outline-offset: -4px;
  font-size: 10.5px;
  letter-spacing: .12em;
  white-space: nowrap;
}

/* Bouton d'ouverture : trois barres, la dernière plus courte. */
.omg-burger {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--omg-line-strong);
  background: transparent;
  cursor: pointer;
}
.omg-burger span { width: 22px; height: 1.5px; background: var(--omg-navy); display: block; }
.omg-burger span:last-child { width: 13px; }

/* --------------------------------------------------------------------------
   TIROIR PLEIN ÉCRAN
   -------------------------------------------------------------------------- */

.omg-tiroir {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: none;
  flex-direction: column;
  background: var(--omg-navy);
  padding: 16px 24px 40px;
  overflow-y: auto;
  animation: omgdrawer .4s var(--omg-ease);
}
.omg-tiroir[data-ouvert] { display: flex; }

.omg-tiroir__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.omg-tiroir__enseigne {
  font: 600 10.5px/1 var(--omg-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(168, 198, 212, .8);
}

.omg-tiroir__fermer {
  width: 46px;
  height: 46px;
  flex: none;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.omg-tiroir__fermer span {
  position: absolute;
  left: 12px;
  top: 22px;
  width: 20px;
  height: 1.5px;
  background: #fff;
  display: block;
}
.omg-tiroir__fermer span:first-child { transform: rotate(45deg); }
.omg-tiroir__fermer span:last-child  { transform: rotate(-45deg); }

/* Arborescence entièrement dépliée : aucun sous-menu replié. */
.omg-tiroir__univers {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 30px;
}
.omg-tiroir__univers a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(168, 198, 212, .2);
  font-family: var(--omg-display);
  font-size: 32px;
  line-height: 1.1;
  color: #fff;
}
.omg-tiroir__num {
  font: 600 10px/1 var(--omg-sans);
  letter-spacing: .2em;
  color: var(--omg-accent);
}

.omg-tiroir__colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 20px;
  margin-top: 32px;
}
.omg-tiroir__colonne { display: flex; flex-direction: column; gap: 12px; }
.omg-tiroir__titre {
  font: 600 9.5px/1 var(--omg-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--omg-accent);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(168, 198, 212, .22);
}
.omg-tiroir__colonne a {
  font: 400 14.5px/1.4 var(--omg-sans);
  color: rgba(255, 255, 255, .88);
  padding: 5px 0;
}

.omg-tiroir__bas {
  margin-top: auto;
  padding-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.omg-tiroir__rdv { height: var(--omg-btn-h); font-size: 12.5px; }
.omg-tiroir__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
  font: 600 12.5px/1 var(--omg-sans);
  letter-spacing: var(--omg-ls-btn);
  text-transform: uppercase;
}
.omg-tiroir__tel:hover { color: #fff; border-color: var(--omg-accent); }
.omg-tiroir__reseaux {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 6px 0 2px;
}
.omg-tiroir__reseaux a { display: block; color: #fff; }
.omg-tiroir__showroom {
  margin: 0;
  font: 300 13.5px/1.6 var(--omg-sans);
  color: rgba(168, 198, 212, .86);
}

/* Le corps ne défile plus derrière le tiroir ouvert. */
body.omg-tiroir-ouvert { overflow: hidden; }

/* --------------------------------------------------------------------------
   BOUTONS ÉPINGLÉS
   Les tokens posent la position et les révèlent sous 1024 px.
   -------------------------------------------------------------------------- */

.omg-pin-rdv { font-size: 12.5px; box-shadow: 0 14px 34px rgba(6, 28, 38, .32); }
.omg-pin-top {
  background: var(--omg-paper);
  border: 1px solid var(--omg-line-strong);
  color: var(--omg-navy);
}

/* --------------------------------------------------------------------------
   PIED DE PAGE
   -------------------------------------------------------------------------- */

/* Fond gris perle, ouvert par un liseré pointillé doré sur toute la
   largeur — réglages demandés par Marie le 11 septembre 2026. Le liseré
   reprend les tirets dorés de la maquette : il sépare le pied de page des
   bandeaux gris perle qui le précèdent, comme celui de la page Contact. */
.omg-footer {
  position: relative;
  padding-block: var(--omg-pad-y) clamp(30px, 3vw, 48px);
  background: var(--omg-paper-alt);
}
.omg-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--omg-accent) 0 6px, transparent 6px 12px);
}

.omg-footer__inner { padding-inline: var(--omg-pad-x); }

.omg-footer__grille {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
  gap: clamp(24px, 3.29vw, 56px);
}

.omg-footer__logo { display: inline-block; transition: transform .4s var(--omg-ease); }
.omg-footer__logo:hover { transform: scale(1.05); }
.omg-footer__logo img { height: 110px; width: auto; display: block; }

.omg-footer__baseline {
  margin: 22px 0 0;
  font: 300 15px/1.7 var(--omg-sans);
  color: var(--omg-text-mute);
  max-width: 280px;
}

.omg-footer__reseaux { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.omg-footer__reseaux a { display: block; color: var(--omg-blue); transition: transform .35s var(--omg-ease), color .35s ease; }
.omg-footer__reseaux a:hover { transform: scale(1.3); color: var(--omg-accent); }

.omg-footer__titre {
  display: block;
  font: 600 11.5px/1 var(--omg-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--omg-navy);
}

.omg-footer__liens {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 20px;
  font: 400 15px/1.5 var(--omg-sans);
}
.omg-footer__liens a { color: var(--omg-text-mute); }
.omg-footer__liens a:hover { color: var(--omg-accent); }

.omg-footer__adresse {
  margin-top: 20px;
  font: 400 15px/1.75 var(--omg-sans);
  font-style: normal;
  color: var(--omg-text-mute);
}

.omg-footer__contact {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 500 15px/1.5 var(--omg-sans);
}
.omg-footer__contact a { color: var(--omg-navy); }
.omg-footer__contact a:hover { color: var(--omg-accent); }

.omg-footer__rdv { margin-top: 24px; }

/* Essai du 14 septembre 2026 : le bleu des anciens boutons d'articles
   (#15607c), que Marie aime, sur le bouton du pied de page. La forme reste
   celle des boutons du site. Pour revenir à l'or, retirer ce bloc. */
.omg-footer .omg-btn.omg-footer__rdv {
  background: #15607C;
  color: #FFFFFF;
}
.omg-footer .omg-btn.omg-footer__rdv:hover,
.omg-footer .omg-btn.omg-footer__rdv:focus-visible {
  background: #0E3B4E;
  color: #FFFFFF;
}

.omg-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--omg-line);
  font: 400 13px/1 var(--omg-sans);
  color: var(--omg-text-mute);
}
.omg-footer__legal-liens { display: flex; gap: 24px; }
.omg-footer__legal a { color: var(--omg-text-mute); }
.omg-footer__legal a:hover { color: var(--omg-accent); }


/* --------------------------------------------------------------------------
   CARTE D'UNIVERS
   Sert à l'accueil et à la page hub : le composant reste dans la feuille
   principale plutôt que d'être dupliqué dans les deux.
   -------------------------------------------------------------------------- */

.omg-carte {
  position: relative;
  display: block;
  height: clamp(360px, 38vw, 560px);
  overflow: hidden;
  background: var(--omg-navy);
}
.omg-carte__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--omg-t-slow) var(--omg-ease);
}
.omg-carte:hover .omg-carte__img { transform: scale(1.045); }

.omg-carte__voile { position: absolute; inset: 0; z-index: 2; }

.omg-carte__corps {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 2.2vw, 38px);
  right: clamp(22px, 2.2vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.omg-carte--bottom .omg-carte__corps { bottom: clamp(24px, 2.4vw, 40px); }
.omg-carte--top .omg-carte__corps    { top: clamp(24px, 2.4vw, 40px); }

.omg-carte__titre {
  font-family: var(--omg-display);
  font-size: var(--omg-h3);
  line-height: 1.05;
  color: #fff;
}
.omg-carte__accroche {
  font: 300 15px/1.6 var(--omg-sans);
  color: rgba(255, 255, 255, .88);
  max-width: 42ch;
}
.omg-carte__lien {
  font: 600 11.5px/1 var(--omg-sans);
  letter-spacing: var(--omg-ls-btn);
  text-transform: uppercase;
  color: var(--omg-accent);
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  align-self: flex-start;
  transition: border-color var(--omg-t-fast) ease;
}
.omg-carte:hover .omg-carte__lien { border-bottom-color: var(--omg-accent); }

@media (max-width: 1023px) {
  .omg-carte { height: clamp(320px, 62vw, 460px); }
}

/* --------------------------------------------------------------------------
   APPARITION AU SCROLL
   Posée par IntersectionObserver, une seule fois par élément.
   -------------------------------------------------------------------------- */

/* Les blocs ne sont masqués que si le script a pris la main : sans lui, la
   page reste lisible au lieu de rester blanche. */
html[data-omg-anim="1"] [data-omg-rise] { opacity: 0; }
html[data-omg-anim="1"] [data-omg-rise].is-visible {
  animation: omgrise .6s var(--omg-ease) forwards;
}

@media (prefers-reduced-motion: reduce) {
  html[data-omg-anim="1"] [data-omg-rise] { opacity: 1; }
}

/* --------------------------------------------------------------------------
   SEUILS
   1024 px : bascule mobile complète. 768 px : barre sur deux rangées.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .omg-nav-mobile { display: flex; }

  .omg-footer__grille { grid-template-columns: 1fr 1fr; }
  .omg-footer__marque { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .omg-nav-mobile { flex-wrap: wrap; }
  .omg-nav-mobile__img { height: 33px; }
  .omg-nav-mobile__util { order: 3; width: 100%; justify-content: space-between; }

  .omg-tiroir__colonnes { grid-template-columns: 1fr; }

  .omg-footer__grille { grid-template-columns: 1fr; }
  .omg-footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --------------------------------------------------------------------------
   PAGE ÉDITORIALE
   -------------------------------------------------------------------------- */

.omg-page-simple__tete { padding-block: clamp(30px, 4vw, 64px) clamp(20px, 2.4vw, 36px); }
.omg-page-simple__titre { margin: 14px 0 0; max-width: 22ch; }

.omg-page-simple__hero {
  height: clamp(300px, 38vw, 560px);
  margin-inline: max(clamp(10px, 3vw, 24px), calc((100% - 1800px) / 2));
}

.omg-page-simple__corps { padding-top: clamp(30px, 3.4vw, 56px); }

.omg-page-simple__pages {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  font: 500 13px/1 var(--omg-sans);
}

.omg-fil--clair { position: static; color: var(--omg-grey); }
.omg-fil--clair a { color: var(--omg-grey); }
.omg-fil--clair a:hover { color: var(--omg-accent); }

@media (max-width: 1023px) {
  .omg-page-simple__titre { max-width: none; }
  .omg-page-simple__hero { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   À PROPOS
   Aucun figement ici : la photo scrolle normalement, à tous les formats.
   C'est un point de recette explicite du kit.
   -------------------------------------------------------------------------- */

.omg-apropos__tete { padding-block: clamp(30px, 4vw, 64px) 0; }
.omg-apropos__titre { margin: 14px 0 0; }

.omg-apropos__grille {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.omg-apropos__portrait { height: clamp(420px, 46vw, 700px); }

.omg-parcours__liste { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.omg-parcours__etape {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(22px, 2.4vw, 34px) 0;
  border-bottom: 1px solid var(--omg-line);
}
.omg-parcours__etape:last-child { border-bottom: 0; }
.omg-parcours__annee {
  font-family: var(--omg-display);
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1;
  color: var(--omg-accent);
}
.omg-parcours__titre { margin: 0 0 10px; font-size: var(--omg-h4); }
.omg-parcours__corps p { margin: 0; font: var(--omg-body); color: var(--omg-text); max-width: 62ch; }

.omg-apropos__grille-photos { grid-template-columns: repeat(4, 1fr); }
.omg-apropos__photo { aspect-ratio: 1 / 1; }
.omg-apropos__cta { margin-top: clamp(30px, 3.4vw, 52px); text-align: center; }

@media (max-width: 1023px) {
  .omg-apropos__grille { grid-template-columns: 1fr; }
  .omg-apropos__portrait { height: clamp(320px, 62vw, 480px); }
  .omg-parcours__etape { grid-template-columns: 1fr; gap: 8px; }
  .omg-apropos__grille-photos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .omg-apropos__grille-photos {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 12px;
  }
  .omg-apropos__grille-photos > * { flex: 0 0 78%; scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   ACCUEIL — QUATRE BONNES RAISONS DE POUSSER LA PORTE

   La maquette alternait les arrondis carte par carte : haut, bas, haut, bas.
   La cliente les veut groupés sur grand écran — les deux premières arrondies
   en haut, les deux dernières en bas — et l'alternance conservée au téléphone.

   Le côté de l'arrondi commande la mise en page de la carte : le texte se
   pose du côté plat, et le voile dégradé part de ce même côté. Les trois
   propriétés se déclarent donc ensemble.

   `!important` est nécessaire : le balisage porté garde ses styles en ligne,
   qui font foi partout ailleurs. inc/accueil.php a seulement retiré
   `border-radius` du lien et posé les classes.
   -------------------------------------------------------------------------- */

.omg-raison--01, .omg-raison--02 { --omg-raison-rayon: 280px; --omg-raison-decalage: 48px; }
.omg-raison--03, .omg-raison--04 { --omg-raison-rayon: 200px; --omg-raison-decalage: 44px; }

/* Grand écran et tablette : 01 et 02 en haut, 03 et 04 en bas. */
.omg-raison--01,
.omg-raison--02 {
  border-radius: var(--omg-raison-rayon) var(--omg-raison-rayon) 0 0;
}
.omg-raison--03,
.omg-raison--04 {
  border-radius: 0 0 var(--omg-raison-rayon) var(--omg-raison-rayon);
}

.omg-raison--02 > div:nth-of-type(1) {
  background: linear-gradient(to top, rgba(14, 59, 78, .85) 0%, rgba(14, 59, 78, .12) 52%, rgba(14, 59, 78, 0) 100%) !important;
}
.omg-raison--02 > div:nth-of-type(2) {
  top: auto !important;
  bottom: var(--omg-raison-decalage) !important;
}

.omg-raison--03 > div:nth-of-type(1) {
  background: linear-gradient(to bottom, rgba(14, 59, 78, .9) 0%, rgba(14, 59, 78, .45) 48%, rgba(14, 59, 78, .05) 100%) !important;
}
.omg-raison--03 > div:nth-of-type(2) {
  bottom: auto !important;
  top: var(--omg-raison-decalage) !important;
}

/* Téléphone : on revient à l'alternance de la maquette, 01 haut, 02 bas,
   03 haut, 04 bas. */
@media (max-width: 767px) {

  .omg-raison--01,
  .omg-raison--03 {
    border-radius: var(--omg-raison-rayon) var(--omg-raison-rayon) 0 0;
  }
  .omg-raison--02,
  .omg-raison--04 {
    border-radius: 0 0 var(--omg-raison-rayon) var(--omg-raison-rayon);
  }

  .omg-raison--02 > div:nth-of-type(1) {
    background: linear-gradient(to bottom, rgba(14, 59, 78, .85) 0%, rgba(14, 59, 78, .12) 52%, rgba(14, 59, 78, 0) 100%) !important;
  }
  .omg-raison--02 > div:nth-of-type(2) {
    bottom: auto !important;
    top: 52px !important;
  }

  .omg-raison--03 > div:nth-of-type(1) {
    background: linear-gradient(to top, rgba(14, 59, 78, .9) 0%, rgba(14, 59, 78, .45) 48%, rgba(14, 59, 78, .05) 100%) !important;
  }
  .omg-raison--03 > div:nth-of-type(2) {
    top: auto !important;
    bottom: var(--omg-raison-decalage) !important;
  }
}

/* --------------------------------------------------------------------------
   VISIONNEUSE PLEIN ÉCRAN DES GALERIES

   Écrite dans le thème, sans bibliothèque ni ressource distante. Le balisage
   est produit par assets/js/theme.js, section 10.

   Le crédit photo suit la règle du site : sur l'image pour un visuel de tête
   ou un héros, sous l'image dans une galerie — ici, dans le pied de la vue.
   -------------------------------------------------------------------------- */

/* Bouton transparent posé sur chaque vignette, sans toucher au balisage porté. */
.omg-visionneuse-ouvrir {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}
.omg-visionneuse-ouvrir:focus-visible {
  outline: 2px solid var(--omg-accent, #C79A3E);
  outline-offset: -4px;
}

body.omg-visionneuse-ouverte { overflow: hidden; }

.omg-visionneuse {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 7vw, 96px) clamp(16px, 5vw, 96px);
  background: rgba(6, 28, 38, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.omg-visionneuse[hidden] { display: none; }

.omg-visionneuse__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.omg-visionneuse__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - clamp(160px, 22vh, 240px));
  object-fit: contain;
  background: var(--omg-navy-deep, #06212C);
}

.omg-visionneuse__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 18px;
  text-align: center;
}
.omg-visionneuse__legende {
  font: 400 14.5px/1.4 'Archivo', sans-serif;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .86);
}
/* Titre et description de la photo, écrits par Nathalie sur sa fiche
   (réunion du 14 septembre 2026). Chacun sur sa ligne ; la description est
   bornée à quatre lignes pour laisser la photo en grand. */
.omg-visionneuse__titre {
  flex-basis: 100%;
  font: 400 clamp(20px, 2vw, 26px)/1.15 var(--omg-display, 'Instrument Serif'), serif;
  color: #fff;
}
.omg-visionneuse__description {
  flex-basis: 100%;
  max-width: 62ch;
  margin: 0 auto;
  font: 300 13.5px/1.6 'Archivo', sans-serif;
  color: rgba(255, 255, 255, .72);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.omg-visionneuse__titre[hidden],
.omg-visionneuse__legende[hidden],
.omg-visionneuse__description[hidden] { display: none; }

/* 15/09/2026 : avec un titre et des détails, le pied sortait de l'écran sur
   un portable (1280 × 800). La photo cède la place au texte, et les lignes
   se rangent : titre, puis légende · crédit · compteur, puis détails. */
.omg-visionneuse__titre { order: 1; }
.omg-visionneuse__legende { order: 2; }
.omg-visionneuse__credit { order: 3; }
.omg-visionneuse__compteur { order: 4; }
.omg-visionneuse__description {
  order: 5;
  flex: 0 0 100%;
  max-width: 100%;
  padding-inline: max(0px, calc((100% - 62ch) / 2));
  box-sizing: border-box;
}
.omg-visionneuse__scene:has(.omg-visionneuse__description:not([hidden])) .omg-visionneuse__image,
.omg-visionneuse__scene:has(.omg-visionneuse__titre:not([hidden])) .omg-visionneuse__image {
  max-height: calc(100vh - clamp(270px, 36vh, 360px));
}

.omg-visionneuse__credit {
  font: 500 9.5px/1.3 'Archivo', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(168, 198, 212, .72);
}
.omg-visionneuse__compteur {
  font: 500 10.5px/1.3 'Archivo', sans-serif;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .5);
}

/* Les trois commandes reprennent les carrés bordés de la maquette. */
.omg-visionneuse__fermer,
.omg-visionneuse__pas {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  background: transparent;
  color: #fff;
  font: 400 24px/1 'Archivo', sans-serif;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.omg-visionneuse__fermer:hover,
.omg-visionneuse__pas:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
}
.omg-visionneuse__fermer:focus-visible,
.omg-visionneuse__pas:focus-visible {
  outline: 2px solid var(--omg-accent, #C79A3E);
  outline-offset: 3px;
}

.omg-visionneuse__fermer { top: clamp(14px, 2.4vw, 30px); right: clamp(14px, 2.4vw, 30px); font-size: 27px; }
.omg-visionneuse__pas--prec { left: clamp(10px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }
.omg-visionneuse__pas--suiv { right: clamp(10px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }

/* Au téléphone, les flèches passent sous la photo : de part et d'autre du
   pied, elles resteraient sur l'image. */
@media (max-width: 639px) {
  .omg-visionneuse { padding: 64px 12px 88px; }
  .omg-visionneuse__pas--prec,
  .omg-visionneuse__pas--suiv {
    top: auto;
    bottom: 20px;
    transform: none;
  }
  .omg-visionneuse__pas--prec { left: 20px; }
  .omg-visionneuse__pas--suiv { right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .omg-visionneuse__fermer,
  .omg-visionneuse__pas { transition: none; }
}

/* --------------------------------------------------------------------------
   PAGES DE SERVICE

   Peau de la page À propos, remplie depuis l'administration. Le gabarit est
   page-service.php, les champs inc/champs-service.php.
   -------------------------------------------------------------------------- */

.omg-service__texte {
  margin-top: 24px;
  font: 300 17px/1.75 'Archivo', sans-serif;
  color: #41565F;
}
.omg-service__texte > *:first-child { margin-top: 0; }
.omg-service__texte > *:last-child { margin-bottom: 0; }
.omg-service__texte p { margin: 0 0 18px; }
.omg-service__texte strong { font-weight: 600; color: #0E3B4E; }
.omg-service__texte a {
  color: #0E3B4E;
  border-bottom: 1px solid rgba(14, 59, 78, .35);
  padding-bottom: 1px;
}
.omg-service__texte a:hover { border-bottom-color: var(--omg-accent, #C79A3E); }

.omg-service__texte h2,
.omg-service__texte h3 {
  margin: 34px 0 14px;
  font-family: var(--omg-display, 'Instrument Serif'), serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #0E3B4E;
}
.omg-service__texte h2 { font-size: clamp(26px, 3vw, 40px); }
.omg-service__texte h3 { font-size: clamp(21px, 2.2vw, 30px); }

.omg-service__texte ul,
.omg-service__texte ol { margin: 0 0 18px; padding-left: 22px; }
.omg-service__texte li { margin-bottom: 9px; }

/* Un tableau — la grille des tarifs — reste lisible et défile seul si besoin. */
.omg-service__texte table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  font: 400 15.5px/1.5 'Archivo', sans-serif;
}
.omg-service__texte th,
.omg-service__texte td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(14, 59, 78, .14);
}
.omg-service__texte th {
  font: 600 10.5px/1.4 'Archivo', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0E3B4E;
  border-bottom-color: rgba(14, 59, 78, .3);
}

.omg-service__carte { text-decoration: none; }
a.omg-service__carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(14, 59, 78, .12);
}

@media (max-width: 900px) {
  .omg-service__section { grid-template-columns: 1fr !important; }
  .omg-service__cartes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .omg-service__cartes { grid-template-columns: 1fr; }
  .omg-service__texte table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  a.omg-service__carte:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   CALE DE LA BARRE DESKTOP

   La barre est fixe depuis omg-tokens.css : elle ne pousse plus le contenu.
   Cette cale rend au corps de page la hauteur de la barre déployée, celle du
   logo. La barre peut alors maigrir au scroll sans que rien ne se décale
   derrière elle — c'était la cause du clignotement.

   Sous 1024 px, la barre desktop disparaît et les jetons posent déjà la cale
   de la barre mobile.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  body { padding-top: var(--omg-nav-h); }
}

/* --------------------------------------------------------------------------
   LOGO RECADRÉ

   Le fichier livré portait 92 px de vide en haut et 82 en bas sur 330 : le
   dessin n'occupait que 47 % de sa boîte. Affiché à 196 px, il laissait une
   soixantaine de pixels de faux padding de chaque côté, davantage en haut.

   Le fichier est recadré sur son encre — l'original reste en
   assets/img/logo-omg-original.png. Les hauteurs suivent, et l'espace se
   règle maintenant au padding de la barre, symétrique.

   Ces deux règles reprennent la main sur celles de maquette.css, calculées
   pour l'ancien fichier et posées en !important.
   -------------------------------------------------------------------------- */

html[data-nav-compact="1"] .omg-nav[data-omg-nav] {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
html[data-nav-compact="1"] .omg-nav[data-omg-nav] a[aria-label] img {
  height: clamp(40px, 3vw, 55px) !important;
}

/* --------------------------------------------------------------------------
   BARRE D'ADMINISTRATION

   Les deux barres du site sont fixes : sans cette compensation, elles
   passeraient sous la barre d'administration de WordPress et le logo s'y
   ferait couper. Ne concerne que les personnes connectées.
   -------------------------------------------------------------------------- */

body.admin-bar .omg-nav,
body.admin-bar .omg-nav-mobile { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .omg-nav,
  body.admin-bar .omg-nav-mobile { top: 46px; }
}

/* --------------------------------------------------------------------------
   BON CADEAU

   La boutique tient en une page : un produit, quelques montants, un
   formulaire. Ni panier, ni compte, ni paiement en ligne.

   Gabarit page-bon-cadeau.php, champs inc/champs-bon-cadeau.php,
   report du montant dans assets/js/theme.js, section 13.
   -------------------------------------------------------------------------- */

.omg-bon__montants {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}

.omg-bon__montant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(24px, 2.6vw, 38px);
  background: #FFFFFF;
  border: 1px solid rgba(14, 59, 78, .12);
  box-shadow: 0 18px 44px rgba(14, 59, 78, .06);
  cursor: pointer;
  text-align: left;
  transition: transform .4s cubic-bezier(.2, .72, .2, 1),
              box-shadow .4s ease,
              border-color .3s ease,
              background .3s ease;
}
.omg-bon__montant:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(14, 59, 78, .12);
  border-color: var(--omg-accent, #C79A3E);
}
.omg-bon__montant:focus-visible {
  outline: 2px solid var(--omg-accent, #C79A3E);
  outline-offset: 3px;
}

/* Le montant retenu : liseré doré, comme les boutons de la maison. */
.omg-bon__montant[aria-pressed="true"] {
  background: #0E3B4E;
  border-color: #0E3B4E;
  outline: 1px dashed var(--omg-accent, #C79A3E);
  outline-offset: -6px;
}
.omg-bon__montant[aria-pressed="true"] .omg-bon__prix { color: var(--omg-accent, #C79A3E); }
.omg-bon__montant[aria-pressed="true"] .omg-bon__couvre { color: rgba(255, 255, 255, .82); }

.omg-bon__prix {
  font-family: var(--omg-display, 'Instrument Serif'), serif;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  color: #0E3B4E;
  transition: color .3s ease;
}
.omg-bon__couvre {
  font: 300 15px/1.5 'Archivo', sans-serif;
  color: #41565F;
  transition: color .3s ease;
}

/* Montant payable en ligne : même carte, devenue lien vers Stripe
   (arbitrage du 14 septembre 2026). */
a.omg-bon__montant {
  color: inherit;
  text-decoration: none;
}
.omg-bon__payer {
  margin-top: auto;
  padding-top: 8px;
  font: 600 11.5px/1 'Archivo', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--omg-accent, #C79A3E);
}
.omg-bon__paiement {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  font: 300 14.5px/1.6 'Archivo', sans-serif;
  color: #41565F;
}

/* Le déroulé, en colonnes numérotées. */
.omg-bon__etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 2.6vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.omg-bon__etapes li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(14, 59, 78, .16);
}
.omg-bon__num {
  font-family: var(--omg-display, 'Instrument Serif'), serif;
  font-size: 17px;
  letter-spacing: .2em;
  color: var(--omg-accent, #C79A3E);
}
.omg-bon__etape-titre {
  font-family: var(--omg-display, 'Instrument Serif'), serif;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.15;
  color: #0E3B4E;
}
.omg-bon__etape-texte {
  font: 300 15.5px/1.65 'Archivo', sans-serif;
  color: #41565F;
}

/* Le formulaire, posé sur le bleu nuit. */
.omg-bon__formulaire label {
  display: block;
  margin-bottom: 18px;
  font: 600 10.5px/1.4 'Archivo', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.omg-bon__formulaire input[type="text"],
.omg-bon__formulaire input[type="email"],
.omg-bon__formulaire input[type="tel"],
.omg-bon__formulaire textarea,
.omg-bon__formulaire select {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 0 16px;
  height: var(--omg-field-h, 54px);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font: 300 16px/1.5 'Archivo', sans-serif;
  box-sizing: border-box;
}
.omg-bon__formulaire textarea { height: auto; padding: 14px 16px; resize: vertical; }
.omg-bon__formulaire input:focus,
.omg-bon__formulaire textarea:focus,
.omg-bon__formulaire select:focus {
  outline: 2px solid var(--omg-accent, #C79A3E);
  outline-offset: 2px;
}
.omg-bon__formulaire ::placeholder { color: rgba(255, 255, 255, .45); }

.omg-bon__formulaire .wpcf7-list-item { display: block; margin: 0 0 10px; }
.omg-bon__formulaire .wpcf7-list-item-label {
  font: 300 15.5px/1.5 'Archivo', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .9);
}

.omg-bon__formulaire input[type="submit"] {
  height: var(--omg-btn-h, 56px);
  padding: 0 34px;
  margin-top: 10px;
  background: var(--omg-accent, #C79A3E);
  color: var(--omg-on-accent, #fff);
  border: 0;
  outline: 1px dashed currentColor;
  outline-offset: -5px;
  font: 600 12.5px/1 'Archivo', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.omg-bon__formulaire input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--omg-shadow-btn, 0 14px 28px rgba(14, 59, 78, .26));
}

.omg-bon__formulaire .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .4);
  font: 300 15px/1.5 'Archivo', sans-serif;
  color: #fff;
}
.omg-bon__formulaire .wpcf7-not-valid-tip {
  margin-top: 7px;
  font: 400 13px/1.4 'Archivo', sans-serif;
  color: #F2C4A0;
}

/* Paiement en ligne (inc/bon-cadeau-paiement.php) : même habit que le
   formulaire de demande, sur deux colonnes. */
.omg-bon__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}
.omg-bon__champ { margin: 0; }
.omg-bon__large { grid-column: 1 / -1; }
.omg-bon__formulaire input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 0 16px;
  height: var(--omg-field-h, 54px);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font: 300 16px/1.5 'Archivo', sans-serif;
  box-sizing: border-box;
}
.omg-bon__formulaire select option { color: #0E3B4E; background: #fff; }
.omg-bon__libre[hidden],
.omg-bon__adresse[hidden] { display: none; }
.omg-bon__case label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 300 15.5px/1.5 'Archivo', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .9);
}
.omg-bon__case input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--omg-accent, #C79A3E); flex: none; }
.omg-bon__case a { color: #fff; }
.omg-bon__piege {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.omg-bon__envoi { margin: 8px 0 0; }
.omg-bon__envoi button {
  height: var(--omg-btn-h, 56px);
  padding: 0 34px;
  background: var(--omg-accent, #C79A3E);
  color: var(--omg-on-accent, #fff);
  border: 0;
  outline: 1px dashed currentColor;
  outline-offset: -5px;
  font: 600 12.5px/1 'Archivo', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.omg-bon__envoi button:hover {
  transform: translateY(-2px);
  box-shadow: var(--omg-shadow-btn, 0 14px 28px rgba(14, 59, 78, .26));
}
.omg-bon__envoi button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.omg-bon__alerte {
  margin: 0 0 26px;
  padding: 14px 18px;
  border: 1px solid #F2C4A0;
  font: 400 15px/1.5 'Archivo', sans-serif;
  color: #fff;
}

/* Le message au retour de Stripe, en tête de page. */
.omg-bon__retour {
  padding: 26px max(clamp(20px,5vw,56px),calc((100% - 1560px) / 2));
  background: #0E3B4E;
  color: #fff;
  font: 400 17px/1.55 'Archivo', sans-serif;
}
.omg-bon__retour p { margin: 0; max-width: 900px; }
.omg-bon__retour--succes { border-top: 4px solid var(--omg-accent, #C79A3E); }

@media (max-width: 700px) {
  .omg-bon__grille { grid-template-columns: 1fr; }
}
.omg-bon__rassurance {
  margin: 26px 0 0;
  font: 300 14.5px/1.6 'Archivo', sans-serif;
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 900px) {
  .omg-bon__montants { grid-template-columns: repeat(2, 1fr); }
  .omg-bon__etapes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .omg-bon__montants { grid-template-columns: 1fr; }
  .omg-bon__etapes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .omg-bon__montant:hover,
  .omg-bon__formulaire input[type="submit"]:hover,
  .omg-bon__envoi button:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   CONTACT : HORAIRES, ACCÈS, SUIVEZ-MOI

   Trois cartes à icône, à la place des trois colonnes de la maquette, qui
   se perdaient entre la carte et les bons cadeaux. Le vocabulaire reste
   celui de la maison : filet doré en tête, filet pointillé sous le titre.
   Posées par inc/contact.php.
   -------------------------------------------------------------------------- */

/* Posées juste sous le formulaire, qui porte déjà sa respiration basse. */
.omg-pratique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  padding: 0 var(--omg-pad-x) clamp(70px, 7vw, 100px);
}

.omg-pratique__carte {
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3vw, 44px);
  background: var(--omg-paper-alt);
  border-top: 2px solid var(--omg-accent);
}

.omg-pratique__tete { display: flex; align-items: center; gap: 16px; }
.omg-pratique__icone { flex: none; color: var(--omg-blue); }

.omg-pratique__titre {
  margin: 0;
  font-family: var(--omg-display);
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.1;
  color: var(--omg-navy);
}

.omg-pratique__filet {
  height: 1px;
  margin: 20px 0 22px;
  background: repeating-linear-gradient(to right, var(--omg-line-strong) 0 3px, transparent 3px 7px);
}

.omg-pratique__lignes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 300 16px/1.6 var(--omg-sans);
  color: var(--omg-text);
}
.omg-pratique__ligne { display: flex; justify-content: space-between; gap: 16px; }
.omg-pratique__heures { font-weight: 500; color: var(--omg-navy); white-space: nowrap; }
.omg-pratique__ferme { color: var(--omg-grey); }

.omg-pratique__note {
  margin: 18px 0 0;
  font: 300 13.5px/1.6 var(--omg-sans);
  color: var(--omg-grey);
}

.omg-pratique__adresse {
  margin: 0 0 12px;
  font: 400 17px/1.6 var(--omg-sans);
  color: var(--omg-navy);
}

.omg-pratique__texte {
  margin: 0 0 8px;
  font: 300 16px/1.65 var(--omg-sans);
  color: var(--omg-text);
}

/* Le lien et les réseaux se posent en pied de carte : les trois cartes
   ont la même hauteur, leurs actions s'alignent. */
.omg-pratique__lien,
.omg-pratique__reseaux { margin-top: auto; padding-top: 18px; }

.omg-pratique__lien {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--omg-line-strong);
  font: 500 12px/1 var(--omg-sans);
  letter-spacing: var(--omg-ls-btn);
  text-transform: uppercase;
  color: var(--omg-navy);
  transition: color var(--omg-t-fast) ease, border-color var(--omg-t-fast) ease;
}
.omg-pratique__lien:hover { color: var(--omg-accent); border-bottom-color: var(--omg-accent); }

.omg-pratique__reseaux { display: flex; flex-wrap: wrap; gap: 14px 24px; }

.omg-pratique__reseau {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 12px/1 var(--omg-sans);
  letter-spacing: var(--omg-ls-btn);
  text-transform: uppercase;
  color: var(--omg-navy);
  transition: color var(--omg-t-fast) ease;
}
.omg-pratique__reseau svg { color: var(--omg-blue); transition: transform var(--omg-t-base) var(--omg-ease), color var(--omg-t-base) ease; }
.omg-pratique__reseau:hover { color: var(--omg-accent); }
.omg-pratique__reseau:hover svg { transform: scale(1.15); color: var(--omg-accent); }

@media (prefers-reduced-motion: reduce) {
  .omg-pratique__reseau:hover svg { transform: none; }
}

/* --------------------------------------------------------------------------
   COLONNES COLLANTES DES ÉCRANS PORTÉS

   La photo de gauche des tarifs d'univers et la colonne des questions
   fréquentes sont en `position: sticky` dans la maquette, et ne collaient
   pas : `overflow-x: hidden` sur html et body (omg-tokens.css) fait du
   corps un conteneur de défilement, auquel sticky s'accroche et qui ne
   défile jamais. `clip` rogne pareil sans créer ce conteneur.

   Sous 1024 px, maquette.css repasse ces colonnes en `relative`.
   -------------------------------------------------------------------------- */

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* --------------------------------------------------------------------------
   SURVOLS DE LA MAQUETTE

   Les règles de survol extraites dans maquette.css changent la couleur,
   mais le style en ligne du bouton l'emporte sur elles. Sur le bouton
   « 06 03 95 74 24 » de « Concevons ensemble votre vestiaire », le fond
   passait au bleu nuit et le texte restait bleu nuit : illisible.
   -------------------------------------------------------------------------- */

.omg-s12:hover,
.omg-s24:hover { color: var(--omg-paper) !important; }

.omg-s9:hover { background: var(--omg-navy) !important; color: var(--omg-paper) !important; }

.omg-s27:hover,
.omg-s30:hover { color: var(--omg-accent) !important; }

/* Tablette en portrait : la grille tarifaire des univers garde ses deux
   colonnes et sa photo collante, calée sous la barre mobile. Exception
   demandée par Marie le 11 septembre 2026 à la règle « aucune colonne
   collante sous 1024 px » ; le téléphone, lui, empile toujours. */
@media (min-width: 768px) and (max-width: 1023px) {
  #tarifs > [data-r="grid"] { grid-template-columns: 1fr 1fr !important; }
  #tarifs [data-r="stickyimg"] {
    position: sticky !important;
    top: var(--omg-nav-h-mob) !important;
    height: calc(100vh - var(--omg-nav-h-mob)) !important;
  }
  #tarifs [data-r="stickyimg"] ~ div { padding: clamp(56px, 7vw, 80px) clamp(24px, 3.4vw, 40px) !important; }
}

/* --------------------------------------------------------------------------
   CONTACT : L'OFFRE DE PARRAINAGE

   Redescendue sous les photos du showroom, pleine largeur : le titre à
   gauche, les deux avantages et la mention à droite. La carte garde son
   liseré doré et son motif de la maquette. Sous 1024 px, tout s'empile.
   -------------------------------------------------------------------------- */

.omg-parrainage-section { padding: clamp(70px, 7vw, 100px) var(--omg-pad-x); }

.omg-parrainage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  column-gap: clamp(30px, 5vw, 90px);
  align-items: start;
}
.omg-parrainage > :nth-child(1) { grid-column: 1; grid-row: 1; }
.omg-parrainage > :nth-child(2) { grid-column: 1; grid-row: 2; }
.omg-parrainage > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; }
.omg-parrainage > :nth-child(4) { grid-column: 2; grid-row: 3; }

@media (max-width: 1023px) {
  .omg-parrainage { display: block; }
  .omg-parrainage > :nth-child(3) { margin-top: 24px !important; }
}

/* --------------------------------------------------------------------------
   CONTACT : LE FORMULAIRE

   Contact Form 7 habillé aux valeurs des champs de la maquette : libellés
   en capitales espacées, champs de 54 px à angles droits, texte de 16 px
   — sous ce seuil, iOS zoome sur le champ —, focus doré, bouton or au
   liseré pointillé. Posé par inc/contact.php.
   -------------------------------------------------------------------------- */

.omg-form,
.omg-form .wpcf7-form { display: flex; flex-direction: column; gap: 22px; }
.omg-form .wpcf7 { margin: 0; }
.omg-form .wpcf7-form > p { margin: 0; }

.omg-form__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.omg-form__champ { display: flex; flex-direction: column; gap: 9px; }

.omg-form__libelle {
  font: 600 10.5px/1 var(--omg-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--omg-navy);
}
.omg-form__libelle em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--omg-accent);
}

.omg-form .wpcf7-form-control-wrap { display: block; }

.omg-form input[type="text"],
.omg-form input[type="email"],
.omg-form input[type="tel"],
.omg-form input[type="date"],
.omg-form select,
.omg-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: var(--omg-field-h);
  padding: 0 16px;
  border: 1px solid var(--omg-line-strong);
  border-radius: 0;
  background-color: var(--omg-paper);
  font: 300 16px/1 var(--omg-sans);
  color: var(--omg-navy);
  outline: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.omg-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--omg-navy) 50%), linear-gradient(135deg, var(--omg-navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.omg-form textarea { height: auto; padding: 16px; line-height: 1.6; resize: vertical; }

.omg-form input:focus,
.omg-form select:focus,
.omg-form textarea:focus {
  border-color: var(--omg-accent);
  box-shadow: 0 0 0 3px rgba(199, 154, 62, .14);
}

/* Le champ piège : hors de l'écran, jamais atteint au clavier. */
.omg-form__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.omg-form__accord .wpcf7-list-item { margin: 0; }
.omg-form__accord label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 300 14.5px/1.6 var(--omg-sans);
  color: var(--omg-text-mute);
  cursor: pointer;
}
.omg-form__accord input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--omg-accent);
}

.omg-form .omg-form__envoyer {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 58px;
  padding: 0 34px;
  border: none;
  cursor: pointer;
  background: var(--omg-accent);
  color: var(--omg-on-accent);
  outline: 1px dashed currentColor;
  outline-offset: -5px;
  font: 600 12.5px/1 var(--omg-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease;
}
.omg-form .omg-form__envoyer:hover { transform: translateY(-2px); box-shadow: var(--omg-shadow-btn); }
.omg-form .omg-form__envoyer:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.omg-form .wpcf7-spinner { margin: 0 0 0 14px; align-self: center; }

.omg-form .wpcf7-not-valid { border-color: var(--omg-accent); }
.omg-form .wpcf7-not-valid-tip {
  margin-top: 8px;
  font: 400 13px/1.4 var(--omg-sans);
  color: var(--omg-navy);
}
.omg-form .wpcf7-not-valid-tip::before { content: '↑ '; color: var(--omg-accent); }

.omg-form .wpcf7-response-output {
  margin: 0 !important;
  padding: 16px 20px !important;
  border: 1px dashed var(--omg-accent) !important;
  font: 400 15px/1.6 var(--omg-sans);
  color: var(--omg-navy);
}
.omg-form .wpcf7 form.sent .wpcf7-response-output { border-style: solid !important; background: var(--omg-paper-alt); }

@media (max-width: 767px) {
  .omg-form__grille { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .omg-form .omg-form__envoyer:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   PRENDRE RENDEZ-VOUS : LE FORMULAIRE EN TROIS TEMPS

   La maquette montre six cartes de motif et deux pastilles de lieu, dessinées
   avec des `<button type="button">` qui ne choisissaient rien. Ce sont ici de
   vrais boutons radio, reprenant valeur pour valeur l'habillage de la
   maquette : carte blanche au filet bleu, carte pleine bleu nuit une fois
   choisie, durée dorée au-dessus du motif. Posé par inc/rdv.php.
   -------------------------------------------------------------------------- */

.omg-rdv .wpcf7-form { gap: 0; }

/* Le numéro d'étape, son titre et sa ligne d'explication. */
.omg-rdv__etape { display: flex; align-items: baseline; gap: 16px; margin: 0 0 24px; }

.omg-rdv__num {
  font-family: var(--omg-display);
  font-size: clamp(16px, 2.24vw, 30px);
  line-height: 1;
  color: var(--omg-accent);
}

.omg-rdv__titre {
  display: block;
  font: 600 11.5px/1 var(--omg-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--omg-navy);
}

.omg-rdv__sous {
  display: block;
  margin-top: 8px;
  font: 300 15px/1.6 var(--omg-sans);
  color: var(--omg-text-mute);
}

/* Les six cartes de motif. */
.omg-rdv__cartes { margin-bottom: 56px; }

.omg-rdv__cartes .wpcf7-form-control,
.omg-rdv__pastilles .wpcf7-form-control { display: contents; }

.omg-rdv__cartes .wpcf7-radio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.omg-rdv__cartes .wpcf7-list-item { display: block; margin: 0; }

.omg-rdv__cartes label {
  display: block;
  height: 100%;
  text-align: left;
  padding: 20px 20px 22px;
  cursor: pointer;
  border: 1px solid rgba(14, 59, 78, .22);
  background: var(--omg-paper);
  transition: border-color .3s var(--omg-ease), background .3s var(--omg-ease), transform .3s var(--omg-ease);
}

.omg-rdv__cartes label:has(input:checked) { border-color: var(--omg-navy); background: var(--omg-navy); }
.omg-rdv__cartes label:has(input:focus-visible) { outline: 2px solid var(--omg-accent); outline-offset: 2px; }

.omg-rdv__duree {
  display: block;
  font: 600 10px/1 var(--omg-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--omg-accent);
}

.omg-rdv__cartes .wpcf7-list-item-label {
  display: block;
  margin-top: 12px;
  font-family: var(--omg-display);
  font-size: 23px;
  line-height: 1.14;
  color: var(--omg-navy);
}

.omg-rdv__cartes label:has(input:checked) .omg-rdv__duree { color: var(--omg-blue-soft); }
.omg-rdv__cartes label:has(input:checked) .wpcf7-list-item-label { color: var(--omg-paper); }

/* Les deux pastilles de lieu. */
.omg-rdv__pastilles { margin-bottom: 56px; }

.omg-rdv__pastilles .wpcf7-radio { display: flex; gap: 12px; flex-wrap: wrap; }

.omg-rdv__pastilles .wpcf7-list-item { margin: 0; }

.omg-rdv__pastilles label {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  cursor: pointer;
  border: 1px solid rgba(14, 59, 78, .26);
  background: transparent;
  color: var(--omg-navy);
  font: 600 11px/1 var(--omg-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: border-color .3s var(--omg-ease), background .3s var(--omg-ease), color .3s var(--omg-ease);
}

.omg-rdv__pastilles label:has(input:checked) { border-color: var(--omg-navy); background: var(--omg-navy); color: var(--omg-paper); }
.omg-rdv__pastilles label:has(input:focus-visible) { outline: 2px solid var(--omg-accent); outline-offset: 2px; }

/* Le bouton radio lui-même reste dans le flux pour le clavier et les
   lecteurs d'écran, mais ne se voit pas : la carte le remplace à l'œil. */
.omg-rdv__cartes input[type="radio"],
.omg-rdv__pastilles input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Les trois créneaux : une date et sa plage horaire. */
.omg-rdv__creneaux { display: flex; flex-direction: column; gap: 18px; }

.omg-rdv__creneau { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: end; }

/* La maquette ne met aucun libellé sur la plage horaire : il existe pour
   les lecteurs d'écran, sans occuper de place. */
.omg-rdv__libelle-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.omg-rdv__coordonnees { margin-top: 34px; }

.omg-rdv .omg-form__accord,
.omg-rdv > .wpcf7 form > .omg-form__champ { margin-top: 22px; }

.omg-rdv .omg-form__envoyer { margin-top: 28px; align-self: flex-start; }

@media (max-width: 1023px) {
  .omg-rdv__cartes .wpcf7-radio { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .omg-rdv__cartes .wpcf7-radio { grid-template-columns: 1fr; }
  .omg-rdv__creneau { grid-template-columns: 1fr; }
  .omg-rdv__pastilles label { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   CIBLES TACTILES

   Sur un écran tactile, un lien de moins de 24 px se rate une fois sur deux.
   La maquette dessine ses icônes de réseau à 22 px et ses liens de pied de
   page à 23 : il manque deux pixels, pris sur la zone cliquable, jamais sur
   le dessin. Rien ne bouge à l'œil, la main touche juste.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {

  .omg-nav-mobile__reseaux a,
  .omg-footer__reseaux a,
  .omg-tiroir__reseaux a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
  }

  .omg-footer__liens a,
  .omg-footer__legal a,
  .omg-footer__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

/* --------------------------------------------------------------------------
   LA CALE DE LA BARRE FIXE, UNE SEULE FOIS

   La maquette portait sa barre à l'intérieur de `#top` et compensait sa
   hauteur là : `padding-top: 158px` sous 768 px, 98 au-dessus. Le thème, lui,
   pose déjà cette cale sur le corps de page, à partir des jetons — et les deux
   s'additionnaient : 276 px de blanc au-dessus du premier titre sur téléphone,
   avant même la première image. Idem en bas, où la barre d'action fixe était
   compensée deux fois.

   La cale de la maquette est neutralisée ; celle des jetons fait foi, et elle
   suit la vraie hauteur de la barre.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  #top.omg-page { padding-top: 0 !important; }
}

@media (max-width: 767px) {
  #top.omg-page { padding-bottom: 0 !important; }
}

/* --------------------------------------------------------------------------
   MOTIFS DE FOND SUR TÉLÉPHONE ET TABLETTE

   Les bandeaux bleu clair posent le motif maison en `background-attachment:
   fixed`, taillé à `auto 130%`. Sur ordinateur, ces 130 % se mesurent sur la
   fenêtre et le motif couvre la largeur. Sur téléphone, ils se mesurent sur
   tout l'écran — sur iOS, sur toute la page — et le motif devenait énorme.

   Sous 1024 px, les fonds fixes défilent avec la page, et le motif retrouve
   une taille à l'échelle d'un téléphone. La photo fixe de l'accueil garde son
   `cover` : seul le motif, reconnaissable à ses 130 %, change de taille.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  [style*="background-attachment:fixed"],
  [style*="background-attachment: fixed"],
  .omg-bandeau__motif {
    background-attachment: scroll !important;
  }

  [style*="background-size:auto 130%"],
  .omg-bandeau__motif {
    background-size: auto 440px !important;
  }
}

/* --------------------------------------------------------------------------
   UNIVERS SUR TÉLÉPHONE : LES PHOTOS D'ABORD

   Réunion du 14 septembre 2026 : sur téléphone, la galerie arrivait après de
   longs textes et Nathalie ne la voyait pas. Sous 768 px, elle remonte juste
   sous le haut de page — le conteneur de l'écran porté est une colonne
   flexible — et le texte « En détail » se replie sur ses premières lignes
   (theme.js, texteUniversReplie).
   -------------------------------------------------------------------------- */

.omg-univers-texte__suite { display: none; }

@media (max-width: 767px) {
  [data-r="herouni"] { order: -2; }
  .omg-univers-galerie { order: -1; }

  .omg-univers-texte__corps.est-replie {
    position: relative;
    max-height: 12em;
    overflow: hidden;
  }
  .omg-univers-texte__corps.est-replie::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5em;
    background: linear-gradient(rgba(245, 247, 248, 0), #F5F7F8);
    pointer-events: none;
  }

  .omg-univers-texte__suite {
    display: inline-flex;
    margin-top: 18px;
    padding: 0 0 5px;
    border: 0;
    border-bottom: 1px solid var(--omg-accent, #C79A3E);
    background: none;
    font: 600 12px/1 'Archivo', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0E3B4E;
    cursor: pointer;
  }
  .omg-univers-texte__suite[hidden] { display: none; }
}

/* --------------------------------------------------------------------------
   CARTES DES PAGES SERVICE

   Nos partenaires et les autres pages Service posent leurs cartes en trois
   colonnes dans le gabarit, sans exception : sur téléphone, trois cartes de
   110 px et la troisième sortait de l'écran. Deux colonnes sur tablette, une
   sur téléphone.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .omg-service__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 599px) {
  .omg-service__cartes { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Galeries d'univers : le bouton qui dévoile les photos au-delà des 24
   premières (16/09/2026). Même dessin que les filtres de la section. */
.omg-galerie-plus {
  height: 48px;
  padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
  font: 600 11px/1 'Archivo', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.omg-galerie-plus:hover,
.omg-galerie-plus:focus-visible {
  background: #fff;
  color: var(--omg-navy, #0E3B4E);
  border-color: #fff;
}
.omg-galerie-plus[hidden] { display: none; }

/* --------------------------------------------------------------------------
   ZONES DE TOUCHER : 24 PX AU MOINS (WCAG 2.2, critère 2.5.8)

   Relevé du 18/09/2026 sur téléphone : les liens légaux du pied de page
   faisaient 13 px de haut, « Tous les avis Google » et « Tout voir » 17 et
   19 px. La zone cliquable s'agrandit sans que le dessin bouge : marge
   intérieure compensée pour les premiers, calque invisible pour les liens
   soulignés des écrans portés.
   -------------------------------------------------------------------------- */
.omg-footer__legal-liens a {
  display: inline-block;
  padding-block: 6px;
  margin-block: -6px;
}
a[style*="border-bottom:1px solid rgba(14,59,78,.35)"] {
  position: relative;
}
a[style*="border-bottom:1px solid rgba(14,59,78,.35)"]::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}