/* Garde-fou global : les bandes full-bleed (100vw) ne doivent jamais créer de scroll horizontal (sinon iOS dézoome et casse le header). */ html, body { overflow-x: clip; max-width: 100%; } /** * Styles des widgets Eridanis (thème enfant). * * Les widgets PHP produisent un HTML sémantique portant ces classes ; * tout le style vit ici, keyé sur les noms de classe. Les valeurs viennent * des tokens de style.css. Aucune couleur ni taille en dur (hormis * structurel sans token). */ /* -------------------------------------------------------------- Layout --- */ .eri-container { max-width: var(--eri-container); margin-inline: auto; padding-inline: 1.5rem; } .eri-stack { display: flex; flex-direction: column; gap: 1.25rem; } .eri-stack--center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; } .eri-media { display: flex; gap: 4rem; align-items: flex-start; } .eri-figure { flex: 0 0 clamp(280px, 42%, 520px); } .eri-figure img { display: block; width: 100%; height: auto; border-radius: var(--eri-radius-card); } .eri-prose-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .75rem; } .eri-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } /* --------------------------------------------------------- Sections ------ */ .eri-section { padding-block: var(--eri-space-section); } .eri-section--tinted { background: var(--eri-surface-2); } /* Bande de section rendue par le widget (enjeux, FAQ, silo…). La variante teintée sort en pleine largeur (full-bleed) pour que le fond touche les bords y compris sur mobile, où le conteneur natif garde 20px. */ .eri-band { position: relative; } .eri-band--tinted { background: #EDF1F7; padding-block: var(--eri-space-section); position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* ------------------------------------------------------- Typographie ----- */ .eri-hero-kicker { font-family: var(--eri-font-display); font-size: 1.125rem; font-weight: 600; color: var(--eri-blue); margin: 0; } .elementor .eri-display-1 { font-family: var(--eri-font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -1.5px; color: var(--eri-navy); margin: 0; } .elementor .eri-display-2 { font-family: var(--eri-font-display); font-size: clamp(1.875rem, 3vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -1px; color: var(--eri-navy); margin: 0; } .elementor .eri-display-2--light { font-family: var(--eri-font-display); font-size: clamp(1.875rem, 3vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -1px; color: var(--eri-on-accent); margin: 0 0 1.25rem; } .eri-lead { font-family: var(--eri-font-body); font-size: 1.125rem; line-height: 1.6; color: var(--eri-text-muted); margin: 0; } .eri-hero-lead { max-width: 640px; margin-inline: auto; } .eri-eyebrow { font-family: var(--eri-font-display); font-size: var(--eri-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--eri-blue); margin: 0 0 1rem; } .elementor .eri-subhead { font-family: var(--eri-font-display); font-size: 1.1875rem; font-weight: 600; color: var(--eri-navy); margin: 1rem 0 0; } .eri-prose { font-family: var(--eri-font-body); color: var(--eri-text-body); line-height: 1.7; } .eri-prose p { margin: 0 0 1rem; } .eri-prose p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------ Cards ------ */ .eri-card { background: var(--eri-surface-0); border: 1px solid rgba(220,227,237,.6); border-radius: var(--eri-radius-card); padding: 1.5rem; box-shadow: 0 1px 3px rgba(14,30,67,.04), 0 12px 30px -14px rgba(14,30,67,.12); } .eri-stat-value { font-family: var(--eri-font-display); font-size: clamp(2.25rem, 3vw, 3rem); font-weight: 600; line-height: 1; margin: 0 0 .5rem; color: var(--eri-blue); } .eri-stat-value.eri-c--blue { color: var(--eri-blue); } .eri-stat-value.eri-c--teal { color: var(--eri-teal); } .eri-stat-value.eri-c--mustard { color: var(--eri-mustard); } .eri-stat-value.eri-c--green { color: #1FA971; } .eri-stat-label { font-family: var(--eri-font-body); font-size: .9375rem; color: var(--eri-text-muted); margin: 0; line-height: 1.5; } .eri-card .eri-stat-value { margin: 0 0 .5rem; } .eri-card .eri-stat-label { margin: 0; } .eri-rule-accent { display: block; width: 40px; height: 3px; background: var(--eri-blue); margin-bottom: 1rem; } /* ------------------------------------------------------------ Bouton ----- */ .eri-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.75rem; border-radius: var(--eri-radius-pill); background: var(--eri-blue); color: var(--eri-on-accent); font-family: var(--eri-font-display); font-weight: 500; text-decoration: none; transition: background .2s ease, transform .2s ease; } .eri-btn:hover, .eri-btn:focus-visible { background: #2f7bea; color: var(--eri-on-accent); } /* Le kit Elementor (.elementor-kit-12 a, spéc. 0,1,1) impose sa couleur de lien aux boutons . On scope sous .elementor a.eri-btn (0,2,1) pour gagner. */ .elementor a.eri-btn, .elementor a.eri-btn:visited, .elementor a.eri-btn:hover, .elementor a.eri-btn:focus { color: var(--eri-on-accent); } .elementor a.eri-btn--ghost { background: transparent; border: 1px solid var(--eri-blue); color: var(--eri-blue); } .elementor a.eri-btn--ghost:hover, .elementor a.eri-btn--ghost:focus { background: rgba(63,142,252,.08); color: var(--eri-blue); } /* ------------------------------------------------ Exemple concret (bande) --- */ .eri-band--dark { background: linear-gradient(120deg, var(--eri-navy-deep) 0%, #12315f 55%, #14494f 105%); padding-block: clamp(56px, 6vw, 96px); position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .eri-band-inner { max-width: var(--eri-content-row); margin-inline: auto; padding-inline: 1.5rem; } .eri-band--dark .eri-eyebrow { color: var(--eri-blue-light); } .eri-band--dark .eri-prose { color: rgba(255,255,255,.82); } .eri-band--dark .eri-prose strong { color: var(--eri-on-accent); font-weight: 700; } .eri-band--dark .eri-stat-value--white { color: var(--eri-on-accent); } .eri-case-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(2rem, 6vw, 7rem); text-align: center; margin-top: 2.75rem; } .eri-case-stats > * { display: flex; flex-direction: column; align-items: center; gap: .4rem; } .eri-case-stats p { margin: 0; } .eri-stat-value--white { font-family: var(--eri-font-display); font-size: clamp(2.25rem, 3vw, 3rem); font-weight: 600; line-height: 1; margin: 0 0 .5rem; color: var(--eri-on-accent); } .eri-stat-label--light { font-family: var(--eri-font-body); font-size: .9375rem; color: var(--eri-blue-light); margin: 0; } /* --------------------------------------------------------------- FAQ ----- */ .eri-faq { max-width: var(--eri-content-row); margin-inline: auto; padding-inline: 1.5rem; } .elementor .eri-faq__heading { font-family: var(--eri-font-display); font-size: clamp(1.875rem, 3vw, 2.75rem); font-weight: 800; color: var(--eri-navy); text-align: center; margin: 0 0 2rem; } .eri-faq__list { display: flex; flex-direction: column; gap: .75rem; } .eri-faq__item { background: var(--eri-surface-0); border-radius: var(--eri-radius-card); padding: 1.125rem 1.5rem; box-shadow: 0 1px 3px rgba(14,30,67,.04), 0 12px 30px -14px rgba(14,30,67,.10); } .eri-faq__question { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--eri-font-display); font-weight: 500; color: var(--eri-navy); cursor: pointer; list-style: none; } .eri-faq__question::-webkit-details-marker { display: none; } .eri-faq__question::after { content: ''; flex: 0 0 auto; width: .6rem; height: .6rem; border-right: 2px solid var(--eri-blue); border-bottom: 2px solid var(--eri-blue); transform: rotate(45deg); transition: transform .2s ease; } .eri-faq__item[open] > .eri-faq__question::after { transform: rotate(-135deg); } .eri-faq__question:focus-visible { outline: 2px solid var(--eri-blue); outline-offset: 4px; } .eri-faq__answer { font-family: var(--eri-font-body); color: var(--eri-text-body); line-height: 1.7; padding-top: .875rem; } .eri-faq__answer > :last-child { margin-bottom: 0; } /* -------------------------------------------------------------- Silo ----- */ .eri-silo { max-width: var(--eri-content-row); margin-inline: auto; text-align: center; padding-inline: 1.5rem; } .elementor .eri-silo__heading { font-family: var(--eri-font-display); font-size: clamp(1.875rem, 3vw, 2.75rem); font-weight: 800; color: var(--eri-navy); margin: 0; } .eri-silo__subheading { font-family: var(--eri-font-body); color: var(--eri-text-muted); margin: .5rem 0 2rem; } .eri-silo__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .eri-silo__link { display: flex; flex-direction: row; align-items: center; gap: .75rem; height: 100%; text-align: start; padding: 1rem 1.25rem; background: var(--eri-surface-0); border: 1px solid rgba(220,227,237,.6); border-radius: var(--eri-radius-card); text-decoration: none; box-shadow: 0 1px 3px rgba(14,30,67,.04), 0 12px 30px -14px rgba(14,30,67,.10); transition: box-shadow .2s ease, border-color .2s ease; } .eri-silo__link:hover, .eri-silo__link:focus-visible { border-color: var(--eri-blue); } .eri-silo__tag { font-family: var(--eri-font-display); font-size: var(--eri-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .eri-silo__item:nth-child(3n+1) .eri-silo__tag { color: var(--eri-blue); } .eri-silo__item:nth-child(3n+2) .eri-silo__tag { color: var(--eri-teal); } .eri-silo__item:nth-child(3n+3) .eri-silo__tag { color: var(--eri-mustard); } .eri-silo__title { font-family: var(--eri-font-display); font-weight: 500; color: var(--eri-navy); } /* ------------------------------------------------------------ Mobile ----- */ @media (max-width: 768px) { .eri-media { flex-direction: column; gap: 2rem; } /* L'image passe toujours AU-DESSUS du texte en mobile, quel que soit le sens (image à gauche ou à droite) : le variant « image à droite » a un ordre DOM texte+image qui, sans cela, placerait le texte en premier. */ .eri-media .eri-figure { order: -1; } .eri-figure { flex-basis: auto; max-width: 100%; } .eri-silo__link { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .eri-faq__question::after, .eri-btn, .eri-silo__link { transition: none; } } /* ------------------------------------------------------- Fil d'Ariane ---- */ .eri-breadcrumb { font-family: var(--eri-font-body); font-size: .9375rem; color: var(--eri-text-muted); } .eri-breadcrumb .eri-container { text-align: center; } .eri-breadcrumb--start .eri-container { text-align: start; } .eri-breadcrumb a { color: var(--eri-text-muted); text-decoration: none; } .eri-breadcrumb a:hover { color: var(--eri-blue); } .eri-breadcrumb .aioseo-breadcrumbs span[aria-current], .eri-breadcrumb .eri-breadcrumb__sep { color: var(--eri-navy); } /* Titre de section centré pour certains blocs (enjeux). */ .elementor-widget-eri-stat-cards .eri-display-2 { text-align: center; } /* ==================================================== Solution v2 =========== */ /* Bandeau domaines : sur-titre centré + rangée de pills. */ /* Bandeau domaines : bande « section claire » pleine largeur (#F5F7FA), chips blanches à ombre douce, piste défilante avec fondus de 120px sur les bords. Valeurs relevées sur la maquette (nœud Figma 1025:28672). */ .eri-domains { text-align: center; background: var(--eri-section-light); padding-block: 30px 40px; position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .eri-domains__eyebrow { color: var(--eri-pills-eyebrow, var(--eri-text-soft)); font-family: var(--eri-font-display); font-size: 16px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; margin: 0; } /* Pas d'overflow ici : c'est la bande .eri-domains (100vw, overflow:hidden) qui rogne le défilement aux bords du viewport. Rogner sur le marquee couperait les ombres des pastilles (bande basse). */ .eri-domains__marquee { position: relative; margin-top: 1.5rem; } /* Fondus latéraux (120px) vers le fond de section, comme la maquette. */ .eri-domains__marquee::before, .eri-domains__marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .eri-domains__marquee::before { left: 0; background: linear-gradient(90deg, var(--eri-domains-bg, var(--eri-section-light)), rgba(245,247,250,0)); } .eri-domains__marquee::after { right: 0; background: linear-gradient(270deg, var(--eri-domains-bg, var(--eri-section-light)), rgba(245,247,250,0)); } .eri-domains__track { display: flex; flex-wrap: nowrap; width: max-content; gap: 13px; animation: eri-marquee var(--eri-marquee-dur, 45s) linear infinite; will-change: transform; } .eri-domains__marquee:hover .eri-domains__track { animation-play-state: paused; } .eri-domains__pill { font-family: var(--eri-font-display); font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: .4px; color: var(--eri-pill-text, var(--eri-badge-text)); background: var(--eri-pill-bg, var(--eri-surface-0)); border: 1px solid var(--eri-section-light); border-radius: 999px; padding: 11px 19px 11px 15px; white-space: nowrap; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(13,38,89,.05); } /* La distance de translation = une période exacte (posée par eri-widgets.js dans --eri-marquee-w) → raccord invisible. Repli -50% si le JS n'a pas tourné. */ @keyframes eri-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--eri-marquee-w, 50%))); } } @media (prefers-reduced-motion: reduce) { .eri-domains__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } } /* Timeline déploiement : ligne + étapes en cartes. */ /* Timeline de déploiement : piste horizontale (dégradé vert→bleu, pastilles) + cartes descriptives dessous. */ /* Bande « section claire » pleine largeur + espacement généreux (maquette). */ .eri-tl-band { background: var(--eri-section-light); padding-block: clamp(64px, 7vw, 104px); position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .eri-tl { display: flex; flex-direction: column; gap: 1rem; } .elementor .eri-tl__title { margin: 0; text-align: left; } .eri-tl__lead { margin: 0 0 1.5rem; max-width: 44rem; } .eri-tl__track { display: flex; align-items: center; padding: 0 22px; margin-bottom: -22px; position: relative; z-index: 1; } .eri-tl__seg { flex: 1 1 0; height: 3px; background: linear-gradient(90deg, #4ED88F, #3F8EFC); } .eri-tl__node { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(14,30,67,.10); font-weight: 700; } .eri-tl__node--dot { width: 34px; height: 34px; border: 3px solid #EAF0FA; } .eri-tl__node--dot::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--eri-blue); } .eri-tl__node--check { border: 3px solid; font-size: 1.1rem; } .eri-tl__node--green { border-color: #4ED88F; color: #1FA971; } .eri-tl__node--blue { border-color: var(--eri-blue); color: var(--eri-blue); } .eri-tl__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--eri-tl-cols, repeat(3, minmax(0,1fr))); gap: 1.5rem; align-items: start; } /* Option « hauteur égale » (par défaut) : les cartes s'étirent sur la plus haute ; l'étiquette est poussée en bas pour un rendu propre. */ .eri-tl--eqh .eri-tl__cards { align-items: stretch; } .eri-tl--eqh .eri-tl__tag { margin-top: auto; } .eri-tl__card { background: var(--eri-surface-0); border: 1px solid rgba(220,227,237,.7); border-radius: var(--eri-radius-card); padding: 1.75rem; box-shadow: 0 1px 3px rgba(14,30,67,.04), 0 14px 34px -18px rgba(14,30,67,.12); display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; } .elementor .eri-tl__card-title { font-family: var(--eri-font-display); font-size: 1.25rem; font-weight: 600; color: var(--eri-navy); margin: 0; line-height: 1.25; } .eri-tl__card-body { margin: 0; font-family: var(--eri-font-body); color: var(--eri-text-body); line-height: 1.6; } .eri-tl__tag { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--eri-font-display); font-size: .8125rem; font-weight: 500; border-radius: var(--eri-radius-pill); padding: .3rem .8rem; margin-top: .25rem; } .eri-tl__tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .eri-tl__tag--blue { color: var(--eri-blue); background: var(--eri-blue-light); } .eri-tl__tag--green { color: #1FA971; background: rgba(31,169,113,.12); } @media (max-width: 860px) { .eri-tl__track { display: none; } .eri-tl__cards { grid-template-columns: 1fr; } } /* Hero de conversion (Solution) : bande bleue pleine largeur, texte blanc. */ .eri-hero-sol { background: linear-gradient(118deg, #2C74F0 0%, #4E8DF6 52%, #8FB8FB 100%); padding-block: clamp(56px, 6vw, 96px); position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; } .eri-hero-sol__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3rem; align-items: center; } .eri-hero-sol__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } .elementor .eri-hero-sol .eri-display-1 { text-align: left; color: #fff; } .eri-hero-sol .eri-accent { color: #EAF2FF; } .eri-hero-sol .eri-lead { color: rgba(255,255,255,.92); } .eri-hero-sol__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; } /* Boutons sur bande bleue : primaire = bleu foncé/texte blanc, secondaire = blanc/texte navy. */ .elementor .eri-hero-sol a.eri-btn { background: #0E4FD1; color: #fff; } .elementor .eri-hero-sol a.eri-btn:hover { background: #0B44B8; color: #fff; } .elementor .eri-hero-sol a.eri-btn--ghost { background: #fff; border: 0; color: var(--eri-navy); } .elementor .eri-hero-sol a.eri-btn--ghost:hover { background: #EAF2FF; color: var(--eri-navy); } .eri-hero-sol__proof { display: flex; align-items: center; gap: .5rem 1.25rem; flex-wrap: wrap; font-family: var(--eri-font-body); font-size: .9375rem; color: rgba(255,255,255,.85); margin-top: .5rem; } .eri-proof__item { display: inline-flex; align-items: baseline; gap: .35rem; } .eri-proof__item + .eri-proof__item::before { content: '•'; color: rgba(255,255,255,.5); margin-right: 1.25rem; } .eri-proof__item strong { color: #fff; font-weight: 700; } .eri-hero-sol__media img { display: block; width: 100%; height: auto; border-radius: var(--eri-radius-card); box-shadow: 0 30px 70px -25px rgba(6,22,60,.45); } @media (max-width: 768px) { .eri-hero-sol__grid { grid-template-columns: 1fr; } } /* Ce que change Ouranos (section 03 Solution) : en-tête + cartes numérotées. */ .eri-change { display: flex; flex-direction: column; gap: 2.5rem; } .eri-change__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; } .elementor .eri-change__title { margin: 0; text-align: left; max-width: 26rem; } .eri-change__intro-col { display: flex; flex-direction: column; gap: 1.5rem; max-width: 23rem; margin-left: auto; } .eri-change__intro { margin: 0; } .eri-change__intro-col .eri-btn { align-self: flex-end; } /* Grille : la carte active occupe ~2,4 fois la largeur d'une carte repliée et déborde verticalement (comme la maquette : elle « sort » du rang, en haut et en bas). Les colonnes s'animent, d'où la transition sur grid-template-columns. */ /* Flex plutôt que grid : flex-grow s'interpole (les unités fr de grid ne s'animent pas de façon fiable), donc l'élargissement de la carte active est réellement animé. */ /* La rangée réserve d'emblée la hauteur de l'état déployé (470px) et centre les cartes dedans : la carte active peut « dépasser » visuellement sans jamais déplacer le contenu situé en dessous. */ /* Hauteur de rangée FIXE (pas min-height) : ainsi la carte active peut déborder en haut et en bas sans agrandir la rangée — donc sans déplacer les cartes voisines (c'était la cause du tremblement vertical). */ .eri-change__grid { display: flex; gap: 1.25rem; align-items: center; justify-content: center; height: 580px; } /* Une seule courbe et une seule durée pour TOUTES les propriétés animées, sinon les fins d'animation se décalent et le mouvement paraît rebondir. min-height n'est pas animée (la rangée réserve déjà la hauteur). */ /* Largeurs en pourcentages FIXES (pas flex-grow) : avec flex-grow, les largeurs calculées des cartes non concernées varient en sous-pixel à chaque frame et leur texte vibre. Ici seules la carte qui s'ouvre et celle qui se referme changent de flex-basis ; les deux autres gardent exactement 18.5 %. */ /* Hauteur fixe pour les cartes repliées : aucune variation verticale possible. */ .eri-change__card { flex: 0 0 18.5%; min-width: 0; background: var(--eri-surface-2); border-radius: 18px; padding: 1.75rem; display: flex; flex-direction: column; height: 400px; transition: flex-basis .45s ease-in-out, background .45s ease-in-out, box-shadow .45s ease-in-out; } /* Hauteur fixe aussi pour la carte active : rien ne dépend du contenu, donc aucune variation de hauteur possible pendant la transition. */ .eri-change__card--featured { flex-basis: 38.5%; height: 580px; } /* Carte active : plus haute (déborde le rang), fond blanc, ombre portée. */ /* Padding identique dans les deux états : le faire varier décale le texte à chaque frame de la transition de largeur (effet de tremblement). */ .eri-change__card--featured { background: var(--eri-surface-0); box-shadow: 0 24px 60px -22px rgba(14,30,67,.28); z-index: 2; position: relative; } /* Pas de transition sur font-size : l'interpolation sub-pixel de la typo pendant le changement de largeur produit un tremblement. La taille change d'un coup, masquée par le fondu du contenu. */ .eri-change__num { font-family: var(--eri-font-display); font-size: 2.75rem; font-weight: 600; color: var(--eri-blue); line-height: 1; } /* Média : grand visuel au-dessus du numéro dans l'état déployé. */ .eri-change__media { max-height: 0; opacity: 0; overflow: hidden; margin: 0; order: -1; transition: max-height .45s ease-in-out, opacity .45s ease-in-out, margin .45s ease-in-out; } .eri-change__card--featured .eri-change__media { max-height: 220px; opacity: 1; margin: 0 0 1.5rem; } .eri-change__media img { display: block; width: 100%; height: auto; border-radius: 12px; } /* Pied : puce + titre ancrés en bas dans l'état replié ; dans l'état déployé le titre grossit et la description apparaît juste sous le numéro. */ .eri-change__foot { margin-top: auto; display: flex; flex-direction: column; } .eri-change__card--featured .eri-change__foot { margin-top: .85rem; } /* Ligne du numéro : le numéro à gauche, la pastille à sa droite (état déployé). */ .eri-change__topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .eri-change__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--eri-blue); } /* Point du pied : visible seulement quand la carte est repliée, avec un halo bleuté diffus autour (glow), comme la maquette. */ .eri-change__dot--foot { margin-bottom: .85rem; box-shadow: 0 0 0 6px rgba(63,142,252,.14), 0 6px 14px rgba(63,142,252,.45); } .eri-change__card--featured .eri-change__dot--foot { display: none; } /* Pastille de tête : visible seulement quand la carte est déployée, au niveau du numéro et donc SOUS l'image (comme la maquette). */ .eri-change__dot--head { display: none; } /* Pastille bleue arrondie avec un POINT rond blanc au centre (un inset box-shadow donnerait un carré, pas un point). */ .eri-change__card--featured .eri-change__dot--head { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--eri-blue); flex: 0 0 auto; } .eri-change__card--featured .eri-change__dot--head::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #fff; } .elementor .eri-change__card-title { font-family: var(--eri-font-display); font-size: 1.0625rem; font-weight: 600; color: var(--eri-navy); margin: 0; line-height: 1.35; } .elementor .eri-change__card--featured .eri-change__card-title { font-size: 1.5rem; font-weight: 600; line-height: 1.25; } .eri-change__desc { max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height .45s ease-in-out, opacity .45s ease-in-out, margin .45s ease-in-out; } .eri-change__card--featured .eri-change__desc { max-height: 320px; opacity: 1; margin: .85rem 0 0; } .eri-change__desc p { margin: 0; } @media (max-width: 900px) { .eri-change__grid { flex-wrap: wrap; min-height: 0; } .eri-change__card, .eri-change__card--featured { flex-basis: calc(50% - .625rem); } } @media (max-width: 768px) { .eri-change__head { flex-direction: column; } .eri-change__intro-col { margin-left: 0; max-width: none; } .eri-change__intro-col .eri-btn { align-self: flex-start; } .eri-change__grid { flex-direction: column; min-height: 0; } .eri-change__card, .eri-change__card--featured { flex-basis: auto; min-height: 0; } /* Sur mobile, chaque carte montre son contenu (pas de carrousel utile). */ .eri-change__media, .eri-change__desc { max-height: none; opacity: 1; margin-top: .85rem; } .eri-change__dot--head { display: none !important; } } /* Ouranos en production (section 05 Solution) : bande navy pleine largeur. */ /* .eri-prod n'est plus la bande : le fond navy pleine largeur + padding sont portés par la section s_prod (réglages natifs + full-bleed CSS). */ .eri-prod { position: relative; } .eri-prod__inner { display: flex; flex-direction: column; gap: 2.5rem; } .eri-prod__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap; } .elementor .eri-prod .eri-display-2--light { margin: 0; max-width: 22rem; text-align: left; } .eri-accent-light { color: var(--eri-blue-light); } .eri-prod__intro { color: rgba(255,255,255,.72); font-family: var(--eri-font-body); line-height: 1.6; max-width: 24rem; margin: 0; } .eri-prod__stats { display: flex; flex-wrap: wrap; gap: 0; } .eri-prod__stat { display: flex; flex-direction: column; gap: .35rem; padding: 0 2.5rem; flex: 1 1 0; min-width: 140px; } .eri-prod__stat + .eri-prod__stat { border-left: 1px solid rgba(255,255,255,.18); } .eri-prod__stat:first-child { padding-left: 0; } .eri-prod__stat-value { font-family: var(--eri-font-display); font-size: clamp(2.25rem, 3vw, 3rem); font-weight: 600; line-height: 1; color: #fff; } .eri-prod__stat-label { font-family: var(--eri-font-body); font-size: .9375rem; color: rgba(255,255,255,.65); } .eri-prod__eyebrow { color: rgba(255,255,255,.55); margin: 0; } .eri-prod__eyebrow--center { text-align: center; margin-top: 1rem; } .eri-prod__measures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .eri-prod__measure img { display: block; width: 100%; height: auto; border-radius: var(--eri-radius-card); } .eri-prod__case { display: flex; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.5); } .eri-prod__case-map { flex: 0 0 44%; } .eri-prod__case-map img { display: block; width: 100%; height: 100%; object-fit: cover; } .eri-prod__case-body { flex: 1 1 0; padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .eri-tag { display: inline-block; font-family: var(--eri-font-display); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--eri-radius-pill); padding: .3rem .8rem; } .eri-tag--green { color: #1FA971; background: rgba(31,169,113,.12); } .elementor .eri-prod__case-title { font-family: var(--eri-font-display); font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 700; color: var(--eri-navy); margin: 0; line-height: 1.2; } .eri-prod__case-desc { font-family: var(--eri-font-body); color: var(--eri-text-body); line-height: 1.6; margin: 0; } .eri-prod__case-stats { display: flex; gap: 2rem; flex-wrap: wrap; margin: .25rem 0 .5rem; } .eri-prod__case-stat { display: flex; flex-direction: column; gap: .2rem; } .eri-prod__case-stat-value { font-family: var(--eri-font-display); font-size: 1.5rem; font-weight: 700; color: var(--eri-blue); line-height: 1; } .eri-prod__case-stat-label { font-family: var(--eri-font-body); font-size: .8125rem; color: var(--eri-text-muted); line-height: 1.4; } .eri-prod__logos img { display: block; width: 100%; max-width: 1120px; height: auto; margin: 0 auto; } @media (max-width: 900px) { .eri-prod__measures { grid-template-columns: 1fr; } .eri-prod__case { flex-direction: column; } .eri-prod__case-map { flex-basis: auto; } .eri-prod__case-map img { height: 220px; } } @media (max-width: 768px) { .eri-prod__head { flex-direction: column; } .eri-prod__stat { padding: 0; border-left: 0 !important; flex-basis: 45%; } .eri-prod__logos img { width: 100%; } } /* Grille de domaines (dossier chapitre 02). */ .eri-domcards { display: flex; flex-direction: column; gap: 1.75rem; } .elementor .eri-domcards__title { margin: 0; text-align: left; } .eri-domcards__intro { margin: 0; max-width: 46rem; } .eri-domcards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .eri-domcards__card { background: var(--eri-surface-2); border-radius: var(--eri-radius-card); padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; } .eri-domcards__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--eri-blue); } .elementor .eri-domcards__name { font-family: var(--eri-font-display); font-size: 1.0625rem; font-weight: 600; color: var(--eri-navy); margin: .25rem 0 0; } .eri-domcards__metric { font-family: var(--eri-font-body); font-size: .875rem; color: var(--eri-text-muted); } @media (max-width: 900px) { .eri-domcards__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .eri-domcards__grid { grid-template-columns: 1fr; } } /* Citation (dossier). */ .eri-quote { max-width: var(--eri-content-row); margin-inline: auto; } .eri-quote__block { position: relative; margin: 0; padding: 0 0 0 2.5rem; } .eri-quote__mark { position: absolute; left: 0; top: -.4rem; font-family: var(--eri-font-display); font-size: 4rem; line-height: 1; color: var(--eri-blue); } .eri-quote__text { font-family: var(--eri-font-display); font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-weight: 600; color: var(--eri-navy); line-height: 1.35; margin: 0; } .eri-quote__cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--eri-font-body); color: var(--eri-text-muted); } /* CTA bande bleue + briques (section 08 Solution). */ .eri-ctaband { background: linear-gradient(180deg, #1277FF 0%, #0E63F2 100%); padding-block: clamp(56px, 6vw, 96px); position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .eri-ctaband__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; } .eri-ctaband__title { font-family: var(--eri-font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: #fff; margin: 0; } .eri-ctaband__lead { color: rgba(255,255,255,.85); margin: 0; max-width: 40rem; } .eri-ctaband__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: .75rem; } .elementor a.eri-ctaband__btn { display: inline-flex; align-items: center; gap: .6rem; background: #fff; color: var(--eri-navy); font-family: var(--eri-font-display); font-weight: 600; font-size: .9375rem; border-radius: var(--eri-radius-pill); padding: .8rem 1.35rem; text-decoration: none; } .elementor a.eri-ctaband__btn:hover { background: #EAF2FF; color: var(--eri-navy); } .eri-ctaband__arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--eri-blue); color: #fff; font-size: .75rem; } .eri-ctaband__rule { width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.25); margin: 2.5rem 0 0; } .eri-ctaband__eyebrow { color: rgba(255,255,255,.75); align-self: flex-start; margin: 1.5rem 0 1rem; } .eri-ctaband__briques { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .elementor a.eri-ctaband__brique { position: relative; display: flex; align-items: flex-start; min-height: 128px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 1.25rem; text-decoration: none; color: #fff; transition: background .2s ease; } .elementor a.eri-ctaband__brique:hover { background: rgba(255,255,255,.2); } .eri-ctaband__brique-title { font-family: var(--eri-font-display); font-weight: 600; font-size: 1.0625rem; color: #fff; max-width: 72%; line-height: 1.3; text-align: left; } .eri-ctaband__arrow-circle { position: absolute; right: 1.1rem; bottom: 1.1rem; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--eri-blue); display: flex; align-items: center; justify-content: center; font-size: .9rem; } @media (max-width: 900px) { .eri-ctaband__briques { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .eri-ctaband__briques { grid-template-columns: 1fr; } } /* ========================================================================== Fidélité maquette « Solution — Version 2 » — correctifs transversaux. Issus de l'audit section par section (specs Figma). Placés en fin de fichier : à spécificité égale, ils surchargent les règles héritées. ========================================================================== */ /* --- Fonds de bande (§2.1) --- */ .eri-hero-sol { background: var(--eri-grad-hero), var(--eri-surface-0); overflow: visible; overflow-x: clip; } /* (fond navy déplacé sur la section s_prod) */ .eri-ctaband { background: var(--eri-azure-500); } .eri-domcards-band, .eri-crit-band { background: var(--eri-section-light); padding-block: var(--eri-band-pad); position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* --- Titres H2 : Poppins 500 / 36px / -0.54px / #141922 (§2.2) --- */ .elementor .eri-tl__title, .elementor .eri-change__title, .elementor .eri-domcards__title, .elementor .eri-crit__title, .elementor .eri-chapter-title, .elementor .eri-mediatext__title, .elementor .eri-statement, .elementor .eri-prod .eri-display-2--light, .elementor .eri-ctaband__title { font-family: var(--eri-font-display); font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 1.2222; letter-spacing: -.54px; color: var(--eri-ink); text-align: left; margin: 0; } .elementor .eri-prod .eri-display-2--light, .elementor .eri-ctaband__title { color: var(--eri-on-accent); } .elementor .eri-ctaband__title { text-align: center; max-width: 1000px; } .elementor .eri-prod .eri-display-2--light { max-width: 640px; } .elementor .eri-tl__title { max-width: 860px; } .elementor .eri-change__title { max-width: 40rem; } .elementor .eri-mediatext__title, .elementor .eri-chapter-title { max-width: 780px; } @media (max-width: 768px) { .elementor .eri-tl__title, .elementor .eri-change__title, .elementor .eri-domcards__title, .elementor .eri-crit__title, .elementor .eri-faq__heading, .elementor .eri-chapter-title, .elementor .eri-mediatext__title { font-size: 1.75rem; line-height: 2.25rem; } } /* --- Accent bleu inline (§2.3) --- */ .elementor .eri-accent { color: var(--eri-azure-500); } .elementor .eri-hero-sol .eri-accent { color: var(--eri-azure-500); } .elementor .eri-accent-light { color: var(--eri-azure-300); } .elementor .eri-change__title .eri-accent, .elementor .eri-prod .eri-accent-light { display: block; } @media (min-width: 1100px) { .elementor .eri-hero-sol .eri-accent { display: block; } } /* --- Corps de texte, chapôs, eyebrows (§2.4) --- */ .eri-tl__lead, .eri-domcards__intro, .eri-crit__lead, .eri-intro-sub { font-family: var(--eri-font-body); font-size: 1.125rem; font-weight: 500; line-height: 1.6667; color: var(--eri-badge-text); margin: 0; max-width: 700px; } .eri-tl__lead { max-width: 640px; } .eri-crit__lead, .eri-intro-sub { color: var(--eri-text-soft); } .elementor-widget-eri-media-text .eri-prose, .eri-textcols__body, .eri-crit__note, .eri-prod__case-desc, .eri-change__intro { font-family: var(--eri-font-body); font-size: 1rem; line-height: 1.75; color: var(--eri-text-soft); } .eri-crit__note, .eri-change__intro { color: var(--eri-badge-text); } .eri-tl__card-body, .eri-crit__card-body, .eri-note__text, .eri-change__card--featured .eri-change__desc, .eri-faq__answer, .eri-alerts__label { font-family: var(--eri-font-body); font-size: .875rem; line-height: 1.7143; color: var(--eri-text-soft); } .eri-domains__eyebrow, .eri-prod__eyebrow, .eri-ctaband__eyebrow { font-family: var(--eri-font-display); font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: .014em; text-transform: uppercase; margin: 0; } .eri-domains__eyebrow { color: var(--eri-text-soft); } .eri-prod__eyebrow { color: var(--eri-on-accent); } .eri-prod__eyebrow--center { color: var(--eri-azure-300); } /* #86C3FF, maquette */ .eri-ctaband__eyebrow { color: var(--eri-azure-100); } .eri-prod__eyebrow--center { text-align: center; } .eri-alerts__eyebrow { font-family: var(--eri-font-display); font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--eri-text-soft); margin: 0; } /* --- Boutons (§2.5) --- */ .elementor .eri-hero-sol a.eri-btn, .elementor .eri-change__intro-col a.eri-btn, .elementor .eri-prod a.eri-btn { background: var(--eri-azure-500); color: var(--eri-on-accent); font-family: var(--eri-font-display); font-weight: 500; min-height: 48px; } .elementor .eri-hero-sol a.eri-btn:hover, .elementor .eri-hero-sol a.eri-btn:focus-visible, .elementor .eri-change__intro-col a.eri-btn:hover, .elementor .eri-change__intro-col a.eri-btn:focus-visible, .elementor .eri-prod a.eri-btn:hover, .elementor .eri-prod a.eri-btn:focus-visible { background: var(--eri-accent-hover); color: var(--eri-on-accent); } .elementor .eri-hero-sol a.eri-btn { font-size: .9375rem; padding: 0 26px; } .elementor .eri-change__intro-col a.eri-btn, .elementor .eri-prod a.eri-btn { font-size: .8125rem; padding: 14px 22px 14px 24px; gap: 9px; } .elementor .eri-hero-sol a.eri-btn--ghost { background: var(--eri-surface-0); border: 1px solid var(--eri-border-soft); color: var(--eri-badge-text); min-height: 50px; padding: 0 27px; font-size: .9375rem; font-weight: 500; } .elementor .eri-hero-sol a.eri-btn--ghost:hover, .elementor .eri-hero-sol a.eri-btn--ghost:focus-visible { background: var(--eri-section-light); color: var(--eri-badge-text); } .elementor a.eri-ctaband__btn { display: inline-flex; align-items: center; gap: 9px; background: var(--eri-surface-0); color: var(--eri-badge-text); border: 1.4px solid var(--eri-border-strong); font-family: var(--eri-font-display); font-weight: 500; font-size: .875rem; line-height: 1; border-radius: var(--eri-radius-pill); padding: 16px 24px 16px 26px; text-decoration: none; } .elementor a.eri-ctaband__btn--primary { box-shadow: 0 8px 20px rgba(0,26,89,.22); } .elementor a.eri-ctaband__btn:hover { background: var(--eri-section-light); color: var(--eri-badge-text); } .eri-ctaband__arrow { display: none; } .elementor a.eri-prod__case-arrow { flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--eri-radius-pill); background: var(--eri-azure-500); color: var(--eri-on-accent); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(5,20,64,.25); transition: background .2s ease; } .elementor a.eri-prod__case-arrow:hover, .elementor a.eri-prod__case-arrow:focus-visible { background: var(--eri-accent-hover); } .eri-ico-24 { flex: 0 0 24px; width: 24px; height: 24px; display: block; } /* --- Badges pilules (§2.6) --- */ .eri-tl__tag, .eri-crit__badge, .eri-alerts__badge, .eri-prod__case-tag, .eri-domains__pill--live { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: var(--eri-radius-pill); font-family: var(--eri-font-display); font-weight: 500; font-size: .6875rem; line-height: normal; } .eri-tl__tag::before, .eri-crit__badge::before, .eri-alerts__dot, .eri-domains__dot { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--eri-badge-dot); } .eri-tl__tag--blue, .eri-crit__badge--info { background: var(--eri-badge-info-bg); color: var(--eri-badge-info-text); --eri-badge-dot: var(--eri-badge-info-dot); } .eri-tl__tag--green, .eri-crit__badge--success { background: var(--eri-badge-success-bg); color: var(--eri-badge-success-text); --eri-badge-dot: var(--eri-badge-success-dot); } .eri-crit__badge--warning { background: var(--eri-badge-warning-bg); color: var(--eri-badge-warning-text); --eri-badge-dot: var(--eri-badge-warning-dot); } /* Étiquette timeline : couleur libre par étape (teinte le pill via color-mix + le texte + le point). Ne s'applique que si --eri-tag-c est posé. */ .eri-tl__tag[style*="--eri-tag-c"] { background: color-mix(in srgb, var(--eri-tag-c) 14%, #fff); color: var(--eri-tag-c); --eri-badge-dot: var(--eri-tag-c); } .eri-crit__badge, .eri-prod__case-tag { font-weight: 600; font-size: .625rem; letter-spacing: .4px; text-transform: uppercase; } .eri-prod__case-tag { background: var(--eri-grad-pill); color: var(--eri-ink); letter-spacing: 1.1px; --eri-badge-dot: var(--eri-azure-500); } /* Accent libre de la carte étude de cas (flèche + chiffres), si --eri-case-c posé. */ .eri-prod__case[style*="--eri-case-c"] .eri-prod__case-arrow { background: var(--eri-case-c); } .eri-prod__case[style*="--eri-case-c"] .eri-prod__case-stat-value { color: var(--eri-case-c); } .eri-domains__pill--live { font-size: 13px; letter-spacing: 0; border-color: var(--eri-border-strong); --eri-badge-dot: var(--eri-azure-500); } .eri-domains__dot { width: 9px; height: 9px; box-shadow: 0 0 6px 1px rgba(0,122,255,.55); } .eri-alerts__badge { flex: 0 0 140px; justify-content: center; min-height: 26px; } .eri-alerts__row--danger .eri-alerts__badge { background: var(--eri-badge-danger-bg); color: var(--eri-badge-danger-text); } .eri-alerts__row--warning .eri-alerts__badge { background: var(--eri-badge-warning-bg); color: var(--eri-badge-warning-text); } .eri-alerts__row--success .eri-alerts__badge { background: var(--eri-badge-success-bg); color: var(--eri-badge-success-text); } .eri-alerts__row--danger .eri-alerts__dot { background: var(--eri-badge-danger-dot); } .eri-alerts__row--warning .eri-alerts__dot { background: var(--eri-badge-warning-dot); } .eri-alerts__row--success .eri-alerts__dot { background: var(--eri-badge-success-dot); } /* --- Rayons et ombres : la V2 est en 10px (§2.7) --- */ .eri-tl__card, .eri-change__card, .eri-crit__card, .eri-domcards__card, .eri-domcards__icon, .eri-alerts, .eri-alerts__row, .eri-faq__item, .eri-note, .eri-note__icon, .eri-summary, .eri-summary__pill, .eri-prod__case, .eri-prod__measure, .eri-ctaband__brique, .elementor a.eri-faq__contact, .eri-hero-sol__shot, .elementor-widget-eri-media-text .eri-figure { border-radius: var(--eri-radius-10); } .eri-tl__card { box-shadow: none; border: 1px solid var(--eri-section-light); } .eri-crit__card, .eri-note, .elementor a.eri-faq__contact { box-shadow: var(--eri-shadow-card2); } .eri-change__card--featured { box-shadow: var(--eri-shadow-feat); } .eri-prod__case { box-shadow: var(--eri-shadow-case); } .eri-hero-sol__shot, .eri-hero-sol__pin { box-shadow: var(--eri-shadow-l); } .eri-hero-sol__media img { box-shadow: var(--eri-shadow-l); border-radius: var(--eri-radius-10); } .eri-domains__pill { box-shadow: var(--eri-shadow-pill); } .eri-change__dot--foot { box-shadow: none; } /* --- Rythme vertical de bande (§2.8) --- */ .eri-tl-band, .eri-domcards-band, .eri-crit-band { padding-block: var(--eri-band-pad); } .eri-hero-sol { padding-block: clamp(64px, 9.2vw, 176px) clamp(56px, 8vw, 152px); } .eri-ctaband { padding-block: clamp(56px, 6vw, 96px) clamp(64px, 7vw, 114px); } .eri-domains { padding-block: 30px 46px; } .eri-tl, .eri-change, .eri-prod__inner, .eri-crit, .eri-domcards { gap: var(--eri-band-gap); } .eri-change__grid, .eri-crit__grid, .eri-domcards__grid, .eri-prod__measures { gap: 24px; } .eri-tl__cards { gap: 30px; } .eri-hero-sol__copy { gap: 26px; max-width: 680px; } .eri-hero-sol__cta { gap: 16px; margin-top: 0; } .eri-hero-sol__proof { gap: .5rem 1.75rem; margin-top: 0; } .eri-hero-sol__grid { grid-template-columns: 680fr 620fr; gap: 120px; align-items: start; } @media (max-width: 768px) { .eri-hero-sol { padding-block: 56px 48px; } .eri-hero-sol__grid { grid-template-columns: 1fr; gap: 40px; } .eri-hero-sol__copy { max-width: none; } .eri-hero-sol .eri-proof__item + .eri-proof__item::before { display: none; } .eri-hero-sol__pin { display: none; } } /* --- Fondus latéraux du marquee sur toute la hauteur de bande (§2.9) --- */ .eri-domains { overflow: hidden; } .eri-domains::before, .eri-domains::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .eri-domains::before { left: 0; background: linear-gradient(90deg, var(--eri-domains-bg, var(--eri-section-light)), transparent); } .eri-domains::after { right: 0; background: linear-gradient(270deg, var(--eri-domains-bg, var(--eri-section-light)), transparent); } /* Dans l'éditeur Elementor, eri-widgets.js ne tourne pas (pas de clonage ni d'animation) : on affiche les domaines en une rangée qui passe à la ligne, sans la 2e copie du marquee, pour un aperçu propre au lieu d'un défilement rogné. Le marquee ne s'anime que sur le front. */ body.elementor-editor-active .eri-domains__track { flex-wrap: wrap; justify-content: center; width: auto; animation: none; transform: none; } body.elementor-editor-active .eri-domains__pill[aria-hidden="true"] { display: none; } .eri-domains__marquee { margin-top: 22px; } .eri-domains__marquee::before, .eri-domains__marquee::after { content: none; } /* --- Mouvement réduit (§2.10) --- */ @media (prefers-reduced-motion: reduce) { .eri-faq__toggle, .eri-faq__toggle::after, .eri-btn, .eri-silo__link, .eri-change__card, .eri-crit__card, .eri-prod__case, .elementor a.eri-prod__case-arrow { transition: none; } .eri-prod__case:hover { transform: none; } } /* ========================================================================== Fidélité maquette Solution V2 — correctifs par section -------------------------------------------------------------------------- Fusion des 10 blocs produits section par section (01-hero → 08-cta). Règle de fusion : rien n'est redéclaré de ce que couvre déjà le bloc transversal ci-dessus (fonds de bande §2.1, titres H2 §2.2, accents §2.3, corps de texte §2.4, boutons §2.5, badges §2.6, rayons/ombres §2.7, rythme de bande §2.8, marquee §2.9, mouvement réduit §2.10). Les seules reprises sont signalées « ARBITRAGE » ou « LACUNE §2 » ci-dessous. Placé en fin de fichier : à spécificité égale, la dernière règle gagne, donc ces valeurs surchargent les blocs V1 sans qu'il faille les supprimer. ========================================================================== */ /* ------------------------------------------------------------------------- */ /* §3.0 — LACUNES DU BLOC TRANSVERSAL */ /* Trois familles de règles que les agents de section supposaient présentes */ /* dans le bloc §2 mais qui n'y figurent pas. Sans elles, le rendu casse. */ /* ------------------------------------------------------------------------- */ /* a) Bande full-bleed de la citation (06b). §2.1 traite hero / prod / ctaband / domcards-band / crit-band, mais PAS `.eri-quote`, dont la bande bleue est désormais peinte par le widget (section Elementor en mode « flush »). `max-width: none` neutralise le `.eri-quote { max-width: var(--eri-content-row) }` de la V1 (l.346), qui briderait la bande à 1120px. */ .eri-quote { background: var(--eri-azure-500); padding-block: clamp(48px, 6vw, var(--eri-band-pad)); position: relative; width: 100vw; max-width: none; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* Full-bleed du CTA réaffirmé : demandé par l'agent 08 pour survivre au retrait éventuel du bloc V1 l.354 (le fond, lui, vient de §2.1). */ .eri-ctaband { position: relative; width: 100vw; max-width: none; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* b) Gabarit des titres de CARTE (H3 / H4). §2.2 ne traite que les H2, alors que les agents 03 / 06c / 06e s'y référaient (« gabarit H3 28/36 », « Poppins 500 / 22px / blanc », « le margin:0 mutualisé des H4 »). Sans ces règles : .eri-domcards__name et .eri-summary__title restent navy (illisibles sur photo et sur l'aplat azure), .eri-crit__card-title, .eri-textcols__title et .eri-note__title n'ont aucune typographie, et la carte active de 03 reste à 24px au lieu de 28px. */ .elementor .eri-domcards__name, .elementor .eri-summary__title, .elementor .eri-textcols__title, .elementor .eri-crit__card-title, .eri-note__title, .elementor .eri-change__card--featured .eri-change__card-title { font-family: var(--eri-font-display); font-weight: 500; letter-spacing: -.2px; margin: 0; } .elementor .eri-domcards__name, .elementor .eri-summary__title { font-size: 1.375rem; line-height: 1.2727; color: var(--eri-on-accent); } .elementor .eri-textcols__title { font-size: 1.375rem; line-height: 1.2727; color: var(--eri-ink); } .elementor .eri-crit__card-title { font-size: 1.125rem; line-height: 1.4444; color: var(--eri-ink); } .eri-note__title { font-size: 1rem; line-height: 1.5; color: var(--eri-ink); } .elementor .eri-change__card--featured .eri-change__card-title { font-size: 1.75rem; line-height: 2.25rem; color: var(--eri-ink); } /* c) Titre du hero. §2.1 fait descendre le dégradé du hero vers le blanc, donc le `color: #fff` de la V1 (l.196) rend le H1 invisible. L'agent 01 a passé chapô et preuves en sombre mais a laissé le titre : on l'aligne sur --eri-ink, l'encre des H2 de §2.2. */ .elementor .eri-hero-sol .eri-display-1 { color: var(--eri-ink); } /* ------------------------------------------------------------------------- */ /* §3.1 — 01-hero : composition de droite, épingles, coupure du H1 */ /* La bande full-bleed vient de .eri-hero-sol (l.193 + §2.1) ; les couleurs */ /* sont scopées « .elementor » pour battre le kit quel que soit l'ordre. */ /* ------------------------------------------------------------------------- */ .eri-hero-sol__media { position: relative; overflow: visible; } .eri-hero-sol__shot { display: block; width: 100%; height: auto; } .eri-hero-sol__pin { display: inline-block; background: var(--eri-surface-0); border-radius: var(--eri-radius-pill); padding: 10px 17px 10px 14px; font-family: var(--eri-font-display); font-weight: 500; font-size: .75rem; line-height: 1.25; color: var(--eri-badge-text); white-space: nowrap; } /* Position et rotation des épingles : réglages natifs Elementor (Avancé → Positionnement / Transformation), cf. spin() dans build_solution.php. */ .eri-hero-sol__pin-label { display: block; } .eri-hero-sol__pin-sub { display: block; margin-top: 2px; font-weight: 400; font-size: .6875rem; color: var(--eri-text-soft); } /* Coupure du H1 : le mot d'accent passe seul à la ligne au-delà de 1100px (via `.eri-accent { display: block }` de §2.3) ; en dessous, flux inline. */ .elementor .eri-hero-sol__title-main { display: inline; } @media (min-width: 1100px) { .elementor .eri-hero-sol__title-main { display: block; text-wrap: balance; } } /* Chapô et preuves : encre sombre (remplace le blanc V1 des l.198, 205-208). */ .elementor .eri-hero-sol .eri-lead { color: var(--eri-badge-text); font-size: 1rem; line-height: 1.75; max-width: 590px; } .elementor .eri-hero-sol__proof { color: var(--eri-text-soft); font-size: .875rem; line-height: 1.5rem; } .elementor .eri-hero-sol .eri-proof__item { display: inline-flex; align-items: center; gap: 6px; } .elementor .eri-hero-sol .eri-proof__item strong { font-family: var(--eri-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--eri-azure-700); } /* Séparateur : pastille grise de 4px, à la place de la puce « • » blanche. */ .elementor .eri-hero-sol .eri-proof__item + .eri-proof__item::before { content: ''; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: var(--eri-text-faint); margin-right: 1.75rem; align-self: center; } /* Tablette : on rentre les épingles pour qu'elles ne soient pas rognées par l'overflow-x: clip de la bande. */ @media (max-width: 1100px) { .eri-hero-sol__pin { padding: 8px 13px; font-size: .6875rem; } } /* Mobile : les épingles sont masquées par §2.8 ; le chapô reprend la largeur. */ @media (max-width: 768px) { .elementor .eri-hero-sol .eri-lead { max-width: none; } .elementor .eri-hero-sol__title-main { display: inline; } } /* ------------------------------------------------------------------------- */ /* §3.2 — 03-change : agencement de la rangée « Ce que change Ouranos » */ /* Section en mode « plain » (fond blanc, aucune bande colorée). */ /* ------------------------------------------------------------------------- */ .eri-change__head { align-items: center; gap: 10rem; } .eri-change__intro-col { max-width: 25rem; gap: 20px; margin-left: auto; } /* La hauteur de l'état déployé (478px) est réservée d'emblée et les cartes sont alignées EN HAUT : la carte active occupe toute la hauteur, les repliées sont décalées de 76px vers le bas (escalier de la maquette). ARBITRAGE — gap 20px et non les 24px de §2.8 : 45% + 3 × 16,67% ne laissent que ~62px pour 3 gouttières dans un conteneur de 1244px ; à 24px la rangée déborde de ~10px (flex-shrink: 0) et crée un scroll horizontal. */ .eri-change__grid { align-items: flex-start; justify-content: center; height: 478px; gap: 20px; } .eri-change__card { flex: 0 0 16.67%; height: 372px; margin-top: 76px; padding: 25px 21px 48px; background: var(--eri-section-light); border: 1px solid var(--eri-section-light); /* Une seule courbe et une seule durée pour toutes les propriétés animées : largeur, hauteur, décalage et padding doivent finir ensemble. */ transition: flex-basis .45s ease-in-out, height .45s ease-in-out, margin-top .45s ease-in-out, padding .45s ease-in-out, background .45s ease-in-out, box-shadow .45s ease-in-out; } .eri-change__card--featured { flex-basis: 45%; height: 478px; margin-top: 0; padding: 20px; background: var(--eri-surface-0); border-color: var(--eri-azure-50); } /* Numéro : Poppins 500 / 52px, azure, très resserré. */ .eri-change__num { font-family: var(--eri-font-display); font-size: 3.25rem; font-weight: 500; letter-spacing: -2px; line-height: 1; color: var(--eri-azure-500); } .eri-change__card--featured .eri-change__num { line-height: 60px; } /* Pastilles : azure 500 (et non --eri-blue de la V1). */ .eri-change__dot, .eri-change__card--featured .eri-change__dot--head { background: var(--eri-change-c, var(--eri-azure-500)); } .eri-change__dot--foot { margin-bottom: 18px; } /* Carré arrondi 34px à point blanc central, aligné sur le numéro. */ .eri-change__card--featured .eri-change__dot--head { width: 34px; height: 34px; border-radius: var(--eri-radius-10); } .eri-change__card--featured .eri-change__dot--head::after { width: 11px; height: 11px; } /* Média de la carte active : cadre 204px, dégradé 145° peint par le conteneur (l'export peut être transparent), image cadrée en haut à gauche. */ .eri-change__card--featured .eri-change__media { max-height: 204px; margin: 0 0 12px; overflow: hidden; background-image: linear-gradient(145.15deg, var(--eri-azure-50) 0%, var(--eri-section-light) 44.44%, var(--eri-section-light) 74.07%); } /* Ajustement du visuel — piloté par le contrôle « media_fit » du widget (classe .eri-change--fit-*). « auto » = hauteur libre, image entière, jamais rognée (défaut). « contain » / « cover » = cadre fixe 204px, entière ou rognée. */ .eri-change__media img { display: block; width: 100%; border-radius: var(--eri-radius-10); } .eri-change--fit-auto .eri-change__media img { height: auto; } .eri-change--fit-contain .eri-change__media img { height: 204px; object-fit: contain; object-position: top left; } .eri-change--fit-cover .eri-change__media img { height: 204px; object-fit: cover; object-position: top left; } /* Titres : 16/18,4 medium sur les cartes repliées, mesure bridée à 150px pour forcer les retours de la maquette. La carte active garde le gabarit 28/36 posé en §3.0.b (spécificité 0,3,0 > 0,2,0 ici). */ .elementor .eri-change__card-title { font-size: 1rem; font-weight: 500; line-height: 1.15; color: var(--eri-ink); max-width: 150px; } .elementor .eri-change__card--featured .eri-change__card-title { max-width: 430px; } .eri-change__card--featured .eri-change__desc { max-width: 430px; } /* Tablette : la rangée se remet à plat, plus d'escalier ni de hauteur fixe. */ @media (max-width: 900px) { .eri-change__head { gap: 2.5rem; } .eri-change__grid { height: auto; } .eri-change__card, .eri-change__card--featured { margin-top: 0; height: auto; padding: 24px 21px; } .elementor .eri-change__card-title { max-width: none; } } /* Mobile : une carte par ligne, contenus toujours visibles. */ @media (max-width: 768px) { .eri-change__head { gap: 1.5rem; } .eri-change__intro-col { max-width: none; gap: 16px; } .eri-change__num { font-size: 2.5rem; letter-spacing: -1px; } .eri-change__card--featured .eri-change__num { line-height: 1; } /* Le média n'est plus bridé : l'image se déroule à sa hauteur naturelle. */ .eri-change__card--featured .eri-change__media { max-height: none; margin: 0 0 12px; } .eri-change__media img { height: auto; } .elementor .eri-change__card--featured .eri-change__card-title, .eri-change__card--featured .eri-change__desc { max-width: none; } } /* ------------------------------------------------------------------------- */ /* §3.3 — 04-timeline : piste continue + pastilles 58px */ /* Bande « tinted » : .eri-tl-band garde son full-bleed et son padding (§2.8).*/ /* ------------------------------------------------------------------------- */ /* ARBITRAGE — §2.8 pose `.eri-tl { gap: var(--eri-band-gap) }` ; la maquette a des écarts inégaux entre titre, chapô, piste et cartes. Le gap de bande est donc annulé ici et le rythme porté par les marges des enfants (dont le `margin-bottom: 60px` du chapô, qui surcharge le `margin: 0` de §2.4). */ .eri-tl { gap: 0; } .eri-tl__lead { margin: 0 0 var(--eri-band-gap); } /* Piste : un seul trait continu peint par ::before (pas de segments interrompus). isolation: isolate confine le z-index:-1 du trait au conteneur : il passe sous les pastilles sans passer sous le fond de bande. */ /* Piste : un seul trait continu peint par ::before, n+1 points répartis élastiquement (segments flex). isolation: isolate confine le z-index:-1. */ .eri-tl__track { display: flex; align-items: center; position: relative; padding: 0; margin: 0 0 39px; z-index: auto; isolation: isolate; } .eri-tl__track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 5px; transform: translateY(-50%); border-radius: var(--eri-radius-pill); background: var(--eri-grad-spring-sky); z-index: -1; } /* Les segments ne peignent plus rien : simples espaceurs élastiques. */ .eri-tl__seg { flex: 1 1 0; height: 5px; background: none; } /* Pastilles : 58px, fond blanc, filet fin azure, ombre portée douce. */ .eri-tl__node { flex: 0 0 auto; width: 58px; height: 58px; border-radius: var(--eri-radius-pill); background: var(--eri-surface-0); border: 1.5px solid var(--eri-azure-200); box-shadow: 0 6px 18px rgba(13,38,102,.10); display: flex; align-items: center; justify-content: center; font-weight: 400; } .eri-tl__node--dot { width: 58px; height: 58px; border-width: 1.5px; } .eri-tl__node--dot::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--eri-azure-300); } /* Check : SVG 30px hérité de currentColor, plus d'entité typographique. */ .eri-tl__node--check { border-width: 1.5px; font-size: 0; } .eri-tl__node--check svg { width: 30px; height: 30px; display: block; } /* --green = 1re pastille (azure 300), --blue = dernière (azure 500) : noms de classes conservés pour ne pas toucher au PHP de rendu. */ .eri-tl__node--green { border-color: var(--eri-azure-200); color: var(--eri-azure-300); } .eri-tl__node--blue { border-color: var(--eri-azure-500); color: var(--eri-azure-500); } /* Couleur de piste configurable : ne s'applique que si --eri-tl-accent est posé sur .eri-tl (sinon le dégradé de marque vert→bleu reste). */ .eri-tl[style*="--eri-tl-accent"] .eri-tl__track::before { background: var(--eri-tl-accent); } .eri-tl[style*="--eri-tl-accent"] .eri-tl__node--green, .eri-tl[style*="--eri-tl-accent"] .eri-tl__node--blue { border-color: var(--eri-tl-accent); color: var(--eri-tl-accent); } .eri-tl[style*="--eri-tl-accent"] .eri-tl__node--dot::after { background: var(--eri-tl-accent); } /* Cartes : padding 24px et interlignage interne 13px (Figma). */ .eri-tl__card { padding: 24px; gap: 13px; } /* Sous 1024px la piste horizontale n'a plus de sens (cartes empilées) : remplace le palier 860px de la V1 (l.187), plus large. */ @media (max-width: 1024px) { .eri-tl__cards { grid-template-columns: 1fr; } .eri-tl__track { display: none; } .eri-tl__lead { margin-bottom: 32px; } } /* ------------------------------------------------------------------------- */ /* §3.4 — 05-production : blocs de respiration, étude de cas, logos en chips */ /* Bande navy full-bleed + padding : §2.1 / §2.8. Pilule .eri-prod__case-tag */ /* et bouton rond .eri-prod__case-arrow : §2.6 / §2.5. */ /* ------------------------------------------------------------------------- */ /* Le conteneur de bande espace ses enfants de 60px (--eri-band-gap) ; les couples (sur-titre + contenu) doivent respirer beaucoup moins. */ .eri-prod__block { display: flex; flex-direction: column; gap: 24px; } .eri-prod__block--logos { gap: 20px; align-items: center; } /* En-tête : titre et chapô sur la même ligne de base optique, 160px d'écart. */ .eri-prod__head { display: flex; align-items: center; justify-content: flex-start; gap: 160px; flex-wrap: wrap; } .eri-prod__intro { flex: 0 1 400px; max-width: 400px; color: var(--eri-on-accent); font-family: var(--eri-font-body); font-size: 1rem; line-height: 1.75; margin: 0; } /* Statistiques : filets de 86px calés en bas de colonne (et non des bordures pleine hauteur), colonnes de 240px espacées de 30px. */ .eri-prod__stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 30px; } .eri-prod__stat { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0; flex: 1 1 240px; max-width: 240px; min-width: 160px; } .eri-prod__stat + .eri-prod__stat { border-left: 0; } .eri-prod__stat + .eri-prod__stat::before { content: ''; position: absolute; left: -15px; bottom: 0; width: 1px; height: 86px; background: var(--eri-border-soft); } .eri-prod__stat-value { font-family: var(--eri-font-display); font-weight: 500; font-size: clamp(2.5rem, 3.4vw, 3.25rem); line-height: 60px; letter-spacing: -2px; color: var(--eri-on-accent); } .eri-prod__stat-label { font-family: var(--eri-font-body); font-size: .875rem; line-height: 1.5rem; color: var(--eri-azure-300); } /* Cartes-mesure : le graphique occupe toute la carte (ratio 384/340). Le rayon est porté par la carte (§2.7) qui rogne l'image : `border-radius: 0` annule le radius-card que la V1 posait sur l'img (l.307). */ .eri-prod__measure { position: relative; margin: 0; overflow: hidden; background: var(--eri-surface-0); } .eri-prod__measure img { display: block; width: 100%; height: 100%; aspect-ratio: 384 / 340; object-fit: cover; border-radius: 0; } /* Les chiffres existent désormais en texte dans le DOM (SEO + lecteurs d'écran). Les visuels de la maquette les portent déjà en incrustation : la variante --sr les masque à l'œil sans les retirer de l'accessibilité. */ .eri-prod__measure-cap { display: flex; flex-direction: column; gap: 6px; padding: 16px; } .eri-prod__measure-cap--sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .eri-prod__measure-badge { font-family: var(--eri-font-display); font-weight: 600; font-size: .625rem; letter-spacing: 1.1px; text-transform: uppercase; color: var(--eri-azure-700); } .eri-prod__measure-value { font-family: var(--eri-font-display); font-weight: 500; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.8px; color: var(--eri-ink); } .eri-prod__measure-caption { font-family: var(--eri-font-body); font-size: .875rem; line-height: 1.7143; color: var(--eri-text-soft); } /* Étude de cas : carte 41,67 % à gauche, corps peu padé, rangée haute. */ .eri-prod__case { display: flex; gap: 20px; align-items: center; overflow: hidden; background: var(--eri-surface-0); transition: transform .25s ease, box-shadow .25s ease; } .eri-prod__case:hover { transform: translateY(-2px); box-shadow: 0 36px 80px rgba(5,20,64,.42); } .eri-prod__case-map { flex: 0 0 41.67%; align-self: stretch; } .eri-prod__case-body { flex: 1 1 0; min-width: 0; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .eri-prod__case-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: 1rem; } /* La flèche reste à droite même sans étiquette à sa gauche. */ .eri-prod__case-top .eri-prod__case-arrow { margin-left: auto; } /* Pastille de la pilule : élément réel (), le ::before est déjà pris par §2.6. */ .eri-prod__case-tag i { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--eri-badge-dot); } .eri-prod__case-desc { max-width: 530px; } .eri-prod__case-stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 0; } .eri-prod__case-stat { gap: 3px; } .eri-prod__case-stat-value { font-family: var(--eri-font-display); font-weight: 500; font-size: 1.625rem; line-height: 1.1; letter-spacing: -.8px; color: var(--eri-azure-500); } .eri-prod__case-stat-label { font-family: var(--eri-font-body); font-size: .75rem; line-height: 1.125rem; color: var(--eri-text-faint); } /* --- Section 05 : chiffres + étude de cas en éléments Elementor NATIFS. ------ Les classes feuilles ci-dessus sont posées sur des WIDGETS natifs (Titre / Éditeur de texte). Ce pont force l'élément interne (.elementor-heading-title ou le

) à hériter de la typo/couleur du wrapper, sinon le kit Elementor / Astra reprennent la main sur les balises internes. */ .eri-prod__stat-value .elementor-heading-title, .eri-prod__stat-label .elementor-heading-title, .eri-prod__eyebrow .elementor-heading-title, .eri-prod__case-title .elementor-heading-title, .eri-prod__case-stat-value .elementor-heading-title, .eri-prod__case-stat-label .elementor-heading-title, .eri-prod__case-desc .elementor-widget-container, .eri-prod__case-desc .elementor-widget-container > * { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; } /* Badge : le point () et le texte en ligne dans le titre du widget. */ .eri-prod__case-tag .elementor-heading-title { display: inline-flex; align-items: center; gap: 6px; } /* Carte étude de cas native : coins clippés, image de carte en cover pleine hauteur. */ .elementor-element-p_case { overflow: hidden; } .eri-prod__case-map .elementor-widget-container { height: 100%; } /* Mur de logos : une chip par collectivité (logo + nom), plus d'image-bande. */ .eri-prod__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } /* Carrousel logos : bande qui rogne + piste défilante (réutilise @keyframes eri-marquee ; période posée par eri-widgets.js dans --eri-marquee-w). */ .eri-prod__logos-marquee { position: relative; width: 100%; overflow: hidden; } .eri-prod__logos.eri-prod__logos-track { flex-wrap: nowrap; width: max-content; justify-content: flex-start; animation: eri-marquee var(--eri-marquee-dur, 45s) linear infinite; will-change: transform; } .eri-prod__logos-track .eri-prod__logo { flex: 0 0 auto; } .eri-prod__logos-marquee:hover .eri-prod__logos-track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .eri-prod__logos.eri-prod__logos-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } } /* NB : l'animation tourne AUSSI dans l'éditeur Elementor (demande client). Le rendu PHP pose 2 copies → le repli `translateX(-50%)` du keyframe boucle sans couture même si eri-widgets.js ne s'exécute pas dans l'aperçu de l'éditeur. */ .eri-prod__logo { display: flex; align-items: center; gap: 10px; padding: 13px 10px; border-radius: 12px; background: rgba(255,255,255,.20); border: 1px solid rgba(255,255,255,.30); } .eri-prod__logo-mark { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 5px; background: var(--eri-surface-0); overflow: hidden; display: grid; place-items: center; } /* width/margin/max-width remis à plat : annule l'ancienne règle `.eri-prod__logos img` (l.320 et l.330), de spécificité égale mais antérieure. */ .eri-prod__logo-mark img { display: block; width: 100%; height: 100%; max-width: 100%; margin: 0; object-fit: contain; } .eri-prod__logo-name { font-family: var(--eri-font-display); font-weight: 500; font-size: .75rem; color: var(--eri-on-accent); white-space: nowrap; } @media (max-width: 1100px) { .eri-prod__head { gap: 2.5rem; } /* Neutralise le palier 900px hérité (l.322), qui passait directement à une colonne : à spécificité égale, cette déclaration postérieure gagne. */ .eri-prod__measures { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { /* La carte de cas s'empile : neutralise le flex-basis de 41,67 %, qui deviendrait une hauteur imposée en direction colonne. */ .eri-prod__case { flex-direction: column; align-items: stretch; gap: 0; } .eri-prod__case-map { flex: 0 0 auto; align-self: auto; } .eri-prod__case-map img { height: 220px; } .eri-prod__case-body { padding: 20px; } } @media (max-width: 768px) { .eri-prod__stats { gap: 24px; } .eri-prod__stat { max-width: none; } /* Les colonnes passent à la ligne : les filets verticaux n'ont plus de sens. */ .eri-prod__stat + .eri-prod__stat::before { display: none; } .eri-prod__case-stats { gap: 20px; } .eri-prod__logos { gap: 12px; } .eri-prod__logo-name { white-space: normal; } } @media (max-width: 640px) { .eri-prod__measures { grid-template-columns: 1fr; } .eri-prod__measure img { aspect-ratio: auto; height: auto; } .eri-prod__block { gap: 18px; } } /* ------------------------------------------------------------------------- */ /* §3.5 — 06a / 06d : chapitre « image + texte » (widget eri-media-text) */ /* Le widget rend son propre conteneur `.eri-mediatext` (plus de */ /* `.eri-container`) : titre H2 pleine largeur au-dessus de la rangée, */ /* figure 580px, colonne rédactionnelle 560px, encart en pied de colonne. */ /* ------------------------------------------------------------------------- */ .eri-mediatext { display: flex; flex-direction: column; gap: var(--eri-band-gap); } .eri-mediatext .eri-media { gap: 60px; align-items: flex-start; } .eri-mediatext .eri-figure { flex: 1 1 580px; min-width: 0; max-width: 580px; background: var(--eri-section-light); border: 1px solid var(--eri-border-soft); overflow: hidden; } /* Le rayon est porté par le cadre (§2.7) qui rogne l'image : l'image reste carrée. */ .eri-mediatext .eri-figure img { border-radius: 0; width: 100%; height: auto; } .eri-mediatext .eri-prose-col { flex: 1 1 560px; max-width: 560px; gap: 43px; } /* Une sous-partie = un bloc : le gap de 43px sépare les blocs entre eux, et non le sous-titre de son propre texte (12px). */ .eri-mediatext__block { display: flex; flex-direction: column; gap: 12px; } .elementor .eri-mediatext .eri-subhead { margin: 0; } .eri-mediatext .eri-prose > p { margin: 0 0 30px; } .eri-mediatext .eri-prose > p:last-child { margin-bottom: 0; } /* Chapô de dossier (06a) : wrapper sans gap, pour que les 24px s'appliquent vraiment (le gap de 60px de `.eri-mediatext` s'ajouterait sinon). */ .eri-mediatext__intro { display: block; } .eri-statement + .eri-intro-sub { margin-top: 24px; } /* Encart de pied de colonne (06d) : texte à gauche, tuile d'icône à droite. */ .eri-note { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 16px; background: var(--eri-surface-0); border: 1px solid var(--eri-section-light); } .eri-note__icon { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--eri-teal-500); box-shadow: 0 6px 14px rgba(45,212,191,.35); color: var(--eri-on-accent); } .eri-note__icon svg, .eri-note__icon i { width: 24px; height: 24px; font-size: 24px; fill: currentColor; } .eri-note__body { display: flex; flex-direction: column; gap: 10px; max-width: 420px; } /* 06d natif : l'encart est un conteneur Elementor (chrome via réglages natifs) ; ici on ajoute l'ombre de carte (token) et on peint la tuile teal + cadenas. */ .elementor .elementor-element-s06d_note { box-shadow: var(--eri-shadow-card2); } /* Tuile teal 48×48 : fond/rayon en réglages natifs ; ici seulement la taille figée et l'ombre (token). Le cadenas est un widget Icône enfant. */ .elementor .elementor-element-s06d_tile { flex: 0 0 48px; width: 48px; min-height: 48px; align-self: flex-start; box-shadow: 0 6px 14px rgba(16,198,168,.35); } .elementor .elementor-element-d6d_lock { line-height: 0; } .elementor .elementor-element-d6d_lock .elementor-icon i { font-size: 24px; } @media (max-width: 768px) { .eri-mediatext { gap: 2rem; } /* `.eri-media` passe en colonne (règle mobile générique l.120) : il faut neutraliser les flex-basis de 580/560px, qui deviendraient des HAUTEURS. */ .eri-mediatext .eri-media { gap: 2rem; } .eri-mediatext .eri-figure, .eri-mediatext .eri-prose-col { flex: 0 0 auto; max-width: none; } .eri-mediatext .eri-prose-col { gap: 1.75rem; } .eri-mediatext .eri-prose > p { margin-bottom: 1.75rem; } } /* ------------------------------------------------------------------------- */ /* §3.6 — 06b : citation (widget eri-quote) */ /* Le fond de bande est en §3.0.a ; la largeur de lecture est portée par __row */ /* pour que l'aplat bleu reste pleine largeur. */ /* ------------------------------------------------------------------------- */ .eri-quote__row { display: flex; align-items: center; gap: 40px; max-width: var(--eri-container); margin-inline: auto; padding-inline: 1.5rem; } /* Portrait circulaire 260px — flex-basis figée pour que le texte prenne le reste. */ .eri-quote__photo { flex: 0 0 260px; width: 260px; height: 260px; margin: 0; } .eri-quote__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Le padding gauche réserve la gouttière du guillemet décoratif. */ .eri-quote__block { position: relative; margin: 0; padding: 0 0 0 104px; border: 0; } /* Guillemet ouvrant surdimensionné, en filigrane. Sorti du flux : son line-height de 1.5 déborde volontairement vers le haut, d'où le top négatif. */ .eri-quote__mark { position: absolute; left: 0; top: -113px; font-family: var(--eri-font-display); font-size: 150px; font-weight: 500; line-height: 1.5; color: var(--eri-quote-mark, var(--eri-on-accent)); opacity: .28; pointer-events: none; } /* Scopé `.elementor` : le kit écrase sinon la couleur et la graisse. */ .elementor .eri-quote__text { font-family: var(--eri-font-display); font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 500; line-height: 1.222; letter-spacing: -.015em; color: var(--eri-on-accent); margin: 0; max-width: 825px; font-style: normal; } .eri-quote__cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--eri-font-body); color: rgba(255, 255, 255, .72); } /* Tablette / mobile : empilement, portrait réduit, le guillemet repasse au-dessus du texte (plus de gouttière latérale). */ @media (max-width: 900px) { .eri-quote__row { flex-direction: column; align-items: flex-start; gap: 28px; } .eri-quote__photo { flex: 0 0 180px; width: 180px; height: 180px; } .eri-quote__block { padding-left: 0; padding-top: 56px; } .eri-quote__mark { top: -18px; font-size: 96px; } } /* ------------------------------------------------------------------------- */ /* §3.7 — 06c : cartes photo de domaines, texte bi-colonne, panneau d'alertes */ /* Les 3 widgets vivent dans UNE section « flush » : la bande claire est */ /* segmentée (start / mid / end) pour ne pas empiler 80px + 80px entre blocs. */ /* Le full-bleed de .eri-domcards-band vient de §2.1. */ /* ------------------------------------------------------------------------- */ /* Double classe pour battre le `padding-block` de §2.8 (spécificité 0,2,0). */ .eri-domcards-band.eri-domcards-band--start { padding-block: var(--eri-band-pad) 0; } .eri-domcards-band.eri-domcards-band--mid { padding-block: var(--eri-band-gap) 0; } .eri-domcards-band.eri-domcards-band--end { padding-block: var(--eri-band-gap) var(--eri-band-pad); } /* --- Cartes-photo de domaines --- */ .eri-domcards__head { display: flex; flex-direction: column; gap: 18px; max-width: 700px; } /* la grille est un