/* ------------------------------------------------------------------ JardiPulse — feuille de style du site de l'entreprise. Parti pris : chaud, rond, vivant. La photographie occupe la place, la couleur réchauffe, et les blocs entrent en scène au défilement plutôt que d'être posés là. Peu de texte, beaucoup d'air. Toute animation est annulée si le visiteur a demandé à réduire les animations dans son système : c'est une préférence d'accessibilité, pas une option. Aucune police externe : rien à déclarer côté RGPD, rien à attendre au premier affichage. Les six couleurs viennent des réglages. ------------------------------------------------------------------ */ :root { --vert: #2C5A3E; --vert-clair: #8CBF6A; --accent: #E08A3C; --fond: #FCF8F1; --texte: #23231F; --bandeau: #FFFFFF; --bouton: #2C5A3E; --bouton-texte: #FFFFFF; --bouton2: #E08A3C; --bouton2-texte: #2B1B08; --etoiles: #E8A33D; --logo-hauteur: 54px; --logo-hauteur-mobile: 40px; --papier: #FFFFFF; --creme: #F6EFE2; --surtitre-fond: #E3EFD6; --surtitre-texte: #2C5A3E; --barre-haut: #2C5A3E; --pied-fond: #FFFFFF; --sable: #EFE3D0; --filet: rgba(35, 35, 31, .1); --gris: rgba(35, 35, 31, .62); /* Ombres resserrees. A 34 px de flou, trois cartes cote a cote fusionnaient leurs ombres : le fond paraissait couvert d'un voile gris qu'on prenait pour un arriere-plan. Le flou est ramene a une valeur qui reste sous la carte au lieu de deborder autour. */ --ombre: 0 4px 14px rgba(74, 52, 26, .07); --ombre-forte: 0 14px 32px rgba(74, 52, 26, .13); --r-s: 14px; --r-m: 24px; --r-l: 36px; --titre: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --largeur: 1240px; --gouttiere: 24px; --rythme: clamp(42px, 5vw, 74px); --marge-section: clamp(56px, 6vw, 92px); /* haut ET bas, sans exception */ --courbe: cubic-bezier(.22, .8, .26, 1); } *, *::before, *::after { box-sizing: border-box; } /* Le rectangle bleu que les navigateurs mobiles posent sur tout élément touché. Il n'apporte rien ici : les états de survol et de focus sont déjà traités, et il salit chaque appui. */ a, button, summary, label, input, select, textarea, [role="tab"] { -webkit-tap-highlight-color: transparent; } /* La taille de base est posee ICI, pas sur body : l'unite rem se calcule sur . C'est ce qui permet au confort de lecture d'agrandir tout le site d'un seul reglage. */ html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--sans); font-size: 1rem; line-height: 1.6; overflow-x: hidden; /* garde-fou : un en-tête fixe qui se décale horizontalement signale une page trop large. */ } img { max-width: 100%; height: auto; display: block; } /* Exception a la regle ci-dessus : une icone posee dans un titre reste en ligne, sinon elle se place au-dessus du texte au lieu d'etre a cote. Alignee sur la ligne de base — au milieu, elle flotte au-dessus des lettres au lieu de reposer dessus. */ img.icone-libelle { display: inline-block; vertical-align: baseline; /* La hauteur est imposee par le script, la largeur suit le rapport de l'image : une icone n'est pas forcement carree. */ width: auto; max-width: none; object-fit: contain; } a { color: var(--vert); text-underline-offset: .2em; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; letter-spacing: -.02em; } h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 0 0 .55em; } h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.16; margin: 0 0 .7em; } h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.012em; margin: 0 0 .6em; } h4 { margin: 0 0 .6em; } p { margin: 0 0 1.15em; max-width: 62ch; } ul, ol { margin: 0 0 1.4em; padding-left: 1.3em; } li { margin-bottom: .5em; } /* Un titre qui suit du texte a besoin d'air au-dessus. Sans cette règle, les pages rédigées à la main dans l'éditeur sont tassées : c'est le contenu du client qui décide, pas nous. */ .corps-page h2, .corps-page h3, .banniere ~ * h2 { margin-top: 1.4em; } .corps-page h3 { margin-top: 1.2em; } .corps-page > .conteneur > *:first-child, .section > .conteneur > *:first-child { margin-top: 0; } /* Un titre qui ouvre un conteneur, sans section autour de lui, garde tout de meme sa respiration : c'est le cas des pages redigees a la main. */ .corps-page > .conteneur > h2:first-child { margin-top: .4em; } .corps-page > .conteneur + .conteneur { margin-top: 22px; } .section > .conteneur + .conteneur { margin-top: 24px; } .conteneur { width: min(var(--largeur), 100% - var(--gouttiere) * 2); margin-inline: auto; } .lecture-seule { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--vert); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-s) 0; } .lien-evitement:focus { left: 0; top: 0; } .surtitre { display: inline-flex; align-items: center; gap: 9px; background: var(--surtitre-fond); color: var(--surtitre-texte); border-radius: 999px; padding: 7px 16px; font-size: .82rem; font-weight: 700; margin: 0 0 1em; } .surtitre::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; } .surtitre + h1, .surtitre + h2 { margin-top: .1em; } /* --- Entrée en scène au défilement -------------------------------- Posée par le script : sans JavaScript, tout reste visible. */ .apparait { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--courbe), transform .7s var(--courbe); } .apparait.vu { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .apparait { opacity: 1; transform: none; } } /* --- Bandeau de démonstration ------------------------------------ */ .bandeau-demonstration { background: var(--vert); color: #fff; text-align: center; padding: 9px 16px; font-size: .86rem; } .bandeau-demonstration a { color: #fff; } /* --- En-tête ------------------------------------------------------ */ .entete { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); transition: box-shadow .3s ease; } .entete[data-defile="1"] { box-shadow: 0 6px 24px rgba(74,52,26,.1); } .entete-haut { background: var(--barre-haut); color: rgba(255,255,255,.85); font-size: .85rem; } .entete-haut a { color: #fff; text-decoration: none; } .entete-haut-interieur { display: flex; align-items: center; gap: 20px; min-height: 38px; flex-wrap: wrap; } .entete-telephone { margin-left: auto; font-weight: 700; } .pastille { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: battement 2.6s infinite; } .pastille[data-etat="ouvert"] { color: #B7E88C; } .pastille[data-etat="ferme"] { color: rgba(255,255,255,.72); } .pastille[data-etat="ferme"]::before { animation: none; } .pastille[data-etat="conges"] { color: #F3C888; } @keyframes battement { 0% { box-shadow: 0 0 0 0 rgba(183,232,140,.6); } 70% { box-shadow: 0 0 0 8px rgba(183,232,140,0); } 100% { box-shadow: 0 0 0 0 rgba(183,232,140,0); } } .entete-principal { display: flex; align-items: center; gap: 22px; min-height: 80px; } .marque { display: flex; align-items: center; text-decoration: none; color: inherit; } .marque-logo { height: var(--logo-hauteur); max-height: none; width: auto; object-fit: contain; } .marque-nom { display: block; font-size: 1.26rem; font-weight: 700; letter-spacing: -.02em; } .marque-baseline { display: block; font-size: .78rem; color: var(--gris); } .navigation { margin-left: auto; display: flex; align-items: center; gap: 26px; } .menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .menu a { text-decoration: none; font-size: .95rem; font-weight: 500; padding: 9px 14px; border-radius: 999px; transition: background .18s ease, color .18s ease; } .menu a:hover, .menu a.actif { background: rgba(140,191,106,.2); color: var(--vert); } .bouton-menu { display: none; } /* --- Boutons ------------------------------------------------------ Deux jeux, fond et texte, entièrement pilotés par les réglages : le bouton principal et le bouton d'appel. Aucune couleur en dur — elles l'étaient à sept endroits, d'où l'impression qu'un réglage modifié ne changeait rien, ou seulement la moitié des boutons. */ .bouton { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; background: var(--bouton); color: var(--bouton-texte); text-decoration: none; font-weight: 600; font-size: .97rem; border: 2px solid var(--bouton); transition: transform .2s var(--courbe), box-shadow .2s var(--courbe), filter .2s ease; } .bouton:hover { color: var(--bouton-texte); transform: translateY(-2px); filter: brightness(1.1); box-shadow: var(--ombre); } .bouton-creux { background: transparent; color: var(--texte); border-color: var(--filet); } .bouton-creux:hover { background: var(--bouton); border-color: var(--bouton); color: var(--bouton-texte); filter: none; } /* Bouton d'appel : devis, en-tête, estimateur, bandeaux. */ .bouton-accent, .bouton-entete, .appel-action .bouton, .estimateur .bouton { background: var(--bouton2); border-color: var(--bouton2); color: var(--bouton2-texte); } .bouton-accent:hover, .bouton-entete:hover, .appel-action .bouton:hover, .estimateur .bouton:hover { background: var(--bouton2); border-color: var(--bouton2); color: var(--bouton2-texte); filter: brightness(1.1); } .bouton-blanc { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); color: #fff; backdrop-filter: blur(4px); } .bouton-blanc:hover { background: #fff; color: var(--texte); border-color: #fff; } .bouton-large { padding: 17px 34px; font-size: 1.04rem; } .bouton-entete { padding: 12px 24px; } .lien-fleche { text-decoration: none; font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: 8px; color: var(--vert); } .lien-fleche::after { content: "→"; transition: transform .2s var(--courbe); } .lien-fleche:hover::after { transform: translateX(5px); } /* --- Photo manquante ---------------------------------------------- */ .photo-attente { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; text-align: center; border-radius: var(--r-m); background: linear-gradient(135deg, var(--creme), var(--sable)); color: var(--gris); padding: 24px; } .photo-attente-mention { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .photo-attente-cle { font-size: .88rem; } /* --- Bannière d'accueil ------------------------------------------- Une grande photographie sur toute la largeur, le texte posé dessus. Le voile est un dégradé, pas un aplat : il assombrit le bas, là où se trouve le texte, et laisse respirer le haut de l'image. */ .banniere { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(440px, 68vh, 680px); padding: clamp(40px, 7vw, 90px) 0; color: #fff; overflow: hidden; border-radius: 0 0 var(--r-l) var(--r-l); background: var(--vert); } .banniere-photo { position: absolute; inset: 0; z-index: -2; } .banniere-photo picture { display: block; width: 100%; height: 100%; } .banniere-photo img, .banniere-photo .photo-attente { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto !important; /* la bannière impose sa hauteur */ } .banniere-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20, 34, 24, .88) 0%, rgba(20, 34, 24, .55) 42%, rgba(20, 34, 24, .12) 78%), linear-gradient(100deg, rgba(20, 34, 24, .5), rgba(20, 34, 24, 0) 60%); } .banniere-interieur { position: relative; } .banniere h1 { max-width: 15ch; margin-bottom: .4em; text-shadow: 0 2px 30px rgba(0, 0, 0, .3); } .banniere h1 em { font-style: normal; color: var(--vert-clair); } .banniere-chapo { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; color: rgba(255,255,255,.9); max-width: 44ch; margin-bottom: 0; } .banniere-boutons { display: flex; gap: 14px; flex-wrap: wrap; margin: 34px 0 26px; } .banniere-avis { display: flex; align-items: center; gap: 10px; font-size: .94rem; color: rgba(255,255,255,.88); margin: 0; } .surtitre-clair { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(4px); } /* Le bandeau de chiffres chevauche le bas de la bannière. */ .bandeau-chiffres { position: relative; z-index: 2; margin-top: -46px; margin-bottom: 12px; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--filet); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--ombre-forte); } .bandeau-chiffres div { background: var(--papier); padding: 24px 26px; } .bandeau-chiffres strong { display: block; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1; letter-spacing: -.025em; color: var(--vert); } .bandeau-chiffres span { font-size: .9rem; color: var(--gris); } /* --- Bandeau défilant des communes -------------------------------- */ .defilant { overflow: hidden; padding: 16px 0; background: var(--vert); color: rgba(255,255,255,.9); } .defilant-piste { display: flex; gap: 40px; width: max-content; animation: defile 34s linear infinite; } .defilant:hover .defilant-piste { animation-play-state: paused; } .defilant span { font-size: .95rem; white-space: nowrap; display: flex; align-items: center; gap: 40px; } .defilant span::after { content: "•"; color: var(--vert-clair); } @keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Rythme des pages --------------------------------------------- */ .contenu { min-height: 40vh; } .section { /* Meme marge en haut qu'en bas, partout dans le site. Les valeurs dissymetriques d'avant se voyaient des que deux sections se suivaient. */ padding: var(--marge-section) 0; position: relative; } /* Le premier conteneur d'une section porte le surtitre et le titre : on l'écarte de la grille qui suit. */ .section > .conteneur:first-child { margin-bottom: 26px; } .section > .conteneur:first-child > *:last-child { margin-bottom: 0; } .section-papier { background: var(--papier); border-radius: var(--r-l); } .section-creme { background: linear-gradient(160deg, var(--creme), var(--fond)); } .entete-page { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(220px, 32vh, 340px); padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 3.4vw, 46px); color: #fff; background: var(--vert); border-radius: 0 0 var(--r-l) var(--r-l); } .entete-page-photo { position: absolute; inset: 0; z-index: -2; } .entete-page-photo picture { display: block; height: 100%; } .entete-page-photo img, .entete-page-photo .photo-attente { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto !important; } .entete-page-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18, 30, 22, .86) 0%, rgba(18, 30, 22, .5) 55%, rgba(18, 30, 22, .2) 100%); } .entete-page-interieur { position: relative; } .entete-page h1 { margin: 0; max-width: 16ch; text-shadow: 0 2px 26px rgba(0,0,0,.3); } .entete-page a { color: rgba(255,255,255,.86); } .entete-page .fil { color: rgba(255,255,255,.8); } .corps-page { padding: clamp(30px, 4vw, 52px) 0 var(--rythme); } .corps-page > *:not(section):not(.pleine-largeur) { width: min(var(--largeur), 100% - var(--gouttiere) * 2); margin-inline: auto; } .page-accueil .corps-page { padding: 0; } .note { font-size: .9rem; color: var(--gris); max-width: 100%; } .precision { display: block; font-size: .85rem; color: var(--gris); font-weight: 400; } .avertissement { background: rgba(140,191,106,.14); border-radius: var(--r-m); padding: 18px 22px; max-width: 60ch; } /* --- Prestations -------------------------------------------------- Une règle de grille ne s'applique qu'aux enfants directs et n'annule pas un nombre de colonnes déjà déclaré : ne pas en empiler deux. */ .carte-prestation { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; } @media (max-width: 1080px) { .carte-prestation { flex-basis: calc((100% - 22px) / 2); } } @media (max-width: 620px) { .carte-prestation { flex-basis: 88%; } } .carte-prestation { border-radius: var(--r-m); overflow: hidden; background: var(--papier); box-shadow: var(--ombre); transition: transform .3s var(--courbe), box-shadow .3s var(--courbe); display: flex; } .carte-prestation:hover { transform: translateY(-7px); box-shadow: var(--ombre-forte); } .carte-prestation a { display: flex; flex-direction: column; text-decoration: none; color: inherit; width: 100%; } .carte-prestation-photo { display: block; overflow: hidden; position: relative; } /* Une balise ne se comporte pas comme une image : sans display block, elle laisse un blanc sous la photo et les cartes se décalent. */ .carte-prestation-photo picture, .carte-chantier-image picture, .bloc-zone-image picture, .illustration picture { display: block; } .carte-prestation-photo img, .carte-prestation-photo .photo-attente { width: 100%; aspect-ratio: 4 / 3 !important; object-fit: cover; transition: transform .7s var(--courbe); border-radius: 0; } .carte-prestation:hover .carte-prestation-photo img { transform: scale(1.07); } .carte-prestation-photo .numero { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.92); color: var(--vert); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; } .carte-prestation-corps { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; } .carte-prestation-titre { display: block; font-size: 1.24rem; font-weight: 700; letter-spacing: -.018em; margin-bottom: .3em; } .carte-prestation-liste { display: block; color: var(--gris); font-size: .93rem; margin-bottom: .9em; } /* Le prix est chassé en bas : sans cela, une carte au libellé plus court remonte son prix et la rangée paraît de travers. */ .carte-prestation-prix { margin-top: auto; align-self: flex-start; } .carte-prestation-prix { display: inline-block; background: rgba(224,138,60,.16); color: #8A4A11; border-radius: 999px; padding: 5px 14px; font-size: .88rem; font-weight: 700; } /* --- Tarifs ------------------------------------------------------- */ .titre-famille { display: flex; align-items: center; gap: 12px; margin: 44px 0 14px; } .titre-famille .numero { background: var(--vert); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; } .tableau-tarifs { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--papier); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--ombre); } .tableau-tarifs th { text-align: left; font-weight: 600; padding: 15px 22px; border-bottom: 1px solid var(--filet); } .tableau-tarifs td { text-align: right; padding: 15px 22px; border-bottom: 1px solid var(--filet); white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--vert); } .tableau-tarifs tr:last-child th, .tableau-tarifs tr:last-child td { border-bottom: 0; } .tableau-tarifs tr:hover th, .tableau-tarifs tr:hover td { background: rgba(140,191,106,.09); } /* --- Estimateur --------------------------------------------------- Une photographie sous un voile dense plutot qu'un aplat vert, et un resultat en blanc : le montant s'ecrivait dans la couleur d'accent, qui se confondait avec le fond des que le client la changeait. */ .estimateur { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-l); margin: 30px 0; color: #fff; padding: clamp(28px, 3.6vw, 48px); background: var(--vert); box-shadow: var(--ombre-forte); } .estimateur-photo { position: absolute; inset: 0; z-index: -2; } .estimateur-photo picture { display: block; height: 100%; } .estimateur-photo img, .estimateur-photo .photo-attente { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto !important; } .estimateur-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(12, 30, 20, .94) 0%, rgba(12, 30, 20, .82) 55%, rgba(12, 30, 20, .62) 100%); } .estimateur-corps { position: relative; } .estimateur h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .8em; } .estimateur-champs { /* Deux colonnes de meme largeur : un menu deroulant plus etroit que le champ voisin se voit immediatement. */ display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 260px)); margin-bottom: 22px; } .estimateur-champs label { display: flex; flex-direction: column; gap: 9px; font-size: .84rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.82); } .estimateur-champs select, .estimateur-champs input { /* Meme hauteur, meme largeur, meme arrondi : appearance:none neutralise le rendu natif du menu deroulant, qui impose sinon ses propres dimensions. La fleche est redessinee juste apres. */ appearance: none; -webkit-appearance: none; width: 100%; height: 54px; box-sizing: border-box; border: 0; border-radius: 999px; padding: 0 22px; font-size: 1.02rem; color: var(--texte); background: #fff; } /* Le champ numerique affiche encore les fleches de reglage du navigateur : appearance:none sur l'element ne suffit pas, Safari et Chrome les dessinent dans des pseudo-elements a part. Sans cela, les deux champs n'ont pas la meme silhouette — l'un finit par un chevron, l'autre par un compteur. */ .estimateur-champs input[type="number"] { -moz-appearance: textfield; } .estimateur-champs input[type="number"]::-webkit-outer-spin-button, .estimateur-champs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .estimateur-champs select { padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5A3E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 16px; } @media (max-width: 620px) { .estimateur-champs { grid-template-columns: 1fr; } } /* Le resultat : blanc, en grand, souligne d'un filet. Lisible quelles que soient les couleurs choisies par le client. */ .estimateur-resultat { display: inline-block; margin: 4px 0 18px; padding-bottom: 10px; font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: #fff; border-bottom: 3px solid var(--vert-clair); } .estimateur-resultat:empty { display: none; } .estimateur .note { color: rgba(255,255,255,.78); max-width: 56ch; } .estimateur .note strong { color: #fff; } .estimateur .bouton { margin-top: 14px; } /* --- Formulaires --------------------------------------------------- */ input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], select, textarea { font: inherit; font-size: 1rem; padding: 13px 16px; width: 100%; background: var(--papier); color: var(--texte); border: 1px solid var(--filet); border-radius: var(--r-s); transition: border-color .18s ease, box-shadow .18s ease; } input:focus, select:focus, textarea:focus { border-color: var(--vert-clair); box-shadow: 0 0 0 4px rgba(140,191,106,.22); outline: none; } /* Les menus deroulants du site : fleche redessinee, avec de la marge a droite. Le rendu natif la colle au bord du cadre. */ select { appearance: none; -webkit-appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5A3E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 15px; } /* Le champ numerique perd ses fleches de reglage partout, pas seulement dans l'estimateur. */ input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .formulaire-devis { max-width: 780px; margin-top: 26px; background: var(--papier); border-radius: var(--r-l); padding: clamp(24px, 4vw, 40px); box-shadow: var(--ombre); } .formulaire-devis label { display: block; margin-bottom: 18px; font-size: .88rem; font-weight: 600; } .formulaire-devis input, .formulaire-devis select, .formulaire-devis textarea { margin-top: 7px; font-weight: 400; } .champs-deux { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .champs-trois { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } .obligatoire { color: var(--accent); } .facultatif { font-weight: 400; color: var(--gris); } .champ-piege { position: absolute; left: -9999px; } .message-zone[hidden] { display: none; } .message-zone { display: block; margin-top: 8px; font-weight: 500; color: #8A4A11; background: rgba(224,138,60,.16); padding: 10px 14px; border-radius: var(--r-s); font-size: .9rem; } .mention-donnees { font-size: .87rem; color: var(--gris); } .champ-photos { margin: 24px 0; padding: 20px; border: 2px dashed rgba(140,191,106,.5); border-radius: var(--r-m); background: rgba(140,191,106,.06); } .apercu-photos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .apercu-photos img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--r-s); } .retour-formulaire { margin-top: 16px; font-weight: 600; } .retour-formulaire[data-etat="succes"] { color: var(--vert); } .retour-formulaire[data-etat="erreur"] { color: #A2402A; } /* --- Réalisations ------------------------------------------------- */ .filtres { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; } .filtre { font: inherit; font-size: .92rem; cursor: pointer; padding: 9px 20px; background: var(--papier); color: var(--texte); border: 1px solid var(--filet); border-radius: 999px; transition: all .2s var(--courbe); } .filtre:hover { border-color: var(--vert-clair); transform: translateY(-2px); } .filtre.actif { background: var(--vert); border-color: var(--vert); color: #fff; } .grille-chantiers { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); align-items: stretch; } .carte-chantier { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--papier); box-shadow: var(--ombre); transition: transform .3s var(--courbe), box-shadow .3s var(--courbe); } .carte-chantier:hover { transform: translateY(-7px); box-shadow: var(--ombre-forte); } .carte-chantier { display: flex; flex-direction: column; } .carte-chantier a { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } .carte-chantier-corps { flex: 1; } .carte-chantier-image { display: block; overflow: hidden; } .carte-chantier-image img, .carte-chantier-image .photo-attente { width: 100%; aspect-ratio: 3 / 2 !important; object-fit: cover; transition: transform .7s var(--courbe); border-radius: 0; } .carte-chantier a:hover .carte-chantier-image img { transform: scale(1.06); } .carte-chantier-corps { display: block; padding: 18px 22px 22px; } .carte-chantier-titre { display: block; font-size: 1.14rem; font-weight: 700; letter-spacing: -.015em; } .carte-chantier-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 7px; font-size: .86rem; color: var(--gris); } .carte-chantier[hidden] { display: none; } .badge-comparateur { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.94); color: var(--vert); padding: 6px 14px; border-radius: 999px; font-size: .76rem; font-weight: 700; } /* --- Comparateur avant / après ------------------------------------ Masquage par DÉCOUPAGE de l'image du dessus, jamais par opacity : opacity agit sur l'élément entier, et une image ainsi masquée reste cliquable et lisible par les lecteurs d'écran. */ /* Rapport imposé : trois photos de proportions différentes donnaient trois cartes de hauteurs différentes, et la rangée partait de travers. */ .comparateur { position: relative; overflow: hidden; user-select: none; background: var(--creme); aspect-ratio: 3 / 2; } .comparateur > img, .comparateur picture img { width: 100%; height: 100%; object-fit: cover; display: block; } .comparateur-avant { position: absolute; inset: 0 auto 0 0; overflow: hidden; } .comparateur-avant img { width: auto; height: 100%; max-width: none; object-fit: cover; } .comparateur-avant picture { display: block; height: 100%; } .comparateur-etiquette { position: absolute; bottom: 16px; z-index: 3; background: rgba(35,35,31,.76); color: #fff; backdrop-filter: blur(4px); padding: 6px 14px; border-radius: 999px; font-size: .76rem; font-weight: 700; } .comparateur-etiquette-avant { left: 16px; } .comparateur-etiquette-apres { right: 16px; } .comparateur-poignee { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; left: 50%; z-index: 4; pointer-events: none; box-shadow: 0 0 14px rgba(0,0,0,.3); } .comparateur-poignee::after { content: "⇄"; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; background: #fff; color: var(--vert); border-radius: 50%; font-size: 1.1rem; box-shadow: var(--ombre); } .comparateur-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 5; } .chantier-image { width: 100%; border-radius: var(--r-m); } .chantier-meta { display: flex; gap: 6px 22px; flex-wrap: wrap; list-style: none; padding: 0; margin: 14px 0 0; color: rgba(255,255,255,.86); font-size: .92rem; } .chantier-prestations { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; } .etiquette { background: rgba(140,191,106,.18); color: var(--vert); padding: 6px 15px; border-radius: 999px; font-size: .84rem; font-weight: 600; } .fil { font-size: .88rem; margin-bottom: .6em; } /* --- Zone d'intervention ------------------------------------------ */ .bloc-zone { display: grid; gap: clamp(26px, 4vw, 52px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; } .bloc-zone-image { position: relative; } .bloc-zone-image img, .bloc-zone-image .photo-attente { width: 100%; aspect-ratio: 4 / 3 !important; object-fit: cover; border-radius: var(--r-l) 90px var(--r-l) var(--r-l); box-shadow: var(--ombre); } .bloc-zone-pastille { position: absolute; left: -18px; bottom: 24px; background: var(--papier); border-radius: var(--r-m); padding: 16px 22px; box-shadow: var(--ombre-forte); font-size: .88rem; line-height: 1.3; } .bloc-zone-pastille strong { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -.025em; color: var(--vert); } .liste-communes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); align-items: stretch; list-style: none; padding: 0; margin: 22px 0; } .liste-communes li { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 46px; background: var(--papier); border-radius: 999px; padding: 8px 14px; font-size: .9rem; line-height: 1.2; box-shadow: 0 3px 10px rgba(74,52,26,.05); } /* --- Saisons : quatre cartes, l'année d'un coup d'œil --------------- */ .bloc-saisons { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; } .carte-saison { position: relative; background: var(--papier); border-radius: var(--r-m); padding: 26px 24px 28px; box-shadow: var(--ombre); border-top: 5px solid var(--vert-clair); transition: transform .3s var(--courbe), box-shadow .3s var(--courbe); } .carte-saison:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); } .carte-saison-printemps { border-top-color: #8CBF6A; } .carte-saison-ete { border-top-color: #E0B23C; } .carte-saison-automne { border-top-color: #D07A3A; } .carte-saison-hiver { border-top-color: #7A9AA8; } .carte-saison-courante { box-shadow: 0 0 0 2px var(--vert), var(--ombre); } .carte-saison-marque { position: absolute; top: -13px; right: 18px; background: var(--vert); color: #fff; border-radius: 999px; padding: 5px 14px; font-size: .74rem; font-weight: 700; } .carte-saison h3 { margin-bottom: .1em; } .carte-saison-mois { color: var(--gris); font-size: .88rem; margin-bottom: 1.1em; } .carte-saison ul { margin: 0; padding: 0; list-style: none; font-size: .94rem; } .carte-saison li { padding: 9px 0 9px 20px; position: relative; border-top: 1px solid var(--filet); } .carte-saison li:first-child { border-top: 0; } .carte-saison li::before { content: ""; position: absolute; left: 0; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--vert-clair); } /* --- Questions en accordéon --------------------------------------- */ .question { background: var(--papier); border-radius: var(--r-m); margin-bottom: 12px; box-shadow: 0 4px 14px rgba(74,52,26,.05); overflow: hidden; } .question summary { cursor: pointer; padding: 20px 24px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .question summary::-webkit-details-marker { display: none; } .question summary::after { content: "+"; font-size: 1.5rem; color: var(--vert); transition: transform .25s var(--courbe); line-height: 1; } .question[open] summary::after { transform: rotate(45deg); } .question p { padding: 0 24px 22px; margin: 0; color: var(--gris); max-width: 70ch; } /* --- Horaires ------------------------------------------------------ Le jour courant est surligne : sept lignes identiques obligent le visiteur a chercher ou il en est. */ .bloc-horaires { background: var(--papier); border-radius: var(--r-m); box-shadow: var(--ombre); overflow: hidden; } .bloc-horaires-entete { padding: 16px 22px; background: var(--vert); color: #fff; } .bloc-horaires-entete .pastille { font-size: .95rem; font-weight: 600; } .tableau-horaires { border-collapse: collapse; width: 100%; } .tableau-horaires th { text-align: left; font-weight: 500; padding: 13px 22px; border-bottom: 1px solid var(--filet); } .tableau-horaires td { padding: 13px 22px; text-align: right; border-bottom: 1px solid var(--filet); font-variant-numeric: tabular-nums; } .tableau-horaires tr:last-child th, .tableau-horaires tr:last-child td { border-bottom: 0; } /* Le jour courant en vert, sans etiquette : la couleur le dit deja. */ .tableau-horaires .jour-courant th, .tableau-horaires .jour-courant td { color: var(--vert); font-weight: 700; } .tableau-horaires .jour-courant .ferme { color: var(--vert); } .tableau-horaires .ferme { color: var(--gris); } /* --- Coordonnees ---------------------------------------------------- */ .bloc-coordonnees { background: var(--papier); border-radius: var(--r-m); padding: 24px 28px; box-shadow: var(--ombre); display: block; width: 100%; max-width: 420px; } /* --- Mentions administratives --------------------------------------- Sobres : pas de carte, pas de lisere colore, pas de petites capitales. Ces ornements sonnaient faux sur une information administrative, qui se presente comme telle : un intitule, une valeur, un filet entre les deux. */ .mentions { margin: 0; } .mention { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%); gap: 0 24px; padding: 15px 0; border-bottom: 1px solid var(--filet); } .mention:first-child { border-top: 1px solid var(--filet); } .mention dt { font-weight: 600; font-size: .95rem; } .mention dd { margin: 0; font-size: .95rem; color: var(--gris); word-break: break-word; } @media (max-width: 520px) { .mention { grid-template-columns: 1fr; gap: 4px; } } .liste-mentions { list-style: none; padding: 0; font-size: .92rem; } .liste-mentions li { padding: 11px 0; border-bottom: 1px solid var(--filet); } .etoiles { letter-spacing: .06em; } .bloc-avis { display: flex; align-items: center; gap: 10px; } .illustration { margin: 0 0 30px; } .illustration img { width: 100%; border-radius: var(--r-l); box-shadow: var(--ombre); } .illustration figcaption { margin-top: 10px; font-size: .86rem; color: var(--gris); } /* --- Appel à l'action et pied ------------------------------------- */ .appel-action { position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center; padding: clamp(54px, 7vw, 96px) 0; background: var(--vert); } .appel-action-photo { position: absolute; inset: 0; z-index: -2; } .appel-action-photo picture { display: block; height: 100%; } .appel-action-photo img, .appel-action-photo .photo-attente { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto !important; } .appel-action-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(16, 32, 22, .9) 0%, rgba(16, 32, 22, .66) 55%, rgba(16, 32, 22, .8) 100%); } .appel-action h2 { text-shadow: 0 2px 24px rgba(0,0,0,.25); } .appel-action .conteneur { position: relative; z-index: 1; } .appel-action h2 { margin-bottom: .2em; } .appel-action p { margin-inline: auto; color: rgba(255,255,255,.85); } .appel-action-boutons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } .appel-action .bouton-creux, .banniere .bouton-creux { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .appel-action .bouton-creux:hover { background: #fff; color: var(--vert); border-color: #fff; } .pied { background: var(--pied-fond); padding: var(--rythme) 0 22px; font-size: .93rem; } .pied-colonnes { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .pied h3 { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 1.2em; } .pied a { text-decoration: none; } .pied a:hover { text-decoration: underline; } .pied-liens { list-style: none; padding: 0; margin: 0; } .pied-liens li { padding: 5px 0; } .pied-communes { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--filet); font-size: .86rem; color: var(--gris); } .pied-communes p { max-width: none; } .pied-bas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); font-size: .84rem; color: var(--gris); } .pied-bas p { margin: 0; } /* --- Barre d'appel sur téléphone ---------------------------------- */ .barre-mobile { display: none; } @media (max-width: 780px) { .barre-mobile { position: fixed; left: 12px; right: 12px; z-index: 60; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-radius: 999px; padding: 7px; box-shadow: var(--ombre-forte); } .barre-mobile a { padding: 13px 10px; text-align: center; font-weight: 700; font-size: .93rem; text-decoration: none; border-radius: 999px; color: var(--vert); } .barre-mobile a + a { background: var(--bouton2); color: var(--bouton2-texte); } body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } /* Menu ouvert : la barre s'efface. Elle est en position fixe avec un z-index de 60, supérieur à celui de l'en-tête (50) : elle passait donc par-dessus les dernières entrées du menu, qui devenaient inaccessibles au doigt. */ .barre-mobile { transition: transform .26s var(--courbe), opacity .2s ease; } body.menu-ouvert .barre-mobile { transform: translateY(160%); opacity: 0; pointer-events: none; } } /* --- Téléphones et tablettes -------------------------------------- */ @media (max-width: 980px) { .banniere { min-height: clamp(400px, 62vh, 520px); } .banniere h1 { max-width: none; } .bandeau-chiffres { margin-top: -30px; } } @media (max-width: 900px) { /* Trois barres qui se replient en croix. Pas de cadre : un bouton de menu encadré alourdit l'en-tête sans rien apporter. */ .bouton-menu { position: relative; display: block; margin-left: auto; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--texte); } .bouton-menu span { position: absolute; left: 11px; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .32s var(--courbe), opacity .18s ease, top .32s var(--courbe); } .bouton-menu span:nth-child(1) { top: 15px; } .bouton-menu span:nth-child(2) { top: 21px; } .bouton-menu span:nth-child(3) { top: 27px; } .bouton-menu[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); } .bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); } .bouton-menu[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); } .navigation { /* Collé au bandeau, sur toute la largeur : un panneau flottant à douze pixels du bord donnait l'impression d'un menu détaché. */ position: absolute; top: 100%; left: 0; right: 0; background: var(--papier); border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: 0 18px 40px rgba(74,52,26,.16); border-top: 1px solid var(--filet); flex-direction: column; align-items: stretch; gap: 0; padding: 14px 16px 20px; /* Toujours dans le flux, mais replié : une transition ne part pas de display none, et un menu qui surgit sans transition fait bricolage. */ opacity: 0; visibility: hidden; transform: translateY(-8px); transform-origin: top center; pointer-events: none; transition: opacity .22s var(--courbe), transform .3s var(--courbe), visibility .3s; /* La hauteur disponible tient compte du bandeau supérieur et laisse une marge en bas : un menu qui touche le bord de l'écran est inconfortable, et sur iPhone la barre d'accueil le recouvre. */ /* Garde-fou : la hauteur exacte est calculee par le script, qui mesure la place reellement disponible. Un calc(100vh - 100%) ne fonctionnait pas — dans un calc, 100% se resout sur la hauteur du parent, pas sur celle de l'ecran. */ /* Garde-fou : la hauteur exacte est posee par le script, qui mesure la place reellement disponible. */ max-height: 80vh; overflow: hidden; /* c'est la liste qui defile, pas le panneau */ padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .navigation[data-ouvert="1"] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* Seule la liste defile : les commandes restent en haut, le bouton de devis en bas, et aucun lien ne passe derriere l'un ou l'autre. */ .menu { flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-block: 4px; } .menu a { display: block; padding: 13px 16px; } /* Les entrées arrivent l'une après l'autre. */ .navigation[data-ouvert="1"] .menu li { animation: entre .34s var(--courbe) backwards; } .navigation[data-ouvert="1"] .menu li:nth-child(2) { animation-delay: .04s; } .navigation[data-ouvert="1"] .menu li:nth-child(3) { animation-delay: .08s; } .navigation[data-ouvert="1"] .menu li:nth-child(4) { animation-delay: .12s; } .navigation[data-ouvert="1"] .menu li:nth-child(5) { animation-delay: .16s; } .navigation[data-ouvert="1"] .menu li:nth-child(6) { animation-delay: .2s; } .navigation[data-ouvert="1"] .menu li:nth-child(7) { animation-delay: .24s; } body.menu-ouvert { overflow: hidden; } .bouton-entete { margin-top: 14px; justify-content: center; } .entete-horaires { display: none; } /* Opaque sur téléphone : le flou laissait transparaître la page et grisait le bandeau dès l'ouverture du menu. */ .entete { background: var(--bandeau); backdrop-filter: none; } .navigation { background: var(--bandeau); } .marque-logo { height: var(--logo-hauteur-mobile); } .pied-logo { height: var(--logo-hauteur-mobile); } /* Défilement fluide sur iOS : sans cela, les zones en position fixe saccadent au scroll. */ .entete { will-change: box-shadow; } .carrousel-piste { scroll-padding-inline: var(--gouttiere); } } @media (max-width: 560px) { html { font-size: 16px; } :root { --r-l: 24px; --r-m: 18px; } .comparateur-etiquette { font-size: .7rem; padding: 5px 11px; } .comparateur-poignee::after { width: 38px; height: 38px; } .estimateur-champs select, .estimateur-champs input { min-width: 0; width: 100%; } .estimateur-champs label { width: 100%; } .banniere { min-height: 420px; border-radius: 0 0 var(--r-m) var(--r-m); } .banniere-boutons .bouton { width: 100%; justify-content: center; } .bandeau-chiffres { margin-top: -20px; } } @media print { .entete, .pied, .appel-action, .bandeau-demonstration, .bouton, .barre-mobile, .defilant { display: none; } } /* --- Bannière sans photographie ------------------------------------ Le fond vert suffit à tenir la page : on n'affiche ni voile inutile, ni bloc « photo à venir » en pleine largeur. */ .banniere-sans-photo .banniere-photo, .banniere-sans-photo .banniere-voile { display: none; } .banniere-sans-photo { background: linear-gradient(140deg, var(--vert) 0%, #3B7550 100%); } /* --- Mosaïque de chantiers ----------------------------------------- Une grande case et quatre petites. Les rapports sont imposés, sinon des photos de proportions différentes déforment toute la grille. */ .mosaique { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); } .mosaique-case { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-m); } .mosaique-case:first-child { grid-column: span 2; grid-row: span 2; } .mosaique-case img, .mosaique-case .photo-attente { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .mosaique-case picture { display: block; height: 100%; } .mosaique-case figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 22px 18px; color: #fff; font-size: .9rem; font-weight: 600; background: linear-gradient(to top, rgba(20,34,24,.8), rgba(20,34,24,0)); } .mosaique-case img { transition: transform .7s var(--courbe); } .mosaique-case:hover img { transform: scale(1.06); } @media (max-width: 820px) { .mosaique { grid-template-columns: repeat(2, 1fr); } .mosaique-case:first-child { grid-column: span 2; grid-row: span 1; } } /* --- Bande photo avec avis client ---------------------------------- */ .temoignage { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 6vw, 84px) 0; margin: var(--rythme) 0; border-radius: var(--r-l); color: #fff; text-align: center; background: var(--vert); } .temoignage-photo { position: absolute; inset: 0; z-index: -2; } .temoignage-photo picture { display: block; height: 100%; } .temoignage-photo img, .temoignage-photo .photo-attente { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto !important; } .temoignage-voile { position: absolute; inset: 0; z-index: -1; background: rgba(20, 34, 24, .72); } .temoignage-interieur { position: relative; } .temoignage-auteur, .temoignage blockquote { margin-inline: auto; } .temoignage blockquote { margin: 18px auto 14px; max-width: 30ch; font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.34; letter-spacing: -.02em; } .temoignage .etoiles { font-size: 1.25rem; } .temoignage-auteur { color: rgba(255,255,255,.82); font-size: .95rem; margin: 0 auto; } /* --- Présentation : photo haute et points forts --------------------- */ .presentation { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; } .presentation-photo img, .presentation-photo .photo-attente { width: 100%; aspect-ratio: 4 / 5 !important; object-fit: cover; border-radius: var(--r-l) var(--r-l) 90px var(--r-l); box-shadow: var(--ombre-forte); } .presentation-photo picture { display: block; } .presentation-points { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; } .presentation-points li { position: relative; padding-left: 34px; } .presentation-points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(140,191,106,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5A3E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; } .presentation-points strong { display: block; } .presentation-points span { color: var(--gris); font-size: .94rem; } @media (max-width: 900px) { .presentation { grid-template-columns: 1fr; } .presentation-photo img, .presentation-photo .photo-attente { aspect-ratio: 4 / 3 !important; border-radius: var(--r-m); } } /* --- Carrousels ----------------------------------------------------- Le défilement est natif et aligné au pas des cartes : la molette, le doigt et le clavier fonctionnent sans script. Cinq cartes ne tombent jamais juste dans une grille ; dans un carrousel, la question ne se pose plus. */ .carrousel { position: relative; } .carrousel-piste { background: transparent; display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 10px; scrollbar-width: none; /* la barre est remplacée par les points */ -ms-overflow-style: none; } .carrousel-piste::-webkit-scrollbar { display: none; } .carrousel-piste:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--r-m); } .carrousel-commandes { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; } .carrousel-immobile .carrousel-commandes { display: none; } .carrousel-fleche { width: 46px; height: 46px; border-radius: 50%; cursor: pointer; background: var(--papier); border: 1px solid var(--filet); color: var(--vert); display: flex; align-items: center; justify-content: center; box-shadow: var(--ombre); transition: transform .2s var(--courbe), opacity .2s ease; } .carrousel-fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .carrousel-fleche:hover:not(:disabled) { transform: scale(1.08); } .carrousel-fleche:disabled { opacity: .32; cursor: default; box-shadow: none; } .carrousel-points { display: flex; gap: 8px; } .carrousel-point { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(35,35,31,.2); cursor: pointer; transition: all .2s var(--courbe); } .carrousel-point.actif { background: var(--vert); width: 26px; border-radius: 999px; } /* --- Avis clients --------------------------------------------------- Le titre reprend la note et le nombre d'avis : c'est la première chose qu'un visiteur retient, elle doit être lisible sans compter les étoiles. Repris du thème vétérinaire : un encadré de note, puis des cartes blanches bordées. Étoiles en haut, avis, auteur en bas. Pas de fond coloré derrière — c'est l'avis qu'on doit lire, pas le décor. */ .avis-resume { display: inline-flex; align-items: center; gap: 20px; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r-m); padding: 20px 28px; margin-bottom: 26px; } .avis-chiffre { font-size: 2.8rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; margin: 0; } .avis-resume .etoiles { font-size: 1.1rem; } .avis-nombre { color: var(--gris); font-size: .9rem; margin: 4px 0 0; } .avis-resume .lien-fleche { margin-left: 12px; } .avis-carte { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r-m); padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px; } .avis-carte .etoiles { font-size: 1.02rem; } .avis-texte { margin: 0; font-size: .97rem; line-height: 1.6; } .avis-auteur { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 6px; } .avis-initiale { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--creme); color: var(--vert); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .88rem; letter-spacing: .02em; } .avis-auteur strong { display: block; font-size: .96rem; } .avis-date { font-size: .85rem; color: var(--gris); } @media (max-width: 1080px) { .avis-carte { flex-basis: calc((100% - 22px) / 2); } } @media (max-width: 620px) { .avis-carte { flex-basis: 88%; } .avis-resume { display: flex; width: 100%; flex-wrap: wrap; gap: 14px; padding: 18px 20px; } .avis-resume .lien-fleche { margin-left: 0; width: 100%; } } /* --- Note réservée à l'administrateur -------------------------------- Sans cadre ni libellé, elle passait pour du texte du site. */ .note-admin { margin: 34px 0 0; padding: 14px 18px; max-width: none; background: rgba(224,138,60,.1); border: 1px dashed rgba(224,138,60,.5); border-radius: var(--r-s); font-size: .88rem; color: #7A4512; } .note-admin strong { color: #6A3C0F; } /* --- Finitions ------------------------------------------------------ Quelques détails qui font la différence entre « propre » et « soigné » : un filet coloré sous les titres de section, des coins organiques sur les photos, un fond légèrement travaillé plutôt qu'un aplat. */ .section-creme { background: radial-gradient(120% 80% at 0% 0%, rgba(140,191,106,.16), transparent 55%), radial-gradient(100% 70% at 100% 100%, rgba(224,138,60,.12), transparent 60%), linear-gradient(160deg, var(--creme), var(--fond)); } .section > .conteneur:first-child h2 { position: relative; padding-bottom: 18px; } .section > .conteneur:first-child h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--vert-clair), var(--accent)); } /* Coins organiques : une seule angle adouci, jamais les quatre. */ .carte-prestation { border-radius: var(--r-m) var(--r-m) var(--r-m) 34px; } .carte-chantier { border-radius: 34px var(--r-m) var(--r-m) var(--r-m); } .mosaique-case:first-child { border-radius: var(--r-l) var(--r-m) var(--r-m) 70px; } /* Le bandeau des communes reçoit une feuille en filigrane. */ .defilant { position: relative; } .defilant::before, .defilant::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } .defilant::before { left: 0; background: linear-gradient(90deg, var(--vert), transparent); } .defilant::after { right: 0; background: linear-gradient(270deg, var(--vert), transparent); } /* Les photos s'éclaircissent doucement au survol des cartes. */ .carte-prestation-photo::after, .carte-chantier-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(20,34,24,.22), transparent 45%); opacity: .75; transition: opacity .3s ease; } .carte-chantier-image { position: relative; } .carte-prestation:hover .carte-prestation-photo::after, .carte-chantier:hover .carte-chantier-image::after { opacity: .3; } /* Le bouton principal reçoit un léger halo au survol. */ /* --- Responsive : les débordements repérés en navigateur ------------- Sur un site où tout est en pleine largeur, c'est toujours le même coupable : un élément qui refuse de rétrécir. On les traite un par un plutôt que de masquer le dépassement. */ .tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-m); } .tableau-defilant .tableau-tarifs { min-width: 460px; } .bloc-coordonnees { display: block; width: 100%; max-width: 420px; } .formulaire-devis, .estimateur, .avis-carte, .carte-prestation { min-width: 0; } .carrousel-piste > * { min-width: 0; } .mosaique-case figcaption { word-break: break-word; } .comparateur-curseur { touch-action: pan-y; } /* le doigt fait défiler la page */ @media (max-width: 700px) { .bloc-zone-pastille { left: 12px; bottom: 12px; padding: 12px 18px; } .bloc-zone-pastille strong { font-size: 1.4rem; } .presentation-photo img, .presentation-photo .photo-attente { border-radius: var(--r-m); } .temoignage { border-radius: var(--r-m); margin-inline: 0; } .entete-page { min-height: 190px; border-radius: 0 0 var(--r-m) var(--r-m); } .section-papier { border-radius: var(--r-m); } .illustration img { border-radius: var(--r-m); } .liste-communes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .champs-deux, .champs-trois { grid-template-columns: 1fr; } .appel-action-boutons .bouton { width: 100%; justify-content: center; } } @media (max-width: 620px) { /* Le tableau des tarifs s'empile au lieu de défiler latéralement : on lit la prestation, puis son prix, sans rien faire glisser. */ .tableau-defilant { overflow: visible; } .tableau-defilant .tableau-tarifs { min-width: 0; } .tableau-tarifs, .tableau-tarifs tbody, .tableau-tarifs tr, .tableau-tarifs th, .tableau-tarifs td { display: block; width: 100%; } .tableau-tarifs tr { padding: 16px 20px; border-bottom: 1px solid var(--filet); } .tableau-tarifs tr:last-child { border-bottom: 0; } .tableau-tarifs th { padding: 0 0 8px; border: 0; } .tableau-tarifs td { padding: 0; border: 0; text-align: left; white-space: normal; font-size: 1.05rem; } .tableau-tarifs tr:hover th, .tableau-tarifs tr:hover td { background: transparent; } .precision { margin-top: 4px; } /* Même traitement pour le tableau des horaires. */ .tableau-horaires { min-width: 0; width: 100%; } .tableau-horaires th { padding-right: 12px; } } @media (max-width: 420px) { :root { --gouttiere: 18px; } .carte-prestation { flex-basis: 92%; } .avis-carte { flex-basis: 92%; } .avis-chiffre { font-size: 2.2rem; } .carrousel-fleche { width: 42px; height: 42px; } } /* --- Deux colonnes, pour les pages où le texte seul laissait la moitié droite vide. */ .colonnes-deux { display: grid; gap: clamp(24px, 4vw, 52px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } /* Variante en cartes : deux blocs de meme hauteur, avec le meme fond. Cote a cote, un texte nu et une carte blanche ne pesaient pas le meme poids et l'ensemble penchait. */ .colonnes-cartes { align-items: stretch; gap: 22px; } .colonnes-cartes > div { background: var(--papier); border-radius: var(--r-m); padding: clamp(24px, 3vw, 34px); box-shadow: var(--ombre); display: flex; flex-direction: column; } .colonnes-cartes > div > *:last-child { margin-bottom: 0; } .colonnes-cartes .bouton { margin-top: auto; align-self: flex-start; } /* Une carte dans une carte n'a pas de sens : on neutralise. */ .colonnes-cartes .bloc-coordonnees, .colonnes-cartes .bloc-horaires { background: transparent; box-shadow: none; padding: 0; max-width: none; border-radius: 0; } .colonnes-cartes .bloc-horaires-entete { border-radius: var(--r-s); } .colonnes-cartes .tableau-horaires th, .colonnes-cartes .tableau-horaires td { padding-inline: 4px; } .colonnes-deux > * > *:first-child { margin-top: 0; } .colonnes-deux h3 { margin-bottom: .8em; } .colonnes-deux > * + * { margin-top: 0; } /* --- Logo du pied de page -------------------------------------------- */ .pied-logo { height: var(--logo-hauteur); width: auto; margin-bottom: 14px; } /* --- Page Entreprise : la frise des dates --------------------------- En longueur sur grand ecran : empilee a la verticale, elle laissait la moitie droite de la page vide. Elle repasse en colonne sous 860 px, ou cinq colonnes ne tiendraient plus. */ .frise { list-style: none; padding: 0; margin: 0; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 22px; } .frise::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, rgba(140,191,106,.2), var(--vert-clair) 20%, var(--vert-clair) 80%, rgba(140,191,106,.2)); } .frise-etape { position: relative; padding: 34px 0 0; } .frise-etape::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--papier); border: 3px solid var(--vert-clair); } .frise-annee { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vert); margin-bottom: .4em; } .frise-etape h3 { margin-bottom: .35em; font-size: 1.06rem; } .frise-etape p { margin: 0; color: var(--gris); font-size: .93rem; } @media (max-width: 860px) { .frise { grid-template-columns: 1fr; gap: 28px; } .frise::before { left: 7px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(to bottom, var(--vert-clair), rgba(140,191,106,.15)); } .frise-etape { padding: 0 0 0 38px; } .frise-etape::before { top: 4px; } } /* --- Les engagements, en cartes ------------------------------------- */ .valeurs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .valeur { background: var(--papier); border-radius: var(--r-m); padding: 26px 24px 28px; box-shadow: var(--ombre); border-top: 4px solid var(--vert-clair); } .valeur h3 { margin-bottom: .4em; font-size: 1.12rem; } .valeur p { margin: 0; color: var(--gris); font-size: .95rem; } /* --- Citation du dirigeant ------------------------------------------ Sans etoiles ni note : ce n'est pas un avis client, et les confondre affaiblirait les deux. */ .citation { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 56px); /* Alignee sur la largeur du contenu, pas sur celle de l'ecran : une bande pleine largeur au milieu d'une page de texte casse l'alignement avec le logo et le reste des blocs. */ width: min(var(--largeur), 100% - var(--gouttiere) * 2); margin: var(--rythme) auto; border-radius: var(--r-l); color: #fff; text-align: center; background: var(--vert); } .citation-photo { position: absolute; inset: 0; z-index: -2; } .citation-photo picture { display: block; height: 100%; } .citation-photo img, .citation-photo .photo-attente { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto !important; } .citation-voile { position: absolute; inset: 0; z-index: -1; background: rgba(14, 30, 21, .78); } .citation-interieur { position: relative; } .citation-guillemet { display: block; font-size: 4rem; line-height: .6; color: var(--vert-clair); margin-bottom: .25em; } .citation-interieur { width: 100%; } .citation-auteur, .citation blockquote { margin-inline: auto; } .citation blockquote { margin: 0 auto 20px; max-width: 34ch; font-size: clamp(1.25rem, 2.4vw, 1.8rem); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; } .citation-auteur { margin: 0 auto; max-width: 40ch; font-size: .95rem; color: rgba(255,255,255,.82); } .citation-auteur strong { display: block; color: #fff; } /* --- Duo texte + photo, pour les pages de recit --------------------- */ .duo { display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; } .duo > * > *:first-child { margin-top: 0; } .duo .illustration { margin: 0; } /* --- L'equipe ------------------------------------------------------- Un visage, un prenom, ce que fait la personne. C'est ce qui rassure avant de laisser quelqu'un entrer chez soi — plus qu'un paragraphe sur l'entreprise. */ .equipe { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .membre { text-align: center; } .membre-photo { /* Portrait rond : un cadre carre donnait un air de trombinoscope. Le cercle impose un rapport 1/1, donc un recadrage au centre — c'est pour cela que les portraits fournis doivent etre cadres large. */ width: min(200px, 78%); aspect-ratio: 1 / 1; margin: 0 auto 18px; overflow: hidden; border-radius: 50%; box-shadow: var(--ombre); } .membre-photo picture { display: block; height: 100%; } .membre-photo img, .membre-photo .photo-attente { width: 100%; height: 100%; aspect-ratio: 1 / 1 !important; object-fit: cover; border-radius: 50%; transition: transform .6s var(--courbe); } .membre:hover .membre-photo img { transform: scale(1.06); } .membre h3 { margin-bottom: .15em; font-size: 1.12rem; } .membre-role { margin: 0 0 .7em; font-size: .92rem; font-weight: 600; color: var(--vert); } .membre-texte { margin: 0 auto; font-size: .93rem; color: var(--gris); max-width: 34ch; } @media (max-width: 860px) { /* Une seule rangee qui defile, plutot qu'une grille de deux colonnes : les fiches gardent leur taille et la section reste courte. Le defilement est natif, cale au pas des fiches. */ .equipe { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); padding-bottom: 10px; scrollbar-width: none; -ms-overflow-style: none; } .equipe::-webkit-scrollbar { display: none; } .membre { flex: 0 0 64%; scroll-snap-align: center; } .membre-photo { width: min(150px, 70%); } .membre-texte { font-size: .88rem; } } @media (max-width: 480px) { .membre { flex-basis: 76%; } } /* --- Section centree ------------------------------------------------- Pour les sections qui n'ont ni image ni grille : un texte court cale a gauche laisse une moitie de page vide et donne l'impression qu'il manque quelque chose. */ .section-centree { text-align: center; } .section-centree .conteneur > * { margin-inline: auto; } .section-centree p { max-width: 58ch; } .section-centree .surtitre { justify-content: center; } .section-centree > .conteneur:first-child h2::after { left: 50%; transform: translateX(-50%); } .section-centree .bouton { margin-top: 8px; } /* --- Liste des communes, repliable ---------------------------------- Dix-huit pastilles empilees sur un ecran etroit poussent le reste de la page hors de vue. Le depliant montre d'abord le nombre, la liste vient sur demande. Sur grand ecran il est ouvert d'office : la place ne manque pas, et personne ne doit cliquer pour savoir si sa commune est servie. */ .communes-repli { margin: 20px 0 6px; } .communes-repli summary { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; cursor: pointer; list-style: none; padding: 15px 20px; border-radius: var(--r-s); background: var(--papier); box-shadow: 0 3px 12px rgba(74,52,26,.06); font-weight: 600; } .communes-repli summary::-webkit-details-marker { display: none; } .communes-action { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; font-size: .9rem; font-weight: 600; color: var(--vert); } .communes-compte { white-space: nowrap; } @media (max-width: 380px) { /* Ecran tres etroit : le libelle du bouton se reduit a « Voir ». */ .communes-action { font-size: 0; gap: 0; } .communes-action::before { content: "Voir"; font-size: .9rem; margin-right: 8px; } } .communes-action::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--courbe); } .communes-repli[open] .communes-action::after { transform: rotate(-135deg) translateY(-2px); } .communes-repli[open] .communes-action { color: var(--gris); } /* Ouvert sur grand ecran : le depliant s'efface et la liste reprend sa place, sans bouton inutile. */ @media (min-width: 621px) { .communes-repli summary { display: none; } .communes-repli { margin-top: 0; } } @media (max-width: 620px) { .communes-repli[open] summary { margin-bottom: 4px; } .liste-communes { display: block; columns: 2; column-gap: 20px; margin: 10px 0 6px; padding: 0; } .liste-communes li { display: block; break-inside: avoid; background: transparent; box-shadow: none; border-radius: 0; min-height: 0; padding: 5px 0 5px 15px; position: relative; text-align: left; font-size: .92rem; } .liste-communes li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--vert-clair); } } /* --- Position du menu ------------------------------------------------ Reglee dans l'administration : contre le logo, centre, ou a droite. */ .navigation-gauche { margin-left: 32px; margin-right: auto; } .navigation-centre { margin-inline: auto; } .navigation-droite { margin-left: auto; } /* Le bouton d'appel reste toujours a droite, quel que soit le menu : c'est le seul element de l'en-tete qui doit garder sa place. */ .navigation-gauche .bouton-entete, .navigation-centre .bouton-entete { margin-left: 18px; } @media (max-width: 900px) { .navigation-gauche, .navigation-centre, .navigation-droite { margin: 0; } } /* --- Services a la personne ------------------------------------------ Un calcul, pas un paragraphe : le visiteur entre ce qu'il compte depenser et lit ce que ca lui coutera vraiment. C'est ce qui reste en memoire, et c'est verifiable. */ .cesu { display: grid; gap: clamp(24px, 4vw, 46px); grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); align-items: center; background: var(--papier); border-radius: var(--r-l); padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--ombre); margin: 30px 0; } .cesu h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: .5em; } .cesu-texte-bloc p { margin-bottom: .9em; color: var(--gris); } .cesu-texte-bloc p:last-child { margin-bottom: 0; } .cesu-calcul { background: var(--creme); border-radius: var(--r-m); padding: 24px 26px; } .cesu-champ { display: block; font-size: .86rem; font-weight: 600; color: var(--gris); } .cesu-saisie { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r-s); padding-right: 16px; } .cesu-saisie input { border: 0; background: transparent; font-size: 1.3rem; font-weight: 700; padding: 14px 16px; } .cesu-saisie input:focus { box-shadow: none; } .cesu-saisie span { font-size: 1.2rem; font-weight: 700; color: var(--gris); } .cesu-resultat { display: grid; gap: 12px; margin-top: 20px; } .cesu-resultat div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--filet); } .cesu-resultat span { font-size: .92rem; color: var(--gris); } .cesu-resultat b { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; } .cesu-reste { border-bottom: 0 !important; } .cesu-reste b { color: var(--vert); font-size: 1.7rem; } .cesu-plafond { margin: 14px 0 0; font-size: .85rem; color: var(--accent); } .cesu-plafond[hidden] { display: none; } .cesu-numero { margin: 16px 0 0; font-size: .82rem; color: var(--gris); } @media (max-width: 820px) { .cesu { grid-template-columns: 1fr; } } /* --- Confort de lecture ---------------------------------------------- Trois commandes dans la barre du haut : A+, A− et le contraste. Rien a deplier, rien a chercher — c'est la premiere chose visible de la page, comme sur les sites publics qui traitent le sujet serieusement. Le site etant ecrit en em et en variables, il suffit de relever la taille de base et de durcir quelques valeurs : rien n'est duplique. */ .acces { display: flex; align-items: center; gap: 6px; margin-right: 14px; } .acces-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 36px; height: 30px; padding: 0 9px; cursor: pointer; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; color: #fff; font: inherit; font-size: .9rem; font-weight: 700; transition: background .15s ease; } .acces-bouton:hover:not(:disabled) { background: rgba(255,255,255,.26); } .acces-bouton:disabled { opacity: .4; cursor: default; } .acces-bouton[aria-pressed="true"] { background: #fff; color: var(--vert); border-color: #fff; } .acces-bouton svg { width: 17px; height: 17px; } /* Dans le menu de telephone : une rangee large, avec un intitule. */ /* En TETE du menu, hors de la zone qui defile : placees en bas, elles devenaient inatteignables des que le texte etait agrandi. Elles ne sont plus « collantes » mais fixes dans la colonne — un element colle laisse le contenu passer au-dessus de lui tant qu'il n'a pas atteint sa position, ce qui donnait ces liens visibles autour de la barre. */ .acces-menu { order: -1; flex: none; margin: -14px -16px 12px; padding: 14px 16px 16px; gap: 10px; flex-wrap: wrap; background: var(--bandeau); border-bottom: 1px solid var(--filet); } .acces-menu::before { content: "Confort de lecture"; width: 100%; font-size: .84rem; font-weight: 600; color: var(--gris); } .acces-menu .acces-bouton { min-width: 54px; height: 48px; font-size: 1.05rem; background: transparent; border-color: var(--filet); color: var(--texte); } .acces-menu .acces-bouton:hover:not(:disabled) { background: rgba(140,191,106,.18); } .acces-menu .acces-bouton[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; } .acces-menu .acces-bouton svg { width: 20px; height: 20px; } /* Annonce pour les lecteurs d'ecran : presente mais invisible. */ .acces-etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* --- Ce que change chaque niveau ------------------------------------- */ html.confort-texte-1 { font-size: 19.5px; } html.confort-texte-2 { font-size: 22px; } html.confort-texte-3 { font-size: 25px; } html.confort-texte-1 body { line-height: 1.72; } html.confort-texte-2 body { line-height: 1.78; } html.confort-texte-3 body { line-height: 1.84; } /* Les titres, eux, ne doivent pas suivre la meme pente : ecrits en clamp avec une borne en vw, ils deviendraient enormes. On les rapproche de leur borne basse a mesure que le texte courant grandit. */ html.confort-texte-2 h1 { font-size: clamp(2rem, 4vw, 2.6rem); } html.confort-texte-3 h1 { font-size: clamp(1.9rem, 3.6vw, 2.3rem); } html.confort-texte-2 h2, html.confort-texte-3 h2 { font-size: clamp(1.4rem, 2.4vw, 1.7rem); } html.confort .note, html.confort .precision, html.confort .carte-prestation-liste, html.confort .avis-texte, html.confort .membre-texte, html.confort .frise-etape p { font-size: 1rem; } /* Agrandis, les paragraphes brides a 62 caracteres formeraient des colonnes etroites et hachees : on les elargit a mesure. */ html.confort-texte-2 p { max-width: 70ch; } html.confort-texte-3 p { max-width: 76ch; } /* Les cibles grandissent avec le texte : agrandir les lettres sans agrandir les boutons ne sert pas la meme personne a moitie. */ html.confort .bouton { padding: 17px 32px; } html.confort .menu a { padding: 12px 16px; } html.confort input, html.confort select, html.confort textarea { padding: 16px 18px; } html.confort .carrousel-fleche { width: 54px; height: 54px; } html.confort .comparateur-poignee::after { width: 56px; height: 56px; } html.confort .barre-mobile a { min-height: 56px; } html.confort-texte-3 .banniere, html.confort-texte-3 .entete-page { min-height: 0; } /* L'en-tete ne suit pas la troisieme taille : il occuperait la moitie de l'ecran et le menu n'aurait plus de place pour se deployer. Le nom de l'entreprise et les liens restent lisibles sans devenir envahissants. */ html.confort-texte-2 .entete-principal, html.confort-texte-3 .entete-principal { min-height: 0; } html.confort-texte-3 .marque-nom { font-size: 1.15rem; } html.confort-texte-3 .entete-haut { font-size: .78rem; } html.confort-texte-3 .marque-logo { height: calc(var(--logo-hauteur) * .8); } /* --- Contrastes renforces -------------------------------------------- Le premier obstacle d'un oeil qui vieillit n'est pas la taille du texte mais les gris trop clairs : c'est eux qu'on traite d'abord. */ html.confort-contraste { --gris: rgba(18, 22, 18, .96); --filet: rgba(18, 22, 18, .38); } html.confort-contraste .carte-prestation-liste, html.confort-contraste .avis-texte, html.confort-contraste .membre-texte, html.confort-contraste .frise-etape p, html.confort-contraste .valeur p, html.confort-contraste .carte-saison-mois { color: var(--texte); } html.confort-contraste .accroche-chapo, html.confort-contraste .banniere-chapo, html.confort-contraste .appel-action p, html.confort-contraste .citation-auteur { color: #fff; } html.confort-contraste .banniere-voile, html.confort-contraste .entete-page-voile, html.confort-contraste .appel-action-voile, html.confort-contraste .citation-voile, html.confort-contraste .estimateur-voile { background: rgba(12, 24, 16, .88); } html.confort-contraste :focus-visible { outline-width: 4px; } html.confort-contraste .bouton-creux { border-color: var(--vert); border-width: 2px; } /* Les liens du corps de page se soulignent : la couleur seule ne suffit pas a distinguer un lien pour qui distingue mal les couleurs. */ html.confort-contraste .corps-page a:not(.bouton):not(.filtre), html.confort-contraste .pied a { text-decoration: underline; text-underline-offset: .2em; } /* --- Ce que chaque reglage change ------------------------------------ */ html.confort-texte-1 body { font-size: 19.5px; line-height: 1.78; } html.confort-texte-2 body { font-size: 22.5px; line-height: 1.85; } html.confort-texte-1 .note, html.confort-texte-1 .precision, html.confort-texte-2 .note, html.confort-texte-2 .precision { font-size: 1rem; } /* Les paragraphes cessent d'etre brides a 62 caracteres : agrandis, ils formeraient des colonnes etroites et hachees. */ html.confort-texte-2 p { max-width: 72ch; } /* Le premier obstacle n'est pas la taille du texte mais les gris trop clairs. On les fonce, on durcit les filets, on renforce le focus. */ html.confort-contraste { --gris: rgba(20, 24, 20, .95); --filet: rgba(20, 24, 20, .34); } html.confort-contraste .accroche-chapo, html.confort-contraste .banniere-chapo { color: #fff; } html.confort-contraste .carte-prestation-liste, html.confort-contraste .avis-texte, html.confort-contraste .membre-texte, html.confort-contraste .frise-etape p, html.confort-contraste .valeur p { color: var(--texte); } html.confort-contraste :focus-visible { outline-width: 4px; } html.confort-contraste .bouton-creux { border-color: var(--vert); } html.confort-liens .corps-page a:not(.bouton):not(.lien-carte), html.confort-liens .pied a { text-decoration: underline; text-underline-offset: .2em; } html.confort-liens .menu a { text-decoration: underline; } html.confort-calme *, html.confort-calme *::before, html.confort-calme *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html.confort-calme .apparait { opacity: 1; transform: none; } html.confort-calme .defilant-piste { animation: none; } html.confort-calme .accroche-vignette { animation: none; } /* Cibles agrandies : une main qui tremble rate un bouton de 36 px. La recommandation d'accessibilite est de 44 px ; on passe a 54. */ html.confort-cibles .bouton { padding: 18px 34px; font-size: 1.04rem; } html.confort-cibles .menu a { padding: 14px 18px; } html.confort-cibles input[type="text"], html.confort-cibles input[type="tel"], html.confort-cibles input[type="email"], html.confort-cibles input[type="number"], html.confort-cibles input[type="date"], html.confort-cibles select, html.confort-cibles textarea { padding: 17px 18px; font-size: 1.05rem; } html.confort-cibles .filtre { min-height: 54px; } html.confort-cibles .carrousel-fleche { width: 54px; height: 54px; } html.confort-cibles .comparateur-poignee::after { width: 58px; height: 58px; } html.confort-cibles .confort summary, html.confort-cibles .communes-repli summary { padding-block: 14px; } html.confort-cibles .barre-mobile a { min-height: 58px; }