/* ========================================================================== Red Zone — feuille de style Palette d'origine conservée : bleu #233162, rouge #A02D29, bordeaux #611C1B DEUX THÈMES Le thème « marine » est celui par défaut, défini sur :root ci-dessous. Le thème « rouge », inspiré de la carte d'affaires, ne redéfinit que les variables : aucune règle de mise en page n'est dupliquée. Il s'active par la classe theme-rouge sur , posée par includes/header.php. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Variables -------------------------------------------------------------------------- */ :root { /* Couleurs composées, exprimées en composantes pour pouvoir moduler leur transparence. Chaque thème les redéfinit. */ --voile-rvb: 14, 21, 48; /* voile du héros et du bandeau */ --voile-sec-rvb: 16, 24, 54; /* voile des sections sombres, très légèrement plus clair */ --panneau-rvb: 17, 25, 56; /* fond des cartes sur surface sombre */ --lueur-rvb: 160, 45, 41; /* halo rouge des dégradés */ --ombre-rvb: 19, 28, 61; /* teinte des ombres portées */ --motif-image: url("../img/circuit.svg"); /* Couleurs de marque */ --bleu-900: #131c3d; --bleu-800: #1a2450; --bleu-700: #233162; --bleu-600: #2e4080; --bleu-500: #3d539e; --bleu-100: #e8ecf7; --bleu-50: #f4f6fc; --rouge-800: #611c1b; --rouge-700: #832523; --rouge-600: #a02d29; --rouge-500: #c13a34; /* Rouge éclairci, réservé au TEXTE posé sur les fonds marine. Le #c13a34 n'y atteignait que 2,86 de contraste, sous le minimum de 4,5. */ --rouge-400: #e86a62; --rouge-100: #fbeceb; /* Neutres */ --blanc: #ffffff; --gris-50: #f7f8fb; --gris-100: #eef0f6; --gris-200: #dfe3ed; --gris-400: #9aa2b8; --gris-600: #5c6480; --gris-800: #2b3145; /* Rôles */ --fond: var(--blanc); --fond-alt: var(--gris-50); --texte: var(--gris-800); --texte-doux: var(--gris-600); --titre: var(--bleu-700); --accent: var(--rouge-600); --bordure: var(--gris-200); /* Typographie */ --police-titre: "Jura", "Trebuchet MS", sans-serif; --police-texte: "Montserrat", "Segoe UI", system-ui, sans-serif; /* Rythme */ --largeur-max: 1200px; --gouttiere: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(3.5rem, 8vw, 6.5rem); --rayon: 14px; --rayon-sm: 8px; /* Ombres */ --ombre-sm: 0 1px 2px rgba(var(--ombre-rvb), .06), 0 2px 6px rgba(var(--ombre-rvb), .05); --ombre-md: 0 4px 12px rgba(var(--ombre-rvb), .07), 0 12px 28px rgba(var(--ombre-rvb), .07); --ombre-lg: 0 10px 24px rgba(var(--ombre-rvb), .10), 0 28px 60px rgba(var(--ombre-rvb), .12); --transition: 180ms cubic-bezier(.4, 0, .2, 1); /* Motif de circuit imprimé : intensité par défaut, ajustée section par section */ --motif-opacite: .30; /* La tuile est dessinée en 1200 px. L'afficher un peu plus petit resserre le maillage et affine les pistes, sans perdre en netteté (c'est du SVG). */ --motif-taille: 820px; } /* -------------------------------------------------------------------------- 1 bis. Thème rouge et noir Reprend les couleurs de la carte d'affaires : noir profond, pistes rouges, accents écarlates. Seules les variables changent. Les noms de variables gardent leur préfixe « bleu » : ils désignent un rôle dans la mise en page (fond sombre, couleur de titre, teinte claire), pas une teinte. Les renommer aurait obligé à retoucher 1500 lignes sans rien changer au résultat. -------------------------------------------------------------------------- */ html.theme-rouge { /* Rôle « fond sombre » : noirs très légèrement chauds */ --bleu-900: #0a0607; --bleu-800: #17090b; /* Rôle « couleur des titres sur fond clair » */ --bleu-700: #2b1114; /* Rôle « liens » */ --bleu-600: #a8231d; /* Rôle « bordure de champ au focus » */ --bleu-500: #d0342c; /* Rôles « teintes claires » : blancs légèrement rosés */ --bleu-100: #f7e3e2; --bleu-50: #fdf4f3; /* Rouges de marque, plus vifs que dans le thème marine */ --rouge-800: #5c1512; --rouge-700: #8f1f1a; --rouge-600: #c62828; --rouge-500: #e33b31; /* Rouge éclairci pour le TEXTE sur fond noir. Vérifié à 6,9 de contraste. */ --rouge-400: #ff8079; --rouge-100: #fdecea; /* Neutres réchauffés : un gris franchement neutre jurerait avec le rouge */ --gris-50: #faf7f7; --gris-100: #f2eded; --gris-200: #e4dbdb; --gris-400: #a89b9b; --gris-600: #6b5c5c; --gris-800: #2f2223; /* Couleurs composées */ --voile-rvb: 10, 6, 7; --voile-sec-rvb: 13, 8, 9; --panneau-rvb: 26, 13, 15; --lueur-rvb: 198, 40, 40; --ombre-rvb: 30, 10, 12; /* Le motif reprend les mêmes tracés, en rouge */ --motif-image: url("../img/circuit-rouge.svg"); } /* Les fonds sombres du thème rouge sont presque noirs : le motif y ressort davantage, on le retient donc un peu. */ html.theme-rouge .section--fonce::before { opacity: .26; } html.theme-rouge .heros::before { opacity: .34; } /* -------------------------------------------------------------------------- 1 ter. Déclaration de la variable de parallaxe ... Point de performance important : sans « inherits: false », modifier cette variable sur une section obligerait le navigateur à recalculer le style de TOUS ses descendants, à chaque image du défilement. Sur une section de plusieurs centaines d'éléments, c'est la principale cause de saccade. Déclarée ainsi, la modification n'affecte que l'élément lui-même. -------------------------------------------------------------------------- */ @property --parallaxe-y { syntax: ""; inherits: false; initial-value: 0px; } /* -------------------------------------------------------------------------- 2. Réinitialisation -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; } body { background: var(--fond); color: var(--texte); font-family: var(--police-texte); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--bleu-600); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--rouge-600); } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--police-titre); color: var(--titre); font-weight: 600; line-height: 1.2; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 500; letter-spacing: -.01em; } h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: 500; } h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); } h4 { font-size: 1.05rem; } p { text-wrap: pretty; } :focus-visible { outline: 3px solid var(--rouge-500); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- 3. Utilitaires -------------------------------------------------------------------------- */ .conteneur { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); } .conteneur--etroit { max-width: 760px; } .visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lien-evitement { position: absolute; top: -100px; left: 1rem; z-index: 999; padding: .75rem 1.25rem; background: var(--bleu-700); color: var(--blanc); border-radius: 0 0 var(--rayon-sm) var(--rayon-sm); text-decoration: none; transition: top var(--transition); } .lien-evitement:focus { top: 0; color: var(--blanc); } .icone { width: 24px; height: 24px; flex: none; } .icone--sm { width: 17px; height: 17px; stroke-width: 1.8; } .icone--lg { width: 30px; height: 30px; } .section { position: relative; isolation: isolate; padding-block: var(--section-y); } /* Toutes les sections claires portent le motif en filigrane : plus aucune grande surface de blanc plat. Cette couche-ci est FIXE. À 7 % d'opacité, un déplacement de parallaxe est invisible, alors qu'il coûte une couche composée de plus à chaque image. */ .section::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--motif-image); background-size: var(--motif-taille) var(--motif-taille); background-repeat: repeat; opacity: .05; pointer-events: none; } .section > * { position: relative; z-index: 1; } .section--alt { background: var(--fond-alt); } .section--alt::before { opacity: .085; } .section--fonce { background: radial-gradient(1000px 500px at 12% -10%, rgba(var(--lueur-rvb), .28), transparent 62%), linear-gradient(160deg, var(--bleu-800) 0%, var(--bleu-900) 100%); color: rgba(255, 255, 255, .82); /* Indispensable : la couche du motif déborde volontairement de 14 % en haut et en bas pour pouvoir glisser sans découvrir de vide. Sans ce découpage, ce débord se prolongeait dans le pied de page et s'y arrêtait net. */ overflow: hidden; } /* Seules les sections sombres gardent la parallaxe : le motif y est assez visible pour que le mouvement se remarque. Pas de masque ici — un masque sort la couche du chemin rapide du compositeur et la fait repeindre à chaque image. Le voile ci-dessous se charge d'adoucir les bords. */ .section--fonce::before { inset: -14% 0; opacity: .30; transform: translate3d(0, var(--parallaxe-y, 0px), 0); } /* Voile posé sur le motif, sous le contenu : le circuit reste visible sur les bords et s'efface au centre, là où se trouve le texte. */ .section--fonce::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 78% 70% at 50% 50%, rgba(var(--voile-sec-rvb), .80) 0%, rgba(var(--voile-sec-rvb), .45) 55%, transparent 85%), linear-gradient(180deg, rgba(var(--voile-sec-rvb), .5), transparent 18%, transparent 82%, rgba(var(--voile-sec-rvb), .5)); pointer-events: none; } .section--fonce h2, .section--fonce h3 { color: var(--blanc); } .surtitre { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; font-family: var(--police-titre); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rouge-600); } .surtitre::before { content: ""; width: 28px; height: 2px; background: var(--rouge-600); } /* Le surtitre est du petit texte en capitales : sur les fonds marine il lui faut le rouge éclairci, sans quoi il tombe à 2,3 de contraste. */ .section--fonce .surtitre, .heros .surtitre { color: var(--rouge-400); } .section--fonce .surtitre::before, .heros .surtitre::before { background: var(--rouge-400); } .entete-section { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .entete-section--centre { margin-inline: auto; text-align: center; } .entete-section--centre .surtitre { justify-content: center; } .entete-section p { margin-top: 1rem; font-size: 1.075rem; color: var(--texte-doux); } .section--fonce .entete-section p { color: rgba(255, 255, 255, .78); } /* -------------------------------------------------------------------------- 4. Boutons -------------------------------------------------------------------------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.6rem; border: 2px solid transparent; border-radius: 999px; font-family: var(--police-titre); font-size: .95rem; font-weight: 700; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition); } .bouton:hover { transform: translateY(-2px); } .bouton:active { transform: translateY(0); } .bouton--primaire { background: var(--rouge-600); border-color: var(--rouge-600); color: var(--blanc); box-shadow: 0 6px 18px rgba(var(--lueur-rvb), .32); } .bouton--primaire:hover { background: var(--rouge-700); border-color: var(--rouge-700); color: var(--blanc); box-shadow: 0 10px 26px rgba(var(--lueur-rvb), .38); } .bouton--secondaire { background: transparent; border-color: var(--bleu-700); color: var(--bleu-700); } .bouton--secondaire:hover { background: var(--bleu-700); color: var(--blanc); } .bouton--clair { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--blanc); } .bouton--clair:hover { background: var(--blanc); border-color: var(--blanc); color: var(--bleu-700); } .bouton--urgence { padding: .6rem 1.2rem; background: var(--rouge-600); border-color: var(--rouge-600); color: var(--blanc); font-size: .85rem; } .bouton--urgence:hover { background: var(--rouge-700); border-color: var(--rouge-700); color: var(--blanc); } .bouton--bloc { width: 100%; } .groupe-boutons { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; } /* Ligne « autres façons de nous joindre », sous un groupe de boutons. Le courriel et les messageries passent devant ; le telephone reste accessible, mais annonce comme la voie des urgences. */ .note-joindre { margin-top: 1.1rem; font-size: .92rem; color: var(--texte-doux); } .note-joindre a { color: var(--rouge-600); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(var(--lueur-rvb), .4); } .note-joindre a:hover { color: var(--rouge-700); border-bottom-color: currentColor; } .note-joindre--clair { color: rgba(255, 255, 255, .74); } .note-joindre--clair a { color: var(--blanc); border-bottom-color: rgba(255, 255, 255, .45); } .note-joindre--clair a:hover { border-bottom-color: var(--blanc); } .lien-fleche { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--police-titre); font-weight: 700; font-size: .92rem; color: var(--rouge-600); text-decoration: none; } .lien-fleche .icone { width: 18px; height: 18px; transition: transform var(--transition); } .lien-fleche:hover { color: var(--rouge-700); } .lien-fleche:hover .icone { transform: translateX(4px); } /* -------------------------------------------------------------------------- 5. Barre d'information + en-tête -------------------------------------------------------------------------- */ .barre-info { background: var(--bleu-900); color: rgba(255, 255, 255, .78); font-size: .82rem; } .barre-info__interieur { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.75rem; padding-block: .55rem; } .barre-info__item { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; } a.barre-info__item:hover { color: var(--blanc); } .barre-info__item .icone { color: var(--rouge-400); } /* Bloc « ecrivez-nous » : le libelle donne son sens aux deux icones. */ .barre-info__ecrire { display: inline-flex; align-items: center; gap: .55rem; } .barre-info__ecrire-libelle { white-space: nowrap; } /* Le telephone, en badge, tout a droite : disponible sans etre mis devant. */ .barre-info__urgence { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; padding: .15rem .7rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: .76rem; color: rgba(255, 255, 255, .72); text-decoration: none; white-space: nowrap; } a.barre-info__urgence:hover { color: var(--blanc); border-color: rgba(255, 255, 255, .45); } .barre-info__urgence .icone { color: var(--rouge-400); } /* -------------------------------------------------------------------------- 5 bis. Réseaux sociaux -------------------------------------------------------------------------- */ .reseaux { display: flex; align-items: center; gap: .4rem; margin: 0 0 0 .35rem; padding: 0; list-style: none; } .barre-info__ecrire .reseaux { margin-left: 0; } .reseaux__lien { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .12); text-decoration: none; transition: background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); } .reseaux__lien .icone { width: 20px; height: 20px; } .reseaux__lien:hover { color: var(--blanc); transform: translateY(-2px) scale(1.06); } .reseaux__lien--facebook { background: rgba(24, 119, 242, .38); } .reseaux__lien--facebook:hover { background: #1877f2; box-shadow: 0 4px 14px rgba(24, 119, 242, .55); } .reseaux__lien--instagram { background: rgba(220, 39, 67, .34); } .reseaux__lien--instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); box-shadow: 0 4px 14px rgba(188, 24, 136, .5); } /* Version plus grande dans le pied de page */ .reseaux--pied { margin: 1.25rem 0 0; gap: .7rem; } .reseaux--pied .reseaux__lien { width: 48px; height: 48px; } .reseaux--pied .reseaux__lien .icone { width: 26px; height: 26px; } /* -------------------------------------------------------------------------- 5 ter. Blocs « écrivez-nous » des réseaux sociaux -------------------------------------------------------------------------- */ .messageries { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.75rem; } .messagerie { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre-sm); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .messagerie:hover { transform: translateY(-3px); box-shadow: var(--ombre-md); } .messagerie__icone { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; color: var(--blanc); } .messagerie__icone .icone { width: 30px; height: 30px; } .messagerie--facebook .messagerie__icone { background: #1877f2; } .messagerie--facebook:hover { border-color: #1877f2; } .messagerie--instagram .messagerie__icone { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); } .messagerie--instagram:hover { border-color: #dc2743; } /* Les deux lignes sont des dans un lien : il faut les empiler. */ .messagerie__titre { display: block; font-family: var(--police-titre); font-size: 1.05rem; font-weight: 700; color: var(--titre); margin-bottom: .25rem; } .messagerie__texte { display: block; font-size: .88rem; color: var(--texte-doux); line-height: 1.6; } /* En-tête collant, donc redessiné en permanence pendant le défilement. Aucun backdrop-filter ici : un flou d'arrière-plan sur un élément collant oblige le navigateur à reflouter toute la page derrière lui à chaque image. C'était la cause principale des saccades et du texte qui « bavait ». Un fond opaque donne le même effet visuel pour un coût nul. */ .entete { position: sticky; top: 0; z-index: 100; background: var(--blanc); border-bottom: 1px solid var(--bordure); transition: box-shadow var(--transition); } .entete.est-defile { box-shadow: var(--ombre-md); } .entete__interieur { display: flex; align-items: center; gap: 1.5rem; padding-block: .8rem; } .entete__logo { flex: none; line-height: 0; } .entete__logo img { width: auto; height: 46px; } .entete__bascule { display: none; margin-left: auto; padding: .5rem; background: none; border: 1px solid var(--bordure); border-radius: var(--rayon-sm); color: var(--bleu-700); cursor: pointer; } .entete__bascule-fermer { display: none; } .entete__bascule[aria-expanded="true"] .entete__bascule-ouvrir { display: none; } .entete__bascule[aria-expanded="true"] .entete__bascule-fermer { display: block; } /* Le menu commence juste après le logo ; seul le bouton d'urgence est repoussé au bord droit par sa marge automatique. */ .nav { display: flex; align-items: center; gap: 1.25rem; flex: 1; min-width: 0; } .nav__cta { margin-left: auto; } .nav__liste { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; } .nav__lien { position: relative; display: block; padding: .55rem .7rem; border-radius: var(--rayon-sm); font-family: var(--police-titre); font-size: 1.12rem; font-weight: 600; color: var(--bleu-700); text-decoration: none; white-space: nowrap; transition: color var(--transition), background-color var(--transition); } .nav__lien:hover { background: var(--bleu-50); color: var(--rouge-600); } .nav__lien.est-actif { color: var(--rouge-600); } .nav__lien.est-actif::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .25rem; height: 2px; border-radius: 2px; background: var(--rouge-600); } @media (max-width: 1120px) { /* Les heures cedent la place : le courriel, les messageries et le numero d'urgence sont ce qui doit rester visible sur un petit ecran. */ .barre-info__item--heures { display: none; } } @media (max-width: 600px) { .barre-info__ecrire-libelle { display: none; } .barre-info__interieur { justify-content: space-between; } } @media (max-width: 1120px) { .entete__bascule { display: block; } .nav { position: fixed; inset: auto 0 0 0; top: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .5rem; margin: 0; padding: 6rem var(--gouttiere) 2rem; background: var(--blanc); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform var(--transition), visibility var(--transition); } .nav.est-ouvert { transform: translateX(0); visibility: visible; } .nav__liste { flex-direction: column; align-items: stretch; gap: .25rem; } .nav__lien { padding: .9rem 1rem; font-size: 1.1rem; border-bottom: 1px solid var(--bordure); border-radius: 0; } .nav__lien.est-actif::after { display: none; } /* En colonne, « margin-left: auto » rétrécirait le bouton contre le bord. */ .nav__cta { margin-top: 1.25rem; margin-left: 0; } body.menu-ouvert { overflow: hidden; } } /* -------------------------------------------------------------------------- 6. Héros -------------------------------------------------------------------------- */ .heros { position: relative; padding-block: clamp(4rem, 9vw, 7.5rem); background: radial-gradient(900px 520px at 78% 8%, rgba(var(--lueur-rvb), .32), transparent 60%), radial-gradient(700px 480px at 10% 92%, rgba(61, 83, 158, .38), transparent 62%), linear-gradient(155deg, var(--bleu-800) 0%, var(--bleu-900) 100%); color: rgba(255, 255, 255, .84); overflow: hidden; } /* Deux couches distinctes derrière le contenu du héros : ::before porte le circuit imprimé, ::after pose un voile sombre par-dessus. Séparer les deux permet de garder un motif bien présent tout en gardant le texte parfaitement lisible. */ .heros::before { content: ""; position: absolute; inset: -25% 0; z-index: 0; background-image: var(--motif-image); background-size: var(--motif-taille) var(--motif-taille); background-repeat: repeat; opacity: .38; transform: translate3d(0, var(--parallaxe-y, 0px), 0); pointer-events: none; } .heros::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 70% 80% at 28% 50%, rgba(var(--voile-rvb), .93) 0%, rgba(var(--voile-rvb), .78) 42%, rgba(var(--voile-rvb), .32) 70%, transparent 88%), linear-gradient(180deg, rgba(var(--voile-rvb), .55), transparent 22%, transparent 78%, rgba(var(--voile-rvb), .55)); pointer-events: none; } .heros > * { position: relative; z-index: 1; } .heros__grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .heros h1 { color: var(--blanc); } /* Grand logo de la page d'accueil. Il respire légèrement, et un halo rouge diffus le décolle du fond sombre. */ .heros__logo { width: clamp(170px, 22vw, 260px); height: auto; margin-bottom: 1.25rem; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 42px rgba(var(--lueur-rvb), .45)); animation: logo-flottant 7s ease-in-out infinite; } @keyframes logo-flottant { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.015); } } .heros__slogan { display: block; font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 300; color: var(--rouge-400); letter-spacing: .04em; } .heros__intro { max-width: 46ch; margin-top: 1.5rem; font-size: 1.075rem; color: rgba(255, 255, 255, .8); } .heros__puces { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; padding: 0; list-style: none; } .heros__puces li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .95rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(var(--panneau-rvb), .68); font-family: var(--police-titre); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .88); } .heros__puces .icone { width: 15px; height: 15px; color: var(--rouge-400); } /* Carte flottante du héros */ .heros__carte { padding: 1.9rem; background: rgba(var(--panneau-rvb), .90); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--rayon); box-shadow: var(--ombre-lg); } .heros__carte h2 { font-size: 1.2rem; color: var(--blanc); margin-bottom: 1.25rem; } .heros__stats { display: grid; gap: 1.1rem; padding: 0; list-style: none; } .heros__stats li { display: flex; align-items: flex-start; gap: .85rem; } .heros__stats .icone { color: var(--rouge-400); margin-top: .15rem; } .heros__stats strong { display: block; font-family: var(--police-titre); font-size: 1rem; color: var(--blanc); } .heros__stats span { font-size: .88rem; color: rgba(255, 255, 255, .72); } /* Héros compact des pages intérieures */ .heros--compact { padding-block: clamp(3rem, 6vw, 4.5rem); } .heros--compact .heros__grille { grid-template-columns: 1fr; } .heros--compact h1 { max-width: 18ch; } .fil-ariane { margin-bottom: 1rem; font-size: .84rem; color: rgba(255, 255, 255, .62); } .fil-ariane ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; } .fil-ariane li:not(:last-child)::after { content: "›"; margin-left: .4rem; opacity: .6; } .fil-ariane a { color: rgba(255, 255, 255, .8); } .fil-ariane a:hover { color: var(--blanc); } @media (max-width: 900px) { .heros__grille { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 7. Cartes -------------------------------------------------------------------------- */ .grille { display: grid; gap: 1.5rem; } /* Exactement deux colonnes : quatre cartes se rangent en 2 + 2, et non en 3 + 1 comme le faisait auto-fit sur les grands écrans. minmax(0, 1fr) plutôt que 1fr : sans cela, un contenu long empêche la colonne de rétrécir et déborde. */ .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 760px) { .grille--2 { grid-template-columns: 1fr; } } .grille--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .grille--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .carte { display: flex; flex-direction: column; padding: 1.9rem; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .carte:hover { transform: translateY(-4px); border-color: var(--bleu-100); box-shadow: var(--ombre-md); } /* La couleur est posée explicitement : une carte blanche placée dans une section sombre hériterait sinon du blanc, donc d'un titre invisible. */ .carte h2, .carte h3 { margin-bottom: .75rem; color: var(--titre); } .carte p { color: var(--texte-doux); font-size: .95rem; } .carte__pied { margin-top: auto; padding-top: 1.25rem; } .carte__icone { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.35rem; border-radius: var(--rayon-sm); background: var(--bleu-50); color: var(--bleu-700); transition: background-color var(--transition), color var(--transition); } .carte:hover .carte__icone { background: var(--rouge-100); color: var(--rouge-600); } .carte__icone .icone { width: 28px; height: 28px; } /* Carte de service avec numérotation */ .carte--service { position: relative; } .carte--service .carte__numero { position: absolute; top: 1.4rem; right: 1.6rem; font-family: var(--police-titre); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--gris-100); } .carte--service:hover .carte__numero { color: var(--rouge-100); } /* Carte de valeur sur fond foncé. Fond noir semi-transparent : le circuit imprimé reste visible au travers, tout en assombrissant assez pour que le texte reste net. Vérifié à 12,9 de contraste dans le pire cas, c'est-à-dire une carte posée sur la piste la plus claire du motif. */ .carte--valeur { background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .14); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); } /* Au survol, la carte se teinte de rouge. L'opacité reste modérée pour que le motif transparaisse encore et que le texte demeure lisible (7,3). */ .carte--valeur:hover { background: rgba(var(--lueur-rvb), .34); border-color: rgba(var(--lueur-rvb), .85); box-shadow: 0 10px 30px rgba(var(--lueur-rvb), .32); } .carte--valeur h2, .carte--valeur h3 { color: var(--blanc); } .carte--valeur p { color: rgba(255, 255, 255, .84); } .carte--valeur .carte__icone { background: rgba(var(--lueur-rvb), .32); color: var(--rouge-400); } /* La carte devenant rouge au survol, une pastille rouge s'y fondrait : on l'assombrit au contraire pour qu'elle continue de se détacher. */ .carte--valeur:hover .carte__icone { background: rgba(0, 0, 0, .40); color: var(--blanc); } /* -------------------------------------------------------------------------- 8. Bandeau d'appel à l'action -------------------------------------------------------------------------- */ .bandeau { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; padding: clamp(2rem, 4vw, 3rem); border-radius: var(--rayon); background: radial-gradient(700px 300px at 88% 10%, rgba(var(--lueur-rvb), .35), transparent 62%), linear-gradient(140deg, var(--bleu-700), var(--bleu-900)); color: rgba(255, 255, 255, .84); box-shadow: var(--ombre-lg); } .bandeau::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--motif-image); /* Tuile affichée plus grande ici : le bandeau est une petite surface, un motif trop resserré y devenait illisible derrière le texte. */ background-size: 660px 660px; opacity: .22; pointer-events: none; } /* Voile du bandeau. C'était la seule surface sombre du site sans voile : le motif s'y trouvait à pleine intensité juste derrière le texte, ce qui donnait l'impression qu'il passait devant. Le contenu occupant presque toute la boîte, le voile est ici plus couvrant que sur les grandes sections. */ .bandeau::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, rgba(var(--voile-rvb), .92) 0%, rgba(var(--voile-rvb), .82) 45%, rgba(var(--voile-rvb), .55) 72%, rgba(var(--voile-rvb), .30) 100%); pointer-events: none; } .bandeau > * { position: relative; z-index: 1; } .bandeau h2 { color: var(--blanc); } .bandeau p { margin-top: .6rem; max-width: 52ch; color: rgba(255, 255, 255, .78); } .bandeau__actions { display: flex; flex-wrap: wrap; gap: .8rem; } /* -------------------------------------------------------------------------- 9. Tarifs -------------------------------------------------------------------------- */ .tarifs-groupe + .tarifs-groupe { margin-top: clamp(2.5rem, 5vw, 3.5rem); } .tarifs-groupe__titre { margin-bottom: 1.5rem; font-family: var(--police-titre); font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-700); } /* Sur fond sombre, le titre de groupe doit rester lisible. */ .section--fonce .tarifs-groupe__titre { color: var(--blanc); } .tarif { position: relative; display: flex; flex-direction: column; padding: 2rem; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre-sm); transition: transform var(--transition), box-shadow var(--transition); } .tarif:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); } .tarif--vedette { border-color: var(--rouge-600); box-shadow: 0 0 0 1px var(--rouge-600), var(--ombre-md); } .tarif__etiquette { position: absolute; top: -.75rem; left: 2rem; padding: .2rem .8rem; border-radius: 999px; background: var(--rouge-600); color: var(--blanc); font-family: var(--police-titre); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .tarif__titre { font-size: 1.2rem; margin-bottom: .2rem; } .tarif__soustitre { font-size: .88rem; color: var(--texte-doux); min-height: 2.6em; } .tarif__prix { display: flex; align-items: baseline; gap: .25rem; margin: 1.25rem 0 .25rem; font-family: var(--police-titre); color: var(--bleu-700); } .tarif__devise { font-size: 1.35rem; font-weight: 600; align-self: flex-start; margin-top: .5rem; } .tarif__montant { font-size: 3.25rem; font-weight: 700; line-height: 1; } .tarif__unite { font-size: .95rem; font-weight: 600; color: var(--texte-doux); } .tarif__note { margin-top: auto; padding-top: 1.25rem; font-size: .82rem; color: var(--texte-doux); font-style: italic; } /* -------------------------------------------------------------------------- 10. Témoignages -------------------------------------------------------------------------- */ .temoignage { position: relative; max-width: 720px; margin-inline: auto; padding: 0 2.5rem; text-align: center; } .temoignage__icone { width: 40px; height: 40px; margin: 0 auto 1.5rem; color: var(--rouge-400); opacity: .85; } /* -------------------------------------------------------------------------- 10 bis. Carrousel de témoignages Les diapositives sont empilées dans une seule cellule de grille. Le bloc prend ainsi la hauteur du plus long témoignage et reste stable : sans cela, la page sauterait à chaque changement. -------------------------------------------------------------------------- */ .carrousel { padding-top: 2.5rem; } .carrousel__scene { display: grid; max-width: 720px; margin-inline: auto; } .carrousel__diapo { grid-area: 1 / 1; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .6s cubic-bezier(.22, .8, .3, 1), transform .6s cubic-bezier(.22, .8, .3, 1); /* Une diapositive masquée ne doit pas capter le clavier. */ visibility: hidden; } .carrousel__diapo.est-actif { opacity: 1; transform: none; visibility: visible; } /* La diapositive qui sort part vers le haut, celle qui entre vient du bas : le mouvement se lit alors comme un défilement, pas comme un clignotement. */ .carrousel__diapo.est-sortante { opacity: 0; transform: translateY(-14px) scale(.985); visibility: visible; } .carrousel__pastilles { display: flex; justify-content: center; gap: .6rem; margin-top: 2.25rem; } .carrousel__pastille { width: 30px; height: 4px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .26); cursor: pointer; transition: background-color var(--transition), width var(--transition); } .carrousel__pastille:hover { background: rgba(255, 255, 255, .5); } .carrousel__pastille.est-actif { width: 46px; background: var(--rouge-400); } .carrousel__pastille:focus-visible { outline: 3px solid var(--rouge-400); outline-offset: 5px; } /* -------------------------------------------------------------------------- Fiche d'un service Texte à gauche, encadré récapitulatif à droite qui suit le défilement. -------------------------------------------------------------------------- */ .fiche-service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (max-width: 900px) { .fiche-service { grid-template-columns: 1fr; } } .fiche-service__intro { font-size: 1.1rem; line-height: 1.75; color: var(--texte); } .fiche-service__texte h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: clamp(1.3rem, 2.4vw, 1.65rem); } /* Liste « ce qui est compris » */ .liste-marquee { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; } .liste-marquee li { display: flex; align-items: flex-start; gap: .65rem; color: var(--texte-doux); } .liste-marquee .icone { flex: none; margin-top: .32rem; color: var(--rouge-600); } /* Étapes numérotées */ .etapes { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: etape; } .etapes li { display: flex; align-items: flex-start; gap: .9rem; color: var(--texte-doux); } .etapes__numero { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--rouge-600); color: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; } /* Encadré récapitulatif */ .fiche-resume { position: sticky; top: 110px; padding: 1.6rem; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre-md); } @media (max-width: 900px) { .fiche-resume { position: static; } } .fiche-resume__titre { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge-600); margin-bottom: 1.25rem; } .fiche-resume__ligne { display: flex; align-items: flex-start; gap: .8rem; padding-block: .8rem; border-top: 1px solid var(--bordure); } .fiche-resume__ligne:first-of-type { border-top: 0; padding-top: 0; } .fiche-resume__ligne .icone { flex: none; margin-top: .15rem; color: var(--titre); } .fiche-resume__ligne > div { display: grid; gap: .1rem; font-size: .92rem; } .fiche-resume__etiquette { font-family: var(--police-titre); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); } /* -------------------------------------------------------------------------- Liste des villes, sur la page des secteurs desservis -------------------------------------------------------------------------- */ .liste-villes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .3rem .8rem; margin: 1.1rem 0 0; padding: 0; list-style: none; } .liste-villes li { display: flex; align-items: center; gap: .35rem; font-size: .9rem; color: rgba(255, 255, 255, .86); } .liste-villes .icone { flex: none; color: var(--rouge-400); width: 14px; height: 14px; } /* Dans le pied de page, une simple énumération suffit. */ .pied__villes { font-size: .84rem; line-height: 1.8; color: rgba(255, 255, 255, .62); } /* Invitation à déposer un avis, sous le carrousel. */ .invite-avis { margin: 2.5rem auto 0; max-width: 52ch; text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .72); } .invite-avis a { color: var(--rouge-400); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; } .invite-avis a:hover { color: var(--blanc); } @media (prefers-reduced-motion: reduce) { .carrousel__diapo { transition-duration: 1ms; } } .temoignage__citation { font-family: var(--police-titre); font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 300; line-height: 1.5; color: var(--blanc); } .temoignage__auteur { margin-top: 1.5rem; font-family: var(--police-titre); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; color: var(--blanc); } .temoignage__lieu { font-size: .84rem; color: rgba(255, 255, 255, .62); } /* -------------------------------------------------------------------------- 11. FAQ (accordéon) -------------------------------------------------------------------------- */ .faq-categorie + .faq-categorie { margin-top: 2.75rem; } .faq-categorie__titre { margin-bottom: 1.1rem; font-family: var(--police-titre); font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge-600); } .accordeon { display: grid; gap: .75rem; } .accordeon__item { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon-sm); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); } .accordeon__item:hover { border-color: var(--bleu-100); } .accordeon__item.est-ouvert { border-color: var(--bleu-100); box-shadow: var(--ombre-sm); } .accordeon__bouton { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.15rem 1.35rem; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--police-titre); font-size: 1.02rem; font-weight: 600; color: var(--bleu-700); } .accordeon__bouton:hover { color: var(--rouge-600); } .accordeon__bouton .icone { flex: none; color: var(--rouge-600); transition: transform var(--transition); } .accordeon__item.est-ouvert .accordeon__bouton .icone { transform: rotate(45deg); } .accordeon__panneau { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition); } .accordeon__item.est-ouvert .accordeon__panneau { grid-template-rows: 1fr; } /* visibility: hidden retire aussi la réponse repliée des lecteurs d'écran et du parcours au clavier, ce que « height: 0 » seul ne fait pas. */ .accordeon__contenu { overflow: hidden; visibility: hidden; transition: visibility var(--transition); } .accordeon__item.est-ouvert .accordeon__contenu { visibility: visible; } .accordeon__contenu > div { padding: 0 1.35rem 1.35rem; color: var(--texte-doux); font-size: .95rem; } /* -------------------------------------------------------------------------- 12. Formulaire -------------------------------------------------------------------------- */ .contact-grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } } .coordonnees { display: grid; gap: 1.5rem; } .coordonnees__item { display: flex; gap: 1rem; } .coordonnees__item .icone { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: var(--rayon-sm); background: var(--bleu-50); color: var(--bleu-700); } .coordonnees__etiquette { font-family: var(--police-titre); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); } .coordonnees__valeur { font-family: var(--police-titre); font-size: 1.05rem; font-weight: 600; color: var(--bleu-700); text-decoration: none; } a.coordonnees__valeur:hover { color: var(--rouge-600); } .formulaire { padding: clamp(1.75rem, 3.5vw, 2.5rem); background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre-md); } .formulaire__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .champ--pleine-largeur { grid-column: 1 / -1; } @media (max-width: 620px) { .formulaire__grille { grid-template-columns: 1fr; } .champ--pleine-largeur { grid-column: auto; } } .champ { display: flex; flex-direction: column; gap: .4rem; } .champ label { font-family: var(--police-titre); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu-700); } .champ__requis { color: var(--rouge-600); } .champ input, .champ select, .champ textarea { width: 100%; padding: .8rem 1rem; background: var(--gris-50); border: 1.5px solid var(--bordure); border-radius: var(--rayon-sm); font-size: .95rem; transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition); } .champ textarea { min-height: 140px; resize: vertical; } .champ select { cursor: pointer; } .champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; background: var(--blanc); border-color: var(--bleu-500); box-shadow: 0 0 0 3px rgba(61, 83, 158, .14); } .champ input[aria-invalid="true"], .champ select[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--rouge-600); background: var(--rouge-100); } .champ__erreur { font-family: var(--police-texte); font-size: .82rem; font-weight: 600; color: var(--rouge-700); text-transform: none; letter-spacing: 0; } /* Piège à robots : invisible pour les humains, rempli par les robots. */ .pot-de-miel { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; } .alerte { display: flex; gap: .85rem; padding: 1.1rem 1.35rem; margin-bottom: 1.75rem; border-radius: var(--rayon-sm); border-left: 4px solid; font-size: .95rem; } .alerte .icone { flex: none; margin-top: .15rem; } .alerte--succes { background: #ecf8f0; border-color: #2e7d4f; color: #1c5233; } .alerte--erreur { background: var(--rouge-100); border-color: var(--rouge-600); color: var(--rouge-800); } .alerte strong { display: block; font-family: var(--police-titre); } .formulaire__note { margin-top: 1rem; font-size: .82rem; color: var(--texte-doux); } /* -------------------------------------------------------------------------- 13. Article / blogue -------------------------------------------------------------------------- */ .liste-articles { display: grid; gap: 1.75rem; } .carte-article { display: grid; grid-template-columns: 200px 1fr; gap: 1.75rem; align-items: center; padding: 1.5rem; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre-sm); transition: transform var(--transition), box-shadow var(--transition); } .carte-article:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); } .carte-article__image { border-radius: var(--rayon-sm); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } .carte-article__date { font-family: var(--police-titre); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rouge-600); } .carte-article h3 { margin: .5rem 0 .6rem; } .carte-article p { color: var(--texte-doux); font-size: .95rem; margin-bottom: 1rem; } @media (max-width: 720px) { .carte-article { grid-template-columns: 1fr; } } .article { padding-block: var(--section-y); } .article__contenu { max-width: 760px; margin-inline: auto; } .article__meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; font-size: .86rem; color: var(--texte-doux); } /* L'illustration de l'article est carrée : on la borne pour qu'elle n'occupe pas toute la hauteur de l'écran. */ .article__vedette { width: 100%; max-width: 460px; margin: 0 auto 2.5rem; border-radius: var(--rayon); box-shadow: var(--ombre-md); } .article__contenu h2 { margin-top: 2.75rem; margin-bottom: .9rem; font-size: clamp(1.4rem, 2.6vw, 1.85rem); } .article__contenu h3 { margin-top: 2rem; margin-bottom: .7rem; } .article__contenu p { margin-bottom: 1.15rem; } .article__contenu ul, .article__contenu ol { margin: 0 0 1.15rem 1.35rem; } .article__contenu li { margin-bottom: .5rem; } .article__contenu strong { color: var(--bleu-700); } .encadre { margin: 2rem 0; padding: 1.5rem 1.75rem; border-left: 4px solid var(--rouge-600); border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; background: var(--bleu-50); } .encadre p:last-child { margin-bottom: 0; } .encadre__titre { font-family: var(--police-titre); font-weight: 700; color: var(--bleu-700); margin-bottom: .5rem; } .comparaison { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin: 2rem 0; } .comparaison figure { margin: 0; padding: 1.5rem; text-align: center; background: var(--gris-50); border: 1px solid var(--bordure); border-radius: var(--rayon-sm); } .comparaison img { width: 84px; margin: 0 auto .9rem; } .comparaison figcaption { font-family: var(--police-titre); font-weight: 600; color: var(--bleu-700); font-size: .95rem; } /* -------------------------------------------------------------------------- 14. Pied de page -------------------------------------------------------------------------- */ .pied { padding-top: clamp(3rem, 6vw, 4.5rem); background: var(--bleu-900); color: rgba(255, 255, 255, .68); font-size: .92rem; } .pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; } @media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } } .pied__logo { height: 48px; width: auto; margin-bottom: 1rem; } .pied__slogan { font-family: var(--police-titre); font-size: 1rem; color: var(--rouge-400); letter-spacing: .05em; margin-bottom: .75rem; } .pied__texte { font-size: .88rem; line-height: 1.7; } .pied__titre { margin-bottom: 1.1rem; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blanc); } .pied__liste { list-style: none; padding: 0; display: grid; gap: .6rem; } .pied__liste a { color: rgba(255, 255, 255, .68); text-decoration: none; } .pied__liste a:hover { color: var(--blanc); text-decoration: underline; } .pied__liste--contact li { display: flex; align-items: flex-start; gap: .65rem; } .pied__liste--contact .icone { color: var(--rouge-400); margin-top: .2rem; } .pied__urgence { margin-top: 1rem; font-size: .82rem; font-style: italic; color: rgba(255, 255, 255, .5); } .pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-block: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; color: rgba(255, 255, 255, .5); } .pied__bas a { color: rgba(255, 255, 255, .6); } .pied__bas a:hover { color: var(--blanc); } /* -------------------------------------------------------------------------- 15. Bouton d'appel flottant (mobile) -------------------------------------------------------------------------- */ .bouton-flottant { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: none; align-items: center; gap: .5rem; padding: .85rem 1.35rem; border-radius: 999px; background: var(--rouge-600); color: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: .9rem; text-decoration: none; box-shadow: 0 8px 24px rgba(var(--lueur-rvb), .45); } .bouton-flottant:hover { background: var(--rouge-700); color: var(--blanc); } @media (max-width: 1120px) { .bouton-flottant { display: inline-flex; } body { padding-bottom: 4.5rem; } } /* -------------------------------------------------------------------------- 16. Apparition au défilement -------------------------------------------------------------------------- */ .apparait { opacity: 0; transform: translateY(26px); transition: opacity .65s cubic-bezier(.22, .8, .3, 1), transform .65s cubic-bezier(.22, .8, .3, 1); } .apparait.est-visible { opacity: 1; transform: none; } /* Variantes de direction, pour éviter que tout entre de la même façon. */ .apparait--gauche { transform: translateX(-32px); } .apparait--droite { transform: translateX(32px); } .apparait--zoom { transform: scale(.94); } /* Entrée du héros, jouée au chargement plutôt qu'au défilement. */ .heros__logo, .heros h1, .heros__intro, .heros__puces, .heros .groupe-boutons, .heros .note-joindre, .heros__carte { animation: entree-heros .8s cubic-bezier(.22, .8, .3, 1) backwards; } .heros h1 { animation-delay: .10s; } .heros__intro { animation-delay: .18s; } .heros__puces { animation-delay: .26s; } .heros .groupe-boutons { animation-delay: .34s; } .heros .note-joindre { animation-delay: .42s; } .heros__carte { animation-delay: .22s; } @keyframes entree-heros { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* Le logo enchaîne sur sa respiration une fois l'entrée terminée. */ .heros__logo { animation: entree-heros .8s cubic-bezier(.22, .8, .3, 1) backwards, logo-flottant 7s ease-in-out .8s infinite; } /* -------------------------------------------------------------------------- 16 bis. Parallaxe La position est calculée en JavaScript et déposée dans --parallaxe-y. Sans JavaScript, la variable vaut 0 et le motif reste simplement fixe. -------------------------------------------------------------------------- */ /* will-change n'est posé que sur les deux couches réellement déplacées. L'appliquer largement crée autant de textures GPU inutiles. */ .heros::before, .section--fonce::before { will-change: transform; } /* Respect des préférences système : aucune animation ni parallaxe. */ @media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; } .heros__logo, .heros h1, .heros__intro, .heros__puces, .heros .groupe-boutons, .heros .note-joindre, .heros__carte { animation: none; } .heros::before, .section--fonce::before { transform: none !important; will-change: auto; } } /* -------------------------------------------------------------------------- 17. Page 404 -------------------------------------------------------------------------- */ .erreur-404 { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); } .erreur-404__code { font-family: var(--police-titre); font-size: clamp(5rem, 18vw, 10rem); font-weight: 700; line-height: 1; color: var(--bleu-100); } .erreur-404 h1 { margin-top: -1rem; } .erreur-404 p { max-width: 46ch; margin: 1rem auto 0; color: var(--texte-doux); } .erreur-404 .groupe-boutons { justify-content: center; } /* -------------------------------------------------------------------------- 18. Impression -------------------------------------------------------------------------- */ @media print { .barre-info, .entete, .pied, .bouton-flottant, .lien-evitement, .bandeau, .groupe-boutons { display: none !important; } body { color: #000; background: #fff; } .heros { background: none; color: #000; padding-block: 1rem; } .heros h1, .heros__marque { color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } }