/* ========================================================= HOME.CSS — page d'accueil (hero, sections marketing, footer) Chargé uniquement par le gabarit tpl-accueil ========================================================= */ /* ---- Hero ---- */ .hero { background: var(--navy); padding: 5rem 2rem 4rem; text-align: center; position: relative; overflow: hidden; } /* Fond photo + overlays (remplacé par un dégradé propre : voir note README sur la suppression de l'image base64 embarquée dans le CSS d'origine) */ .hero-bg { position: absolute; inset: 0; background-image: radial-gradient(ellipse at 30% 20%, rgba(255,107,53,.35) 0%, transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(78,205,196,.25) 0%, transparent 55%), linear-gradient(135deg, #14142a 0%, #1a1a2e 60%, #10101f 100%); transform: scale(1.04); animation: slowZoom 18s ease-in-out infinite alternate; } @keyframes slowZoom { from { transform:scale(1.04); } to { transform:scale(1.12); } } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10,10,30,.84) 0%, rgba(10,10,30,.68) 45%, rgba(10,10,30,.8) 100%); } .hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(0,0,0,.42) 100%); } .hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 100px; padding: 6px 16px; font-size: 13px; color: rgba(255,255,255,.8); margin-bottom: 1.5rem; animation: fadeDown .6s ease; } .hero-badge span { background: var(--orange); border-radius: 100px; padding: 2px 8px; font-size: 13px; font-weight: 700; color: #fff; } @keyframes fadeDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } } .hero h1 { font-family: 'DM Sans', sans-serif; font-size: clamp(34px, 5.2vw, 62px); font-weight: 800; color: #fff; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 1.25rem; animation: fadeUp .7s ease .1s both; } .hero h1 em { color: var(--orange); font-style: normal; position: relative; } .hero h1 em::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: var(--orange); border-radius: 2px; opacity: .5; animation: slideIn .5s ease .7s both; } @keyframes slideIn { from { width:0; opacity:0; } to { width:100%; opacity:.5; } } .hero-sub { font-size: 17px; color: rgba(255,255,255,.5); margin-bottom: 2.5rem; animation: fadeUp .7s ease .2s both; line-height: 1.6; } @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } /* Badges ligne 1 */ .hero-top-badges { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 1.75rem; flex-wrap: wrap; animation: fadeDown .55s ease both; } .badge-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: 100px; padding: 6px 14px; font-size: 13px; color: rgba(255,255,255,.85); backdrop-filter: blur(6px); } .badge-pill .tag { background: var(--orange); border-radius: 100px; padding: 2px 9px; font-size: 13px; font-weight: 700; color: #fff; } .badge-dispo { display: inline-flex; align-items: center; gap: 7px; background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.4); border-radius: 100px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #4ade80; backdrop-filter: blur(6px); } .dispo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: pulseDot 1.6s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(34,197,94,.5); } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } /* Le bandeau .hero-social-proof a ete retire avec le compteur qu'il portait : il affichait le nombre de professionnels inscrits, deja montre deux fois ailleurs sur le meme ecran. */ .avatars-stack { display: flex; align-items: center; } .avatar-sm { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); overflow: hidden; margin-left: -10px; flex-shrink: 0; } .avatar-sm:first-child { margin-left: 0; } .avatar-sm img { width: 100%; height: 100%; object-fit: cover; } /* Barre de recherche hero */ .search-invite { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.5); margin-bottom: 10px; letter-spacing: .04em; text-transform: uppercase; animation: fadeUp .65s ease .3s both; } .search-invite span { color: rgba(255,255,255,.8); } /* ── LA BARRE DE RECHERCHE : LARGEUR ET CENTRAGE ────────────────────── C'EST ICI que se joue la largeur, et nulle part ailleurs. Pendant deux lots, la largeur était écrite sur .search-card, et elle n'a jamais pu dépasser 712 px quelle que soit la valeur : .search-card était alors DANS .hero-content, plafonné à 760 px pour la lisibilité du titre. « min(calc(100% - 48px), 1320px) » se résolvait donc contre 760 px → 712 px. Aucun nombre écrit sur l'enfant ne pouvait corriger une contrainte posée par le parent. .hero-search est maintenant fille DIRECTE de .hero (voir index.html). La boîte de contenu de .hero est symétrique (rembourrage latéral égal), donc `margin-inline: auto` centre la barre sur le viewport, indépendamment de la largeur du titre au-dessus. Les trois termes du min() : 100% la boîte de contenu de .hero — c'est lui qui évite un débordement de la largeur de la barre de défilement, que 100vw compte et que 100% ignore ; calc(100vw - 64px) la gouttière voulue sur grand écran ; 980px le plafond. */ .hero-search { position: relative; z-index: 5; width: min(100%, calc(100vw - 64px), 980px); margin-inline: auto; animation: fadeUp .7s ease .3s both; } /* ── TYPOGRAPHIE PROPRE À LA BARRE DE RECHERCHE ──────────────────────── Cette pile ne s'applique QU'À la barre : ni au menu, ni aux cartes, ni aux tableaux de bord, qui gardent la police du site. Elle réutilise DM Sans, déjà hébergée en local dans public/assets/fonts (voir css/fonts.css) — aucune police n'est téléchargée depuis un service tiers, et rien n'est emprunté à un autre site. Le repli suit les polices d'interface du système, dont le dessin est proche et qui s'affichent instantanément si DM Sans tarde. */ :root { --police-recherche: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ── BARRE DE RECHERCHE ──────────────────────────────────────────────── Un peu plus large et un peu plus aérée : les deux champs et le bouton se partagent la ligne sans laisser de vide au milieu. Le bouton garde sa largeur propre (flex-shrink: 0), les champs absorbent le reste. */ /* GÉOMÉTRIE DE LA BARRE — trois nombres, et une raison pour chacun. width: min(calc(100% - 48px), 1320px) Une seule déclaration remplace le couple max-width + marges. Les 48 px sont la gouttière : sur un écran étroit la barre respire au lieu de coller aux bords ; sur un grand écran elle se fige à 1320 px. Au-delà, les deux champs deviennent des rubans vides. min-height: 110px La hauteur n'était jusqu'ici qu'une conséquence du contenu : elle variait avec la police de repli, et la barre « sautait » au chargement. Elle est maintenant posée. align-items: center Le bouton et les deux zones se centrent verticalement dans ces 110 px. C'est aussi ce qui rend le séparateur DISCRET : les champs gardent leur hauteur naturelle (~73 px), donc le trait qui les sépare ne touche ni le haut ni le bas de la carte. */ .search-card { background: #fff; border-radius: 14px; padding: 0 10px; /* ── UN AXE DE LECTURE, A GAUCHE ──────────────────────────────────── .hero declare « text-align: center » — legitime pour son grand titre et son sous-titre. Mais la declaration CASCADE, et la barre de recherche en heritait : le libelle, le texte d'exemple et la valeur saisie se centraient chacun dans sa moitie de carte. Un formulaire dont chaque element flotte au milieu n'a pas d'axe de lecture. Une seule declaration suffit a le rendre : le hero garde son centrage, la barre reprend le sien. Le libelle, l'exemple et la saisie tombent alors sur la meme verticale, sans marge ni positionnement manuel. */ text-align: left; display: flex; align-items: center; gap: 0; /* La carte remplit son conteneur. La largeur est décidée UNE SEULE fois, sur .hero-search : deux sources concurrentes, c'est deux endroits où se tromper. */ width: 100%; min-height: 80px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,.4); font-family: var(--police-recherche); } /* Le survol et le focus ne changent QUE la couleur : ni le rembourrage, ni la bordure, ni la largeur. C'est ce qui garantit que le bouton ne se déplace jamais d'un pixel quand la souris traverse la barre. L'anneau de focus est un `box-shadow: inset` — contrairement à une bordure, il ne prend aucune place. */ .search-field { position: relative; flex: 1; min-width: 0; /* 10 px de rembourrage sur la carte + 20 px ici = 30 px entre le bord de la barre et le libellé. Le rembourrage vertical est inutile : la carte impose 80 px et centre son contenu. */ padding: 0 20px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--gray-100); border-radius: 12px; background: transparent; transition: background-color 180ms ease, box-shadow 180ms ease; } .search-field:hover { background: #f7f8fa; } .search-field:focus-within { background: #f7f8fa; box-shadow: inset 0 0 0 2px rgba(15, 15, 35, .32); } /* La séparation s'efface sous le champ actif : deux traits côte à côte avec un fond gris feraient sale. */ .search-field:hover, .search-field:focus-within { border-right-color: transparent; } .search-field:last-of-type { border-right: none; } /* Libellé discret, saisie lisible : la hiérarchie repose sur le contraste et la taille, pas sur le gras. Les champs passent en graisse normale — du texte saisi en 600 donnait une impression d'étiquette figée plutôt que de champ que l'on peut modifier. */ .sf-label { font-family: var(--police-recherche); font-size: 14px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; } .sf-input { border: none; outline: none; background: transparent; font-family: var(--police-recherche); font-size: 16px; font-weight: 500; color: var(--navy); width: 100%; min-width: 0; } /* Placeholder un cran plus lisible que l'ancien gris-400, tout en restant nettement distinct d'une valeur réellement saisie. */ .sf-input::placeholder { color: #98a2b3; font-weight: 400; } /* La pile de la barre s'applique aussi à ce qui SORT de la barre : la liste de suggestions et son message. Ces classes sont partagées avec la page de résultats, d'où la portée `.search-card ` — la page de résultats garde la police du site. */ .search-card .cb-liste, .search-card .cb-option, .search-card .cb-message, .search-card .sf-suggest, .search-card .sf-suggest-item { font-family: var(--police-recherche); } .sf-suggest { display: none; position: absolute; top: calc(100% + 8px); left: -6px; right: -6px; background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.2); overflow: hidden; z-index: 40; text-align: left; } .sf-suggest-item { padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; } .sf-suggest-item span { color: var(--gray-400); font-weight: 400; margin-left: 6px; } .sf-suggest-item:hover, .sf-suggest-item.active { background: var(--gray-100); } /* Le bouton reste ORANGE Mon Artisan. Un peu plus large et un peu plus affirmé que les champs, pour rester le point d'arrivée du regard. */ .search-go { background: var(--orange); color: #fff; border: none; border-radius: 10px; padding: 0; font-size: 15px; font-weight: 700; flex-shrink: 0; font-family: var(--police-recherche); letter-spacing: .01em; display: flex; align-items: center; justify-content: center; gap: 8px; /* Compact et de taille FIXE : c'est ce qui laisse les deux champs se partager le reste à égalité. `align-self: center` le centre dans les 80 px de la carte — sans lui, il s'étirerait sur toute la hauteur. `nowrap` : « Rechercher » ne doit jamais passer sur deux lignes. */ width: 124px; height: 48px; align-self: center; white-space: nowrap; transition: background-color .15s ease; } .search-go:hover { background: var(--orange-d); } /* Le bouton garde l'anneau navy du site plutôt qu'un contour orange sur fond orange, illisible. */ .search-go:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .search-field { transition: none; } } /* ── TABLETTE ET TÉLÉPHONE : GOUTTIÈRE PLUS SERRÉE ──────────────────── 64 px de marge de chaque côté sur un écran de 768 px mangeraient un dixième de la largeur utile. En dessous de 1024 px on passe à 40 px, ce qui correspond au rembourrage de .hero à ces tailles. Le terme `100%` reste en tête : c'est lui qui interdit tout débordement, donc tout défilement horizontal, même à 390 px. */ @media (max-width: 1024px) { .hero-search { width: min(100%, calc(100vw - 40px)); } } /* Sur téléphone : champs à 16 px — en dessous, iOS zoome automatiquement au moment de la saisie et casse la mise en page — et bouton pleine largeur. */ @media (max-width: 640px) { /* En colonne, les 110 px et la hauteur fixe du bouton n'ont plus de sens : ils écraseraient les champs empilés. On les relâche explicitement plutôt que de les laisser agir par accident. */ .search-card { flex-direction: column; gap: 2px; max-width: 100%; /* La largeur reste décidée par .hero-search, ici comme ailleurs. */ width: 100%; min-height: 0; padding: 12px; align-items: stretch; } .search-field { border-right: none; border-bottom: 1px solid var(--gray-100); } .search-field:last-of-type { border-bottom: none; } .sf-input { font-size: 16px; } .search-go { width: 100%; justify-content: center; padding: 14px 20px; height: auto; align-self: stretch; } } .search-reassurance { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; font-size: 13px; color: rgba(255,255,255,.5); flex-wrap: wrap; animation: fadeUp .65s ease .4s both; } .sr-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); } /* ── DRAPEAU DE « PLATEFORME FRANÇAISE » ────────────────────────────── Les autres garanties de cette ligne portent une coche SVG de 18 px qui hérite de la couleur du texte. Le drapeau, lui, garde ses trois couleurs — c'est ce qui en fait un drapeau — et il est donc légèrement plus lumineux que ses voisins sur ce fond sombre. Les 12 px de haut le ramènent au poids visuel d'une coche : il accompagne le texte, il ne le domine pas. `vertical-align: -.1em` le pose sur la ligne de base ; sans ce calage, une image en ligne flotte de deux ou trois pixels trop haut et toute la ligne paraît bancale sans qu'on sache pourquoi. `flex-shrink: 0` : la ligne passe en flex-wrap sur téléphone, et un drapeau écrasé horizontalement ne serait plus lisible. */ .sr-drapeau { width: 18px; height: 12px; display: inline-block; vertical-align: -.1em; flex-shrink: 0; margin-right: 1px; } /* Sur les petits écrans, la ligne de garanties se replie et l'espacement se resserre ; le drapeau suit la même réduction que le texte pour que les quatre mentions gardent le même rythme. */ @media (max-width: 480px) { .sr-drapeau { width: 16px; height: 11px; } } /* Chips catégories */ .hero-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; animation: fadeUp .7s ease .4s both; } .chip-icon { font-size: 20px; line-height: 1; } .hchip { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.13); border: 1.5px solid rgba(255,255,255,.3); color: rgba(255,255,255,.8); border-radius: 100px; padding: 6px 16px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; backdrop-filter: blur(4px); } .hchip.active, .hchip:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,53,.4); } /* Le compteur « en direct » (.live-proof, .lp-item, .lp-dot, .lp-num) a ete retire : deux nombres vrais mais mis en scene comme une activite temps reel, autour d'une pastille verte qui pulsait. @keyframes pulse reste ci-dessous : .pro-photo-dispo::before et .prs-dot l'utilisent. */ @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} } /* Stats band */ .stats-band { background: var(--navy); padding: 2rem; border-top: 1px solid rgba(255,255,255,.05); } .stats-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; } .stat-item { text-align: center; padding: 1rem; } .stat-num { font-family: 'DM Sans', sans-serif; font-size: 28px; font-weight: 900; color: var(--orange); } .stat-label { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 4px; } /* .35 donnait 3.17:1 sur le bleu nuit ; .6 donne 7.2:1 (WCAG AA exige 4.5:1). */ /* Mission 24 : la case « 0 / Commission sur les travaux » dit l'absence de commission, mais rien sur l'accueil n'indiquait que l'accès professionnel peut dépendre d'un abonnement — une omission, pas un mensonge, mais une omission suffit à faire croire à une gratuité totale du côté pro. Cette ligne complète la case juste au-dessus SANS la modifier : elle vit hors de .stats-band (test-bande-indicateurs.js interdit tout style en ligne et toute structure interne à la bande, et fige sa clôture exacte). */ .stats-note { text-align: center; font-size: 13px; color: var(--gray-500); max-width: 640px; margin: 0 auto; padding: 18px 20px; } /* La bande de confiance (.trust-strip, .trust-item, .trust-icon) a ete retiree avec ses deux mentions : « Paiement securise Stripe » et « Devis 100% gratuit ». Voir public/index.html, gabarit tpl-accueil. */ /* Section pros disponibles */ .section { max-width: 1140px; margin: 0 auto; padding: 3rem 1.5rem; } /* ── EN-TÊTE DE SECTION ──────────────────────────────────────────────── Avant : flex sans `flex-wrap`. Aux largeurs intermédiaires, le titre sur deux lignes écrasait « Voir tous → », qui finissait collé à la rangée de métiers juste en dessous — visuellement au-dessus du bouton « Jardinier ». Maintenant : le bloc de texte est le seul élément élastique (`flex: 1` avec `min-width: 0`, sans quoi un titre long refuse de se rétrécir), et le lien garde sa largeur. Quand la place manque vraiment, `flex-wrap` fait passer le lien à la ligne PROPREMENT, sous le titre, jamais sur les métiers. `align-items: flex-start` évite qu'un titre à deux lignes ne traîne le lien vers le bas. */ .section-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 20px; margin-bottom: 1.5rem; } .section-head-texte { flex: 1 1 260px; min-width: 0; } .section-head .section-link { flex: 0 0 auto; white-space: nowrap; } .section-title { font-size: 22px; font-weight: 900; } .section-sub { font-size: 14px; color: var(--gray-400); margin-top: 4px; font-family: 'DM Sans', sans-serif; font-weight: 400; } .section-link { font-size: 13px; color: var(--orange); font-weight: 700; } /* La rangée de métiers défile horizontalement quand elle déborde. Sa barre de défilement était MASQUÉE : rien n'indiquait que des métiers existaient au-delà du bord, et « Agent de nettoyage » restait introuvable. Elle est désormais fine mais visible — un contenu inaccessible sans indication est un contenu perdu. */ .filter-chips { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 1.5rem; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--gray-200) transparent; } .filter-chips::-webkit-scrollbar { height: 6px; } .filter-chips::-webkit-scrollbar-track { background: transparent; } .filter-chips::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 100px; } .filter-chips::-webkit-scrollbar-thumb:hover { background: var(--gray-300, #d1d5db); } .fchip { border: 1.5px solid var(--gray-200); border-radius: 100px; padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; background: #fff; color: var(--gray-600); transition: all .15s; flex-shrink: 0; } .fchip:hover, .fchip.on { background: var(--navy); color: #fff; border-color: var(--navy); } .pro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .pro-card { border: 1.5px solid var(--gray-100); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: all .2s; background: #fff; } .pro-card:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(255,107,53,.12); } /* ── LA PASTILLE DU PRO ÉTAIT COUPÉE PAR LA COUVERTURE ───────────────── Ce n'était pas un rognage : c'était un ORDRE DE PEINTURE. `.pro-photo` est `position: relative`. `.pro-avatar-sm`, lui, était en flux statique. Or un élément positionné se peint APRÈS — donc AU-DESSUS — du contenu statique du même contexte d'empilement. La pastille, remontée de 28 px par sa marge négative, passait derrière la couverture : ses 28 px du haut disparaissaient. La correction sépare franchement les deux plans : • la couverture garde `overflow: hidden` (elle doit rogner l'image qui zoome au survol) et son propre arrondi, et descend à z-index 0 ; • le contenu monte à z-index 1, la pastille à z-index 2. Aucune marge, aucune hauteur ne change : la mise en page est identique, seul l'empilement est corrigé. */ .pro-photo { position: relative; height: 160px; overflow: hidden; background: var(--gray-100); border-radius: var(--radius-lg) var(--radius-lg) 0 0; z-index: 0; } .pro-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .pro-card:hover .pro-photo img { transform: scale(1.04); } .pro-photo-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 100px; } .pro-photo-dispo { position: absolute; top: 10px; right: 10px; background: var(--green); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 100px; display: flex; align-items: center; gap: 4px; } .pro-photo-dispo::before { content:''; width:6px; height:6px; border-radius:50%; background:#fff; animation: pulse 1.5s infinite; } /* Le contenu passe au-dessus de la couverture — c'est ce qui permet à la pastille de la chevaucher au lieu de disparaître dessous. */ /* ── LA CARTE EST UN VRAI LIEN, ET ÇA NE SE VOIT PAS ─────────────── La zone d'information est passée de
à pour rendre Ctrl+clic, clic du milieu, « copier l'adresse du lien » et la navigation au clavier possibles. Ces règles annulent l'apparence par défaut d'un lien — couleur, soulignement — pour que le rendu reste exactement celui d'avant. Le focus, lui, DOIT rester visible : c'est le seul repère d'une personne qui navigue au clavier. */ .carte-lien { display: block; color: inherit; text-decoration: none; } .carte-lien:hover, .carte-lien:visited { color: inherit; text-decoration: none; } .carte-lien:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* Le pied de carte a quitté .pro-body pour devenir le frère du lien : un