/* ORIGIN GLOBAL CSS — v1.0.3 (v1.0.2 sans changement CSS ; v1.0.3 : fix autosizing iOS) Socle commun famille ALS pour alsorigin.ch (motif lefil-core). Tokens de palette + styles header/footer plugin + keyframes partagées + classes communes (boutons-portes, cartes maisons, panneaux) + socle anti-Divi (v1.0.1, cf. correctif prod du 19.07.2026). Sources : site-wp/origin-accueil.html, site-wp/origin-trajectoire.html, REFONTE_WEB/origin_confidences.html. Aucune invention visuelle : les valeurs ci-dessous sont reprises telles quelles des fichiers Design. CORRECTIF v1.0.1 — Divi mangeait les pages : fond blanc autour du contenu, bloc centré ~1400px au lieu du plein écran, bande blanche derrière le header, ligne verticale "calc(50vw - 600px)" mal positionnée (le calc s'exécutait dans le conteneur Divi centré, pas le viewport). Cause : les pages supposaient un sombre et pleine largeur ; Divi fournit un blanc et un conteneur centré (#page-container > #main-content > #et-main-area > .et_pb_section > .et_pb_row, max-width ~1080px). La section "socle anti-Divi" ci-dessous neutralise ces conteneurs et force le plein écran sombre, uniquement quand body.origin-site est présent (classe posée par origin-global.js quand une racine de page Origin est détectée dans le DOM — accueil/trajectoire/confidences/contact/légal). */ :root{ /* fond / texte */ --or-noir: #120D0B; --or-noir-2: #1A1210; --or-noir-3: #241815; /* accents cacao / or rose (identité Origin) */ --or-cacao: #C89A7A; --or-cacao-clair: #D8B49A; --or-cacao-fonce: #A56E58; --or-sable: #D9C2AF; --or-creme: #EDE0D4; /* maison sauge — Le Fil */ --or-sauge: #B2B79C; --or-sauge-nuit: #0F120D; --or-sauge-texte: #B8BCA6; --or-sauge-pierre: #70755F; /* maison bordeaux — Emotion */ --or-bordeaux: #C48D76; --or-bordeaux-nuit: #2A0F14; --or-bordeaux-texte: #D3AB9A; /* maison or stellaire — L'Atelier */ --or-or-stellaire: #C4A97A; --or-or-nuit: #090D15; --or-or-texte: #CBB694; --or-font-display: 'Cormorant Garamond', Georgia, serif; --or-font-body: 'Inter', system-ui, sans-serif; } /* ---------- base ---------- */ /* correctif 20.07 — rognage droite iPhone (bug n°1) : l'« autosizing » de Safari iOS gonflait les paragraphes longs (~×1,6, ex. balançoire 16,5px rendus ~26px) SANS recalculer leurs retours à la ligne → lignes plus larges que l'écran, coupées par overflow-x:clip. Le désactiver est le standard du web (présent dans tous les resets) ; sur html + body serveur (origin-body) pour agir dès le premier rendu, avant le JS. */ html, html.origin-site, body.origin-body, body.origin-site { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } html.origin-html, body.origin-body { margin:0; padding:0; background:var(--or-noir); } html.origin-html { scroll-behavior: smooth; } .origin-page a { color: var(--or-cacao); text-decoration:none; transition: color .25s ease; } .origin-page a:hover { color: var(--or-cacao-clair); } .origin-page ::selection { background: var(--or-cacao-fonce); color: var(--or-noir); } /* ---------- keyframes partagées ---------- */ @keyframes breathe { 0%,100%{opacity:.35;} 50%{opacity:.95;} } @keyframes twinkle { 0%,100%{opacity:.05;} 50%{opacity:.75;} } @keyframes nodeGlow { 0%,100%{box-shadow:0 0 10px 2px rgba(216,180,154,.35), 0 0 22px 6px rgba(216,180,154,.12);} 50%{box-shadow:0 0 20px 4px rgba(216,180,154,.65), 0 0 38px 10px rgba(216,180,154,.28);} } @keyframes sway { 0%,100%{transform:translateY(0) rotate(0deg); opacity:.8;} 50%{transform:translateY(-7px) rotate(1.2deg); opacity:1;} } @keyframes respire { 0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:1; transform:scale(1.06);} } @keyframes scintille { 0%,100%{opacity:.15;} 50%{opacity:.9;} } @keyframes aura { 0%,100%{box-shadow:0 0 14px 3px rgba(200,154,122,.35), 0 0 30px 8px rgba(200,154,122,.14);} 50%{box-shadow:0 0 28px 7px rgba(200,154,122,.65), 0 0 50px 14px rgba(200,154,122,.3);} } @keyframes comete { 0%{opacity:0; transform:translate(0,0);} 10%{opacity:1;} 100%{opacity:0; transform:translate(120px,60px);} } /* ================= SOCLE ANTI-DIVI (v1.0.1) ================= */ /* Actif uniquement quand body.origin-site est posé par origin-global.js. 1) Fonds forcés sur toute la chaîne de conteneurs Divi jusqu'à la racine. 2) Conteneurs Divi neutralisés (plein écran, sans marge/padding imposés). 3) Chaque racine de page Origin repasse en plein écran par-dessus le conteneur centré de Divi (calc(50vw - 600px) etc. redevient relatif au viewport, pas au conteneur ~1080px). */ body.origin-site, body.origin-site #page-container, body.origin-site #main-content, body.origin-site #et-main-area, body.origin-site .et_pb_section, body.origin-site .et_pb_row { background: #120D0B !important; } /* règle séparée : les navigateurs sans support de :has() ignorent cette seule règle (dégradation gracieuse) au lieu d'invalider tout le bloc. */ html:has(body.origin-site) { background: #120D0B !important; } body.origin-site #page-container, body.origin-site #main-content, body.origin-site #et-main-area, body.origin-site .et_pb_section, body.origin-site .et_pb_row, body.origin-site .et_pb_column { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } body.origin-site #origin-accueil-page, body.origin-site #or-traj, body.origin-site #or-conf, body.origin-site .or-contact-page, body.origin-site .or-legal-page { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } @media (prefers-reduced-motion: reduce){ .origin-page *, .origin-page *::before, .origin-page *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ================= HEADER [origin_header] ================= */ .or-header, .or-footer{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; box-sizing:border-box !important; } .or-header{ position:fixed !important; top:0; left:0; right:0; z-index:999 !important; background:rgba(18,13,11,0) !important; transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease; border-bottom:1px solid rgba(200,154,122,0) !important; } .or-header.is-scrolled{ background:rgba(18,13,11,.92) !important; backdrop-filter: saturate(150%) blur(16px) !important; -webkit-backdrop-filter: saturate(150%) blur(16px) !important; border-bottom:1px solid rgba(200,154,122,.14) !important; } .or-header__inner{ width:min(1240px, calc(100vw - 56px)) !important; margin:0 auto !important; padding:18px clamp(20px,4vw,40px) !important; display:flex !important; justify-content:space-between !important; align-items:center !important; flex-wrap:wrap !important; gap:10px 24px !important; } .or-brand{ display:flex !important; align-items:center !important; gap:12px !important; font-family:var(--or-font-display) !important; font-style:italic !important; font-size:23px !important; color:var(--or-creme) !important; text-decoration:none !important; } .or-brand img{ height:32px !important; width:auto !important; display:block !important; } .or-brand small{ font-size:14px !important; font-style:italic !important; color:var(--or-cacao-fonce) !important; } .or-nav{ display:flex !important; gap:clamp(14px,2.5vw,28px) !important; flex-wrap:wrap !important; font-size:11px !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .or-nav a{ color:var(--or-cacao-fonce) !important; text-decoration:none !important; padding:6px 2px !important; min-height:40px !important; display:inline-flex !important; align-items:center !important; } .or-nav a:hover, .or-nav a.is-current{ color:var(--or-cacao-clair) !important; } .or-burger{ display:none !important; background:transparent !important; border:0 !important; color:var(--or-creme) !important; min-width:40px !important; min-height:40px !important; } @media (max-width:760px){ .or-header__inner{ padding:14px 18px !important; } .or-burger{ display:inline-flex !important; align-items:center !important; justify-content:center !important; } .or-nav{ position:absolute !important; top:100% !important; left:0 !important; right:0 !important; width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; background:rgba(18,13,11,.97) !important; border-top:1px solid rgba(200,154,122,.14) !important; border-bottom:1px solid rgba(200,154,122,.14) !important; padding:6px 20px 18px !important; opacity:0 !important; transform:translateY(-8px) !important; pointer-events:none !important; transition:opacity .3s ease, transform .3s ease !important; } .or-nav.is-open{ opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important; } .or-nav a{ padding:12px 0 !important; border-bottom:1px solid rgba(200,154,122,.10) !important; font-size:.82rem !important; } } /* ================= FOOTER [origin_footer] ================= */ .or-footer{ position:relative !important; text-align:center !important; padding:clamp(48px,7vw,70px) 24px 40px !important; background:var(--or-noir) !important; border-top:1px solid rgba(200,154,122,.10) !important; } .or-footer__logo{ width:52px !important; height:auto !important; display:block !important; margin:0 auto !important; filter:drop-shadow(0 0 16px rgba(216,180,154,.3)) !important; } .or-footer__brand{ margin:22px 0 0 !important; font-family:var(--or-font-display) !important; font-style:italic !important; font-size:19px !important; color:var(--or-sable) !important; } .or-footer__tag{ margin:6px 0 0 !important; font-size:11px !important; letter-spacing:.22em !important; text-transform:uppercase !important; color:var(--or-cacao-fonce) !important; } .or-footer__links{ display:flex !important; justify-content:center !important; flex-wrap:wrap !important; gap:12px 26px !important; margin-top:30px !important; font-size:11.5px !important; letter-spacing:.14em !important; text-transform:uppercase !important; } .or-footer__links a{ color:var(--or-cacao-fonce) !important; text-decoration:none !important; min-height:40px !important; display:inline-flex !important; align-items:center !important; } .or-footer__links a:hover{ color:var(--or-cacao-clair) !important; } .or-footer__legal{ margin:24px 0 0 !important; font-size:11px !important; letter-spacing:.1em !important; color:var(--or-sauge-pierre) !important; } .or-footer__legal a{ color:var(--or-sauge-pierre) !important; text-decoration:none !important; margin:0 6px !important; } .or-footer__legal a:hover{ color:var(--or-cacao-clair) !important; } /* ================= classes communes ================= */ /* boutons-portes (CTA style porte, repris du bouton "Entrer dans le ciel") */ .or-btn-porte{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:15px 30px; border:1px solid rgba(216,180,154,.45); border-radius:2px; font-family:var(--or-font-body); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--or-cacao-clair); background:transparent; cursor:pointer; transition:background .25s ease, border-color .25s ease, color .25s ease; } .or-btn-porte:hover{ background:rgba(216,180,154,.08); border-color:var(--or-cacao-clair); color:var(--or-creme); } /* cartes maisons (Le Fil / Emotion / L'Atelier) */ .or-carte-maison{ border-radius:3px; padding:22px; } .or-carte-maison--lefil{ background:var(--or-sauge-nuit); color:var(--or-sauge-texte); } .or-carte-maison--emotion{ background:var(--or-bordeaux-nuit); color:var(--or-bordeaux-texte); } .or-carte-maison--atelier{ background:var(--or-or-nuit); color:var(--or-or-texte); } /* panneaux (guide interactif, blocs choix) */ .or-panneau{ padding:14px 18px; border:1px solid rgba(200,154,122,.3); border-radius:2px; background:rgba(18,13,11,.4); color:var(--or-sable); font-family:var(--or-font-body); font-weight:300; font-size:14.5px; line-height:1.5; } .or-panneau button, button.or-panneau{ width:100%; text-align:left; cursor:pointer; min-height:44px; transition:border-color .25s ease, background .25s ease; } .or-panneau button:hover, button.or-panneau:hover{ border-color:var(--or-cacao); background:rgba(36,24,21,.7); } /* correctif 19.07 : le 100vw compte l ascenseur → 8px de débordement horizontal */ html.origin-site, body.origin-site { overflow-x: clip !important; } /* correctif 19.07 (rognage droite iPhone) : sur mobile le 100vw + clip mange les fins de lignes ; les conteneurs Divi étant déjà neutralisés par le socle, le full-bleed en 100% suffit et ne peut pas déborder. */ @media (max-width: 780px){ html.origin-site body, body.origin-site {} #origin-accueil-page, #or-traj, #or-conf, .or-contact-page, .or-legal-page, .or-header, .or-nav, .or-footer { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* correctif 20.07 : liens du footer/header en couleurs Origin EXPLICITES — sans cela, la couleur de lien globale de Divi (verte chez Laurent) s infiltre. */ body.origin-site .or-footer a, body.origin-site .or-footer a:visited { color:#A56E58 !important; } body.origin-site .or-footer a:hover { color:#D8B49A !important; } body.origin-site .or-footer, body.origin-site .or-footer p, body.origin-site .or-footer span { color:#9A7E6E !important; } body.origin-site .or-header a, body.origin-site .or-nav a { color:#A56E58 !important; } body.origin-site .or-header a:hover, body.origin-site .or-nav a:hover { color:#D8B49A !important; } /* ================= POLICES AUTO-HÉBERGÉES (20.07.2026) ================= Doctrine « pas de mensonge par omission » : les @import Google Fonts des 6 feuilles de page sont supprimés — plus AUCUNE requête vers un serveur tiers, l'IP des visiteurs reste en Suisse. Fichiers .woff2 variables (graisses 300-600 en un fichier par style) servis depuis les assets famille (dossier fonts/). Source des fichiers : Google Fonts, licence OFL. Kit famille : BIRBAUMATELIER/FAMILLE_FONTS_KIT (modèle als-global). */ @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-ext-ivar.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-ivar.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-ext-nvar.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-nvar.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:300 500;font-display:swap;src:url('../fonts/inter-latin-ext-nvar.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Inter';font-style:normal;font-weight:300 500;font-display:swap;src:url('../fonts/inter-latin-nvar.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}