.idmp-public-header {
  --iph-orange: var(--or,#FF3019);
  --iph-ink: #2e4057;
  --iph-height: 80px;
  position: relative;
  z-index: 900;
  width: 100%;
  color: #fff;
  background: transparent;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  transition: background .22s ease, box-shadow .22s ease, color .22s ease;
}

#site-header.idmp-public-header {
  position: fixed;
  inset: 0 0 auto 0;
}

#guest-header.idmp-public-header {
  position: relative;
  flex: 0 0 auto;
  background: #000;
}

.idmp-public-header.is-solid,
.idmp-public-header.is-open {
  color: var(--iph-ink);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 30px rgba(15, 23, 42, .08);
}

.idmp-public-header.is-dark,
.idmp-public-header[data-idmp-header-theme="dark"] {
  color: #fff;
  background: #000;
  box-shadow: none;
}

/* LES PISTES LATERALES PRENNENT LEUR LARGEUR REELLE, LA NAV ABSORBE LE RESTE.
   L'ancien gabarit figeait les cotes a minmax(220px,1fr) et laissait la nav en
   auto : le bloc d'actions, qui a grossi du CTA "Voir les offres", debordait sa
   piste et chevauchait la navigation de 35px, mesure a 1440 dans le catalogue
   invite ou le selecteur de langue est present (il est masque sur la vitrine).
   Avec auto sur les cotes et 1fr au milieu, aucun chevauchement n'est possible
   tant que le total tient : c'est la nav qui cede, et elle est centree dans ce
   qui lui reste. */
.idmp-public-header .iph-inner {
  width: 100%;
  min-height: var(--iph-height);
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 24px;
}
.idmp-public-header .iph-desktop-nav { justify-self: center; }

.idmp-public-header .iph-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.idmp-public-header .iph-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}

.idmp-public-header .iph-brand span {
  color: inherit;
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.025em;
}

/* Le gras ne porte QUE sur SILEX. MATERIEL reste en graisse courante : la
   marque se lit en deux temps, le nom puis la nature de l'activite. */
.idmp-public-header .iph-brand span b { font-weight: 700; }

.idmp-public-header .iph-desktop-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
}

.idmp-public-header .iph-desktop-nav > a,
.idmp-public-header .iph-catalogue-trigger {
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}

.idmp-public-header .iph-desktop-nav > a:hover,
.idmp-public-header .iph-catalogue-trigger:hover,
.idmp-public-header .iph-desktop-nav > a[aria-current="page"],
.idmp-public-header .iph-desktop-nav > a.is-active,
.idmp-public-header .iph-catalogue-trigger.is-active {
  color: var(--iph-orange);
  background: rgba(var(--or-rgb,255,48,25), .12);
}

.idmp-public-header .iph-catalogue {
  position: relative;
}

.idmp-public-header .iph-chevron {
  width: 15px;
  height: 15px;
  display: block;
  flex: 0 0 auto;
  transition: transform .18s ease;
}

.idmp-public-header .iph-catalogue:hover .iph-chevron,
.idmp-public-header .iph-catalogue:focus-within .iph-chevron,
.idmp-public-header .iph-catalogue.is-open .iph-chevron {
  transform: rotate(180deg);
}

.idmp-public-header .iph-catalogue-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  width: 230px;
  padding: 8px;
  display: grid;
  gap: 4px;
  border: 1px solid #e7e9ee;
  border-radius: 14px;
  color: #243247 !important;
  background: #fff !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .2);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
  z-index: 950;
}

.idmp-public-header .iph-catalogue-popover a {
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-radius: 9px;
  color: #243247 !important;
  background: #fff !important;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.idmp-public-header .iph-catalogue-popover a:hover,
.idmp-public-header .iph-catalogue-popover a:focus-visible {
  color: var(--iph-orange) !important;
  background: #fff2ed !important;
  outline: none;
}

.idmp-public-header .iph-catalogue:hover .iph-catalogue-popover,
.idmp-public-header .iph-catalogue:focus-within .iph-catalogue-popover,
.idmp-public-header .iph-catalogue.is-open .iph-catalogue-popover {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.idmp-public-header .iph-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}

.idmp-public-header .iph-language {
  position: relative;
}

.idmp-public-header .iph-language-button {
  min-height: 42px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  color: inherit !important;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
}

.idmp-public-header .iph-language-button svg {
  width: 17px;
  height: 17px;
  display: block;
}

.idmp-public-header .iph-language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 180px;
  padding: 7px;
  display: none;
  border: 1px solid #e7e9ee;
  border-radius: 13px;
  color: #243247;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .18);
  z-index: 960;
}

.idmp-public-header .iph-language-menu.is-open {
  display: grid;
  gap: 3px;
}

.idmp-public-header .iph-language-menu button {
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  color: #243247;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.idmp-public-header .iph-language-menu button:hover,
.idmp-public-header .iph-language-menu button.is-active,
.idmp-public-header .iph-language-menu button.is-current {
  color: var(--iph-orange);
  background: #fff2ed;
}

.idmp-public-header .iph-client-button {
  min-height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid var(--iph-orange);
  border-radius: 999px;
  color: var(--iph-orange);
  background: transparent;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}

.idmp-public-header .iph-client-button:hover {
  color: #fff;
  background: var(--iph-orange);
}

.idmp-public-header .iph-client-button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.idmp-public-header .iph-menu-button {
  width: 44px;
  height: 44px;
  padding: 0;
  display: none;
  border: 0;
  border-radius: 10px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.idmp-public-header .iph-menu-button span {
  width: 23px;
  height: 2px;
  margin: 4px auto;
  display: block;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.idmp-public-header.is-open .iph-menu-button span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.idmp-public-header.is-open .iph-menu-button span:nth-child(2) { opacity: 0; }
.idmp-public-header.is-open .iph-menu-button span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.idmp-public-header .iph-mobile-nav {
  display: none;
}

@media (max-width: 980px) {
  .idmp-public-header {
    --iph-height: 68px;
  }

  .idmp-public-header .iph-inner {
    padding: 0 20px;
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  .idmp-public-header .iph-brand img {
    width: 42px;
    height: 42px;
  }

  .idmp-public-header .iph-brand span {
    font-size: 16px;
  }

  .idmp-public-header .iph-desktop-nav,
  .idmp-public-header .iph-language,
  .idmp-public-header .iph-client-button {
    display: none;
  }

  .idmp-public-header .iph-actions {
    gap: 0;
  }

  .idmp-public-header .iph-menu-button {
    display: block;
  }

  .idmp-public-header .iph-mobile-nav {
    padding: 10px 20px 22px;
    display: none;
    grid-template-columns: 1fr;
    gap: 5px;
    color: var(--iph-ink);
    background: #fff;
    border-top: 1px solid #eceef2;
    box-shadow: 0 18px 32px rgba(15, 23, 42, .12);
  }

  .idmp-public-header.is-open .iph-mobile-nav {
    display: grid;
  }

  .idmp-public-header .iph-mobile-nav > a,
  .idmp-public-header .iph-mobile-catalogue summary,
  .idmp-public-header .iph-mobile-sub {
    min-height: 46px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 9px;
    color: var(--iph-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }

  .idmp-public-header .iph-mobile-catalogue summary {
    list-style: none;
    cursor: pointer;
  }

  .idmp-public-header .iph-mobile-catalogue summary::-webkit-details-marker {
    display: none;
  }

  .idmp-public-header .iph-mobile-catalogue[open] summary,
  .idmp-public-header .iph-mobile-nav > a.is-active {
    color: var(--iph-orange);
    background: #fff2ed;
  }

  .idmp-public-header .iph-mobile-catalogue-links {
    padding: 4px 0 4px 14px;
    display: grid;
    gap: 3px;
  }

  .idmp-public-header .iph-mobile-sub {
    min-height: 42px;
    justify-content: flex-start;
  }

  .idmp-public-header .iph-mobile-languages {
    padding: 10px 14px 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .idmp-public-header .iph-mobile-languages button {
    min-width: 42px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    color: var(--iph-ink);
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
  }

  .idmp-public-header .iph-mobile-languages button.is-active,
  .idmp-public-header .iph-mobile-languages button.is-current {
    border-color: var(--iph-orange);
    color: var(--iph-orange);
    background: #fff2ed;
  }
}

@media (max-width: 420px) {
  .idmp-public-header .iph-inner {
    padding: 0 14px;
  }

  .idmp-public-header .iph-brand {
    gap: 10px;
  }

  .idmp-public-header .iph-brand img {
    width: 38px;
    height: 38px;
  }

  .idmp-public-header .iph-brand span {
    font-size: 14px;
  }
}


/* LA BANDE 981 A 1120 : ENTRE LE HAMBURGER ET L'AISANCE DU BUREAU.
   Sous 981 le menu hamburger prend le relais ; au-dela de 1120 le gabarit
   bureau retrouve de la marge dans les six langues. Entre les deux, le bloc
   Langue + Espace client debordait de sa piste (mesure a 1024 : -9px en
   francais, -14 en espagnol) : le plancher de 220px des pistes laterales
   figeait la repartition. On ne change pas la structure, on rend au conteneur
   les pixels que la marge de 48 et la gouttiere de 24 lui prenaient. */
/* Bande 981-1200 : entre le hamburger et l'aisance du bureau.
   Elargie de 1120 a 1200 et resserree, parce que le CTA "Voir les offres" a
   grossi le bloc d'actions : a 1024 la navigation chevauchait les actions de
   21px dans le catalogue invite, ou le selecteur de langue est en plus.
   Valeurs cherchees au rendu, la premiere serie qui ramene le chevauchement a
   zero : chevauchement mesure 19px avant, 0 apres. */
@media (min-width: 981px) and (max-width: 1329px) {
  .idmp-public-header .iph-inner {
    padding: 0 12px;
    gap: 10px;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  }
  .idmp-public-header .iph-brand { gap: 10px; }
  .idmp-public-header .iph-brand img { width: 40px; height: 40px; }
  .idmp-public-header .iph-brand span { font-size: 15px; }
  .idmp-public-header .iph-desktop-nav { gap: 0; }
  .idmp-public-header .iph-desktop-nav > a { padding: 0 4px; font-size: 12.5px; }
  .idmp-public-header .iph-actions { gap: 6px; }
  .idmp-public-header .iph-client-button { padding: 0 10px; font-size: 13px; }
  /* PAS de regle .iph-offers ici : elle serait MORTE. La regle de base porte la
     meme specificite et vient plus loin dans le fichier, donc elle gagne.
     Mesure : dans cette bande le rembourrage calcule valait 15,4px et la police
     14px, pas les valeurs qu'on croyait poser. Pour resserrer le CTA il faut
     toucher sa regle de base, pas cette bande. */
}


/* ══ EN-TETE INVITE : PLEINE LARGEUR, COMME CELUI DE LA VITRINE ════════════
   Les deux pages montent le MEME composant, avec les memes dimensions : 80px
   de haut, 48 de rembourrage, un logo de 48. Mesure faite sur les deux, elles
   ne differaient d'aucun pixel EN INTERNE.
   Mais l'en-tete invite vit dans .main, qui porte un rembourrage lateral de
   clamp(18px, 2.2vw, 40px) destine au CONTENU de page. L'en-tete le subissait :
   mesure en production a 1440, logo a x=80 cote catalogue contre 48 cote
   vitrine, soit 32px de decalage, et une barre 63px plus etroite que la
   fenetre.
   On lui rend ces pixels par une marge negative de meme valeur. La vitrine ne
   bouge pas : c'est le catalogue qui rejoint son alignement, un en-tete de
   site se lisant bord a bord.
   Sous 1025px en portrait le rembourrage de .main n'existe pas, la regle y est
   donc inerte : meme bande que celle qui pose le rembourrage.              */
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {
  body.idmp-client #guest-header.idmp-public-header {
    margin-left: calc(-1 * clamp(18px, 2.2vw, 40px));
    margin-right: calc(-1 * clamp(18px, 2.2vw, 40px));
    width: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REFONTE VITRINE : EXTENSIONS DU COMPOSANT PARTAGE
   Tout ce qui suit est ecrit APRES l'existant et gagne a specificite egale.
   Les anciens styles du menu catalogue et du panneau blanc restent au-dessus,
   morts mais inoffensifs : on n'efface pas, on recouvre.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme "glass" : transparent en haut, verre fume apres 40px ──────────── */
.idmp-public-header[data-idmp-header-theme="glass"] {
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .22s ease, border-color .22s ease;
}
.idmp-public-header[data-idmp-header-theme="glass"].is-solid {
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .13);
  box-shadow: none;
}
/* Panneau mobile ouvert : le fond doit etre plein, pas du verre. */
.idmp-public-header[data-idmp-header-theme="glass"].is-open {
  background: #000;
}

/* LE PANNEAU MOBILE EST EN POSITION FIXED, ET IL VIT DANS L'EN-TETE.
   Un backdrop-filter, un filter ou un transform sur un ancetre cree un BLOC
   CONTENEUR pour ses descendants fixed. Le panneau cessait donc de se caler
   sur la fenetre pour se caler sur l'en-tete, haut de 69px.

   Mesure du defaut, telephone 375x812 :
     en haut de page      is-solid absent   panneau 375x744   utilisable
     defile de 600px      is-solid pose     panneau 375x49    inutilisable

   Un appui au milieu de l'ecran atteignait .sx-wrap, c'est-a-dire la page
   derriere. Le menu ne s'ouvrait donc QUE tout en haut, la ou les 40px de
   is-solid n'avaient pas encore pose le flou.

   L'en-tete ouvert est deja opaque : le flou n'y sert a rien, on l'efface.

   LA GARDE EST DE SPECIFICITE, PAS DE THEME, et une premiere version de cette
   regle l'avait mal compris. Ecrite en (0,3,0) elle suffisait sur la vitrine,
   ou le seul flou concurrent vaut (0,3,0) et se declare avant. Elle PERDAIT
   sur /dashboard, ou deux regles posent le meme flou derriere un selecteur
   d'IDENTIFIANT, donc en (1,1,0) :
     idmp_black.css:762            #guest-header.gh-scrolled   blur(8px)
     idmp_dashboard.html:103       #guest-header.gh-scrolled   blur(6px)
   et ou idmp_dashboard.html:4961 pose gh-scrolled des que le contenu a defile
   de 60px. Mesure sur /dashboard en mode invite, 375x812, defilement reel de
   304px puis appui reel sur le burger : panneau 375x49, soit 93% de sa hauteur
   perdue, et un appui au milieu de l'ecran atteignant A.i-cta, la page
   derriere. Le defaut n'avait pas ete elimine, il avait ete deplace sur la
   page que chargent les applications mobiles.

   D'ou les deux selecteurs d'identifiant ci-dessous, en (1,2,0) : ils battent
   le (1,1,0) sans ouvrir de course au !important. Le selecteur d'attribut est
   conserve en dernier pour tout en-tete monte sous un autre identifiant. */
#guest-header.idmp-public-header.is-open,
#site-header.idmp-public-header.is-open,
.idmp-public-header[data-idmp-header-theme].is-open {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── CTA "Voir les offres" ───────────────────────────────────────────────── */
.idmp-public-header .iph-offers {
  height: 44px;
  padding: 0 clamp(12px, 1.4vw, 20px);
  /* nowrap et flex-shrink:0 : dans le catalogue invite le selecteur de langue
     est present (il est masque sur la vitrine), la barre est donc plus serree
     et le libelle se cassait sur TROIS lignes, mesure au rendu. */
  white-space: nowrap;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: var(--or,#FF3019);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s ease;
}
.idmp-public-header .iph-offers:hover { background: #D8280F; }
.idmp-public-header .iph-offers:focus-visible {
  outline: 2px solid var(--or,#FF3019);
  outline-offset: 2px;
}

/* ── Badge de store (gabarit d'attente, remplace par les badges officiels) ── */
.iph-store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.iph-store:hover { border-color: rgba(255, 255, 255, .7); }
.iph-store svg { width: 24px; height: 24px; flex: 0 0 24px; }
/* ── Les logos officiels des deux magasins ────────────────────────────────
   Poses le 19 aout 2026 a la place des icones de la police Tabler. Ce sont
   des visuels CARRES, pas les bandeaux qui portent deja leur texte : le
   bouton garde donc ses deux lignes, et l'image ne fait que remplacer le
   glyphe. Meme gabarit que le SVG qu'elle remplace, sinon le bouton change
   de hauteur sur une page et pas sur l'autre. Le coin arrondi suit celui du
   logo de l'App Store, qui est deja arrondi dans son fichier. ── */
.iph-store-ic {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
  border-radius: 5px;
  object-fit: contain;
}
.iph-store-txt { display: block; line-height: 1.15; text-align: left; }
.iph-store-txt em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  opacity: .72;
}
.iph-store-txt strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ── Verrou de defilement quand un panneau plein ecran est ouvert ────────── */
body.iph-lock { overflow: hidden; }

/* ── Panneau mobile : plein ecran, noir, entrees en grand ────────────────── */
@media (max-width: 980px) {
  .idmp-public-header .iph-offers { display: none; }

  .idmp-public-header .iph-mobile-nav {
    position: fixed;
    top: var(--iph-height);
    left: 0; right: 0; bottom: 0;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    padding: 26px 24px calc(22px + env(safe-area-inset-bottom));
    background: #000;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .13);
    box-shadow: none;
    overflow: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .idmp-public-header.is-open .iph-mobile-nav { display: flex; animation: iph-panel-in .18s ease-out; }
  .idmp-public-header.is-open { background: #000; color: #fff; }

  .idmp-public-header .iph-mobile-links { display: grid; gap: 4px; }
  .idmp-public-header .iph-mobile-nav .iph-mobile-links > a {
    min-height: 56px;
    padding: 0;
    display: flex;
    align-items: center;
    border-radius: 0;
    color: #fff;
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
  }
  .idmp-public-header .iph-mobile-nav .iph-mobile-links > a.is-active { color: var(--or,#FF3019); background: transparent; }
  .idmp-public-header .iph-mobile-nav .iph-mobile-links > a.iph-mobile-client {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, .62);
  }
  .idmp-public-header .iph-mobile-offers {
    min-height: 56px;
    margin-top: 14px;
    border: 0;
    border-radius: 14px;
    background: var(--or,#FF3019);
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
  }
  .idmp-public-header .iph-mobile-offers:active { background: #D8280F; }

  .idmp-public-header .iph-mobile-languages {
    padding: 16px 0 0;
  }
  .idmp-public-header .iph-mobile-languages button {
    border-color: rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .8);
    background: transparent;
  }
  .idmp-public-header .iph-mobile-languages button.is-active,
  .idmp-public-header .iph-mobile-languages button.is-current {
    border-color: var(--or,#FF3019);
    color: var(--or,#FF3019);
    background: transparent;
  }

  .idmp-public-header .iph-mobile-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .13);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE SELECTEUR D'OFFRES (.sxo)
   Trois cartes plein ecran. Le survol fait passer le fond du noir au gris,
   agrandit legerement la carte visee, rend sa couleur a l'image et fait naitre
   le halo. La croissance reste volontairement mesuree pour que les trois choix
   demeurent toujours lisibles.
   ═══════════════════════════════════════════════════════════════════════════ */
.sxo {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: #000;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.sxo.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .28s ease;
}

.sxo-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  cursor: pointer;
}
.sxo-hint {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or,#FF3019);
}
.sxo-close {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: border-color .15s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.sxo-close:hover { border-color: #fff; transform: rotate(90deg); }
.sxo-close svg { width: 20px; height: 20px; }
.sxo-close:focus-visible { outline: 2px solid var(--or,#FF3019); outline-offset: 2px; }

.sxo-halves {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
.sxo-half {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  padding: 5vh 4vw;
  overflow: hidden;
  background: #070708;
  text-decoration: none;
  transition: flex-grow .55s cubic-bezier(.16, 1, .3, 1), background-color .38s ease;
}
.sxo-half + .sxo-half { border-left: 1px solid rgba(255, 255, 255, .13); }
.sxo-half:hover,
.sxo-half:focus-visible {
  flex-grow: 1.22;
  background: #242426;
}
.sxo-half:focus-visible { outline: 2px solid var(--or,#FF3019); outline-offset: -6px; }

/* L'image (ou son gabarit d'attente) : noir et blanc au repos, couleur et
   zoom au survol. La moitie delaissee s'assombrit. */
/* AUCUN ASSOMBRISSEMENT AU REPOS, seulement la desaturation.
   Les photos fournies sont deja en fond noir studio : le brightness(.62)
   d'origine les eteignait completement, les deux moities se lisaient comme
   deux rectangles noirs. Verifie au rendu avant et apres. */
.sxo-media {
  position: absolute;
  inset: 5% 2% 9%;
  border: 0;
  border-radius: 0;
  opacity: .82;
  filter: grayscale(1) brightness(.82) contrast(.96);
  transform: scale(.88);
  transition: filter .55s ease, transform .75s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}
.sxo-media img { width: 100%; height: 100%; object-fit: contain; }
.sxo-half:hover .sxo-media,
.sxo-half:focus-visible .sxo-media {
  opacity: 1;
  filter: grayscale(0) brightness(1.04) contrast(1);
  transform: scale(.98);
}
/* La moitie delaissee recule sans disparaitre : a .35 elle devenait noire. */
.sxo-halves:hover .sxo-half:not(:hover):not(:focus-visible) .sxo-media {
  opacity: .56;
  filter: grayscale(1) brightness(.48);
}

.sxo-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 44% 56% at 50% 50%, rgba(var(--or-rgb,255,48,25), .15), transparent 70%);
  transition: opacity .6s ease;
}
.sxo-half:hover .sxo-halo,
.sxo-half:focus-visible .sxo-halo { opacity: 1; }

.sxo-label {
  position: relative;
  z-index: 2;
  display: block;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .72);
}
.sxo-label em {
  display: block;
  margin-bottom: 8px;
  font-style: normal;
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
}
.sxo-label strong {
  display: block;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  transition: font-size .6s cubic-bezier(.16, 1, .3, 1);
}
.sxo-half:hover .sxo-label strong,
.sxo-half:focus-visible .sxo-label strong { font-size: clamp(36px, 3.5vw, 52px); }
.sxo-arrow {
  display: inline-block;
  margin-top: 12px;
  font-style: normal;
  font-size: 28px;
  color: var(--or,#FF3019);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .45s ease .12s, transform .45s cubic-bezier(.16, 1, .3, 1) .12s;
}
.sxo-half:hover .sxo-arrow,
.sxo-half:focus-visible .sxo-arrow { opacity: 1; transform: none; }

/* Tactile et petits ecrans : trois blocs empiles, couleur deja presente,
   fleche fixe, aucun jeu de survol. */
@media (max-width: 768px) {
  .sxo-top { padding: 10px 16px; }
  .sxo-close { width: 42px; height: 42px; }
  .sxo-halves { flex-direction: column; }
  .sxo-half { padding: 16px 20px; background: #111113; }
  .sxo-half + .sxo-half { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .13); }
  .sxo-half:hover { flex-grow: 1; }
  .sxo-media,
  .sxo-half:hover .sxo-media {
    inset: 1% 0;
    opacity: .9;
    filter: grayscale(0) brightness(.92);
    transform: scale(.9);
  }
  .sxo-arrow { opacity: 1; transform: none; }
  .sxo-label em { margin-bottom: 4px; font-size: 11px; }
  .sxo-label strong,
  .sxo-half:hover .sxo-label strong { font-size: 28px; }
  .sxo-halo { opacity: 1; }
}

@media (hover: none) {
  .sxo-half:hover { flex-grow: 1; background: #111113; }
  .sxo-media,
  .sxo-half:hover .sxo-media {
    opacity: .92;
    filter: grayscale(0) brightness(.96);
  }
  .sxo-arrow { opacity: 1; transform: none; }
}

/* ── Gabarits d'attente d'images (.sx-ph) ─────────────────────────────────
   Aucune image n'est generee ni prise sur internet : chaque emplacement
   affiche son brief, au bon format, jusqu'a ce que Gloire fournisse le
   visuel. La liste complete vit dans IMAGES.md. ─────────────────────────── */
.sx-ph {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101216 repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 12px, transparent 12px 24px);
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 18px;
  overflow: hidden;
  color: rgba(255, 255, 255, .55);
}
.sx-ph[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
.sx-ph[data-ratio="21/9"] { aspect-ratio: 21 / 9; }
.sx-ph[data-ratio="4/3"]  { aspect-ratio: 4 / 3; }
.sx-ph[data-ratio="3/4"]  { aspect-ratio: 3 / 4; }
.sx-ph[data-ratio="1/1"]  { aspect-ratio: 1 / 1; }
.sx-ph[data-ratio="9/16"] { aspect-ratio: 9 / 16; }
.sx-ph-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--or-rgb,255,48,25), .5);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--or,#FF3019);
}
.sx-ph-txt {
  max-width: 82%;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 26px 0;
}

/* ── Emplacement REMPLI : la photo est arrivee ───────────────────────────
   Plus de filet pointille ni de fond raye : l'image porte tout. Le rayon
   reste, c'est lui qui inscrit la photo dans le langage des cartes.
   object-fit:cover par defaut ; contain pour les sujets DETOURES, qu'on ne
   rogne jamais (le camping-car sur fond transparent). ─────────────────── */
.sx-ph.is-filled {
  border: 0;
  background: transparent;
}
.sx-ph.is-filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sx-ph.is-filled img.sx-contain {
  object-fit: contain;
}

/* ── Accessibilite : tout mouvement neutralise sur demande ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .idmp-public-header,
  .idmp-public-header *,
  .sxo, .sxo * {
    transition: none !important;
    animation: none !important;
  }
  .sxo-half:hover { flex-grow: 1; }
  .sxo-media { filter: grayscale(0) brightness(1); }
  .sxo-arrow { opacity: 1; transform: none; }
}

@keyframes iph-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Le gabarit d'attente generique (.sx-ph) pose position:relative APRES les
   regles du selecteur : a specificite egale il gagnait et le media du
   selecteur retombait dans le flux, petit rectangle au pied de la moitie au
   lieu de la remplir. Deux classes contre une : celle-ci gagne toujours. */
.sxo-half .sxo-media {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  aspect-ratio: auto;
}
.sxo-half .sxo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}