/* ==========================================================================
   Only Models : charte reprise de netykom.mg (design seul, pas de contenu)
   Nuit #0A1429 -> #03020C ; prune #7E186E ; marine #1F244D ; rose #EB60A4
   Titres Montserrat (gras) + Raleway (fin) ; texte Manrope.
   Ecart assume : le rose de la reference ne tient que 2,9:1 en texte sur
   clair -> texte rose sur fond clair en #B8286F (5,9:1) ; le #EB60A4 garde
   filets, puces, decors et textes sur fond nuit (5,9:1).
   ========================================================================== */

:root {
	--nuit: #0A1429;
	--nuit-2: #03020C;
	--nuit-3: #121B3A;
	--prune: #7E186E;
	--prune-c: #9B2A89;
	--marine: #1F244D;
	--rose: #EB60A4;
	--rose-t: #B8286F;
	--gris: #F4F5F8;
	--bord: #E3E5EE;
	--texte: #4F5F6B;
	--blanc: #fff;
	--grad: linear-gradient(45deg, #7E186E 21%, #1F244D 100%);
	--grad-inv: linear-gradient(45deg, #1F244D 20%, #7E186E 100%);
	--grad-rose: linear-gradient(135deg, #EB60A4 0%, #9B2A89 55%, #4B4797 100%);
	--ombre: 0 20px 50px rgba(31, 36, 77, .10);
	--ombre-forte: 0 30px 70px rgba(31, 36, 77, .18);
	--f-titre: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	--f-fin: 'Raleway', 'Segoe UI', Arial, sans-serif;
	--f-texte: 'Manrope', 'Segoe UI', Arial, sans-serif;
	--largeur: 1240px;
	--largeur-entete: 1320px; /* reference : conteneur de l en-tete, repris par les blocs de texte */
	--entete: 104px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-texte); font-size: 16px; line-height: 1.75; color: var(--texte); background: var(--blanc); overflow-x: hidden; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--prune); text-decoration: none; transition: color .2s; }
a:hover { color: var(--rose-t); }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 { color: var(--marine); line-height: 1.2; margin: 0 0 .6em; }
p { margin: 0 0 1.1em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.om-saut { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--blanc); color: var(--marine); padding: 10px 16px; border-radius: 30px; }
.om-saut:focus { left: 16px; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

.om-wrap { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-inline: 24px; position: relative; z-index: 2; }
.om-section { position: relative; padding-block: 110px; overflow: hidden; }
.om-clair { background: var(--blanc); }
.om-gris { background: var(--gris); }
.om-centre { text-align: center; }

/* ---------------------------------------------------------------- typo */

.om-titre { font-family: var(--f-fin); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.18; color: var(--marine); letter-spacing: -.005em; margin: 0; }
.om-titre strong { font-family: var(--f-titre); font-weight: 700; color: var(--prune); letter-spacing: -.02em; }
.om-titre-clair, .om-titre-clair strong { color: var(--blanc); }
.om-surtitre { font-family: var(--f-texte); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-t); margin: 0 0 14px; }
.om-surtitre-clair { color: var(--rose); }
.om-filet { display: block; width: 90px; height: 2px; background: var(--rose); margin: 28px 0 32px; }
.om-centre .om-filet { margin-inline: auto; }
.om-kicker { margin: 0 0 22px; }
.om-kicker span { display: inline-block; background: var(--prune); color: var(--blanc); font-family: var(--f-titre); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: .55em; text-transform: uppercase; padding: 5px 6px 5px 14px; }
.om-texte { font-size: 16.5px; line-height: 1.9; color: var(--texte); }
.om-texte strong { color: var(--marine); }
.om-chapo-section { max-width: 760px; font-size: 17px; line-height: 1.85; }
.om-centre .om-chapo-section { margin-inline: auto; }

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

.om-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--grad); color: var(--blanc); font-family: var(--f-titre); font-weight: 600; font-size: 14px; letter-spacing: .07em; text-transform: uppercase; padding: 19px 40px; border: 0; border-radius: 60px; cursor: pointer; transition: transform .25s, box-shadow .25s, background-position .4s; background-size: 160% 100%; box-shadow: 0 14px 30px rgba(126, 24, 110, .25); }
.om-btn:hover { color: var(--blanc); transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 36px rgba(126, 24, 110, .35); }
/* `flex: none` : sans lui l icone est le seul element compressible du bouton et
   tombe a 0 px de large des que le libelle est trop long, en laissant son trace
   deborder. Mesure sur les cartes de profil a 390 px. */
.om-btn .om-ico { transition: transform .25s; flex: none; }
.om-btn:hover .om-ico-fleche { transform: translateX(4px); }
.om-btn-petit { padding: 13px 26px; font-size: 13px; }
.om-btn-grand { padding: 21px 44px; font-size: 15px; }
.om-btn-ligne { background: transparent; color: var(--marine); box-shadow: inset 0 0 0 2px var(--marine); }
.om-btn-ligne:hover { background: var(--marine); color: var(--blanc); }
/* Sur fond nuit, l aplat prune ne se detache qu a 2:1 : filet rose (WCAG 1.4.11). */
.om-bandeau .om-btn, .om-hero .om-btn, .om-bande .om-btn, .om-valeurs .om-btn { box-shadow: inset 0 0 0 1px var(--rose), 0 14px 30px rgba(0, 0, 0, .3); }
.om-lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-titre); font-weight: 600; font-size: 14px; color: var(--prune); }
.om-lien-fleche:hover .om-ico { transform: translateX(3px); }
.om-lien-fleche .om-ico { transition: transform .2s; }
.om-rond { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--grad); color: var(--blanc); box-shadow: 0 0 0 7px rgba(126, 24, 110, .22); }
.om-rond-petit { width: 42px; height: 42px; box-shadow: none; }

/* ------------------------------------------------------------- en-tete */

.om-entete { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--entete); transition: background .3s, height .3s, box-shadow .3s; }
.om-entete.is-defile { background: rgba(3, 2, 12, .94); height: 84px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.admin-bar .om-entete { top: 32px; }
.om-entete-in { height: 100%; display: flex; align-items: center; gap: 28px; max-width: var(--largeur-entete); }
.om-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--blanc); flex: none; }
.om-logo:hover { color: var(--blanc); }
.om-logo .om-glyphe { flex: none; }
.om-logo-mots { display: flex; align-items: baseline; gap: 5px; font-size: 27px; line-height: 1; }
.om-logo-only { font-family: var(--f-titre); font-weight: 800; letter-spacing: -.03em; color: var(--blanc); }
.om-logo-models { font-family: var(--f-fin); font-weight: 300; color: var(--rose); }
.om-nav { margin-inline: auto; }
.om-nav-liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.om-nav-lien { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; background: none; border: 0; cursor: pointer; font-family: var(--f-texte); font-weight: 500; font-size: 16px; color: var(--blanc); white-space: nowrap; }
.om-nav-lien:hover, .om-nav-lien.is-actif { color: var(--rose); }
.om-nav-cats { position: relative; }
.om-nav-deroule .om-ico { transition: transform .2s; }
.om-nav-cats.is-ouvert .om-nav-deroule .om-ico { transform: rotate(180deg); }
.om-mega { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; transition: all .22s; background: var(--blanc); border-radius: 24px; box-shadow: var(--ombre-forte); padding: 18px; width: 440px; }
.om-nav-cats.is-ouvert .om-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.om-mega ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.om-mega a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; color: var(--marine); font-weight: 600; }
.om-mega a:hover { background: var(--gris); color: var(--prune); }
.om-mega-point { width: 8px; height: 8px; border-radius: 50%; background: var(--prune); flex: none; }
.om-entete-outils { display: flex; align-items: center; gap: 14px; flex: none; }
.om-entete-cherche { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; color: var(--blanc); cursor: pointer; padding: 0; text-align: left; }
.om-entete-cherche-txt { display: flex; flex-direction: column; line-height: 1.3; font-size: 14px; }
.om-entete-cherche-txt strong { font-family: var(--f-titre); font-weight: 700; }
.om-entete-cherche:hover .om-rond { transform: scale(1.06); }
.om-entete-cherche .om-rond { transition: transform .2s; }
.om-langues { position: relative; }
.om-langues-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 40px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: var(--blanc); cursor: pointer; font-family: var(--f-titre); font-weight: 600; font-size: 14px; }
.om-langues-btn:hover { border-color: var(--rose); }
.om-langues-liste { position: absolute; right: 0; top: calc(100% + 10px); list-style: none; margin: 0; padding: 8px; background: var(--blanc); border-radius: 18px; box-shadow: var(--ombre-forte); min-width: 190px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s; z-index: 5; }
.om-langues.is-ouvert .om-langues-liste { opacity: 1; visibility: visible; transform: none; }
.om-langues-liste a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--marine); font-weight: 600; }
.om-langues-liste a:hover, .om-langues-liste a.is-courante { background: var(--gris); color: var(--prune); }
.om-langues-drapeau { display: block; flex: none; width: 30px; height: 20px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 22, 60, .14); }
.om-langues-drapeau-texte { display: inline-flex; align-items: center; justify-content: center; background: var(--grad); color: var(--blanc); font-family: var(--f-titre); font-size: 11px; font-weight: 700; }
.om-titre-drapeau { display: inline-block; width: 1.2em; height: .8em; margin: 0 .08em; vertical-align: -.06em; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 22, 60, .14); }
.om-burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: var(--blanc); cursor: pointer; align-items: center; justify-content: center; position: relative; z-index: 3; }
.om-burger svg { width: 22px; height: 22px; flex: none; }
.om-burger .om-ico-croix { display: none; }
.om-burger[aria-expanded="true"] .om-ico-croix { display: block; }
.om-burger[aria-expanded="true"] .om-ico-menu { display: none; }

/* overlay de recherche */
.om-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(3, 2, 12, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.om-overlay-in { width: 100%; max-width: 820px; text-align: center; }
.om-overlay-fermer { position: absolute; top: 24px; right: 24px; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: none; color: var(--blanc); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.om-overlay-cats { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.om-overlay-cats a { display: inline-block; padding: 9px 18px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .25); color: var(--blanc); font-weight: 600; font-size: 14px; }
.om-overlay-cats a:hover { border-color: var(--rose); color: var(--rose); }

/* ------------------------------------------------------------ recherche */

.om-recherche { position: relative; display: flex; align-items: center; background: var(--blanc); border-radius: 60px; padding: 8px 8px 8px 58px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); max-width: 780px; width: 100%; }
.om-recherche > .om-ico { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--prune); }
.om-recherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 52px; font-size: 16px; color: var(--marine); -webkit-text-fill-color: var(--marine); caret-color: var(--prune); }
.om-recherche input::placeholder { color: #6B7582; -webkit-text-fill-color: #6B7582; opacity: 1; }
.om-recherche button { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px; border: 0; border-radius: 50px; background: var(--grad); color: var(--blanc); font-family: var(--f-titre); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.om-recherche button:hover { filter: brightness(1.12); }
.om-recherche-page { margin: 0 auto 34px; box-shadow: var(--ombre); border: 1px solid var(--bord); }

/* ---------------------------------------------------------------- hero */

.om-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: radial-gradient(1200px 700px at 78% 30%, rgba(126, 24, 110, .45), transparent 60%), radial-gradient(900px 600px at 10% 90%, rgba(75, 71, 151, .35), transparent 60%), linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 100%); color: var(--blanc); overflow: hidden; padding: calc(var(--entete) + 40px) 0 90px; }
.om-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.om-hero-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 2, 12, .78) 0%, rgba(10, 20, 41, .62) 45%, rgba(3, 2, 12, .92) 100%); }
.om-hero.a-image .om-hero-voile { background: linear-gradient(180deg, rgba(3, 2, 12, .80) 0%, rgba(10, 20, 41, .58) 42%, rgba(3, 2, 12, .94) 100%), radial-gradient(900px 500px at 50% 45%, rgba(3, 2, 12, .35), transparent 70%); }
.om-hero-arcs { position: absolute; inset: 0; pointer-events: none; }
.om-hero-arcs::before, .om-hero-arcs::after { content: ""; position: absolute; border-radius: 50%; border: 90px solid rgba(35, 48, 96, .22); width: 1500px; height: 1500px; left: 50%; top: 42%; transform: translate(-50%, 0); }
.om-hero-arcs::after { width: 2100px; height: 2100px; border-width: 120px; border-color: rgba(35, 48, 96, .14); top: 55%; }
.om-hero-in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.om-hero-titre { font-family: var(--f-fin); font-weight: 300; color: var(--blanc); font-size: clamp(40px, 6vw, 80px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 22px; }
.om-hero-titre strong { font-family: var(--f-titre); font-weight: 800; letter-spacing: -.035em; }
.om-hero-sous { font-size: clamp(17px, 1.6vw, 21px); max-width: 720px; line-height: 1.65; color: rgba(255, 255, 255, .9); margin: 0 0 38px; }
/* Cinq par rangee, donc DEUX rangees pour dix categories. En flex, le nombre
   par ligne dependait de la largeur : on lisait 3 + 3 + 3 + 1, avec « Noire »
   seule en bas. La grille fixe le compte. */
.om-stories { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 96px); justify-content: center; gap: 22px 26px; }
.om-stories a { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--blanc); width: 100%; }
.om-story-anneau { display: block; width: 92px; height: 92px; border-radius: 50%; padding: 3px; background: var(--grad-rose); transition: transform .25s; }
.om-story-anneau > * { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--nuit); object-fit: cover; object-position: 50% 18%; }
.om-story-anneau .om-visuel-vide { display: flex; }
.om-story-anneau .om-visuel-vide .om-glyphe { width: 38px; height: 38px; }
.om-stories a:hover .om-story-anneau { transform: translateY(-4px) scale(1.04); }
.om-stories a:hover { color: var(--rose); }
.om-story-nom { font-family: var(--f-titre); font-weight: 600; font-size: 13px; line-height: 1.25; text-align: center; }
.om-hero-bas { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: rgba(255, 255, 255, .7); z-index: 2; animation: om-rebond 2.4s infinite; }
@keyframes om-rebond { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ------------------------------------------------------- visuels vides */

.om-visuel-vide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient(circle at 30% 20%, rgba(235, 96, 164, .35), transparent 55%), var(--grad); }
.om-visuel-vide .om-glyphe { opacity: .9; }

/* ------------------------------------------------------ decors de fond */

.om-deco-cercles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.om-deco-cercles::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%); top: -180px; left: -160px; }
.om-deco-cercles::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 3px solid rgba(31, 36, 77, .06); top: 90px; right: 12%; }
.om-clair .om-deco-cercles::before { background: radial-gradient(circle, rgba(126, 24, 110, .05) 0%, rgba(126, 24, 110, 0) 70%); }
.om-deco-droite::before { left: auto; right: -180px; top: auto; bottom: -200px; }

/* ------------------------------------------------------ sections a split */

.om-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 110px; align-items: center; }
.om-split-visuel { position: relative; padding: 40px 56px 60px 56px; }
.om-cadre { position: relative; z-index: 2; margin: 0; border-radius: 40px; overflow: hidden; box-shadow: var(--ombre-forte); background: var(--grad); }
.om-cadre-portrait { aspect-ratio: 4 / 5; max-width: 100%; }
.om-cadre img, .om-cadre .om-visuel-vide { width: 100%; height: 100%; object-fit: cover; }
.om-bloc-decale { position: absolute; z-index: 1; width: 46%; height: 42%; background: var(--prune); border-radius: 36px; }
.om-bloc-hg { top: 0; left: 0; }
.om-bloc-bd { bottom: 22px; right: 0; }
.om-pointilles { position: absolute; z-index: 3; width: 150px; height: 150px; border-radius: 50%; border: 5px dotted var(--prune); }
.om-pointilles-bg { left: 0; bottom: 10px; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.om-pointilles-hg { left: 6px; top: 0; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); }
.om-carte-chiffre { position: absolute; z-index: 4; right: 10px; bottom: 0; background: var(--blanc); border-radius: 26px; box-shadow: var(--ombre-forte); padding: 26px 30px; text-align: center; min-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.om-carte-chiffre strong { font-family: var(--f-titre); font-weight: 800; font-size: 50px; line-height: 1.05; color: var(--marine); margin-top: 8px; }
.om-carte-chiffre > span:last-child { color: var(--marine); font-size: 15px; }
.om-split-texte .om-btn { margin-top: 14px; }
.om-split-inverse .om-split-texte { order: 0; }

/* ------------------------------------------------------ tetes de section */

.om-tete-section { margin-bottom: 56px; position: relative; z-index: 2; }
.om-tete-section .om-filet { margin-bottom: 22px; }
.om-tete-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.om-tete-ligne .om-filet { margin-bottom: 0; }

/* ------------------------------------------------------ cartes categorie */

.om-grille-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; position: relative; z-index: 2; }
.om-carte-cat { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden; color: var(--blanc); box-shadow: var(--ombre); transition: transform .35s, box-shadow .35s; isolation: isolate; }
.om-carte-cat:hover { color: var(--blanc); transform: translateY(-8px); box-shadow: var(--ombre-forte); }
.om-cc-image { position: absolute; inset: 0; z-index: -2; }
.om-cc-image img, .om-cc-image .om-visuel-vide { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .6s; }
.om-carte-cat:hover .om-cc-image img { transform: scale(1.06); }
.om-cc-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 2, 12, 0) 38%, rgba(3, 2, 12, .55) 62%, rgba(10, 20, 41, .95) 100%); }
.om-cc-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.om-cc-nom { font-family: var(--f-titre); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.om-cc-desc { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.om-cc-lien { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-family: var(--f-titre); font-weight: 600; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--rose); }
.om-carte-cat:hover .om-cc-lien .om-ico { transform: translateX(4px); }
.om-cc-lien .om-ico { transition: transform .2s; }
.om-grille-cats-petite { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.om-grille-cats-petite .om-carte-cat { border-radius: 22px; }
.om-grille-cats-petite .om-cc-texte { padding: 16px 14px; }
.om-grille-cats-petite .om-cc-nom { font-size: 20px; }
.om-grille-cats-petite .om-cc-texte { padding: 20px 20px; }

/* ---------------------------------------------------------- bande sombre */

.om-bande, .om-valeurs { position: relative; overflow: hidden; background: var(--marine); color: var(--blanc); }
.om-bande-img, .om-valeurs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.om-bande > .om-visuel-vide, .om-valeurs > .om-visuel-vide { position: absolute; inset: 0; background: radial-gradient(700px 400px at 20% 50%, rgba(126, 24, 110, .5), transparent 70%), var(--marine); }
.om-bande > .om-visuel-vide .om-glyphe, .om-valeurs > .om-visuel-vide .om-glyphe { display: none; }
.om-bande-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31, 36, 77, .55) 0%, rgba(20, 26, 60, .82) 45%, rgba(10, 20, 41, .96) 100%); }
.om-bande-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; min-height: 460px; padding-block: 90px; }
.om-bande-titre { position: relative; display: flex; justify-content: center; }
.om-bande-titre .om-titre { position: relative; z-index: 2; color: var(--blanc); font-size: clamp(34px, 4vw, 52px); text-align: center; }
.om-bande-titre .om-titre strong { color: var(--blanc); }
.om-blob { position: absolute; z-index: 1; width: 240px; height: 210px; left: 50%; top: 50%; transform: translate(-58%, -40%) rotate(-12deg); background: linear-gradient(135deg, rgba(235, 96, 164, .9), rgba(126, 24, 110, .85)); border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; filter: saturate(1.1); }
.om-bande-texte { padding: 10px 0 10px 46px; }
.om-bande-texte p { margin: 0; font-size: 17px; line-height: 1.95; color: var(--blanc); }

/* -------------------------------------------------------------- valeurs */

.om-valeurs-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 26, 60, .88), rgba(31, 36, 77, .82)); }
.om-valeurs-in { text-align: center; padding-block: 110px; }
.om-valeurs-in .om-filet { margin-inline: auto; }
.om-valeurs-intro { max-width: 860px; margin: 0 auto 64px; font-size: 16.5px; line-height: 1.9; color: rgba(255, 255, 255, .92); }
.om-valeurs-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.om-valeurs-liste li { display: flex; flex-direction: column; align-items: center; padding: 0 20px; position: relative; }
.om-valeurs-liste li + li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .28); }
.om-valeur-rond { width: 136px; height: 136px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--grad); color: var(--blanc); margin-bottom: 22px; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.om-valeur-num { font-family: var(--f-titre); font-weight: 800; font-size: 46px; line-height: 1; color: var(--blanc); }
.om-valeur-nom { font-family: var(--f-titre); font-weight: 600; font-size: 17px; margin-top: 8px; color: var(--blanc); }
.om-valeur-desc { font-size: 14px; color: rgba(255, 255, 255, .8); line-height: 1.5; margin-top: 4px; }

/* -------------------------------------------------------- cartes profil */

.om-grille-modeles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.om-carte-modele { background: var(--blanc); border-radius: 28px; box-shadow: var(--ombre); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.om-carte-modele:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); }
.om-cm-lien { display: block; color: inherit; }
.om-cm-lien:hover { color: inherit; }
.om-cm-image { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: radial-gradient(circle at 30% 20%, rgba(235, 96, 164, .35), transparent 55%), var(--grad); overflow: hidden; }
.om-cm-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.om-carte-modele:hover .om-cm-image img { transform: scale(1.05); }
.om-cm-prix { position: absolute; top: 16px; left: 16px; background: rgba(3, 2, 12, .78); color: var(--blanc); font-family: var(--f-titre); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 30px; }
.om-cm-prix.is-gratuit { background: var(--rose); color: var(--nuit); }
.om-cm-corps { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 24px; }
.om-cm-nom { font-family: var(--f-titre); font-weight: 700; font-size: 18px; color: var(--marine); line-height: 1.25; }
.om-cm-pseudo { color: var(--rose-t); font-weight: 600; font-size: 14px; }
.om-cm-lieu { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--texte); }
.om-cm-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.om-carte-modele { display: flex; flex-direction: column; }
.om-cm-corps { flex: 1; }
h3.om-cm-nom { margin: 0; }
/* Trois lignes, puis points de suspension. `-webkit-line-clamp` est la seule
   coupe qui compte des LIGNES : un decoupage en mots donne une hauteur
   differente a chaque carte. La regle est prefixee mais comprise partout,
   et `line-clamp` standard la double pour la suite. */
.om-cm-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--texte); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.om-cm-cats .om-chip:hover { background: var(--grad); color: var(--blanc); }
.om-cm-desc, .om-cm-cats { margin-bottom: 16px; }
.om-cm-ouvrir { margin-top: auto; align-self: stretch; justify-content: center; padding: 13px 16px; font-size: 12.5px; letter-spacing: .05em; }
.om-chip { display: inline-block; background: var(--gris); color: var(--marine); font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 20px; }
.om-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); border-radius: 50%; font-family: var(--f-titre); font-weight: 800; font-size: calc(var(--s) * .42); color: var(--blanc); border: 2px solid rgba(255, 255, 255, .55); }
.om-avatar-0 { background: var(--grad-rose); }
.om-avatar-1 { background: var(--grad); }
.om-avatar-2 { background: linear-gradient(135deg, #1F244D, #9B2A89); }

/* --------------------------------------------------------- cartes guide */

.om-grille-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.om-carte-guide { background: var(--blanc); border-radius: 30px; box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.om-carte-guide:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); }
.om-cg-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad); }
.om-cg-image img, .om-cg-image .om-visuel-vide { width: 100%; height: 100%; object-fit: cover; }
.om-cg-corps { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.om-cg-date { display: inline-flex; align-items: center; gap: 7px; color: var(--rose-t); font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.om-cg-titre { font-family: var(--f-titre); font-weight: 700; font-size: 20px; line-height: 1.3; margin: 0 0 12px; letter-spacing: -.01em; }
.om-cg-titre a { color: var(--marine); }
.om-cg-titre a:hover { color: var(--prune); }
.om-cg-extrait { font-size: 15px; line-height: 1.7; flex: 1; }

/* ------------------------------------------------------------------ faq */

.om-faq-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; position: relative; z-index: 2; }
.om-faq-col { display: flex; flex-direction: column; gap: 18px; }
.om-faq-item { background: var(--blanc); border-radius: 22px; box-shadow: 0 10px 30px rgba(31, 36, 77, .06); }
.om-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; font-family: var(--f-titre); font-weight: 600; font-size: 16.5px; color: var(--marine); line-height: 1.4; }
.om-faq-item summary::-webkit-details-marker { display: none; }
.om-faq-item summary i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); position: relative; transition: transform .25s; }
.om-faq-item summary i::before, .om-faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; background: var(--blanc); transform: translate(-50%, -50%); }
.om-faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s; }
.om-faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.om-faq-item[open] summary { color: var(--prune); }
.om-faq-rep { padding: 0 26px 22px; }
.om-faq-rep p { margin: 0; font-size: 15.5px; line-height: 1.8; }

/* -------------------------------------------------------------- bandeau */

.om-bandeau { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 85% 20%, rgba(126, 24, 110, .5), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(75, 71, 151, .3), transparent 60%), linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 100%); color: var(--blanc); padding: calc(var(--entete) + 70px) 0 90px; }
.om-bandeau-deco { position: absolute; inset: 0; pointer-events: none; }
.om-bandeau-deco::before { content: ""; position: absolute; width: 1300px; height: 1300px; border-radius: 50%; border: 80px solid rgba(35, 48, 96, .2); left: 55%; top: 30%; }
.om-bandeau h1 { font-family: var(--f-fin); font-weight: 300; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.12; color: var(--blanc); margin: 0 0 18px; max-width: 980px; }
.om-bandeau h1 strong { font-family: var(--f-titre); font-weight: 800; }
.om-bandeau-sous { font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, .88); max-width: 820px; margin: 0; }
.om-bandeau-date { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .8); font-size: 14px; margin: 0 0 14px; }
.om-fil ol { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.om-fil li { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .72); }
.om-fil li + li::before { content: "/"; color: var(--rose); }
.om-fil a { color: rgba(255, 255, 255, .9); }
.om-fil a:hover { color: var(--rose); }
.om-bandeau-cat-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: center; }
.om-bandeau-portrait { margin: 0; aspect-ratio: 3 / 4; border-radius: 34px; overflow: hidden; box-shadow: 22px 22px 0 var(--prune), 0 30px 60px rgba(0, 0, 0, .45); }
.om-bandeau-portrait img, .om-bandeau-portrait .om-visuel-vide { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* ------------------------------------------------------------- archives */

.om-archive-barre { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.om-archive-nb { margin: 0; color: var(--marine); font-size: 16px; }
.om-archive-nb strong { font-family: var(--f-titre); font-weight: 800; font-size: 24px; color: var(--prune); }
.om-filtres { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.om-filtres label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--marine); }
.om-filtres select { height: 46px; border-radius: 14px; border: 1px solid var(--bord); background: var(--blanc); padding: 0 14px; color: var(--marine); min-width: 150px; }
.om-vide { text-align: center; background: var(--gris); border-radius: 30px; padding: 56px 30px; max-width: 820px; margin: 0 auto; }
.om-vide .om-rond { margin-bottom: 20px; }
.om-vide p { font-size: 17px; color: var(--marine); max-width: 600px; margin: 0 auto 24px; }
.om-pastilles { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.om-pastilles-suite { margin: 44px 0 0; }
.om-pastilles a { display: inline-block; padding: 9px 20px; border-radius: 30px; background: var(--gris); color: var(--marine); font-weight: 600; font-size: 14px; }
.om-pastilles a:hover { background: var(--grad); color: var(--blanc); }
.om-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 50px; }
.om-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 16px; border-radius: 30px; background: var(--gris); color: var(--marine); font-weight: 700; }
.om-pagination .current { background: var(--grad); color: var(--blanc); }
.om-editorial .om-wrap { z-index: 2; }
.om-tete-resultats { margin: 60px 0 24px; }

/* ---------------------------------------------------------------- prose */

.om-prose { max-width: none; font-size: 17px; line-height: 1.9; color: var(--texte); }
.om-prose-large { max-width: none; }
/* Blocs de texte a la largeur de l en-tete (pages, texte de categorie, guide, fiche) */
.om-wrap.om-prose, .om-wrap:has(> .om-page), .om-wrap.om-guide, .om-wrap.om-profil, .om-wrap.om-bandeau-in, .om-pied .om-wrap, .om-wrap.om-contact-in { max-width: var(--largeur-entete); }
.om-page { margin: 0 auto; position: relative; z-index: 2; }
.om-prose > *:first-child { margin-top: 0; }
.om-prose h2 { font-family: var(--f-fin); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); color: var(--marine); margin: 1.8em 0 .6em; line-height: 1.25; scroll-margin-top: 110px; }
.om-prose h2::after { content: ""; display: block; width: 70px; height: 2px; background: var(--rose); margin-top: 16px; }
.om-prose h2 strong { font-family: var(--f-titre); font-weight: 700; color: var(--prune); }
.om-prose h3 { font-family: var(--f-titre); font-weight: 700; font-size: 20px; color: var(--marine); margin: 1.6em 0 .5em; }
.om-prose a { color: var(--prune); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.om-prose a:hover { color: var(--rose-t); }
.om-prose strong { color: var(--marine); }
.om-prose ul, .om-prose ol { padding-left: 0; margin: 0 0 1.3em; }
.om-prose ul { list-style: none; }
.om-prose ul li { position: relative; padding-left: 26px; margin-bottom: .5em; }
.om-prose ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 9px; height: 9px; border-radius: 50%; background: var(--prune); }
.om-prose ol { padding-left: 1.4em; }
.om-prose ol li { margin-bottom: .5em; padding-left: 6px; }
.om-prose ol li::marker { color: var(--prune); font-family: var(--f-titre); font-weight: 700; }
.om-prose blockquote { margin: 1.6em 0; padding: 22px 28px; border-left: 4px solid var(--rose); background: var(--gris); border-radius: 0 20px 20px 0; color: var(--marine); }
.om-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; display: block; overflow-x: auto; }
.om-prose th { background: var(--grad); color: var(--blanc); text-align: left; padding: 12px 16px; font-family: var(--f-titre); font-weight: 600; }
.om-prose td { padding: 12px 16px; border-bottom: 1px solid var(--bord); }
.om-prose .om-encadre { background: var(--gris); border-radius: 24px; padding: 26px 30px; margin: 1.6em 0; }
.om-chapo { font-size: 19px; line-height: 1.75; color: var(--marine); font-weight: 500; }
.om-plan ul { columns: 2; column-gap: 40px; }
/* Plan du site : liens sans soulignement (demande 2026-09-15) */
.om-prose .om-plan a { text-decoration: none; }
.om-prose .om-plan a:hover { color: var(--rose-t); }

/* ----------------------------------------------------------------- guide */

.om-guide { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 70px; align-items: start; }
.om-guide-image { margin: 0 0 34px; border-radius: 34px; overflow: hidden; box-shadow: var(--ombre); }
.om-guide-image img { width: 100%; }
.om-guide-cote { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 24px; }
.om-sommaire { background: var(--gris); border-radius: 26px; padding: 26px 26px 18px; }
.om-sommaire-titre { font-family: var(--f-titre); font-weight: 700; color: var(--marine); font-size: 17px; margin: 0 0 12px; }
.om-sommaire ol { margin: 0; padding-left: 1.2em; font-size: 14.5px; line-height: 1.5; }
.om-sommaire li { margin-bottom: 10px; }
.om-sommaire li::marker { color: var(--prune); font-weight: 700; }
.om-sommaire a { color: var(--marine); }
.om-sommaire a:hover { color: var(--prune); }
.om-cote-cta { background: var(--grad); color: var(--blanc); border-radius: 26px; padding: 28px; }
.om-cote-cta-titre { font-family: var(--f-titre); font-weight: 700; font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
.om-cote-cta p { color: rgba(255, 255, 255, .9); font-size: 15px; }
.om-cote-cta .om-btn { background: var(--blanc); color: var(--marine); box-shadow: none; }

/* --------------------------------------------------------------- profil */

.om-profil-tete { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 50px; align-items: center; }
.om-profil-photo { margin: 0; aspect-ratio: 3 / 4; border-radius: 30px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--grad); box-shadow: 16px 16px 0 var(--prune), 0 30px 60px rgba(0, 0, 0, .45); }
.om-profil-photo img { width: 100%; height: 100%; object-fit: cover; }
.om-profil-id h1 { margin-bottom: 6px; }
.om-profil-pseudo { color: var(--rose); font-weight: 600; font-size: 18px; margin: 0 0 18px; }
.om-profil-chips { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.om-profil-chips li { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); padding: 7px 15px; border-radius: 30px; font-size: 14px; color: var(--blanc); }
.om-profil-chips a { color: var(--blanc); }
.om-profil-chips li:has(a):hover { border-color: var(--rose); }
.om-profil-chips .om-chip-prix { background: var(--rose); color: var(--nuit); border-color: var(--rose); font-weight: 700; }
.om-profil { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 70px; align-items: start; }
.om-profil-cote { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 110px; }
.om-fiche { background: var(--gris); border-radius: 26px; padding: 26px 28px; }
.om-fiche-titre { font-family: var(--f-titre); font-weight: 700; color: var(--marine); font-size: 18px; margin: 0 0 14px; }
.om-fiche dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 15px; }
.om-fiche dt { color: var(--texte); }
.om-fiche dd { margin: 0; color: var(--marine); font-weight: 600; text-align: right; }
.om-fiche-note p { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; }
.om-fiche-note .om-ico { flex: none; color: var(--prune); margin-top: 3px; }

/* ----------------------------------------------------------- formulaires */

.om-form { display: flex; flex-direction: column; gap: 18px; background: var(--blanc); border-radius: 30px; box-shadow: var(--ombre); padding: 36px; margin: 1.8em 0; }
.om-form-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.om-form label, .om-form legend { display: flex; flex-direction: column; gap: 7px; font-family: var(--f-titre); font-weight: 600; font-size: 14px; color: var(--marine); }
.om-form input[type="text"], .om-form input[type="email"], .om-form input[type="url"], .om-form select, .om-form textarea { width: 100%; border: 1px solid var(--bord); background: #F9FAFC; border-radius: 16px; padding: 14px 16px; font-family: var(--f-texte); font-weight: 400; font-size: 16px; color: var(--marine); transition: border-color .2s, box-shadow .2s; }
.om-form input:focus, .om-form select:focus, .om-form textarea:focus { outline: 0; border-color: var(--prune); box-shadow: 0 0 0 4px rgba(126, 24, 110, .12); background: var(--blanc); }
.om-form select { height: 52px; }
.om-form-cases { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.om-form-cases legend { margin-bottom: 10px; width: 100%; }
.om-form-cases label { flex-direction: row; align-items: center; gap: 8px; background: var(--gris); border-radius: 30px; padding: 9px 16px; font-family: var(--f-texte); cursor: pointer; }
.om-form-case { flex-direction: row !important; align-items: flex-start; gap: 12px !important; font-family: var(--f-texte) !important; font-weight: 500 !important; line-height: 1.55; }
.om-form-case input, .om-form-cases input { width: 18px; height: 18px; accent-color: var(--prune); flex: none; margin-top: 2px; }
.om-form .om-btn { align-self: flex-start; }
.om-hp { position: absolute !important; left: -9999px !important; }
.om-form-msg { margin: 0; font-weight: 600; min-height: 1.4em; }
.om-form-msg.is-ok { color: #1E7A4C; }
.om-form-msg.is-err { color: #B3261E; }

/* ------------------------------------------------------------------ pied */

.om-pied { position: relative; overflow: hidden; background: radial-gradient(800px 480px at 72% 35%, rgba(75, 71, 151, .35), transparent 65%), radial-gradient(600px 420px at 95% 90%, rgba(126, 24, 110, .35), transparent 65%), linear-gradient(180deg, #050816 0%, var(--nuit-2) 100%); color: rgba(255, 255, 255, .86); }
.om-pied-grille { display: grid; grid-template-columns: 1.3fr 1.2fr .9fr 1.2fr; gap: 50px; padding-block: 90px 70px; }
.om-logo-pied .om-logo-mots { font-size: 30px; }
.om-pied-marque p { margin: 22px 0 0; font-size: 15px; line-height: 1.8; max-width: 330px; }
.om-pied-titre { font-family: var(--f-titre); font-weight: 800; font-size: 22px; color: var(--blanc); margin: 0 0 22px; letter-spacing: -.01em; }
.om-pied-puces { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.om-pied-2col { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.om-pied-puces a { display: inline-flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .9); font-size: 15.5px; }
.om-pied-puces a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--prune-c); flex: none; transition: background .2s; }
.om-pied-puces a:hover { color: var(--rose); }
.om-pied-puces a:hover::before { background: var(--rose); }
.om-pied-contact { display: flex; align-items: center; gap: 16px; color: var(--blanc); margin-bottom: 20px; }
.om-pied-contact > span:last-child { display: flex; flex-direction: column; line-height: 1.4; }
.om-pied-contact strong { font-weight: 600; font-size: 16px; }
.om-pied-contact span span { font-size: 14px; color: rgba(255, 255, 255, .72); }
.om-pied-contact:hover { color: var(--rose); }
.om-pied-contact .om-rond { box-shadow: 0 0 0 6px rgba(126, 24, 110, .25); }
.om-pied-bas { background: #070A18; position: relative; z-index: 2; }
.om-pied-bas-in { display: flex; align-items: center; justify-content: center; gap: 12px 26px; flex-wrap: wrap; padding-block: 22px; font-size: 15px; }
.om-pied-bas-in p { margin: 0; color: var(--blanc); }
.om-pied-bas-in > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.om-pied-bas-in > ul li + li::before { content: "|"; margin-right: 18px; color: rgba(255, 255, 255, .4); }
.om-pied-bas-in > ul a { color: var(--blanc); }
.om-pied-bas-in > ul a:hover { color: var(--rose); }
.om-langues-pied .om-langues-liste { top: auto; bottom: calc(100% + 10px); }

/* ---------------------------------------------------- page contact (netykom) */

.om-bandeau-photo { background: var(--nuit-2); padding: calc(var(--entete) + 90px) 0 110px; }
.om-bandeau-photo .om-bandeau-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.om-bandeau-photo > .om-visuel-vide { position: absolute; inset: 0; }
.om-bandeau-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 2, 12, .94) 0%, rgba(10, 20, 41, .86) 45%, rgba(10, 20, 41, .74) 100%); }
.om-bandeau-photo h1 { font-size: clamp(38px, 5vw, 64px); }
.om-contact { padding-block: 110px 130px; }
.om-contact-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.om-contact-infos { position: relative; z-index: 1; background: radial-gradient(520px 320px at 0% 100%, rgba(75, 71, 151, .35), transparent 70%), linear-gradient(160deg, var(--nuit) 0%, var(--nuit-2) 100%); color: var(--blanc); border-radius: 30px; padding: 64px 110px 64px 56px; margin-right: -70px; box-shadow: var(--ombre-forte); }
.om-contact-sur { font-family: var(--f-texte); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; color: var(--blanc); }
.om-contact-titre { font-family: var(--f-fin); font-weight: 300; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.1; text-transform: uppercase; margin: 0 0 26px; background: linear-gradient(90deg, #D26BC0 0%, #EB60A4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.om-contact-titre strong { font-family: var(--f-titre); font-weight: 700; }
.om-contact-texte { font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, .9); }
.om-contact-texte p { margin: 0 0 1em; }
.om-contact-texte a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.om-contact-texte a:hover { color: var(--blanc); }
.om-contact-texte strong { color: var(--blanc); }
.om-contact-lignes { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; }
.om-contact-lignes li { display: flex; align-items: center; gap: 18px; }
.om-contact-lignes li > span:last-child { display: flex; flex-direction: column; line-height: 1.4; }
.om-contact-lib { font-size: 14px; color: rgba(255, 255, 255, .72); }
.om-contact-lignes strong, .om-contact-lignes a { font-family: var(--f-titre); font-weight: 600; font-size: 16px; color: var(--blanc); }
.om-contact-lignes a:hover { color: var(--rose); }
.om-contact-form { position: relative; z-index: 2; background: var(--blanc); border-radius: 30px; box-shadow: 0 30px 80px rgba(31, 36, 77, .18); padding: 46px 42px; overflow: hidden; }
.om-contact-cercle { position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -190px; top: -120px; background: radial-gradient(circle, rgba(126, 24, 110, .06) 0%, rgba(126, 24, 110, 0) 70%); border: 60px solid rgba(31, 36, 77, .03); pointer-events: none; }
.om-contact-form .om-form { position: relative; background: transparent; box-shadow: none; padding: 0; margin: 0; border-radius: 0; gap: 20px; }
.om-contact-form .om-form label { font-family: var(--f-titre); font-weight: 700; font-size: 14px; color: var(--marine); }
.om-contact-form .om-form input[type="text"], .om-contact-form .om-form input[type="email"], .om-contact-form .om-form textarea { background: var(--blanc); border: 1px solid var(--prune-c); border-radius: 4px; padding: 13px 14px; }
.om-contact-form .om-form input:focus, .om-contact-form .om-form textarea:focus { border-color: var(--rose-t); box-shadow: 0 0 0 3px rgba(235, 96, 164, .18); }
.om-contact-form .om-form-ligne { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.om-contact-form .om-btn { margin-top: 6px; }

@media (max-width: 980px) {
	.om-contact-in { grid-template-columns: minmax(0, 1fr); }
	.om-contact-infos { margin: 0 0 -40px; padding: 48px 34px 88px; }
	.om-contact-form { margin: 0 16px; }
}
@media (max-width: 700px) {
	.om-bandeau-photo { padding: calc(var(--entete) + 46px) 0 70px; }
	.om-contact { padding-block: 64px 80px; }
	.om-contact-infos { padding: 36px 22px 76px; border-radius: 24px; }
	.om-contact-form { margin: 0 8px; padding: 30px 20px; border-radius: 24px; }
}

/* ----------------------------------------------- animations (reprises de netykom.mg / Divi) */

@keyframes om-bounce-in { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.06); } 70% { transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes om-bob-float { 100% { transform: translateY(-8px); } }
@keyframes om-bob { 0% { transform: translateY(-8px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(-8px); } }
@keyframes om-crescendo { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes om-grow { 0% { opacity: 0; transform: translate(-50%, 0) scaleY(.5); } 100% { opacity: 1; transform: translate(-50%, 0) scaleY(1); } }
@keyframes om-grow-droite { 0% { opacity: 0; transform: scaleY(.5); } 100% { opacity: 1; transform: scaleY(1); } }
@keyframes om-clignote { 50% { opacity: 0; } }

/* Apparitions : seulement quand anim.js tourne (classe om-anim sur <html>) */
.om-anim [data-anim] { opacity: 0; transition: opacity 1s cubic-bezier(.77, 0, .175, 1), transform 1s cubic-bezier(.77, 0, .175, 1); transition-delay: var(--om-delai, 0ms); will-change: opacity, transform; }
.om-anim [data-anim="fade-up"] { transform: translateY(46px); }
.om-anim [data-anim="fade-down"] { transform: translateY(-30px); }
.om-anim [data-anim="fade-left"] { transform: translateX(60px); }
.om-anim [data-anim="fade-right"] { transform: translateX(-60px); }
.om-anim [data-anim="zoom"] { transform: scale(.86); }
.om-anim [data-anim].is-vu { opacity: 1; transform: none; }
.om-anim [data-anim="bounce"] { transition: none; }
.om-anim [data-anim="bounce"].is-vu { animation: om-bounce-in .9s cubic-bezier(.77, 0, .175, 1) both; animation-delay: var(--om-delai, 0ms); }
/* les cartes gardent leur propre survol une fois apparues */
.om-anim .om-grille-cats > .is-vu, .om-anim .om-grille-modeles > .is-vu, .om-anim .om-grille-guides > .is-vu { transition: opacity 1s cubic-bezier(.77, 0, .175, 1), transform .35s ease; transition-delay: var(--om-delai, 0ms), 0ms; }

/* Images qui flottent au survol (imgHover de la reference) */
.om-cadre:hover img, .om-bandeau-portrait:hover img { animation: om-bob-float .3s ease-out forwards, om-bob 1.5s ease-in-out .3s infinite; }
/* Pulsation continue des elements decoratifs (scaleAnimation_img / crescendo) */
.om-blob { animation: om-crescendo 1.5s alternate infinite ease-in; }
.om-carte-chiffre .om-rond, .om-entete-cherche .om-rond { animation: om-crescendo 1.5s alternate infinite ease-in; }
/* Engagements : remplissage degrade depuis le bas au survol (before_blurb) */
.om-valeurs-liste li { border-radius: 26px; padding: 26px 20px; overflow: hidden; isolation: isolate; }
.om-valeurs-liste li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: -1; background: linear-gradient(45deg, #1F244D 20%, #7E186E 100%); opacity: 0; transition: height .4s ease-in-out, opacity .4s ease-in-out; border-radius: 26px; }
.om-valeurs-liste li:hover::after { height: 100%; opacity: 1; }
.om-valeur-rond, .om-valeur-desc { transition: transform .4s ease-in-out; }
.om-valeurs-liste li:hover .om-valeur-rond { transform: scale(.85); }
.om-valeurs-liste li:hover .om-valeur-desc { transform: scale(1.12); }
/* Icones qui grossissent au survol (compterBarClass) */
.om-pied-contact .om-rond, .om-rond { transition: transform .3s; }
.om-pied-contact:hover .om-rond { transform: scale(1.1); }
/* Menus deroulants qui s ouvrent en « Grow » */
.om-nav-cats.is-ouvert .om-mega { transform-origin: 50% 0; animation: om-grow .4s ease-in-out; }
.om-langues.is-ouvert .om-langues-liste { transform-origin: 100% 0; animation: om-grow-droite .4s ease-in-out; }
/* Texte tape du hero */
.om-hero-tape { margin: -18px 0 30px; font-family: var(--f-titre); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); color: var(--rose); min-height: 1.3em; }
.om-curseur { display: inline-block; margin-left: 3px; font-weight: 400; color: var(--blanc); animation: om-clignote 1s step-end infinite; }

@media (max-width: 1100px) {
	.om-nav-cats.is-ouvert .om-mega { animation: none; }
}

/* ------------------------------------- section « liens entretenus » : sequence d animation */

@keyframes om-blob-morph {
	0%, 100% { border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; }
	25% { border-radius: 42% 58% 38% 62% / 58% 38% 62% 42%; }
	50% { border-radius: 65% 35% 60% 40% / 40% 62% 38% 60%; }
	75% { border-radius: 38% 62% 45% 55% / 60% 40% 58% 42%; }
}
@keyframes om-blob-tourne { to { transform: translate(-58%, -40%) rotate(348deg); } }
@keyframes om-blob-entree { 0% { opacity: 0; transform: translate(-58%, -40%) rotate(-120deg) scale(.2); } 100% { opacity: 1; transform: translate(-58%, -40%) rotate(-12deg) scale(1); } }
@keyframes om-anneau-orbite { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes om-kenburns { 0% { scale: 1.18; } 100% { scale: 1.06; } }
@keyframes om-monte { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-340px) scale(1.1); } }
@keyframes om-surligne { to { background-size: 100% 38%; } }

.om-bande-img { translate: 0 var(--om-par, 0px); scale: 1.06; will-change: translate, scale; }
.om-bande-texte { position: relative; border-left: 0; }
.om-bande-ligne { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--rose), #9B2A89); }
.om-blob-anneau { position: absolute; z-index: 1; left: 50%; top: 50%; width: 330px; height: 330px; border-radius: 50%; border: 2px dashed rgba(235, 96, 164, .45); transform: translate(-50%, -50%); pointer-events: none; }
.om-blob-anneau::after { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 16px 4px rgba(235, 96, 164, .7); }
.om-bande-particules { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.om-bande-particules i { position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%; background: rgba(235, 96, 164, .8); box-shadow: 0 0 12px 3px rgba(235, 96, 164, .45); opacity: 0; }
.om-bande-particules i:nth-child(1) { left: 8%; }
.om-bande-particules i:nth-child(2) { left: 22%; width: 5px; height: 5px; }
.om-bande-particules i:nth-child(3) { left: 37%; width: 10px; height: 10px; }
.om-bande-particules i:nth-child(4) { left: 55%; width: 6px; height: 6px; }
.om-bande-particules i:nth-child(5) { left: 68%; }
.om-bande-particules i:nth-child(6) { left: 81%; width: 5px; height: 5px; }
.om-bande-particules i:nth-child(7) { left: 93%; width: 9px; height: 9px; }
.om-bande-texte strong { background-image: linear-gradient(90deg, rgba(235, 96, 164, .55), rgba(155, 42, 137, .55)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 38%; }

/* Etat de depart et sequence : uniquement quand anim.js tourne */
.om-anim .om-bande-img { animation: none; }
.om-anim .om-bande.is-vu .om-bande-img { animation: om-kenburns 2.6s cubic-bezier(.77, 0, .175, 1) both; }
.om-anim .om-bande .om-blob, .om-anim .om-bande .om-blob-anneau { opacity: 0; }
.om-anim .om-bande.is-vu .om-blob { opacity: 1; animation: om-blob-entree 1.1s cubic-bezier(.34, 1.56, .64, 1) .2s both, om-blob-morph 7s ease-in-out 1.3s infinite, om-blob-tourne 28s linear 1.3s infinite; }
.om-anim .om-bande.is-vu .om-blob-anneau { opacity: 1; transition: opacity 1s ease .8s; animation: om-anneau-orbite 14s linear infinite; }
.om-anim .om-bande .om-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.om-anim .om-bande .om-mot > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.77, 0, .175, 1); transition-delay: calc(.45s + var(--om-rang, 0) * .12s); }
.om-anim .om-bande.is-vu .om-mot > span { transform: none; }
.om-anim .om-bande .om-bande-ligne { transform: scaleY(0); transform-origin: 50% 0; transition: transform 1s cubic-bezier(.77, 0, .175, 1) .7s; }
.om-anim .om-bande.is-vu .om-bande-ligne { transform: scaleY(1); }
.om-anim .om-bande .om-bande-texte p { opacity: 0; transform: translateX(40px); transition: opacity 1s cubic-bezier(.77, 0, .175, 1) 1.1s, transform 1s cubic-bezier(.77, 0, .175, 1) 1.1s; }
.om-anim .om-bande.is-vu .om-bande-texte p { opacity: 1; transform: none; }
.om-anim .om-bande .om-bande-texte strong { background-size: 0 38%; }
.om-anim .om-bande.is-vu .om-bande-texte strong { animation: om-surligne .8s cubic-bezier(.77, 0, .175, 1) 2s forwards; }
.om-anim .om-bande.is-vu .om-bande-particules i { animation: om-monte 6s ease-in infinite; }
.om-anim .om-bande.is-vu .om-bande-particules i:nth-child(2) { animation-delay: 1.4s; animation-duration: 7.5s; }
.om-anim .om-bande.is-vu .om-bande-particules i:nth-child(3) { animation-delay: .6s; animation-duration: 5.5s; }
.om-anim .om-bande.is-vu .om-bande-particules i:nth-child(4) { animation-delay: 2.6s; animation-duration: 8s; }
.om-anim .om-bande.is-vu .om-bande-particules i:nth-child(5) { animation-delay: 1s; animation-duration: 6.5s; }
.om-anim .om-bande.is-vu .om-bande-particules i:nth-child(6) { animation-delay: 3.2s; animation-duration: 7s; }
.om-anim .om-bande.is-vu .om-bande-particules i:nth-child(7) { animation-delay: 2s; animation-duration: 5.8s; }
/* la pulsation generique du blob est remplacee par la deformation */
.om-anim .om-bande .om-blob { animation-name: none; }
.om-anim .om-bande.is-vu .om-blob { animation-name: om-blob-entree, om-blob-morph, om-blob-tourne; }

@media (max-width: 700px) {
	.om-blob-anneau { width: 240px; height: 240px; }
	.om-bande-ligne { width: 3px; }
}

/* ------------------------------ section « Pourquoi passer par Telegram » : sequence d animation */

@keyframes om-valeur-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes om-reflet { 0% { transform: translateX(-160%) rotate(25deg); } 60%, 100% { transform: translateX(260%) rotate(25deg); } }
@keyframes om-anneau-halo { 0%, 100% { filter: drop-shadow(0 0 0 rgba(235, 96, 164, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(235, 96, 164, .75)); } }
@keyframes om-lueur-balaye { 0% { transform: translateX(-30%); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateX(130%); opacity: 0; } }

.om-valeurs-img { translate: 0 var(--om-par, 0px); scale: 1.06; will-change: translate, scale; }
.om-valeurs-lueur { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.om-valeurs-lueur::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: radial-gradient(closest-side, rgba(235, 96, 164, .22), transparent); opacity: 0; }
.om-valeur-visuel { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 170px; height: 170px; margin-bottom: 8px; }
.om-valeur-visuel .om-valeur-rond { margin: 0; position: relative; overflow: hidden; }
.om-valeur-rond::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-160%) rotate(25deg); pointer-events: none; }
.om-valeur-anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.om-valeur-anneau circle { fill: none; stroke: var(--rose); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.om-valeur-num { font-variant-numeric: tabular-nums; }

.om-anim .om-valeurs.is-vu .om-valeurs-img { animation: om-kenburns 2.6s cubic-bezier(.77, 0, .175, 1) both; }
.om-anim .om-valeurs.is-vu .om-valeurs-lueur::before { animation: om-lueur-balaye 7s ease-in-out 1.5s infinite; }
/* surtitre, filet, intro */
.om-anim .om-valeurs .om-surtitre, .om-anim .om-valeurs .om-valeurs-intro { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.77, 0, .175, 1), transform .9s cubic-bezier(.77, 0, .175, 1); }
.om-anim .om-valeurs .om-valeurs-intro { transition-delay: .9s; }
.om-anim .om-valeurs.is-vu .om-surtitre, .om-anim .om-valeurs.is-vu .om-valeurs-intro { opacity: 1; transform: none; }
.om-anim .om-valeurs .om-filet { transform: scaleX(0); transition: transform .9s cubic-bezier(.77, 0, .175, 1) .7s; }
.om-anim .om-valeurs.is-vu .om-filet { transform: scaleX(1); }
.om-anim .om-valeurs .om-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.om-anim .om-valeurs .om-mot > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.77, 0, .175, 1); transition-delay: calc(.2s + var(--om-rang, 0) * .1s); }
.om-anim .om-valeurs.is-vu .om-mot > span { transform: none; }
/* cartes : apparition en cascade */
.om-anim .om-valeurs .om-valeurs-liste li { opacity: 0; transform: translateY(50px) scale(.94); transition: opacity 1s cubic-bezier(.77, 0, .175, 1), transform 1s cubic-bezier(.77, 0, .175, 1); }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(1) { transition-delay: .8s; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(2) { transition-delay: 1.02s; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(3) { transition-delay: 1.24s; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(4) { transition-delay: 1.46s; }
.om-anim .om-valeurs.is-vu .om-valeurs-liste li { opacity: 1; transform: none; }
/* separateurs qui poussent */
.om-anim .om-valeurs .om-valeurs-liste li + li::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.2s cubic-bezier(.77, 0, .175, 1) 1.6s; }
.om-anim .om-valeurs.is-vu .om-valeurs-liste li + li::before { transform: scaleY(1); }
/* anneau de progression */
.om-anim .om-valeurs .om-valeur-anneau circle { stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.77, 0, .175, 1); }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(1) .om-valeur-anneau circle { transition-delay: 1.1s; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(2) .om-valeur-anneau circle { transition-delay: 1.32s; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(3) .om-valeur-anneau circle { transition-delay: 1.54s; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(4) .om-valeur-anneau circle { transition-delay: 1.76s; }
.om-anim .om-valeurs.is-vu .om-valeur-anneau circle { stroke-dashoffset: 0; }
.om-anim .om-valeurs.is-vu .om-valeur-anneau { animation: om-anneau-halo 3s ease-in-out 3.2s infinite; }
/* icones qui pivotent et grossissent depuis le centre du rond */
.om-anim .om-valeurs .om-valeur-rond svg { transform: scale(0) rotate(-180deg); opacity: 0; transition: transform .9s cubic-bezier(.34, 1.56, .64, 1), opacity .5s ease; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(1) .om-valeur-rond svg { transition-delay: 1.5s; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(2) .om-valeur-rond svg { transition-delay: 1.72s; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(3) .om-valeur-rond svg { transition-delay: 1.94s; }
.om-anim .om-valeurs .om-valeurs-liste li:nth-child(4) .om-valeur-rond svg { transition-delay: 2.16s; }
.om-anim .om-valeurs.is-vu .om-valeur-rond svg { transform: none; opacity: 1; }
/* en continu : flottement decale et reflet */
.om-anim .om-valeurs.is-vu .om-valeur-visuel { animation: om-valeur-flotte 4s ease-in-out 3s infinite; }
.om-anim .om-valeurs.is-vu .om-valeurs-liste li:nth-child(2) .om-valeur-visuel { animation-delay: 3.6s; }
.om-anim .om-valeurs.is-vu .om-valeurs-liste li:nth-child(3) .om-valeur-visuel { animation-delay: 4.2s; }
.om-anim .om-valeurs.is-vu .om-valeurs-liste li:nth-child(4) .om-valeur-visuel { animation-delay: 4.8s; }
.om-anim .om-valeurs.is-vu .om-valeur-rond::after { animation: om-reflet 5s ease-in-out 3s infinite; }
.om-anim .om-valeurs.is-vu .om-valeurs-liste li:nth-child(2) .om-valeur-rond::after { animation-delay: 3.5s; }
.om-anim .om-valeurs.is-vu .om-valeurs-liste li:nth-child(3) .om-valeur-rond::after { animation-delay: 4s; }
.om-anim .om-valeurs.is-vu .om-valeurs-liste li:nth-child(4) .om-valeur-rond::after { animation-delay: 4.5s; }
/* survol : l anneau tourne et le rond se contracte (s ajoute au remplissage degrade existant) */
.om-valeurs-liste li:hover .om-valeur-anneau { transform: rotate(270deg); transition: transform .8s cubic-bezier(.77, 0, .175, 1); }
.om-valeur-anneau { transition: transform .8s cubic-bezier(.77, 0, .175, 1); }

@media (max-width: 700px) {
	.om-valeur-visuel { width: 124px; height: 124px; }
}

/* ============================================================ responsive */

@media (max-width: 1240px) {
	.om-entete-cherche-txt { display: none; }
	.om-nav-lien { font-size: 15px; padding: 10px 9px; }
}

@media (max-width: 1100px) {
	:root { --entete: 84px; }
	/* backdrop-filter cree un bloc conteneur : le menu fixe se caserait dans l en-tete. */
	.om-entete, .om-entete.is-defile { background: rgba(3, 2, 12, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.om-burger { display: inline-flex; }
	.om-nav { position: fixed; left: 0; right: 0; top: var(--entete); bottom: 0; background: var(--nuit-2); padding: 20px 24px 40px; overflow-y: auto; transform: translateX(100%); transition: transform .3s; margin: 0; z-index: 1; }
	.om-entete.is-defile .om-nav { top: 84px; }
	.om-nav.is-ouvert { transform: none; }
	.om-nav-liste { flex-direction: column; align-items: stretch; gap: 0; }
	.om-nav-liste > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.om-nav-lien { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 18px; }
	.om-mega { position: static; transform: none; opacity: 1; visibility: visible; width: auto; display: none; background: transparent; box-shadow: none; padding: 0 0 14px; }
	.om-nav-cats.is-ouvert .om-mega { display: block; transform: none; }
	.om-mega a { color: var(--blanc); }
	.om-mega a:hover { background: rgba(255, 255, 255, .06); color: var(--rose); }
	.om-mega-point { background: var(--rose); }
	.om-split { gap: 70px; }
	.om-grille-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.om-grille-cats-petite { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.om-grille-modeles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.om-pied-grille { grid-template-columns: 1fr 1fr; }
	.om-guide, .om-profil { grid-template-columns: minmax(0, 1fr); gap: 50px; }
	.om-guide-cote, .om-profil-cote { position: static; }
}

@media (max-width: 980px) {
	.om-section { padding-block: 80px; }
	.om-split, .om-bande-in { grid-template-columns: minmax(0, 1fr); }
	.om-split-inverse .om-split-visuel { order: 2; }
	.om-split-visuel { max-width: 560px; margin: 0 auto; width: 100%; }
	.om-bande-in { gap: 40px; }
	.om-bande-texte { padding-left: 28px; }
	/* En une colonne la section devient haute, et le blob — cale sur le centre
	   de la SECTION faute de bloc conteneur plus proche — atterrit en plein
	   paragraphe, par-dessus lui (`z-index:1` contre `auto`). Le titre reprend
	   son role de bloc conteneur, comme le balisage l annonce, et le texte
	   repasse devant le decor. */
	.om-bande-titre { position: relative; }
	.om-bande-texte { z-index: 2; }
	.om-valeurs-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 0; }
	.om-valeurs-liste li:nth-child(3)::before { display: none; }
	.om-grille-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.om-faq-grille { grid-template-columns: minmax(0, 1fr); }
	.om-bandeau-cat-in { grid-template-columns: minmax(0, 1fr) 220px; gap: 36px; }
}

@media (max-width: 700px) {
	body { font-size: 15.5px; }
	.om-wrap { padding-inline: 18px; }
	.om-section { padding-block: 64px; }
	.om-logo-mots { font-size: 23px; }
	.om-logo .om-glyphe { width: 36px; height: 36px; }
	.om-langues-btn { padding: 0 10px; height: 42px; }
	.om-langues-btn .om-ico-chevron { display: none; }
	.om-entete-cherche .om-rond { width: 42px; height: 42px; box-shadow: none; }
	.om-entete-outils { gap: 8px; }
	.om-burger { width: 42px; height: 42px; }
	.om-hero { padding: calc(var(--entete) + 34px) 0 70px; min-height: 0; }
	.om-kicker span { letter-spacing: .3em; font-size: 12px; }
	.om-recherche { padding: 6px 6px 6px 46px; }
	.om-recherche > .om-ico { left: 16px; width: 20px; }
	.om-recherche input { height: 48px; font-size: 15px; }
	.om-recherche button { width: 48px; height: 48px; padding: 0; justify-content: center; }
	.om-recherche button span { display: none; }
	/* Deux par rangee sur telephone. Colonnes FLUIDES, jamais une largeur fixe :
	   elle deborderait sans que `scrollWidth` le signale, le hero etant en
	   overflow cache. */
	.om-stories { gap: 22px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; margin-inline: auto; }
	.om-stories a { width: 100%; gap: 7px; }
	/* Le rapport doit etre pose sur l IMAGE aussi : en hauteur `auto`, c est le
	   contenu qui commande, et la plate de categorie est en 3:4 — la pastille
	   sortait en ovale de 64 x 82 au lieu d un rond. */
	.om-story-anneau { width: 100%; height: auto; aspect-ratio: 1; min-height: 0; }
	.om-story-anneau > * { aspect-ratio: 1; }
	.om-story-nom { font-size: 15px; }
	.om-hero-bas { display: none; }
	.om-split-visuel { padding: 26px 26px 50px; }
	.om-carte-chiffre { min-width: 0; padding: 18px 20px; right: 0; }
	.om-carte-chiffre strong { font-size: 38px; }
	.om-pointilles { width: 110px; height: 110px; }
	/* Une seule colonne pour la grande grille de categories. Les quatre regles
	   qui suivent restent calibrees pour la grille « petite » du bas des pages
	   de rubrique, qui porte les DEUX classes et garde ses deux colonnes. */
	.om-grille-cats { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.om-carte-cat { border-radius: 22px; }
	.om-cc-texte { padding: 16px 14px; }
	.om-cc-nom { font-size: 18px; }
	.om-cc-desc { display: none; }
	.om-cc-lien { font-size: 12px; }
	.om-grille-cats-petite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* La carte pleine largeur reprend les valeurs du grand ecran, description
	   comprise : elle n etait masquee que faute de place a mi-largeur. */
	.om-grille-cats:not(.om-grille-cats-petite) .om-cc-texte { padding: 24px 22px; }
	.om-grille-cats:not(.om-grille-cats-petite) .om-cc-nom { font-size: 24px; }
	.om-grille-cats:not(.om-grille-cats-petite) .om-cc-desc { display: block; }
	.om-grille-cats:not(.om-grille-cats-petite) .om-cc-lien { font-size: 13px; }
	/* Une seule colonne : la carte fait toute la largeur, donc elle n a plus
	   besoin des reglages serres qui la faisaient tenir a 170 px (corps, nom,
	   bouton et son icone reprennent les valeurs du grand ecran). */
	.om-grille-modeles { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.om-grille-guides { grid-template-columns: minmax(0, 1fr); }
	.om-valeurs-in { padding-block: 70px; }
	.om-valeur-rond { width: 96px; height: 96px; }
	.om-valeur-rond svg { width: 30px; height: 30px; }
	.om-valeur-num { font-size: 34px; }
	.om-bande-texte { padding-left: 20px; }
	.om-bandeau { padding: calc(var(--entete) + 40px) 0 60px; }
	.om-bandeau-cat-in { grid-template-columns: minmax(0, 1fr); }
	.om-bandeau-portrait { max-width: 240px; box-shadow: 14px 14px 0 var(--prune); }
	.om-profil-tete { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.om-profil-photo { max-width: 200px; box-shadow: 12px 12px 0 var(--prune); }
	.om-form { padding: 24px 20px; border-radius: 24px; }
	.om-form-ligne { grid-template-columns: minmax(0, 1fr); }
	.om-pied-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 64px 50px; }
	.om-plan ul { columns: 1; }
	.om-tete-ligne .om-btn { width: 100%; justify-content: center; }
	.om-btn { padding: 17px 30px; }

	/* Les apparitions LATERALES coutent 60 px de largeur. Sur un telephone le
	   bloc occupe deja toute la largeur : le texte part donc de 42 px hors de
	   l ecran, rogne par le `overflow:hidden` de la section, tant qu il n est
	   pas revele et pendant toute la transition. Sur mobile elles deviennent
	   une montee, qui ne coute aucune largeur. `[data-anim].is-vu` reste plus
	   specifique : l etat d arrivee ne change pas. */
	.om-anim [data-anim="fade-left"],
	.om-anim [data-anim="fade-right"] { transform: translateY(40px); }

	/* Cibles tactiles : 24 px au minimum (WCAG 2.5.8). Les liens en ligne dans
	   un paragraphe sont exemptes par la norme et restent tels quels ; ceux-ci
	   sont des listes de navigation, ou l exception ne joue pas. */
	.om-pied-bas-in > ul a, .om-plan ul a, .om-contact-lignes a { display: inline-block; padding-block: 4px; }
	.om-form-case input, .om-form-cases input { width: 24px; height: 24px; }
	/* La norme exempte les liens en ligne dans un paragraphe ; 2 px de marge
	   verticale elargissent quand meme la zone tactile, et ne deplacent rien
	   (ces liens n ont qu un soulignement, pas de fond). */
	.om-prose p a { padding-block: 2px; }

	/* La bande a sa propre apparition laterale, ecrite a la main hors du
	   systeme `data-anim` : meme defaut, meme correction. */
	.om-anim .om-bande .om-bande-texte p { transform: translateY(30px); }
}

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