/* ========================================================================== Accueil — écran 2a Sommaire : hero · bandeau urgence · services · artisan · pourquoi · avis · zone · réalisations · rappel ========================================================================== */ /* ---- Hero -------------------------------------------------------------- Grille à plat plutôt qu'un bloc de texte + un bloc photo : sur mobile, l'ordre du DOM est déjà le bon (preuve → titre → sous-titre → photo → CTA → réassurance), et le desktop se contente de replacer la photo en colonne de droite. Aucun contenu dupliqué, ordre de lecture inchangé au clavier. */ .hero { background: var(--c-surface); } .hero__inner { display: grid; gap: var(--sp-13); max-width: var(--content-max); margin-inline: auto; padding: var(--sp-20) var(--section-px) var(--sp-18); } .hero__proof { justify-self: start; } .hero__title { margin: 0; } .hero__subtitle { margin: 0; color: var(--c-muted); line-height: 1.45; } /* Photo du hero : angles arrondis, comme le placeholder qu'elle remplace. 12 px sur mobile, 14 px en desktop — les valeurs du handoff. */ .hero__photo .photo-reelle { border-radius: var(--r-12); } .hero__ctas { display: flex; flex-direction: column; gap: var(--sp-9); } /* Ligne de réassurance : texte simple, pas de pastilles chargées. */ .hero__trust { display: flex; flex-wrap: wrap; gap: var(--sp-9) var(--sp-18); margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--c-muted-soft); } /* ---- Bandeau urgence ---------------------------------------------------- */ .urgence { background: var(--c-blue); color: #ffffff; } .urgence__inner { display: flex; flex-direction: column; gap: 3px; max-width: var(--content-max); margin-inline: auto; padding: var(--sp-15) var(--section-px); } .urgence__hook, .urgence__note { margin: 0; color: var(--c-on-blue); } .urgence__hook { font-size: var(--fs-meta); } .urgence__note { font-size: var(--fs-small); } /* Astreinte 7j/7. Sur sa propre ligne et en blanc plein : c'est l'argument qui décide un dimanche matin, il ne doit pas se noyer dans la ligne de tarif juste au-dessus. Pas d'orange — la couleur d'accent est réservée au numéro de téléphone, qui reste l'action attendue ici. */ .urgence__astreinte { display: block; margin-top: 6px; color: #ffffff; font-weight: 600; } .urgence__phone { color: #ffffff; } .urgence__phone:hover { color: var(--c-orange); } /* ---- Services ----------------------------------------------------------- */ .services-grid { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-11); } /* ---- Votre artisan ------------------------------------------------------ */ .artisan__nom { margin-top: var(--sp-6); font-size: 19px; } .artisan__corps { display: flex; gap: var(--sp-11); margin-top: var(--sp-11); align-items: flex-start; } .artisan__photo { flex: none; inline-size: 96px; } /* Même rayon que le placeholder qu’elle remplace. */ .artisan__photo .photo-reelle { border-radius: var(--r-10); } .artisan__texte p { margin-bottom: var(--sp-9); color: var(--c-body); } /* Texte JUSTIFIÉ, mais à partir du desktop seulement. Sur mobile, la colonne à droite de la vignette ne fait que ~250 px : y justifier du français creuse des rivières entre les mots et rend la lecture pénible. À 70 caractères de large, avec la césure activée, la justification tient au contraire un bloc net en face d'une photo verticale. `hyphens` exige que la langue soit déclarée — elle l'est sur . */ @media (min-width: 768px) { .artisan__texte p { text-align: justify; text-wrap: pretty; hyphens: auto; } } .artisan__texte p:last-child { margin-bottom: 0; } /* ---- Pourquoi REM ------------------------------------------------------- Le tiret vert remplace la coche emoji des filaires. Il est décoratif : masqué aux lecteurs d'écran, qui annoncent déjà une liste de 3 éléments. */ .pourquoi__titre { margin-top: var(--sp-6); } .pourquoi__liste { display: flex; flex-direction: column; gap: var(--sp-9); margin: var(--sp-11) 0 0; padding: 0; list-style: none; color: var(--c-body); } .pourquoi__liste li { display: flex; gap: var(--sp-9); } .pourquoi__tiret { color: var(--c-green); font-weight: 700; flex: none; } /* ---- Avis -------------------------------------------------------------- Mobile : carrousel horizontal. Les filaires donnent des cartes de 210 px ; elles passent à 250 px parce que le texte des citations est remonté à 16 px pour l'accessibilité — à 210 px il se hacherait sur trop de lignes. */ .avis-liste { display: flex; gap: var(--sp-11); margin-top: var(--sp-13); overflow-x: auto; -webkit-overflow-scrolling: touch; /* Décalage négatif + padding : les cartes peuvent défiler jusqu'au bord de l'écran au lieu de s'arrêter net sur la marge du conteneur. */ margin-inline: calc(var(--section-px) * -1); padding-inline: var(--section-px); scroll-snap-type: x mandatory; } .avis-liste__item { flex: none; inline-size: 250px; scroll-snap-align: start; } .avis-lien { margin-top: var(--sp-11); font-size: var(--fs-meta); } .avis-lien a { text-decoration: underline; } /* ---- Zone d'intervention ------------------------------------------------ */ .zone__carte { margin-top: var(--sp-11); } .zone__communes { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin: var(--sp-13) 0 0; padding: 0; list-style: none; } /* ---- Réalisations ------------------------------------------------------- */ .realisations__titre { margin-top: var(--sp-6); } .realisations__paire { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); margin-top: var(--sp-11); } .realisations__legende { margin-top: var(--sp-9); font-size: var(--fs-small); color: var(--c-meta); } /* ---- CTA final + mini-formulaire ---------------------------------------- */ .rappel { background: var(--c-blue); } .rappel__inner { max-width: var(--content-max); margin-inline: auto; padding: var(--sp-24) var(--section-px); } .rappel__titre { margin: 0; color: #ffffff; font-size: 19px; line-height: 1.2; } .rappel__form { display: flex; flex-direction: column; gap: var(--sp-9); margin-top: var(--sp-13); } .rappel__champ input { inline-size: 100%; min-height: var(--tap-min); padding: var(--sp-13); box-sizing: border-box; background: var(--c-surface); border: 1.5px solid transparent; border-radius: var(--r-9); color: var(--c-heading); } .rappel__champ input::placeholder { color: #98a2ab; } .rappel__champ input:focus-visible { border-color: var(--c-orange); } .rappel__lien { margin-top: var(--sp-13); font-size: var(--fs-label); } .rappel__lien a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--c-on-blue); text-decoration: underline; } .rappel__lien a:hover { color: #ffffff; } /* Piège à robots : sorti de l'écran plutôt que `display:none`, que beaucoup de robots savent détecter et contourner. `tabindex="-1"` le retire du parcours clavier, `aria-hidden` des lecteurs d'écran. */ .honeypot { position: absolute; left: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; } /* ========================================================================== Desktop ========================================================================== */ @media (min-width: 768px) { /* Les lignes sont déclarées EXPLICITEMENT : sans `grid-template-rows`, la ligne `-1` désigne la fin de la grille explicite — c'est-à-dire la ligne 1 quand il n'y en a aucune — et `grid-row: 1 / -1` sur la photo se réduisait à la seule première ligne, qu'elle gonflait alors à 260 px (grand vide au-dessus du titre). Les deux pistes `1fr` qui encadrent les cinq lignes de contenu absorbent à parts égales la hauteur excédentaire de la photo : la pile de texte reste ainsi centrée verticalement en face d'elle, quelle que soit la hauteur de l'une ou de l'autre. */ .hero__inner { grid-template-columns: 1.05fr 1fr; grid-template-rows: 1fr repeat(5, min-content) 1fr; gap: var(--sp-13) var(--sp-26); padding: var(--sp-34) var(--section-px); } .hero__proof { grid-column: 1; grid-row: 2; } .hero__title { grid-column: 1; grid-row: 3; } .hero__subtitle { grid-column: 1; grid-row: 4; max-width: 44ch; } .hero__ctas { grid-column: 1; grid-row: 5; flex-direction: row; } .hero__trust { grid-column: 1; grid-row: 6; } .hero__photo { grid-column: 2; grid-row: 1 / -1; align-self: stretch; display: flex; } .hero__photo .photo-ph { --ph-h: auto; --ph-r: 14px; inline-size: 100%; min-block-size: 260px; } .hero__photo .photo-reelle { border-radius: var(--r-14); } .hero__ctas .btn { inline-size: auto; } /* Bandeau urgence : les trois éléments sur une ligne, la mention à droite. */ .urgence__inner { flex-direction: row; align-items: center; gap: var(--sp-15); } .urgence__note { margin-left: auto; text-align: right; } .services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-11); } /* 150 px : la photo fait alors 201 px de haut, contre 207 px de texte à 768 px et 185 px à 1280 px. Elle arrive donc à hauteur du paragraphe au lieu de flotter en vignette au-dessus. Sur mobile elle reste à 96 px, et c'est délibéré : il faudrait 359 px pour égaler un texte qui monte à 483 px dans une colonne étroite, et chaque pixel pris à la colonne de texte la rend moins lisible. */ .artisan__photo { inline-size: 150px; } /* Les sections occupent toute la largeur (bandes pleine largeur décrites au README). Sans garde-fou, les lignes de texte atteindraient ~140 caractères sur un écran large : illisible. On borne la longueur de ligne à ~70 caractères, la mesure confortable en lecture continue. */ .artisan__texte, .pourquoi__liste { max-inline-size: 70ch; } /* Avis : colonne de 3, plus de carrousel. Les extraits 4 et 5 ne sont montrés que sur mobile, où le défilement horizontal les rend gratuits. */ .avis-liste { flex-direction: column; gap: var(--sp-15); overflow-x: visible; margin-inline: 0; padding-inline: 0; max-inline-size: 520px; } .avis-liste__item { inline-size: auto; } .avis-liste__item:nth-child(n + 4) { display: none; } .realisations__paire { max-inline-size: 640px; } .realisations__paire .photo-ph { --ph-h: 150px; } .zone__carte .photo-ph { --ph-h: 150px; max-inline-size: 520px; } /* ---- CTA final : deux colonnes -------------------------------------- * * En une seule colonne, le formulaire occupait le tiers gauche d'un * bandeau bleu pleine largeur : les deux tiers restants faisaient un vide * qui donnait à la page l'air inachevée. Le titre tient la gauche, le * formulaire la droite. */ .rappel__inner { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: var(--sp-9) var(--sp-34); padding-block: var(--sp-34); } /* Le titre tient seul la colonne de gauche, centré en face du formulaire. Il enjambe les deux rangées pour rester aligné sur l'ensemble du bloc, et non sur la seule première ligne. */ .rappel__titre { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-size: 26px; } .rappel__form { grid-column: 2; grid-row: 1; margin-top: 0; } /* Le lien reste collé sous le formulaire : c'est l'autre façon de faire la même chose, pas une note de bas de section. Le renvoyer sous le titre le séparait du bouton par un vide de plusieurs centimètres. */ .rappel__lien { grid-column: 2; grid-row: 2; margin-top: 0; } } /* ========================================================================== Carte de la zone d'intervention -------------------------------------------------------------------------- SVG de contours réels : 8 Ko, net à toutes les tailles, aucun cookie tiers — donc aucun bandeau de consentement à ajouter à un site qui n'en a pas. ========================================================================== */ .carte-zone { margin: 0; } .carte-zone__svg { display: block; inline-size: 100%; block-size: auto; background: #eef2f4; border: 1px solid var(--c-border); border-radius: var(--r-10); } /* Les communes desservies en bleu très clair, cernées d'un trait net : c'est le trait qui porte l'information, le remplissage ne fait que rattacher les surfaces entre elles. */ .carte-zone__commune { fill: #ffffff; stroke: var(--c-border-pill); stroke-width: 1.5; stroke-linejoin: round; } /* La commune principale se distingue par sa TEINTE, pas par un contour plus épais : sur une carte, un trait plus gros se lit comme une frontière plus importante, ce qui serait faux. */ .carte-zone__commune--principale { fill: var(--c-blue-bg); stroke: var(--c-blue); stroke-opacity: 0.45; } .carte-zone__rayons line { stroke: var(--c-orange); stroke-width: 2; stroke-opacity: 0.35; stroke-dasharray: 6 6; } .carte-zone__point circle { fill: var(--c-blue); stroke: #ffffff; stroke-width: 2.5; } .carte-zone__point text { fill: var(--c-heading); font-family: var(--font-body); font-size: 24px; font-weight: 600; paint-order: stroke; stroke: #ffffff; stroke-width: 4; stroke-linejoin: round; } .carte-zone__point--principale circle { fill: var(--c-orange); r: 11; } .carte-zone__point--principale text { font-size: 30px; font-weight: 700; } .carte-zone__echelle line { stroke: var(--c-meta); stroke-width: 2; } .carte-zone__echelle text { fill: var(--c-meta); font-family: var(--font-body); font-size: 20px; } .carte-zone__legende { margin-top: var(--sp-9); font-size: var(--fs-small); color: var(--c-meta); line-height: 1.5; } /* ---- Zone : schéma et communes côte à côte en desktop -------------------- */ .zone__grille { display: grid; gap: var(--sp-15); margin-top: var(--sp-11); } .zone__hors-liste { margin: var(--sp-13) 0 0; font-size: var(--fs-meta); color: var(--c-muted); line-height: 1.5; } @media (min-width: 900px) { .zone__grille { grid-template-columns: 1.45fr 1fr; gap: var(--sp-26); align-items: center; } /* Les pastilles ne repartent pas de zéro : elles prolongent le schéma. */ .zone__aside .zone__communes { margin-top: 0; } } /* Sur la page dédiée, le schéma est seul et n'a pas de colonne voisine : on le borne, sinon il occupe toute la largeur d'un écran large. */ .zone__carte--page { max-inline-size: 760px; margin-block-start: var(--sp-20); }