/* ========================================================================== Direction : « atelier de couleurs ». Six encres vives, formes rondes, dégradés en mouvement lent, ombres colorées. Chaque section porte sa propre couleur : le site avance comme une palette qu'on déroule. ========================================================================== */ /* --- 1. Jetons ----------------------------------------------------------- */ :root { /* Les six encres */ --violet: #6a3df0; --rose: #ff3f87; --mandarine: #ff8f2e; --citron: #ffd23d; --menthe: #0fcfa1; --ciel: #33b1ff; /* Base */ --encre: #1b1240; /* indigo profond, fond des sections nuit */ --encre-2: #251a5c; --calcaire: #fbf8ff; /* blanc lavande, fond principal */ --papier: #ffffff; --brume: #6b6390; --trait: #eae4fa; --trait-nuit: rgba(255, 255, 255, .16); /* Alias conservés pour la compatibilité du balisage */ --outremer: var(--violet); --outremer-2: #5527d8; --outremer-pale: #efe8ff; --ocre: var(--citron); /* Dégradés */ --degrade-chaud: linear-gradient(112deg, #ff3f87 0%, #ff8f2e 52%, #ffd23d 100%); --degrade-froid: linear-gradient(112deg, #6a3df0 0%, #33b1ff 60%, #0fcfa1 100%); --degrade-mixte: linear-gradient(100deg, #6a3df0 0%, #ff3f87 48%, #ff8f2e 100%); /* Typographie */ --display: "Gabarito", "Trebuchet MS", system-ui, sans-serif; --texte: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "DM Mono", ui-monospace, Menlo, monospace; /* Encre constante : pour les surfaces qui restent sombres dans les deux thèmes (pied de page, sections nuit, déclaration) et pour le texte posé sur pastille de couleur vive. Volontairement absente des blocs de thème. */ --encre-fixe: #1b1240; /* Surfaces et textes — le thème sombre redéfinit ce bloc plus bas. Sans ces valeurs, toute règle qui les utilise devient invalide : en-tête transparent, ombres absentes, champs de formulaire sans fond. */ --texte-2: #4a4272; /* texte secondaire */ --texte-3: #9990bb; /* texte désactivé */ --tendre: #f3ecff; /* haut des sections lavande */ --entete-fond: #fbf8ff; /* opaque : rien ne doit passer derrière */ --champ-fond: #f8f5ff; --champ-survol: #f2ecff; --maquette-barre: #f6f2ff; --puce-morte: #cfc7e6; --puce-morte-2: #a79ec6; --faq-ouverte: #ffe1ec; --ombre: rgba(27, 18, 64, .55); --ombre-fine: rgba(27, 18, 64, .04); --ombre-portrait: rgba(27, 18, 64, .22); /* volontairement discrète */ --anneau: var(--calcaire); --mot-obligatoire: "obligatoire"; /* redéfini par langue, voir plus bas */ /* Mesures */ --largeur: 1220px; --gouttiere: clamp(20px, 5vw, 60px); --rayon: 18px; /* cartes et éléments courants */ --rayon-l: 28px; /* grands blocs : formules, projets, formulaire */ /* Deux ombres, pas sept : une pour les cartes posées, une pour ce qui flotte au-dessus du contenu (menus, cartes de chiffres). */ --ombre-carte: 0 2px 4px -2px var(--ombre-fine), 0 18px 36px -28px var(--ombre); --ombre-haute: 0 8px 16px -8px var(--ombre-fine), 0 30px 56px -30px var(--ombre); --sortie: 300ms cubic-bezier(.22, .8, .3, 1); --ressort: 520ms cubic-bezier(.34, 1.42, .5, 1); } /* --- 1 bis. Thème sombre ------------------------------------------------- Le thème est piloté par l'attribut data-theme sur . Trois états : « clair », « sombre », ou rien du tout — auquel cas on suit le réglage du système d'exploitation du visiteur. Seules les variables changent : aucune règle n'est dupliquée. */ @media (prefers-color-scheme: dark) { html:not([data-theme="clair"]) { color-scheme: dark; } html:not([data-theme="clair"]) body { --encre: #ece9f8; --encre-2: #d8d2f0; --calcaire: #120e26; --papier: #1b1638; --brume: #9a92c4; --trait: #2d2657; --texte-2: #b8b0dd; --texte-3: #7d75a8; --tendre: #1d1740; --entete-fond: #120e26; --champ-fond: #221c45; --champ-survol: #2a2352; --maquette-barre: #221c45; --puce-morte: #3b3468; --puce-morte-2: #5f568f; --faq-ouverte: #3d1f3a; --outremer: #9578ff; --outremer-2: #b6a1ff; --outremer-pale: #2a2158; --ombre: rgba(0, 0, 0, .8); --ombre-fine: rgba(0, 0, 0, .3); --ombre-portrait: rgba(0, 0, 0, .55); --anneau: #1b1638; } } /* Les textes générés par le CSS doivent suivre la langue de la page */ html[lang="en"] body { --mot-obligatoire: "required"; } html[lang="es"] body { --mot-obligatoire: "obligatorio"; } html[data-theme="sombre"] { color-scheme: dark; } html[data-theme="sombre"] body { --encre: #ece9f8; --encre-2: #d8d2f0; --calcaire: #120e26; --papier: #1b1638; --brume: #9a92c4; --trait: #2d2657; --texte-2: #b8b0dd; --texte-3: #7d75a8; --tendre: #1d1740; --entete-fond: #120e26; --champ-fond: #221c45; --champ-survol: #2a2352; --maquette-barre: #221c45; --puce-morte: #3b3468; --puce-morte-2: #5f568f; --faq-ouverte: #3d1f3a; --outremer: #9578ff; --outremer-2: #b6a1ff; --outremer-pale: #2a2158; --ombre: rgba(0, 0, 0, .8); --ombre-fine: rgba(0, 0, 0, .3); --ombre-portrait: rgba(0, 0, 0, .55); --anneau: #1b1638; } /* Ajustements que les variables seules ne couvrent pas */ html[data-theme="sombre"] .bandeau, html[data-theme="sombre"] .heros { --anneau: #1b1638; } html[data-theme="sombre"] .portrait__photo { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)); } html[data-theme="sombre"] .fil { background: rgba(255, 255, 255, .06); } html[data-theme="sombre"] .bulles { opacity: .72; } html[data-theme="sombre"] .avis blockquote, html[data-theme="sombre"] .projet strong, html[data-theme="sombre"] .champ label { color: var(--encre); } @media (prefers-color-scheme: dark) { html:not([data-theme="clair"]) .portrait__photo { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)); } html:not([data-theme="clair"]) .fil { background: rgba(255, 255, 255, .06); } html:not([data-theme="clair"]) .bulles { opacity: .72; } } /* --- 2. Réinitialisation ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--calcaire); transition: background-color 240ms ease, color 240ms ease; color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.62; font-weight: 400; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* BUG — les ancres (#pros, #vitrine…) passaient sous l'en-tête collant */ [id] { scroll-margin-top: 96px; } img, svg { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } button { font: inherit; cursor: pointer; } a { color: var(--outremer-2); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--rose); } :focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 10px; } /* Sur fond sombre, le violet manque de contraste : on passe au citron */ .bloc--nuit :focus-visible, .pied :focus-visible { outline-color: var(--citron); } /* --- 3. Typographie ----------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.03; letter-spacing: -0.035em; margin: 0; text-wrap: balance; } .t-geant { font-size: clamp(2.65rem, 7.2vw, 5.3rem); letter-spacing: -0.048em; line-height: 0.98; } .t-grand { font-size: clamp(2.05rem, 4.5vw, 3.25rem); letter-spacing: -0.042em; line-height: 1.04; } .t-moyen { font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .t-petit { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; } p { margin: 0 0 1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } .chapo { font-size: clamp(1.08rem, 1.55vw, 1.28rem); line-height: 1.55; color: var(--texte-2); max-width: 58ch; } .sourdine { color: var(--brume); } /* Texte peint par un dégradé : réservé aux mots clés d'un titre */ .arc { background: var(--degrade-mixte); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Étiquette : pastille colorée */ .etiquette { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--outremer-2); background: var(--outremer-pale); padding: 7px 15px 7px 11px; border-radius: 999px; margin: 0 0 26px; } .etiquette .ref { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 0.66rem; } .etiquette::after { content: none; } /* --- 4. Structure -------------------------------------------------------- */ .enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); position: relative; } .bloc { padding-block: clamp(64px, 9vw, 130px); position: relative; } .bloc--serre { padding-block: clamp(52px, 6vw, 88px); } .bloc--nuit { background: radial-gradient(70% 90% at 8% 0%, rgba(106, 61, 240, .55), transparent 62%), radial-gradient(60% 80% at 92% 100%, rgba(255, 63, 135, .32), transparent 60%), var(--encre-fixe); color: #efeaff; } .bloc--nuit .chapo { color: #c3bbe8; } .bloc--nuit .sourdine { color: #a49bd0; } .bloc--nuit .etiquette { background: rgba(255, 255, 255, .12); color: #fff; } .bloc--nuit .etiquette .ref { background: var(--citron); color: var(--encre-fixe); } .bloc--nuit a { color: var(--citron); } /* sur fond sombre, le dégradé passe sur les tons chauds pour rester lisible */ .bloc--nuit .arc { background-image: var(--degrade-chaud); } .bloc--nuit a:hover { color: #fff; } .bloc--papier { background: var(--papier); } .bloc--tendre { background: linear-gradient(180deg, var(--tendre) 0%, var(--calcaire) 100%); } .filet-haut { border-top: 1px solid var(--trait); } .bloc--nuit.filet-haut { border-top-color: transparent; } .lien-evitement { position: absolute; left: -9999px; top: 0; background: var(--encre-fixe); color: #fff; padding: 12px 18px; border-radius: 0 0 14px 0; z-index: 200; text-decoration: none; } .lien-evitement:focus { left: 0; top: 0; } /* Barre de progression de lecture */ .progression { position: fixed; top: 0; left: 0; height: 4px; width: 100%; background: var(--degrade-mixte); z-index: 120; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } /* --- 4 bis. Transitions entre sections ---------------------------------- Le fond alterne calcaire → lavande → blanc → nuit. Quand deux sections claires se suivent, un filet d'un pixel marque la césure : sans lui, le contenu semble couler sans structure. */ .bloc + .bloc:not(.bloc--nuit) { border-top: 1px solid var(--trait); } .bloc--nuit + .bloc { border-top: 0; } .bloc--tendre + .bloc--tendre { border-top: 0; } /* Le héros se termine sur un dégradé vers le fond de la section suivante, pour éviter la coupure franche que masquait le ruban. */ .heros::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, transparent, var(--tendre)); pointer-events: none; z-index: 0; } /* --- 4 ter. Bande d'annonce ---------------------------------------------- Placée avant l'en-tête, donc elle défile et disparaît : seul l'en-tête reste collant. Le dégradé de marque fonctionne dans les deux thèmes. */ .annonce { position: relative; z-index: 91; background: var(--degrade-mixte); background-size: 160% 100%; } html[data-annonce="fermee"] .annonce { display: none; } .annonce__lien { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 42px; padding: 9px 52px; text-align: center; text-decoration: none; color: #fff; font-size: 0.88rem; line-height: 1.35; transition: background var(--sortie); } .annonce__lien:hover { color: #fff; background: rgba(255, 255, 255, .1); } .annonce__lien strong { font-weight: 700; } .annonce__lien .fleche { transition: transform var(--sortie); } .annonce__lien:hover .fleche { transform: translateX(3px); } .annonce__court { display: none; } .annonce__fermer { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 0; border-radius: 50%; color: #fff; font-size: 1rem; line-height: 1; transition: background var(--sortie); } .annonce__fermer:hover { background: rgba(255, 255, 255, .34); } @media (max-width: 720px) { .annonce__long { display: none; } .annonce__court { display: inline; } .annonce__lien { font-size: 0.83rem; padding: 9px 46px; } } /* --- 5. En-tête ---------------------------------------------------------- */ .entete { position: sticky; top: 0; z-index: 90; background-color: #fbf8ff; /* repli si la variable manque */ background-color: var(--entete-fond); border-bottom: 1px solid transparent; transition: border-color var(--sortie), box-shadow var(--sortie); } .entete.est-defile { border-bottom-color: var(--trait); box-shadow: var(--ombre-carte); } .entete__rangee { display: flex; align-items: center; gap: 14px; min-height: 78px; } .entete__rangee .marque { display: inline-flex; align-items: center; flex: none; text-decoration: none; line-height: 0; } .marque__logo { height: 44px; width: auto; max-width: none; transition: transform var(--ressort); } .marque:hover .marque__logo { transform: scale(1.035); } /* Le lettrage sombre du logo devient illisible sur fond sombre : on garde deux variantes du fichier et on affiche celle qui convient au thème. */ .marque__logo--clair { display: none; } html[data-theme="sombre"] .entete .marque__logo--sombre { display: none; } html[data-theme="sombre"] .entete .marque__logo--clair { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme="clair"]) .entete .marque__logo--sombre { display: none; } html:not([data-theme="clair"]) .entete .marque__logo--clair { display: block; } } /* Le pied de page est toujours sombre : variante claire, quel que soit le thème */ .pied .marque__logo--sombre { display: none; } .pied .marque__logo--clair { display: block; } .pied .marque__logo { height: 46px; } /* Texte de remplacement pour les lecteurs d'écran et les moteurs */ .hors-vue { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 1080px) { .marque__logo { height: 46px; } } @media (max-width: 420px) { .marque__logo { height: 40px; } } .nav { display: flex; align-items: center; gap: 3px; } .nav__lien { position: relative; display: block; white-space: nowrap; padding: 10px 12px; font-size: 0.94rem; font-weight: 500; color: var(--texte-2); text-decoration: none; border-radius: 999px; transition: color var(--sortie), background var(--sortie); } .nav__lien:hover { background: var(--outremer-pale); color: var(--outremer-2); } .nav__lien[aria-current="page"] { color: var(--encre); font-weight: 700; } .nav__lien[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--degrade-chaud); } .bascule { display: none; background: var(--papier); border: 1.5px solid var(--trait); border-radius: 999px; padding: 10px 18px; font-family: var(--display); font-weight: 700; font-size: 0.9rem; color: var(--encre); } .bascule:hover { border-color: var(--violet); color: var(--outremer-2); } /* --- 5 bis. Commandes de l'en-tête : langue et thème --------------------- */ .outils { display: flex; align-items: center; gap: 7px; flex: none; } .langue { position: relative; } .langue__bouton, .theme { display: inline-flex; align-items: center; gap: 6px; background: var(--papier); border: 1.5px solid var(--trait); border-radius: 999px; padding: 8px 12px; font-family: var(--mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.06em; color: var(--encre); line-height: 1; transition: border-color var(--sortie), color var(--sortie), background var(--sortie); } .langue__bouton:hover, .theme:hover { border-color: var(--violet); color: var(--outremer-2); } .langue__bouton svg, .theme svg { width: 16px; height: 16px; flex: none; } .langue__bouton .fl { font-size: 0.7rem; opacity: .6; transition: transform var(--sortie); } .langue[data-ouvert="true"] .langue__bouton .fl { transform: rotate(180deg); } .langue__liste { position: absolute; top: calc(100% + 8px); right: 0; min-width: 178px; background: var(--papier); border: 1px solid var(--trait); border-radius: 14px; padding: 6px; box-shadow: var(--ombre-haute); display: none; z-index: 95; } .langue[data-ouvert="true"] .langue__liste { display: block; animation: monte 240ms ease both; } .langue__liste a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--texte-2); font-size: 0.9rem; font-weight: 500; } .langue__liste a:hover { background: var(--outremer-pale); color: var(--outremer-2); } .langue__liste a[aria-current="true"] { color: var(--encre); font-weight: 700; } .langue__liste a[aria-current="true"]::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--menthe); } .langue__code { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--violet); border-radius: 6px; padding: 3px 6px; flex: none; } .langue__liste a[aria-current="true"] .langue__code { background: var(--menthe); color: var(--encre-fixe); } .theme .lune { display: none; } html[data-theme="sombre"] .theme .soleil { display: none; } html[data-theme="sombre"] .theme .lune { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme="clair"]) .theme .soleil { display: none; } html:not([data-theme="clair"]) .theme .lune { display: block; } } .theme__mot { display: none; } @media (max-width: 1080px) { .outils { margin-left: auto; margin-right: 4px; } .langue__bouton, .theme { padding: 8px 11px; } } @media (max-width: 420px) { .langue__bouton span:not(.langue__code):not(.fl) { display: none; } } /* Le conteneur plafonne à 1220 px. Au-delà de 1280 px de fenêtre il reste une soixantaine de pixels de marge dans la barre : on les distribue plutôt que de les laisser en bout de ligne. Calcul vérifié : 1088 px occupés pour 1100 disponibles. */ @media (min-width: 1280px) { .entete__rangee { gap: 14px; min-height: 88px; } .marque__logo { height: 54px; } .nav { gap: 4px; } .nav__lien { padding: 10px 17px; } .nav__lien[aria-current="page"]::after { left: 17px; right: 17px; } .outils { gap: 9px; } .nav .bouton--petit { padding: 11px 20px; } } /* --- 5 ter. Bouton d'appel de l'en-tête --------------------------------- Toujours visible, y compris sur mobile où le reste du menu se replie. Vert plutôt que violet : il ne doit pas concurrencer le bouton de devis, et le vert se lit comme « joignable tout de suite ». */ .tel-rapide { display: inline-flex; align-items: center; gap: 9px; flex: none; background: var(--papier); border: 1.5px solid color-mix(in srgb, var(--menthe) 42%, var(--trait)); border-radius: 50%; padding: 9px; color: var(--encre); text-decoration: none; line-height: 1; transition: background var(--sortie), border-color var(--sortie), color var(--sortie), transform var(--ressort); } /* Le numéro n'est pas écrit : il occupait la place de deux entrées de menu. Le libellé aria porte l'information pour les lecteurs d'écran. */ .tel-rapide span { display: none; } .tel-rapide svg { width: 17px; height: 17px; flex: none; /* assombrie : sous 1100 px l’icône est seule, elle doit rester lisible comme repère graphique (3:1 minimum) */ color: color-mix(in srgb, var(--menthe) 62%, var(--encre)); transition: color var(--sortie); } .tel-rapide:hover { background: var(--menthe); border-color: var(--menthe); color: var(--encre-fixe); transform: translateY(-1px); } .tel-rapide:hover svg { color: var(--encre-fixe); } /* --- 6. Boutons ---------------------------------------------------------- */ .bouton { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 15px 26px; min-height: 48px; border: 2px solid transparent; border-radius: 999px; font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; text-decoration: none; white-space: nowrap; overflow: hidden; transition: transform var(--ressort), box-shadow var(--sortie), background var(--sortie), color var(--sortie), border-color var(--sortie); } .bouton:hover { transform: translateY(-3px); } .bouton--plein { background: var(--degrade-mixte); background-size: 180% 100%; color: #fff; /* accent volontaire : le violet du bouton se prolonge sous lui */ box-shadow: 0 12px 26px -12px rgba(106, 61, 240, .85); } .bouton--plein:hover { color: #fff; background-position: 100% 0; box-shadow: 0 18px 34px -12px rgba(255, 63, 135, .75); } .bouton--trait { border-color: var(--encre); color: var(--encre); background: transparent; } .bouton--trait:hover { background: var(--violet); border-color: var(--violet); color: #fff; } .bouton--clair { border-color: rgba(255, 255, 255, .4); color: #fff; background: rgba(255, 255, 255, .07); } .bouton--clair:hover { background: #fff; color: var(--encre-fixe); border-color: #fff; } .bouton--petit { padding: 11px 18px; min-height: 42px; font-size: 0.93rem; } .bouton .fleche { transition: transform var(--sortie); } .bouton:hover .fleche { transform: translateX(4px); } .paire-boutons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* --- 7. Héros ------------------------------------------------------------ */ .heros { position: relative; padding-block: clamp(46px, 6.5vw, 92px) clamp(56px, 7vw, 104px); overflow: hidden; } /* Taches de couleur qui dérivent lentement en fond */ .bulles { position: absolute; inset: -18% -10%; pointer-events: none; z-index: 0; transform: translate3d(0, 0, 0); transition: transform 500ms cubic-bezier(.22,.8,.3,1); } .bulle { position: absolute; border-radius: 50%; } .bulle--1 { width: 60vw; height: 60vw; left: -12%; top: -20%; background: radial-gradient(circle, rgba(106, 61, 240, .85) 0%, rgba(106, 61, 240, 0) 68%); animation: derive 26s ease-in-out infinite; } .bulle--2 { width: 48vw; height: 48vw; right: -4%; top: -16%; background: radial-gradient(circle, rgba(255, 63, 135, .7) 0%, rgba(255, 63, 135, 0) 68%); animation: derive 30s ease-in-out -6s infinite reverse; } .bulle--3 { width: 44vw; height: 44vw; right: 12%; bottom: -26%; background: radial-gradient(circle, rgba(255, 210, 61, .7) 0%, rgba(255, 210, 61, 0) 68%); animation: derive 34s ease-in-out -12s infinite; } .bulle--4 { width: 38vw; height: 38vw; left: 16%; bottom: -30%; background: radial-gradient(circle, rgba(15, 207, 161, .55) 0%, rgba(15, 207, 161, 0) 68%); animation: derive 28s ease-in-out -3s infinite reverse; } @keyframes derive { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(5%, 7%, 0) scale(1.12); } 66% { transform: translate3d(-6%, 3%, 0) scale(.94); } } .heros__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 70px); align-items: center; } .heros h1 { margin-bottom: 22px; } .heros__pied { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; } .heros__pied span { display: inline-flex; align-items: center; gap: 8px; background: var(--papier); border: 1.5px solid var(--trait); border-radius: 999px; padding: 8px 16px; font-size: 0.86rem; font-weight: 600; color: var(--texte-2); } .heros__pied span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--menthe); } .heros__pied span:nth-child(2)::before { background: var(--rose); } .heros__pied span:nth-child(3)::before { background: var(--ciel); } .heros__pied span:nth-child(4)::before { background: var(--mandarine); } /* Apparition en cascade du texte du héros */ .entree { animation: monte 780ms cubic-bezier(.22,.85,.28,1) both; } .entree:nth-child(1) { animation-delay: .05s; } .entree:nth-child(2) { animation-delay: .16s; } .entree:nth-child(3) { animation-delay: .27s; } .entree:nth-child(4) { animation-delay: .38s; } .entree:nth-child(5) { animation-delay: .49s; } @keyframes monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* --- 8. Signature : le portrait en losange ------------------------------ */ .portrait picture { display: contents; } .portrait { position: relative; width: 100%; max-width: 540px; margin-inline: auto; aspect-ratio: 1 / 1; animation: monte 900ms cubic-bezier(.22,.85,.28,1) .2s both; } /* Le losange coloré : un carré arrondi pivoté à 45°, cerclé de blanc */ .portrait__fond { position: absolute; inset: 16%; border-radius: 14%; background: var(--degrade-mixte); transform: rotate(45deg); box-shadow: 0 0 0 14px var(--anneau), 0 44px 74px -34px rgba(106, 61, 240, .75); } /* La photo, détourée, dépasse volontairement du losange */ .portrait__photo { position: absolute; bottom: -3%; left: 50%; height: 108%; width: auto; max-width: none; transform: translateX(-50%); z-index: 2; /* Une seule opération graphique sur cette image. Le fondu du bas de la veste est gravé dans le fichier, pas appliqué en CSS : cumuler filter et mask-image faisait apparaître un rectangle clair de la taille de la photo, le navigateur composant un calque intermédiaire rectangulaire. */ filter: drop-shadow(0 18px 28px var(--ombre-portrait)); } /* Variante pour une photo rectangulaire non détourée : elle est découpée dans le losange au lieu de le dépasser. Ajoutez la classe sur .portrait. */ .portrait--cadre .portrait__photo { inset: 19%; bottom: auto; left: auto; height: 62%; width: 62%; transform: none; object-fit: cover; border-radius: 14%; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); filter: none; } /* Variante sobre : page À propos, dans une colonne de texte */ .portrait--simple { max-width: 420px; margin-top: 8px; } .portrait--simple .portrait__fond { inset: 14%; } .portrait--simple .portrait__photo { height: 104%; bottom: -2%; } /* Cartes de chiffres qui flottent autour du portrait --------------------- */ .carte-stat { --teinte: var(--violet); position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; background: var(--papier); border-radius: var(--rayon); padding: 12px 18px 12px 12px; /* Deux ombres : un liseré net dans la teinte, puis un halo coloré diffus. C'est ce qui les détache de la photo sans les alourdir. */ box-shadow: var(--ombre-haute); box-shadow: 0 0 0 1px color-mix(in srgb, var(--teinte) 18%, transparent), 0 18px 34px -16px color-mix(in srgb, var(--teinte) 45%, transparent), 0 30px 50px -34px var(--ombre); animation: flotte 6.5s ease-in-out infinite; transition: transform var(--ressort); } .carte-stat:hover { transform: translateY(-5px) rotate(-1.2deg); } /* Le chiffre vit dans sa propre pastille teintée */ .carte-stat b { display: grid; place-items: center; flex: none; min-width: 50px; height: 50px; padding-inline: 9px; border-radius: 15px; background: var(--outremer-pale); background: color-mix(in srgb, var(--teinte) 13%, var(--papier)); font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: var(--teinte); font-variant-numeric: tabular-nums; } .carte-stat span { font-size: 0.9rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.015em; color: var(--encre); max-width: 10ch; } .carte-stat--haut { --teinte: var(--rose); top: 16%; left: -4%; } .carte-stat--bas { --teinte: var(--mandarine); bottom: 12%; right: -5%; animation-delay: -3.2s; } /* Le trophée : une pastille ronde, sans texte */ .carte-stat--badge { --teinte: var(--citron); top: 23%; right: 12%; padding: 0; width: 62px; height: 62px; border-radius: 50%; justify-content: center; gap: 0; animation-delay: -1.6s; } .carte-stat--badge svg { width: 32px; height: 32px; display: block; } @keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } /* Petits losanges décoratifs */ .losange { position: absolute; z-index: 1; border-radius: 22%; animation: pivote 11s ease-in-out infinite; } .losange--citron { width: 13%; height: 13%; top: 5%; right: 15%; background: var(--citron); } .losange--rose { width: 11%; height: 11%; bottom: 16%; left: 0; background: var(--rose); animation-delay: -5s; } .losange--menthe { width: 8%; height: 8%; top: 52%; left: -7%; background: var(--menthe); animation-delay: -2.5s; } @keyframes pivote { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(58deg) translateY(-12px); } } /* Animations mises en pause dès que la zone quitte l'écran : le navigateur n'a plus rien à composer pendant que le visiteur lit le reste de la page. */ .hors-ecran, .hors-ecran * { animation-play-state: paused !important; } /* --- 10. Grilles --------------------------------------------------------- */ .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 26px); } .paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 28px); } /* --- 11. Fiches (une couleur par carte) --------------------------------- */ .fiche { --teinte: var(--violet); contain: layout paint; position: relative; background: var(--papier); border-radius: var(--rayon); padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; overflow: hidden; box-shadow: var(--ombre-carte); transition: transform var(--ressort), box-shadow var(--sortie); } .fiche::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--teinte); opacity: .75; } .fiche::after { content: ""; position: absolute; right: -46px; top: -46px; width: 130px; height: 130px; border-radius: 50%; background: var(--teinte); opacity: .055; transition: transform var(--ressort), opacity var(--sortie); } .fiche:hover { transform: translateY(-6px); box-shadow: var(--ombre-haute); } .fiche:hover::after { transform: scale(1.25); opacity: .1; } /* Trois encres au lieu de six : les cartes d'une même rangée se distinguent sans que la section entière ne devienne un nuancier. */ .fiche:nth-child(3n+1) { --teinte: var(--ciel); } .fiche:nth-child(3n+2) { --teinte: var(--rose); } .fiche:nth-child(3n+3) { --teinte: var(--menthe); } /* Pastille d'intitulé. Un aplat de couleur saturée avec du texte blanc pesait autant que le titre qu'il annonce ; une teinte diluée avec une puce pleine hiérarchise mieux et fait moins étiquette de promotion. */ .fiche__num { position: relative; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--outremer-2); /* 45 % : au-delà, le citron et la menthe tombent sous 4,5:1 de contraste */ color: color-mix(in srgb, var(--teinte) 45%, var(--encre)); background: var(--outremer-pale); background: color-mix(in srgb, var(--teinte) 11%, var(--papier)); padding: 6px 14px 6px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teinte) 24%, transparent); white-space: nowrap; } .fiche__num::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--teinte); } .fiche h3 { position: relative; } .fiche__liste { position: relative; display: grid; gap: 11px; font-size: 0.95rem; line-height: 1.45; color: var(--texte-2); } .fiche__liste li { padding-left: 26px; position: relative; } .fiche__liste li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 15px; height: 15px; border-radius: 50%; background: var(--teinte); opacity: .18; } .fiche__liste li::after { content: ""; position: absolute; left: 5px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--teinte); } .fiche__liste a { position: relative; } .fiche__pied { position: relative; margin-top: auto; padding-top: 6px; font-weight: 600; } .fiche__pied a, .fiche__liste a { color: var(--outremer-2); } .fiche__pied a:hover, .fiche__liste a:hover { color: var(--violet); } /* --- 12. Formules -------------------------------------------------------- */ .formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; } .formule { --teinte: var(--ciel); contain: layout paint; position: relative; background: var(--papier); border-radius: var(--rayon-l); padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; overflow: hidden; box-shadow: var(--ombre-carte); transition: transform var(--ressort), box-shadow var(--sortie); } .formule::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; background: var(--teinte); opacity: .1; border-radius: var(--rayon-l) var(--rayon-l) 50% 50% / var(--rayon-l) var(--rayon-l) 30px 30px; } .formule:hover { transform: translateY(-8px); box-shadow: var(--ombre-haute); } .formule:nth-child(1) { --teinte: var(--menthe); } .formule:nth-child(2) { --teinte: var(--violet); } .formule:nth-child(3) { --teinte: var(--mandarine); } .formule--phare { background: linear-gradient(170deg, #241a5c 0%, var(--encre-fixe) 100%); color: #efeaff; box-shadow: 0 30px 60px -28px rgba(106, 61, 240, .8); } .formule--phare::before { background: var(--violet); opacity: .38; } .formule--phare .sourdine { color: #bdb4e6; } .formule--phare .formule__liste { color: #d6cff5; } .formule--phare .formule__liste li.hors { color: #8d84bb; } .formule__drapeau { position: absolute; top: 20px; right: 20px; z-index: 2; background: var(--citron); color: var(--encre-fixe); font-family: var(--display); font-size: 0.74rem; font-weight: 800; letter-spacing: -0.01em; padding: 7px 14px; border-radius: 999px; transform: rotate(4deg); } .formule .fiche__num { position: relative; z-index: 1; } .formule--phare .fiche__num { background: rgba(255, 255, 255, .11); color: var(--citron); box-shadow: inset 0 0 0 1px rgba(255, 210, 61, .3); } .formule--phare .fiche__num::before { background: var(--citron); } .formule__prix { position: relative; font-family: var(--display); font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; } .formule__prix small { display: block; font-family: var(--mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brume); margin-top: 10px; } .formule--phare .formule__prix small { color: #a49bd0; } .formule__liste { position: relative; display: grid; gap: 12px; font-size: 0.95rem; line-height: 1.45; color: var(--texte-2); } .formule__liste li { padding-left: 27px; position: relative; } .formule__liste li::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 18px; height: 18px; border-radius: 50%; background: var(--teinte); opacity: .17; } .formule__liste li::after { content: ""; position: absolute; left: 6px; top: 0.62em; width: 6px; height: 6px; border-radius: 2px; background: var(--teinte); transform: rotate(45deg); } .formule--phare .formule__liste li::before { background: var(--citron); opacity: .22; } .formule--phare .formule__liste li::after { background: var(--citron); } .formule__liste li.hors { color: var(--texte-3); } .formule__liste li.hors::before { background: var(--puce-morte); opacity: .5; } .formule__liste li.hors::after { background: var(--puce-morte-2); border-radius: 999px; transform: none; width: 8px; height: 2px; left: 5px; top: 0.78em; } .formule__pied { position: relative; margin-top: auto; } .formule__pied .bouton { width: 100%; justify-content: center; } /* --- 13. Étapes ---------------------------------------------------------- */ .etapes { display: grid; gap: 16px; } .etape { --teinte: var(--citron); display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding: 26px 28px; border-radius: var(--rayon); background: rgba(255, 255, 255, .06); border: 1px solid var(--trait-nuit); align-items: start; transition: background var(--sortie), transform var(--ressort); } .etape:hover { background: rgba(255, 255, 255, .11); transform: translateX(6px); } .etape:nth-child(5n+1) { --teinte: var(--citron); } .etape:nth-child(5n+2) { --teinte: var(--rose); } .etape:nth-child(5n+3) { --teinte: var(--menthe); } .etape:nth-child(5n+4) { --teinte: var(--ciel); } .etape:nth-child(5n+5) { --teinte: var(--mandarine); } .etape__num { font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; color: var(--teinte); } .etape__duree { /* `block` + largeur ajustée au contenu : le badge passe systématiquement sous « Étape N », qu'il soit court (« 30 min ») ou long (« 2 à 5 semaines »). */ display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-top: 10px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-fixe); background: var(--teinte); padding: 4px 11px; border-radius: 999px; } .etape h3 { color: #fff; margin-bottom: 10px; } .etape p { color: #c3bbe8; max-width: 64ch; } /* Sur fond clair (page méthode, engagements) */ .bloc--papier .etape, .bloc--tendre .etape, .bloc:not(.bloc--nuit) .etape { background: var(--papier); border-color: var(--trait); } .bloc:not(.bloc--nuit) .etape h3 { color: var(--encre); } .bloc:not(.bloc--nuit) .etape p { color: var(--texte-2); } /* --- 13 bis. Calendrier de projet --------------------------------------- Plutôt qu'une liste d'étapes, le déroulé se lit comme un planning : la longueur de chaque barre est proportionnelle à sa durée réelle. Le visiteur voit d'un coup d'œil où passe le temps — et que l'essentiel du délai tient au développement, pas aux allers-retours. */ .calendrier { background: var(--papier); border-radius: var(--rayon-l); padding: clamp(22px, 3vw, 34px); box-shadow: var(--ombre-carte); } .calendrier__echelle { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: end; margin-bottom: 14px; } .calendrier__graduations { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brume); padding-bottom: 8px; border-bottom: 1px solid var(--trait); } .calendrier__phases { display: grid; gap: 3px; } .phase { --teinte: var(--violet); display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 16px; padding: 11px 0; border-radius: 10px; transition: background var(--sortie); } .phase:hover { background: color-mix(in srgb, var(--teinte) 6%, transparent); } .phase:nth-child(1) { --teinte: var(--ciel); } .phase:nth-child(2) { --teinte: var(--violet); } .phase:nth-child(3) { --teinte: var(--rose); } .phase:nth-child(4) { --teinte: var(--mandarine); } .phase:nth-child(5) { --teinte: var(--menthe); } .phase__nom { display: flex; align-items: baseline; gap: 9px; font-weight: 650; font-size: 0.94rem; letter-spacing: -0.015em; line-height: 1.25; } .phase__nom b { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; color: var(--teinte); flex: none; } /* La piste porte les repères de semaine ; la barre s'y place au pourcentage */ .phase__piste { position: relative; height: 34px; border-radius: 8px; background: repeating-linear-gradient(to right, var(--trait) 0 1px, transparent 1px calc(100% / 6)); } .phase__barre { position: absolute; top: 4px; bottom: 4px; left: var(--depart); width: var(--duree); min-width: 26px; border-radius: 7px; background: var(--teinte); display: flex; align-items: center; padding-inline: 10px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--encre-fixe); white-space: nowrap; box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--teinte) 80%, transparent); animation: pousse 900ms cubic-bezier(.22,.8,.3,1) both; transform-origin: left center; } .phase:nth-child(2) .phase__barre { animation-delay: .1s; } .phase:nth-child(3) .phase__barre { animation-delay: .2s; } .phase:nth-child(4) .phase__barre { animation-delay: .3s; } .phase:nth-child(5) .phase__barre { animation-delay: .4s; } @keyframes pousse { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } } /* Barre trop courte pour contenir son étiquette : celle-ci sort à côté. La dernière phase touche le bord droit du cadre, son étiquette part donc à gauche pour ne pas déborder. */ .phase__barre--etroite { color: var(--texte-2); padding-inline: 0; } .phase__barre--etroite span { position: absolute; left: calc(100% + 9px); } .phase__barre--gauche span { left: auto; right: calc(100% + 9px); } .calendrier__note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--trait); font-size: 0.88rem; color: var(--brume); } /* Ce que chaque étape vous remet : de l'éditorial, pas des cartes */ .jalons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: clamp(36px, 4vw, 54px); } .jalon { --teinte: var(--violet); padding: 0 22px; border-left: 1px solid var(--trait); } .jalon:first-child { padding-left: 0; border-left: 0; } .jalon:last-child { padding-right: 0; } .jalon:nth-child(1) { --teinte: var(--ciel); } .jalon:nth-child(2) { --teinte: var(--violet); } .jalon:nth-child(3) { --teinte: var(--rose); } .jalon:nth-child(4) { --teinte: var(--mandarine); } .jalon:nth-child(5) { --teinte: var(--menthe); } .jalon__num { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--teinte); margin-bottom: 10px; } .jalon h3 { font-size: 0.99rem; letter-spacing: -0.02em; margin-bottom: 8px; } .jalon p { font-size: 0.88rem; line-height: 1.45; color: var(--texte-2); } @media (max-width: 900px) { .jalons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; } .jalon { padding: 0 20px; } .jalon:nth-child(odd) { padding-left: 0; border-left: 0; } } @media (max-width: 680px) { .calendrier__echelle { grid-template-columns: 1fr; } .calendrier__graduations { padding-bottom: 6px; } .phase { grid-template-columns: 1fr; gap: 7px; padding: 9px 0; } .phase__piste { height: 30px; } .jalons { grid-template-columns: 1fr; gap: 22px; } .jalon { padding: 0 0 0 18px; border-left: 2px solid var(--teinte); } .jalon:nth-child(odd) { padding-left: 18px; border-left: 2px solid var(--teinte); } } @media (prefers-reduced-motion: reduce) { .phase__barre { animation: none; } } /* --- 14. Projets --------------------------------------------------------- */ .projets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 30px); } .projet { --teinte: var(--violet); contain: layout paint; background: var(--papier); border-radius: var(--rayon-l); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--ombre-carte); transition: transform var(--ressort), box-shadow var(--sortie); } .projet:nth-child(4n+1) { --teinte: var(--violet); } .projet:nth-child(4n+2) { --teinte: var(--rose); } .projet:nth-child(4n+3) { --teinte: var(--menthe); } .projet:nth-child(4n+4) { --teinte: var(--mandarine); } .projet:hover { transform: translateY(-8px); box-shadow: var(--ombre-haute); } /* L'aperçu se présente comme une capture d'écran brute : pas de cadre de navigateur, pas de barre d'adresse. Le visuel est plus haut que la fenêtre et défile lentement au survol, comme le vrai site. */ .projet__apercu { position: relative; } .projet__fenetre { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border-bottom: 1px solid var(--trait); } .projet__fenetre img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; /* Le visuel mesure 800 × 1180, la fenêtre en montre 800 × 500 : il reste 57,6 % de sa hauteur à révéler. */ transition: transform 5s cubic-bezier(.32, .06, .2, 1); } .projet:hover .projet__fenetre img, .projet:focus-within .projet__fenetre img { transform: translateY(-57.6%); } /* Indice discret : on peut faire défiler l'aperçu */ .projet__fenetre::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; background: linear-gradient(to top, rgba(255, 255, 255, .9), transparent); opacity: 1; transition: opacity var(--sortie); pointer-events: none; } .projet:hover .projet__fenetre::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { .projet:hover .projet__fenetre img, .projet:focus-within .projet__fenetre img { transform: none; } } .projet__corps { padding: 26px 28px 30px; display: grid; gap: 13px; } .projet__meta { display: flex; gap: 7px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; } .projet__meta span { background: var(--outremer-pale); color: var(--outremer-2); padding: 4px 10px; border-radius: 999px; } .projet__meta span::after { content: ""; } .projet strong { color: var(--encre); } .jetons { display: flex; flex-wrap: wrap; gap: 7px; } .jeton { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.03em; padding: 6px 13px; border-radius: 999px; background: var(--outremer-pale); color: var(--outremer-2); background: color-mix(in srgb, var(--teinte, var(--violet)) 13%, #fff); color: color-mix(in srgb, var(--teinte, var(--violet)) 72%, #1b1240); transition: transform var(--sortie); } .jeton:hover { transform: translateY(-2px) rotate(-2deg); } /* --- 15. Chiffres -------------------------------------------------------- */ .chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .chiffre { --teinte: var(--citron); padding: 28px 24px; border-radius: var(--rayon); background: rgba(255, 255, 255, .07); border: 1px solid var(--trait-nuit); transition: transform var(--ressort), background var(--sortie); } .chiffre:hover { transform: translateY(-6px) rotate(-1.2deg); background: rgba(255,255,255,.12); } .chiffre:nth-child(4n+1) { --teinte: var(--citron); } .chiffre:nth-child(4n+2) { --teinte: var(--rose); } .chiffre:nth-child(4n+3) { --teinte: var(--menthe); } .chiffre:nth-child(4n+4) { --teinte: var(--ciel); } .chiffre__val { font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.04em; color: var(--teinte); line-height: 1; } .chiffre__lib { font-size: 0.9rem; font-weight: 500; color: #c3bbe8; margin-top: 12px; } /* --- 16. Avis ------------------------------------------------------------ */ .avis { --teinte: var(--rose); position: relative; display: flex; flex-direction: column; gap: 13px; background: var(--papier); border-radius: var(--rayon); padding: clamp(20px, 2.2vw, 26px); box-shadow: var(--ombre-carte); overflow: hidden; } .avis:nth-child(3n+2) { --teinte: var(--ciel); } .avis:nth-child(3n+3) { --teinte: var(--menthe); } .avis::before { content: "“"; position: absolute; top: -14px; right: 14px; font-family: var(--display); font-size: 5.4rem; font-weight: 800; color: var(--teinte); opacity: .13; line-height: 1; pointer-events: none; } /* Note en étoiles : cinq caractères, pas cinq images */ .avis__note { position: relative; margin: 0; font-size: 0.88rem; letter-spacing: 0.18em; color: var(--citron); line-height: 1; } .avis blockquote { position: relative; margin: 0; font-size: 0.99rem; line-height: 1.5; font-weight: 500; text-wrap: pretty; } .avis figcaption { position: relative; display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 4px; font-size: 0.86rem; } .avis figcaption::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--teinte); opacity: .26; } .avis figcaption b { display: block; font-weight: 700; color: var(--encre); letter-spacing: -0.01em; } .avis figcaption span { display: block; color: var(--brume); font-size: 0.83rem; margin-top: 2px; } .avis h2 { margin-bottom: 12px; } /* La page dédiée : une grille dense qui respire mieux qu'une colonne */ .avis-grille { display: grid; /* Colonnes calées sur la longueur du texte, pas sur un nombre fixe : trois sur grand écran, deux sur portable, une sur téléphone, sans que la mesure de lecture ne devienne trop courte. */ grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 16px; align-items: start; } .avis-grille .avis:nth-child(3n+1) { --teinte: var(--rose); } /* Bandeau de synthèse en tête de la page Avis */ .synthese { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 30px); flex-wrap: wrap; margin-top: 26px; padding: 16px 22px; background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre-carte); } .synthese__note { display: flex; align-items: baseline; gap: 10px; } .synthese__note b { font-family: var(--display); font-size: clamp(2.1rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--encre); } .synthese__note span { font-size: 0.98rem; font-weight: 600; color: var(--brume); } .synthese__etoiles { font-size: 1rem; letter-spacing: 0.14em; color: var(--citron); line-height: 1; margin-top: 7px; } .synthese__detail { padding-left: clamp(16px, 2.4vw, 26px); border-left: 1px solid var(--trait); font-size: 0.9rem; color: var(--texte-2); max-width: 46ch; line-height: 1.5; } @media (max-width: 620px) { .synthese__detail { padding-left: 0; border-left: 0; } } /* --- 16 bis. Bande d'audit gratuit --------------------------------------- */ .audit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: center; position: relative; overflow: hidden; background: var(--papier); border-radius: var(--rayon-l); padding: clamp(26px, 4vw, 46px); box-shadow: var(--ombre-haute); } .audit::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--degrade-mixte); } .audit::after { content: ""; position: absolute; right: -70px; top: -70px; width: 210px; height: 210px; border-radius: 50%; background: var(--menthe); opacity: .07; pointer-events: none; } .audit > div { position: relative; } .audit h2 { margin-bottom: 14px; } .audit__gratuit { display: inline-flex; align-items: center; gap: 8px; background: var(--menthe); color: var(--encre-fixe); font-family: var(--display); font-weight: 800; font-size: 0.82rem; letter-spacing: -0.01em; padding: 7px 15px; border-radius: 999px; margin-bottom: 18px; } .audit__liste { display: grid; gap: 12px; } .audit__liste li { position: relative; padding-left: 32px; font-size: 0.96rem; line-height: 1.45; color: var(--texte-2); } .audit__liste li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 21px; height: 21px; border-radius: 50%; background: color-mix(in srgb, var(--menthe) 16%, var(--papier)); } .audit__liste li::after { content: ""; position: absolute; left: 6px; top: 0.44em; width: 8px; height: 4px; border-left: 2px solid var(--menthe); border-bottom: 2px solid var(--menthe); transform: rotate(-45deg); } @media (max-width: 860px) { .audit { grid-template-columns: 1fr; } } /* --- 17. Questions fréquentes ------------------------------------------- */ .faq { display: grid; gap: 12px; } .faq details { background: var(--papier); border-radius: var(--rayon); padding: 20px 24px; box-shadow: var(--ombre-carte); transition: box-shadow var(--sortie); } .faq details[open] { box-shadow: var(--ombre-haute); } .faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.025em; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--outremer-pale); background-image: linear-gradient(var(--violet), var(--violet)), linear-gradient(var(--violet), var(--violet)); background-repeat: no-repeat; background-size: 12px 2px, 2px 12px; background-position: center, center; transition: transform var(--sortie), background-color var(--sortie); } .faq details[open] summary::after { transform: rotate(135deg); background-color: var(--faq-ouverte); } .faq details p { margin-top: 14px; color: var(--texte-2); max-width: 74ch; } .faq details[open] p { animation: monte 380ms ease both; } /* --- 18. Formulaire ----------------------------------------------------- */ .formulaire { display: grid; gap: 18px; background: var(--papier); border-radius: var(--rayon-l); padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--ombre-haute); } .champ { display: grid; gap: 8px; } .champ label { font-family: var(--display); font-size: 0.9rem; font-weight: 700; color: var(--encre); } .champ input, .champ select, .champ textarea { font-family: var(--texte); font-size: 1rem; color: var(--encre); background: var(--champ-fond); border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; width: 100%; transition: border-color var(--sortie), background var(--sortie), box-shadow var(--sortie); } .champ textarea { resize: vertical; min-height: 150px; } .champ input:hover, .champ select:hover, .champ textarea:hover { background: var(--champ-survol); } .champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--violet); background: #fff; outline: none; box-shadow: 0 0 0 5px rgba(106, 61, 240, .14); } .champ--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .mention-champ { font-size: 0.84rem; color: var(--brume); } .consentement { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; color: var(--texte-2); } .consentement input { width: 18px; height: 18px; margin-top: 4px; flex: none; accent-color: var(--violet); } .coordonnees { display: grid; gap: 14px; } .coordonnee { --teinte: var(--violet); display: grid; gap: 4px; background: var(--papier); border-radius: 16px; padding: 18px 22px; border-left: 5px solid var(--teinte); box-shadow: var(--ombre-carte); transition: transform var(--sortie); } .coordonnee:hover { transform: translateX(5px); } .coordonnee:nth-child(5n+2) { --teinte: var(--rose); } .coordonnee:nth-child(5n+3) { --teinte: var(--menthe); } .coordonnee:nth-child(5n+4) { --teinte: var(--ciel); } .coordonnee:nth-child(5n+5) { --teinte: var(--mandarine); } .coordonnee dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brume); } .coordonnee dd { margin: 0; font-size: 1.04rem; font-weight: 500; } /* --- 18 bis. Page de demande de devis ------------------------------------ */ /* Repères de réassurance, réutilisables hors du héros */ .reperes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .reperes span { display: inline-flex; align-items: center; gap: 8px; background: var(--papier); border: 1.5px solid var(--trait); border-radius: 999px; padding: 8px 16px; font-size: 0.86rem; font-weight: 600; color: var(--texte-2); } .reperes span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--menthe); } .reperes span:nth-child(2)::before { background: var(--rose); } .reperes span:nth-child(3)::before { background: var(--ciel); } /* Deux colonnes : le formulaire mène, la colonne de droite rassure */ .contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; } .contact__cote { display: grid; gap: 16px; position: sticky; top: 100px; } /* Le formulaire se découpe en trois temps plutôt qu'une longue pile */ .groupe { display: grid; gap: 16px; } .groupe + .groupe { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--trait); } .groupe__titre { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 800; font-size: 1.06rem; letter-spacing: -0.025em; color: var(--encre); margin: 0; } .groupe__titre i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--outremer-pale); color: var(--outremer-2); font-family: var(--mono); font-style: normal; font-size: 0.72rem; font-weight: 500; } /* Les listes déroulantes natives sont laides : flèche dessinée à la main */ .champ select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--outremer-2) 50%), linear-gradient(135deg, var(--outremer-2) 50%, transparent 50%); background-position: calc(100% - 21px) center, calc(100% - 15px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .champ--obligatoire label::after { content: var(--mot-obligatoire); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose); margin-left: 8px; font-weight: 400; } .formulaire__envoi { display: grid; gap: 14px; margin-top: 4px; } .formulaire__envoi .bouton { width: 100%; justify-content: center; font-size: 1.05rem; } .formulaire__promesse { display: flex; align-items: flex-start; gap: 9px; font-size: 0.85rem; color: var(--brume); } .formulaire__promesse svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--menthe); } /* Cartes de la colonne de droite */ .bloc-cote { background: var(--papier); border-radius: var(--rayon); padding: 22px 24px; box-shadow: var(--ombre-carte); position: relative; overflow: hidden; } .bloc-cote h2 { font-size: 1.02rem; letter-spacing: -0.025em; margin-bottom: 4px; } .bloc-cote p { font-size: 0.92rem; color: var(--texte-2); } .bloc-cote--accent { border-left: 4px solid var(--menthe); } .lien-direct { display: flex; align-items: center; gap: 13px; padding: 13px 0; text-decoration: none; color: var(--encre); border-bottom: 1px solid var(--trait); transition: color var(--sortie); } .lien-direct:last-of-type { border-bottom: 0; padding-bottom: 0; } .lien-direct:hover { color: var(--outremer-2); } .lien-direct__pastille { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--outremer-pale); color: var(--outremer-2); } .lien-direct__pastille svg { width: 19px; height: 19px; } .lien-direct b { display: block; font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em; } .lien-direct small { display: block; font-size: 0.78rem; color: var(--brume); font-weight: 500; } .questions-cles { display: grid; gap: 12px; margin-top: 14px; counter-reset: q; } .questions-cles li { position: relative; padding-left: 30px; font-size: 0.92rem; line-height: 1.4; color: var(--texte-2); counter-increment: q; } .questions-cles li::before { content: counter(q); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: color-mix(in srgb, var(--menthe) 18%, var(--papier)); color: color-mix(in srgb, var(--menthe) 78%, var(--encre-fixe)); font-family: var(--mono); font-size: 0.68rem; } .reseaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .reseaux a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; padding: 7px 13px; border-radius: 999px; background: var(--outremer-pale); color: var(--outremer-2); text-decoration: none; transition: background var(--sortie), color var(--sortie); } .reseaux a:hover { background: var(--violet); color: #fff; } @media (max-width: 980px) { .contact { grid-template-columns: 1fr; } .contact__cote { position: static; } } /* --- 18 ter. Page de parrainage ------------------------------------------ */ /* Le montant, énorme, dès le bandeau : c'est l'argument */ .prime { display: flex; align-items: center; /* et non la ligne de base : la légende fait trois lignes et pendait sous le chiffre */ gap: 22px; margin: 30px 0 0; flex-wrap: wrap; } .prime__montant { font-family: var(--display); font-size: clamp(3.4rem, 9vw, 5.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: .88; background: var(--degrade-mixte); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .prime__legende { padding-left: 22px; border-left: 2px solid var(--trait); font-size: 1rem; font-weight: 600; color: var(--texte-2); max-width: 26ch; line-height: 1.38; } @media (max-width: 560px) { /* Une fois passée à la ligne, le filet de séparation n'a plus de sens */ .prime { gap: 12px; } .prime__legende { padding-left: 0; border-left: 0; max-width: 34ch; font-size: 0.94rem; } } /* Barème : un tableau, parce que c'est un tableau */ .bareme { width: 100%; border-collapse: collapse; background: var(--papier); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-carte); font-size: 0.96rem; } .bareme caption { caption-side: bottom; padding-top: 16px; font-size: 0.86rem; color: var(--brume); text-align: left; } .bareme th, .bareme td { padding: 15px 20px; text-align: left; } .bareme thead th { background: var(--outremer-pale); color: var(--outremer-2); font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .bareme tbody tr + tr { border-top: 1px solid var(--trait); } .bareme tbody th { font-weight: 600; color: var(--encre); } .bareme td { color: var(--texte-2); } .bareme .gain { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.03em; color: var(--menthe); white-space: nowrap; } .bareme tbody tr:last-child .gain { color: var(--mandarine); } /* Deux personnes dans un même formulaire : chaque partie est identifiée */ .groupe--parrain .groupe__titre i { background: color-mix(in srgb, var(--menthe) 16%, var(--papier)); color: color-mix(in srgb, var(--menthe) 72%, var(--encre-fixe)); } .groupe--filleul .groupe__titre i { background: color-mix(in srgb, var(--rose) 14%, var(--papier)); color: color-mix(in srgb, var(--rose) 78%, var(--encre-fixe)); } /* Case à cocher mise en avant : la confirmation d'accord du filleul */ .consentement--appuye { background: color-mix(in srgb, var(--citron) 13%, var(--papier)); border: 1px solid color-mix(in srgb, var(--citron) 45%, var(--papier)); border-radius: 14px; padding: 15px 17px; align-items: flex-start; } .consentement--appuye strong { color: var(--encre); } @media (max-width: 620px) { .bareme { font-size: 0.88rem; } .bareme th, .bareme td { padding: 12px 13px; } } /* --- 19. Appel final ---------------------------------------------------- */ .appel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 58px); align-items: center; } .appel h2 { color: #fff; } /* --- 20. Pied de page --------------------------------------------------- */ .pied { content-visibility: auto; contain-intrinsic-size: auto 460px; background: var(--encre-fixe); color: #b8b0dd; padding-block: 66px 34px; font-size: 0.94rem; position: relative; overflow: hidden; } .pied::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--degrade-mixte); } .pied__grille { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px; } .pied h4 { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #8d84bb; margin-bottom: 18px; } .pied ul { display: grid; gap: 11px; } .pied a { color: #d6cff5; text-decoration: none; } .pied a:hover { color: var(--citron); } .pied .marque { color: #fff; } .pied .marque:hover { color: #fff; } .pied__bas { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--trait-nuit); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 0.82rem; color: #8d84bb; } /* --- 21. Bandeau de page intérieure ------------------------------------- */ .bandeau { position: relative; padding-block: clamp(48px, 6vw, 92px) clamp(38px, 4.4vw, 62px); overflow: hidden; background: radial-gradient(60% 100% at 4% 0%, rgba(106, 61, 240, .18), transparent 60%), radial-gradient(50% 90% at 96% 10%, rgba(255, 63, 135, .16), transparent 58%), radial-gradient(40% 80% at 60% 100%, rgba(255, 210, 61, .18), transparent 60%), var(--calcaire); transition: background-color var(--sortie); } .bandeau h1 { margin-bottom: 20px; } .fil { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brume); background: rgba(255, 255, 255, .7); padding: 7px 15px; border-radius: 999px; margin-bottom: 24px; } .fil a { color: var(--outremer-2); text-decoration: none; font-weight: 600; } .fil a:hover { color: var(--rose); } /* --- 22. Prose ---------------------------------------------------------- */ .prose { max-width: 74ch; } .prose h2 { font-size: 1.5rem; margin: 46px 0 14px; display: flex; align-items: center; gap: 12px; } .prose h2::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--degrade-chaud); flex: none; } .prose h3 { font-size: 1.1rem; margin: 28px 0 10px; } .prose p, .prose li { color: var(--texte-2); } .prose ul { display: grid; gap: 9px; margin: 0 0 18px; } .prose li { padding-left: 22px; position: relative; } .prose li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); opacity: .5; } /* --- 23. Adaptation ----------------------------------------------------- */ @media (max-width: 1024px) { .heros__grille { grid-template-columns: 1fr; } } /* Sur mobile, l'ordre suit la lecture : étiquette, titre, texte d'accroche, puis la photo juste avant les boutons. Le visiteur sait ce que vous faites avant de voir qui vous êtes, et la photo reste dans le premier écran. */ @media (max-width: 860px) { /* En colonne, le `gap` de la grille du héros s'appliquait entre CHAQUE élément : 34 px imposés entre l'étiquette, le titre, le texte et la photo. On le neutralise et on pilote l'espacement à la marge. */ .heros__grille { display: flex; flex-direction: column; gap: 0; } .heros__grille > div:first-child { display: contents; } .heros .etiquette { order: 0; } .heros h1 { order: 1; } .heros .chapo { order: 2; } .portrait { order: 3; } .heros .paire-boutons { order: 4; margin-top: 18px !important; } .heros__pied { order: 5; } /* Les écarts hérités du grand écran étaient trop généreux une fois les éléments empilés : l'ensemble se lisait comme quatre blocs séparés plutôt que comme une seule accroche. */ .heros { padding-block: 24px 38px; } .heros .etiquette { margin-bottom: 16px; } .heros h1 { margin-bottom: 14px; } .heros .chapo { margin-bottom: 0; } .portrait { margin-block: 18px 0; } } @media (max-width: 1024px) { .portrait { max-width: 480px; } .trio, .formules, .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied__grille { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .duo, .appel { grid-template-columns: 1fr; } } @media (max-width: 1080px) { .bascule { display: inline-block; } /* L'en-tête reste collant : `position: sticky` sert déjà de repère au panneau de navigation positionné en absolu juste en dessous. */ .nav { display: none; position: absolute; top: calc(100% + 8px); left: var(--gouttiere); right: var(--gouttiere); flex-direction: column; align-items: stretch; gap: 4px; background: var(--papier); border-radius: var(--rayon); padding: 14px; box-shadow: var(--ombre-haute); z-index: 95; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; } .nav.est-ouvert { display: flex; animation: monte 320ms ease both; } .nav__lien { padding: 14px 16px; border-radius: 12px; } .nav__lien[aria-current="page"]::after { display: none; } .nav__lien[aria-current="page"] { background: var(--outremer-pale); color: var(--outremer-2); } .nav .bouton { margin-top: 8px; justify-content: center; } } @media (max-width: 680px) { body { font-size: 16px; } /* Les quatre repères passent en 2 × 2 : deux pastilles pleine largeur par ligne se lisent mieux qu'une colonne de quatre. */ .heros__pied { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; } .heros__pied span { padding: 9px 13px; font-size: 0.78rem; line-height: 1.25; gap: 7px; } .entete__rangee { min-height: 64px; gap: 10px; } .outils { gap: 6px; } .trio, .formules, .projets, .paire, .chiffres, .champ--duo { grid-template-columns: 1fr; } .etape { grid-template-columns: 1fr; gap: 10px; padding: 22px; } .etape:hover { transform: none; } .pied__grille { grid-template-columns: 1fr; } .paire-boutons .bouton { flex: 1 1 100%; justify-content: center; } .bulle--3, .bulle--4 { display: none; } /* Sur un écran étroit, le portrait occupe presque toute la largeur : le visage se situe entre 8 % et 40 % de la hauteur. Les cartes descendent donc au niveau du buste, et le trophée s'écarte franchement sur le côté. */ .carte-stat { padding: 9px 14px 9px 9px; gap: 9px; border-radius: 17px; max-width: 47%; } .carte-stat b { min-width: 42px; height: 42px; border-radius: 13px; font-size: 1.25rem; padding-inline: 7px; } .carte-stat span { font-size: 0.78rem; max-width: 9ch; } .carte-stat--haut { top: auto; bottom: 38%; left: -3%; } .carte-stat--bas { bottom: 9%; right: -3%; } .carte-stat--badge { top: 7%; right: -4%; width: 50px; height: 50px; max-width: none; } .carte-stat--badge svg { width: 26px; height: 26px; } /* Les losanges décoratifs se resserrent pour ne pas mordre sur les cartes */ .losange--citron { top: 2%; right: 21%; width: 11%; height: 11%; } .losange--menthe { display: none; } } /* --- 24. Confort -------------------------------------------------------- */ @media (max-width: 400px) { .carte-stat { max-width: 52%; } .carte-stat--haut { bottom: 40%; } .carte-stat--badge { width: 44px; height: 44px; } .carte-stat--badge svg { width: 23px; height: 23px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; } .portrait { animation: none; } } @media print { .entete, .appel, .bascule, .bulles, .progression { display: none; } body { background: #fff; } .fiche, .formule, .projet, .faq details { box-shadow: none; border: 1px solid var(--trait); } }