{"id":1644,"date":"2026-05-12T14:54:45","date_gmt":"2026-05-12T14:54:45","guid":{"rendered":"https:\/\/yanis-naud.ovh\/?page_id=1644"},"modified":"2026-05-20T09:58:06","modified_gmt":"2026-05-20T09:58:06","slug":"branding","status":"publish","type":"page","link":"https:\/\/yanis-naud.ovh\/index.php\/branding\/","title":{"rendered":"branding V2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1644\" class=\"elementor elementor-1644\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2a38450 e-flex e-con-boxed e-con e-parent\" data-id=\"2a38450\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c2002d elementor-widget elementor-widget-html\" data-id=\"4c2002d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Branding \u2013 Portfolio<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Outfit:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  :root {\r\n    --gold: #705f21;\r\n    --gold-light: #a08a30;\r\n    --gold-pale: #c9a84c;\r\n    --black: #000000;\r\n    --card-bg: #111111;\r\n    --card-border: #1e1e1e;\r\n    --text: #e8e8e8;\r\n    --text-muted: #888;\r\n  }\r\n\r\n  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n  .br-section {\r\n    background: var(--black);\r\n    font-family: 'Outfit', sans-serif;\r\n    color: var(--text);\r\n    overflow: hidden;\r\n    padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 60px);\r\n    width: 100%;\r\n  }\r\n\r\n  \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n  .br-hero { text-align: center; margin-bottom: clamp(30px, 5vw, 50px); position: relative; }\r\n  .br-hero::before {\r\n    content: ''; position: absolute;\r\n    top: -40px; left: 50%; transform: translateX(-50%);\r\n    width: min(600px, 100%); height: 200px;\r\n    background: radial-gradient(ellipse at center, rgba(112,95,33,0.18) 0%, transparent 70%);\r\n    pointer-events: none;\r\n  }\r\n  .br-hero h1 {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: clamp(60px, 15vw, 130px);\r\n    letter-spacing: 0.04em; color: #fff; line-height: 0.92;\r\n    text-shadow: 0 0 80px rgba(112,95,33,0.3);\r\n  }\r\n  .br-hero .subtitle {\r\n    font-size: clamp(11px, 2.5vw, 18px); font-weight: 700;\r\n    letter-spacing: 0.2em; text-transform: uppercase;\r\n    color: var(--gold-pale); margin-top: 14px;\r\n  }\r\n\r\n  \/* \u2500\u2500 INTRO \u2500\u2500 *\/\r\n  .br-intro {\r\n    background: var(--card-bg); border: 1px solid var(--card-border);\r\n    border-left: 3px solid var(--gold); border-radius: 12px;\r\n    padding: clamp(16px, 3vw, 24px) clamp(18px, 3vw, 28px);\r\n    font-size: clamp(13px, 1.5vw, 15px); color: var(--text-muted);\r\n    line-height: 1.7; margin-bottom: clamp(20px, 4vw, 36px);\r\n  }\r\n  .br-intro strong { color: var(--text); }\r\n\r\n  \/* \u2500\u2500 LIVRABLES \u2500\u2500 *\/\r\n  .br-livrables {\r\n    text-align: center; font-size: clamp(14px, 2vw, 18px);\r\n    font-weight: 700; color: #fff;\r\n    margin-bottom: clamp(36px, 6vw, 60px); letter-spacing: 0.02em;\r\n  }\r\n\r\n  \/* \u2500\u2500 LABEL \u2500\u2500 *\/\r\n  .br-label {\r\n    font-size: 11px; font-weight: 700; letter-spacing: 0.22em;\r\n    text-transform: uppercase; color: var(--gold);\r\n    margin-bottom: 22px; display: flex; align-items: center; gap: 10px;\r\n  }\r\n  .br-label::after {\r\n    content: ''; flex: 1; height: 1px;\r\n    background: linear-gradient(to right, var(--gold), transparent);\r\n    max-width: 180px;\r\n  }\r\n\r\n  \/* \u2500\u2500 DIVIDER \u2500\u2500 *\/\r\n  @keyframes shimmer {\r\n    0% { background-position: -400px 0; }\r\n    100% { background-position: 400px 0; }\r\n  }\r\n  .br-divider {\r\n    height: 1px; margin: clamp(30px, 5vw, 50px) 0;\r\n    background: linear-gradient(90deg, transparent, var(--gold), var(--gold-pale), var(--gold), transparent);\r\n    background-size: 400px 100%; animation: shimmer 3s linear infinite;\r\n  }\r\n\r\n  \/*\r\n   * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   * BLOC IMAGE NATUREL \u2014 UTILIS\u00c9 PARTOUT\r\n   * width:100% + height:auto = pleine largeur, jamais cropp\u00e9e\r\n   * Le bloc s'adapte \u00e0 la hauteur de la photo\r\n   * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   *\/\r\n  .br-img-wrap {\r\n    background: var(--card-bg);\r\n    border: 2px dashed var(--card-border);\r\n    border-radius: 12px;\r\n    overflow: hidden;\r\n    transition: border-color 0.2s;\r\n    \/* PAS de height\/aspect-ratio fixe *\/\r\n  }\r\n  .br-img-wrap:hover { border-color: var(--gold); }\r\n\r\n  .br-img-wrap img {\r\n    display: block;\r\n    width: 100%;\r\n    height: auto;   \/* ratio pr\u00e9serv\u00e9, jamais cropp\u00e9 *\/\r\n    border-radius: 10px;\r\n  }\r\n  .br-img-wrap img[src=\"\"] { display: none; }\r\n  .br-img-wrap img[src=\"\"] + .br-ph { display: flex; }\r\n  .br-img-wrap img:not([src=\"\"]) + .br-ph { display: none; }\r\n  .br-img-wrap img.loaded + .br-ph { display: none; }\r\n\r\n  \/* Placeholder g\u00e9n\u00e9rique *\/\r\n  .br-ph {\r\n    display: flex; flex-direction: column;\r\n    align-items: center; justify-content: center;\r\n    gap: 8px; padding: 32px 16px;\r\n    text-align: center; min-height: 120px;\r\n    pointer-events: none;\r\n  }\r\n  .br-ph svg { opacity: 0.35; }\r\n  .br-ph span { font-size: 11px; color: var(--text-muted); line-height: 1.5; }\r\n  .br-ph em { font-size: 10px; color: #444; font-style: normal; }\r\n\r\n  \/* \u2500\u2500 CASE STUDY KODIAK \u2500\u2500 *\/\r\n  .br-case {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: clamp(24px, 5vw, 50px);\r\n    align-items: start;\r\n    margin-bottom: clamp(40px, 7vw, 70px);\r\n  }\r\n  .br-case-tag {\r\n    display: inline-block; font-size: 10px; font-weight: 700;\r\n    letter-spacing: 0.18em; text-transform: uppercase;\r\n    color: var(--gold-pale); border: 1px solid var(--gold);\r\n    border-radius: 20px; padding: 4px 12px; margin-bottom: 16px;\r\n  }\r\n  .br-case-title {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: clamp(28px, 5vw, 52px); color: #fff;\r\n    line-height: 1; margin-bottom: 6px;\r\n    display: flex; align-items: center; gap: 12px;\r\n  }\r\n  .br-case-title .title-bar {\r\n    width: 4px; height: clamp(28px, 4vw, 48px);\r\n    background: var(--gold); border-radius: 2px; flex-shrink: 0;\r\n  }\r\n  .br-case-desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }\r\n\r\n  \/* Style guide *\/\r\n  .br-style-guide {\r\n    background: #0d0d0d; border: 1px solid var(--card-border);\r\n    border-radius: 12px; padding: clamp(16px, 2.5vw, 24px); margin-top: 20px;\r\n  }\r\n  .br-style-guide .sg-label {\r\n    font-size: 10px; font-weight: 700; letter-spacing: 0.2em;\r\n    text-transform: uppercase; color: var(--gold); margin-bottom: 16px;\r\n  }\r\n  .br-colors { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }\r\n  .br-color { display: flex; flex-direction: column; align-items: center; gap: 6px; }\r\n  .br-color-swatch { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #2a2a2a; flex-shrink: 0; }\r\n  .br-color-hex { font-size: 10px; color: var(--text-muted); font-family: monospace; }\r\n  .br-fonts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }\r\n  .br-font-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }\r\n  .br-font-preview { font-size: 18px; font-weight: 700; color: #fff; }\r\n\r\n  \/* Colonne droite *\/\r\n  .br-case-visuals { display: flex; flex-direction: column; gap: 12px; }\r\n\r\n  \/* \u2500\u2500 FORMATS MOBILES \u2014 logos carr\u00e9s (object-fit:contain pour voir le logo entier) \u2500\u2500 *\/\r\n  .br-formats-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));\r\n    gap: 12px; max-width: 600px;\r\n  }\r\n  .br-logo-cell {\r\n    border-radius: 10px; background: var(--card-bg);\r\n    border: 2px dashed var(--card-border); overflow: hidden;\r\n    transition: border-color 0.2s; aspect-ratio: 1 \/ 1;\r\n    display: flex; align-items: center; justify-content: center;\r\n    position: relative;\r\n  }\r\n  .br-logo-cell:hover { border-color: var(--gold); }\r\n  \/* object-fit:contain \u2192 logo entier visible dans le carr\u00e9 *\/\r\n  .br-logo-cell img {\r\n    position: absolute; inset: 0;\r\n    width: 100%; height: 100%;\r\n    object-fit: contain;\r\n    border-radius: 8px; display: none;\r\n  }\r\n  .br-logo-cell img.loaded { display: block; }\r\n  .br-logo-cell img.loaded + .br-cell-ph { display: none; }\r\n  .br-cell-ph { font-size: 10px; color: #444; text-align: center; padding: 8px; pointer-events: none; }\r\n\r\n  \/* \u2500\u2500 MOCKUPS GRID \u2014 images pleine largeur, pas de crop \u2500\u2500 *\/\r\n  .br-mockups-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 14px;\r\n    margin-bottom: clamp(40px, 7vw, 70px);\r\n  }\r\n\r\n  \/* \u2500\u2500 TOOLS \u2500\u2500 *\/\r\n  .br-tools { text-align: center; padding: 40px 0 0; border-top: 1px solid var(--card-border); }\r\n  .br-tools h3 {\r\n    font-size: 12px; font-weight: 700; letter-spacing: 0.22em;\r\n    text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px;\r\n  }\r\n  .br-tools-logos { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 4vw, 32px); flex-wrap: wrap; }\r\n  .br-tool {\r\n    display: flex; align-items: center; gap: 10px;\r\n    background: var(--card-bg); border: 1px solid var(--card-border);\r\n    border-radius: 10px; padding: 12px 22px;\r\n    font-size: 13px; font-weight: 600; color: var(--text);\r\n    transition: border-color 0.2s;\r\n  }\r\n  .br-tool:hover { border-color: var(--gold); }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  @media (max-width: 860px) {\r\n    .br-case { grid-template-columns: 1fr; }\r\n    .br-case-visuals { flex-direction: row; }\r\n    .br-mockups-grid { grid-template-columns: repeat(2, 1fr); }\r\n  }\r\n  @media (max-width: 560px) {\r\n    .br-case-visuals { flex-direction: column; }\r\n    .br-mockups-grid { grid-template-columns: 1fr; }\r\n    .br-formats-grid { grid-template-columns: repeat(2, 1fr); }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"br-section\">\r\n\r\n  <!-- HERO -->\r\n  <div class=\"br-hero\">\r\n    <h1>Branding<\/h1>\r\n    <div class=\"subtitle\">Identit\u00e9 visuelle<\/div>\r\n  <\/div>\r\n\r\n  <!-- INTRO -->\r\n  <div class=\"br-intro\">\r\n    <strong>Branding :<\/strong> Au cours de ce projet, j'ai d\u00e9velopp\u00e9 une identit\u00e9 visuelle coh\u00e9rente en d\u00e9finissant l'univers graphique d'une marque : choix typographiques, palette de couleurs, ton \u00e9ditorial et syst\u00e8me de design. J'ai appris \u00e0 construire une image de marque forte, m\u00e9morable et align\u00e9e avec les valeurs et la cible de l'entreprise.\r\n  <\/div>\r\n\r\n  <div class=\"br-livrables\">Logotype, Charte graphique, Typographie, Mockups.<\/div>\r\n\r\n  <div class=\"br-divider\"><\/div>\r\n\r\n  <!-- CASE STUDY KODIAK -->\r\n  <div class=\"br-label\">\u00c9tude de cas<\/div>\r\n  <div class=\"br-case\">\r\n\r\n    <!-- Colonne gauche : texte + style guide + logos variantes -->\r\n    <div>\r\n      <div class=\"br-case-tag\">Branding<\/div>\r\n      <div class=\"br-case-title\">\r\n        <div class=\"title-bar\"><\/div>KODIAK\r\n      <\/div>\r\n      <div style=\"margin-bottom:16px; margin-top:8px;\">\r\n        <p class=\"br-case-desc\">Conception d'un univers graphique complet alliant modernit\u00e9 et h\u00e9ritage. Charte graphique d'une marque de compl\u00e9ment alimentaire et pre-workout.<\/p>\r\n        <p class=\"br-case-desc\">Le nom du logo fait r\u00e9f\u00e9rence \u00e0 la puissance et la force. Kodiak est le nom de l'ours le plus gros sur terre. La gamme inclut prot\u00e9ines, cr\u00e9atine, accessoires de musculation et gourdes.<\/p>\r\n        <p class=\"br-case-desc\">Dans le logo, on retrouve l'halt\u00e8re qui fait r\u00e9f\u00e9rence \u00e0 la musculation et le trait de griffe de l'ours pour un effet agressif et de puissance.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Style guide -->\r\n      <div class=\"br-style-guide\">\r\n        <div class=\"sg-label\">Style Guide<\/div>\r\n        <div class=\"br-colors\">\r\n          <div class=\"br-color\">\r\n            <div class=\"br-color-swatch\" style=\"background:#A30F0F;\"><\/div>\r\n            <div class=\"br-color-hex\">#A30F0F<\/div>\r\n          <\/div>\r\n          <div class=\"br-color\">\r\n            <div class=\"br-color-swatch\" style=\"background:#FFFFFF; border-color:#333;\"><\/div>\r\n            <div class=\"br-color-hex\">#FFFFFF<\/div>\r\n          <\/div>\r\n          <div class=\"br-color\">\r\n            <div class=\"br-color-swatch\" style=\"background:#000000; border-color:#333;\"><\/div>\r\n            <div class=\"br-color-hex\">#000000<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"br-fonts\">\r\n          <div class=\"br-font-item\">\r\n            <span class=\"br-font-preview\" style=\"font-family:'Bebas Neue',sans-serif; letter-spacing:0.05em;\">Karantina<\/span>\r\n          <\/div>\r\n          <div class=\"br-font-item\">\r\n            <span class=\"br-font-preview\" style=\"font-family:'Outfit',sans-serif; font-weight:400; font-size:15px;\">Open Sans<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Formats mobiles \u2014 logos carr\u00e9s (contain = entier visible) -->\r\n      <div style=\"margin-top:28px;\">\r\n        <div class=\"br-label\">Formats mobiles<\/div>\r\n        <div class=\"br-formats-grid\">\r\n\r\n          <!-- \u2605 Logo variante 1 \u2014 Remplacez src=\"\" -->\r\n          <div class=\"br-logo-cell\">\r\n            <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/02\/Group-25-150x150.png\" alt=\"Logo Kodiak variante fond noir\">\r\n            <div class=\"br-cell-ph\">Logo variante 1<br><em style=\"font-size:9px;color:#333\">src=\"URL\"<\/em><\/div>\r\n          <\/div>\r\n\r\n          <!-- \u2605 Logo variante 2 \u2014 Remplacez src=\"\" -->\r\n          <div class=\"br-logo-cell\">\r\n            <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/02\/Group-24-150x150.png\" alt=\"Logo Kodiak variante fond rouge\">\r\n            <div class=\"br-cell-ph\">Logo variante 2<br><em style=\"font-size:9px;color:#333\">src=\"URL\"<\/em><\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Colonne droite : logo principal + mockup \u2014 pleine largeur, pas de crop -->\r\n    <div class=\"br-case-visuals\">\r\n\r\n      <!-- \u2605 Logo principal \u2014 pleine largeur, hauteur auto\r\n           \ud83d\udc49 Remplacez src=\"\" par l'URL du logo -->\r\n      <div class=\"br-img-wrap\">\r\n        <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/02\/Group-12.png\" alt=\"Logo KODIAK grand format\">\r\n        <div class=\"br-ph\">\r\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#705f21\" stroke-width=\"1.3\">\r\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n            <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\r\n            <polyline points=\"21 15 16 10 5 21\"\/>\r\n          <\/svg>\r\n          <span>LOGO PRINCIPAL<br><em>src=\"URL_LOGO\"<\/em><\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u2605 Mockup produit (shaker) \u2014 pleine largeur, hauteur auto\r\n           \ud83d\udc49 Remplacez src=\"\" par l'URL du mockup -->\r\n      <div class=\"br-img-wrap\">\r\n        <img decoding=\"async\" src=\"https:\/\/yanis-naud.mds-angers.yt\/TP\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_lz78jmlz78jmlz78.png\" alt=\"Mockup shaker Kodiak\">\r\n        <div class=\"br-ph\">\r\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#705f21\" stroke-width=\"1.3\">\r\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n            <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\r\n            <polyline points=\"21 15 16 10 5 21\"\/>\r\n          <\/svg>\r\n          <span>MOCKUP PRODUIT<br><em>src=\"URL_MOCKUP\"<\/em><\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"br-divider\"><\/div>\r\n\r\n  <!-- MOCKUPS SUPPL\u00c9MENTAIRES \u2014 pleine largeur, pas de crop -->\r\n  <div class=\"br-label\">Mockups &amp; applications<\/div>\r\n  <div class=\"br-mockups-grid\">\r\n\r\n    <!-- \u2605 Mockup 1 \u2014 Remplacez src=\"\" -->\r\n    <div class=\"br-img-wrap\">\r\n      <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_g5ocuhg5ocuhg5oc-1-1-Photoroom.png\" alt=\"Mockup 1\">\r\n      <div class=\"br-ph\">\r\n        <svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#705f21\" stroke-width=\"1.3\">\r\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n          <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\r\n          <polyline points=\"21 15 16 10 5 21\"\/>\r\n        <\/svg>\r\n        <span>MOCKUP 1<br><em>src=\"URL\"<\/em><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2605 Mockup 2 \u2014 Remplacez src=\"\" -->\r\n    <div class=\"br-img-wrap\">\r\n      <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/05\/image-Photoroom-32.png\" alt=\"Mockup 2\">\r\n      <div class=\"br-ph\">\r\n        <svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#705f21\" stroke-width=\"1.3\">\r\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n          <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\r\n          <polyline points=\"21 15 16 10 5 21\"\/>\r\n        <\/svg>\r\n        <span>MOCKUP 2<br><em>src=\"URL\"<\/em><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2605 Mockup 3 \u2014 Remplacez src=\"\" -->\r\n    <div class=\"br-img-wrap\">\r\n      <img decoding=\"async\" src=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/04\/Gemini_Generated_Image_z9fnr8z9fnr8z9fn-1-3-Photoroom.png\" alt=\"Mockup 3\">\r\n      <div class=\"br-ph\">\r\n        <svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#705f21\" stroke-width=\"1.3\">\r\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n          <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\r\n          <polyline points=\"21 15 16 10 5 21\"\/>\r\n        <\/svg>\r\n        <span>MOCKUP 3<br><em>src=\"URL\"<\/em><\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"br-divider\"><\/div>\r\n\r\n  <!-- LOGICIELS -->\r\n  <div class=\"br-tools\">\r\n    <h3>Les logiciels utilis\u00e9s<\/h3>\r\n    <div class=\"br-tools-logos\">\r\n\r\n      <div class=\"br-tool\">\r\n        <svg width=\"28\" height=\"28\" viewBox=\"0 0 38 57\" fill=\"none\">\r\n          <path d=\"M19 28.5C19 24.91 21.91 22 25.5 22C29.09 22 32 24.91 32 28.5C32 32.09 29.09 35 25.5 35C21.91 35 19 32.09 19 28.5Z\" fill=\"#1ABCFE\"\/>\r\n          <path d=\"M6 42C6 38.41 8.91 35.5 12.5 35.5H19V42C19 45.59 16.09 48.5 12.5 48.5C8.91 48.5 6 45.59 6 42Z\" fill=\"#0ACF83\"\/>\r\n          <path d=\"M19 8V21.5H25.5C29.09 21.5 32 18.59 32 15C32 11.41 29.09 8.5 25.5 8.5L19 8Z\" fill=\"#FF7262\"\/>\r\n          <path d=\"M6 15C6 18.59 8.91 21.5 12.5 21.5H19V8.5H12.5C8.91 8.5 6 11.41 6 15Z\" fill=\"#F24E1E\"\/>\r\n          <path d=\"M6 28.5C6 32.09 8.91 35 12.5 35H19V22H12.5C8.91 22 6 24.91 6 28.5Z\" fill=\"#A259FF\"\/>\r\n        <\/svg>\r\n        Figma\r\n      <\/div>\r\n\r\n      <div class=\"br-tool\">\r\n        <svg width=\"28\" height=\"28\" viewBox=\"0 0 40 40\">\r\n          <defs>\r\n            <linearGradient id=\"cg3\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n              <stop offset=\"0%\" style=\"stop-color:#00C4CC\"\/>\r\n              <stop offset=\"100%\" style=\"stop-color:#7D2AE8\"\/>\r\n            <\/linearGradient>\r\n          <\/defs>\r\n          <rect width=\"40\" height=\"40\" rx=\"9\" fill=\"url(#cg3)\"\/>\r\n          <text x=\"20\" y=\"27\" font-family=\"Georgia,serif\" font-size=\"18\" font-weight=\"bold\" fill=\"white\" text-anchor=\"middle\">Ca<\/text>\r\n        <\/svg>\r\n        Canva\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n  \/* Images pleine largeur *\/\r\n  document.querySelectorAll('.br-img-wrap img').forEach(function(img) {\r\n    function check() {\r\n      var s = img.getAttribute('src');\r\n      if (s && s !== '' && img.src !== window.location.href) img.classList.add('loaded');\r\n    }\r\n    check();\r\n    img.addEventListener('load', check);\r\n  });\r\n\r\n  \/* Logos carr\u00e9s (contain) *\/\r\n  document.querySelectorAll('.br-logo-cell img').forEach(function(img) {\r\n    if (img.src && img.src !== window.location.href) img.classList.add('loaded');\r\n    img.addEventListener('load', function() { img.classList.add('loaded'); });\r\n  });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Branding \u2013 Portfolio Branding Identit\u00e9 visuelle Branding : Au cours de ce projet, j&rsquo;ai d\u00e9velopp\u00e9 une identit\u00e9 visuelle coh\u00e9rente en d\u00e9finissant l&rsquo;univers graphique d&rsquo;une marque : choix typographiques, palette de couleurs, ton \u00e9ditorial et syst\u00e8me de design. J&rsquo;ai appris \u00e0 construire une image de marque forte, m\u00e9morable et align\u00e9e avec les valeurs et la cible [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1644","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>branding V2 - Portfolio Yanis NAUD<\/title>\n<meta name=\"description\" content=\"Cr\u00e9ation de l&#039;identit\u00e9 visuelle Kodiak : logotype, charte graphique, typographie et mockups. Un univers de marque fort.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/yanis-naud.ovh\/index.php\/branding\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"branding V2 - Portfolio Yanis NAUD\" \/>\n<meta property=\"og:description\" content=\"Cr\u00e9ation de l&#039;identit\u00e9 visuelle Kodiak : logotype, charte graphique, typographie et mockups. Un univers de marque fort.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/yanis-naud.ovh\/index.php\/branding\/\" \/>\n<meta property=\"og:site_name\" content=\"Portfolio Yanis NAUD\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-20T09:58:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/02\/Group-25-150x150.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/branding\\\/\",\"url\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/branding\\\/\",\"name\":\"branding V2 - Portfolio Yanis NAUD\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/branding\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/branding\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/yanis-naud.ovh\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Group-25-150x150.png\",\"datePublished\":\"2026-05-12T14:54:45+00:00\",\"dateModified\":\"2026-05-20T09:58:06+00:00\",\"description\":\"Cr\u00e9ation de l'identit\u00e9 visuelle Kodiak : logotype, charte graphique, typographie et mockups. Un univers de marque fort.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/branding\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/branding\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/branding\\\/#primaryimage\",\"url\":\"https:\\\/\\\/yanis-naud.ovh\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Group-25-150x150.png\",\"contentUrl\":\"https:\\\/\\\/yanis-naud.ovh\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/Group-25-150x150.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/index.php\\\/branding\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/yanis-naud.ovh\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"branding V2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/yanis-naud.ovh\\\/#website\",\"url\":\"https:\\\/\\\/yanis-naud.ovh\\\/\",\"name\":\"Portfolio Yanis NAUD\",\"description\":\"Portfolio Marketing Digital\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/yanis-naud.ovh\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"branding V2 - Portfolio Yanis NAUD","description":"Cr\u00e9ation de l'identit\u00e9 visuelle Kodiak : logotype, charte graphique, typographie et mockups. Un univers de marque fort.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/yanis-naud.ovh\/index.php\/branding\/","og_locale":"fr_FR","og_type":"article","og_title":"branding V2 - Portfolio Yanis NAUD","og_description":"Cr\u00e9ation de l'identit\u00e9 visuelle Kodiak : logotype, charte graphique, typographie et mockups. Un univers de marque fort.","og_url":"https:\/\/yanis-naud.ovh\/index.php\/branding\/","og_site_name":"Portfolio Yanis NAUD","article_modified_time":"2026-05-20T09:58:06+00:00","og_image":[{"url":"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/02\/Group-25-150x150.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/yanis-naud.ovh\/index.php\/branding\/","url":"https:\/\/yanis-naud.ovh\/index.php\/branding\/","name":"branding V2 - Portfolio Yanis NAUD","isPartOf":{"@id":"https:\/\/yanis-naud.ovh\/#website"},"primaryImageOfPage":{"@id":"https:\/\/yanis-naud.ovh\/index.php\/branding\/#primaryimage"},"image":{"@id":"https:\/\/yanis-naud.ovh\/index.php\/branding\/#primaryimage"},"thumbnailUrl":"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/02\/Group-25-150x150.png","datePublished":"2026-05-12T14:54:45+00:00","dateModified":"2026-05-20T09:58:06+00:00","description":"Cr\u00e9ation de l'identit\u00e9 visuelle Kodiak : logotype, charte graphique, typographie et mockups. Un univers de marque fort.","breadcrumb":{"@id":"https:\/\/yanis-naud.ovh\/index.php\/branding\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/yanis-naud.ovh\/index.php\/branding\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/yanis-naud.ovh\/index.php\/branding\/#primaryimage","url":"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/02\/Group-25-150x150.png","contentUrl":"https:\/\/yanis-naud.ovh\/wp-content\/uploads\/2026\/02\/Group-25-150x150.png"},{"@type":"BreadcrumbList","@id":"https:\/\/yanis-naud.ovh\/index.php\/branding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/yanis-naud.ovh\/"},{"@type":"ListItem","position":2,"name":"branding V2"}]},{"@type":"WebSite","@id":"https:\/\/yanis-naud.ovh\/#website","url":"https:\/\/yanis-naud.ovh\/","name":"Portfolio Yanis NAUD","description":"Portfolio Marketing Digital","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/yanis-naud.ovh\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/pages\/1644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/comments?post=1644"}],"version-history":[{"count":13,"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/pages\/1644\/revisions"}],"predecessor-version":[{"id":1713,"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/pages\/1644\/revisions\/1713"}],"wp:attachment":[{"href":"https:\/\/yanis-naud.ovh\/index.php\/wp-json\/wp\/v2\/media?parent=1644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}