/* * Page d'accueil — chargée sur cette seule page, et sur les pages libres. * * Elle n'invente aucune couleur : tout vient des jetons du support, définis * dans vac.css et surchargés dans le depuis `sites.theme`. Changer * l'identité d'un annuaire ne demande donc pas d'y toucher. * * Habillage éditorial : fond clair, titres à empattements, mot d'accent en * italique, cartes blanches à filet fin. Le sombre est réservé au pied de * page — une pleine page sombre écrase les photos de chantier des abonnés, * qui sont ce que le visiteur est venu voir. */ /* --------------------------------- Hero --------------------------------- */ .hero { background: var(--surface); border-bottom: 1px solid var(--trait); /* Resserré le 25/09 : la barre de recherche doit se voir sans défiler. */ padding-block: clamp(20px, 2.5vw, 32px) clamp(22px, 3vw, 36px); } .hero__grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; } .hero__sur-titre { display: block; color: var(--accent); } .hero h1 { font-size: clamp(26px, 3.2vw, 40px); max-width: 26ch; margin-top: 8px; } .hero h1 em { font-style: italic; color: var(--accent); } .hero__accroche { color: var(--secondaire); max-width: 52ch; margin: 14px 0 0; font-size: 15.5px; line-height: 1.55; } .hero__accroche b { color: var(--encre); font-variant-numeric: tabular-nums; font-weight: 700; } /* Sous la barre de recherche (25/09) : toute la largeur de la barre, en une ligne si possible. */ .chercher .hero__accroche { max-width: none; font-size: 15px; margin-top: 12px; padding-inline: 18px; } /* * L'ESPACE VENDU SOUS LA RECHERCHE. * * Il tenait une colonne étroite à droite du titre ; depuis que l'accueil est * centré, il occupe toute la ligne sous la barre de recherche. La disposition * est celle des bandeaux (`.bandeaux`, une grille) : le gabarit y pose autant * de colonnes qu'il a d'encarts à montrer. * * LA LARGEUR EST CALCULÉE, PAS CHOISIE : deux bandeaux de 520 et leur écart de * 16 font 1 056 pixels. Elle valait 880 — un reste de l'époque où la place ne * recevait qu'un seul bandeau large — et les deux 520 s'y trouvaient rabotés à * 432 chacun. Un annonceur qui fournit un visuel au format annoncé doit le voir * s'afficher à ce format, sans quoi c'est le format annoncé qui est faux. */ .hero__colonne { width: 100%; max-width: 1056px; margin-inline: auto; } /* La rangée qu'on peut monter au-dessus de la recherche (25/09) : même écart que la barre. */ .hero__colonne--dessus { margin-top: 18px; } /* Module de recherche : une carte posée sur le fond, pas un bandeau. */ .chercher { margin-top: 18px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 18px 40px -32px rgba(20, 40, 45, .6); } .chercher__ligne { display: grid; /* * Deux champs et le bouton — le quoi, le où, et « Rechercher ». * * Le premier est un peu plus large : « Entreprises d'élagage, Abattage… » * est plus long à écrire qu'un nom de ville, et un champ trop étroit tronque * son exemple, c'est-à-dire la seule chose qui dit ce qu'on peut y taper. */ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) auto; gap: 1px; background: var(--trait); /* * PAS D'`overflow: hidden` ICI. Il y était, et il couperait net les listes * déroulantes : elles sortent forcément de la barre, c'est leur raison * d'être. Les coins sont donc arrondis sur les enfants de bout de ligne. */ border-radius: var(--rayon) var(--rayon) 0 0; } /* * Les coins sont posés sur les ÉLÉMENTS, pas sur `:first-child` / `:last-child`. * * La version par position marchait, et elle a mordu sur l'habillage épuré : un * sélecteur `html[data-allure] .chercher__ligne > :last-child` pèse plus lourd * que `html[data-allure] .chercher__envoi`, et le bouton en gélule reprenait des * angles droits sans qu'on comprenne d'où. Nommer les éléments rend la * hiérarchie lisible, et les surcharges d'habillage prévisibles. */ .chercher__ligne > .champ:first-of-type { border-radius: var(--rayon) 0 0 0; } .champ { background: var(--surface); padding: 13px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .champ label { color: var(--secondaire); } .champ input { background: none; border: 0; color: var(--encre); font: inherit; font-size: 15.5px; padding: 2px 0; width: 100%; min-width: 0; } .champ input::placeholder { color: var(--secondaire); opacity: .75; } /* * La liste déroulante elle-même est dans vac.css : elle sert aussi la page de * résultats, qui ne charge pas cette feuille. Ne restent ici que les pièces * propres au bandeau d'accueil. */ /* Le champ « Où ? » porte un bouton à sa droite : ils partagent la ligne. */ .champ__ligne { display: flex; align-items: center; gap: 6px; min-width: 0; } .champ__ligne input { flex: 1 1 auto; } .champ__viseur { flex: 0 0 auto; background: none; border: 0; padding: 4px; color: var(--secondaire); cursor: pointer; display: flex; border-radius: 8px; transition: color .15s, background .15s; } .champ__viseur:hover { color: var(--action); background: var(--fond); } .champ__viseur:disabled { opacity: .45; cursor: default; } /* Ce que la géolocalisation a trouvé, ou pourquoi elle a échoué. */ .chercher__mot { margin: 0; padding: 10px 18px 0; font-size: 12.5px; line-height: 1.45; color: var(--secondaire); } .chercher__envoi { background: var(--action); border: 0; border-radius: 0 var(--rayon) 0 0; color: var(--sur-action); padding: 0 30px; cursor: pointer; font-family: var(--police-texte); text-transform: uppercase; letter-spacing: .09em; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; transition: background .15s; } .chercher__envoi:hover { background: var(--action-fonce); } .puces { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 18px; } .puces__titre { color: var(--secondaire); align-self: center; margin-right: 4px; } .puce { background: var(--fond); border: 1px solid var(--trait); color: var(--encre); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; text-decoration: none; transition: .15s; } .puce:hover { border-color: var(--accent); color: var(--accent); } /* ------------------------------- Repères -------------------------------- */ .reperes { background: var(--surface); border-bottom: 1px solid var(--trait); } .reperes__grille { display: grid; grid-template-columns: repeat(var(--colonnes, 4), 1fr); gap: 1px; background: var(--trait); } .repere { background: var(--surface); padding: 24px var(--marge); text-align: center; } .repere strong { display: block; font-family: var(--police-titre); font-size: 34px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .repere span { color: var(--secondaire); font-size: 13px; display: block; margin-top: 8px; } /* --------------------------- Titres de section --------------------------- */ .entete-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; } .entete-section .etiquette { color: var(--accent); display: block; margin-bottom: 10px; } .entete-section h2 { font-size: clamp(24px, 3.2vw, 36px); } .entete-section p { margin: 10px 0 0; color: var(--secondaire); max-width: 54ch; } .section--sombre .entete-section p { color: var(--sombre-texte); } .entete-section a { white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 2px; } /* ------------------------------ Rubriques -------------------------------- */ /* * LES TUILES DE RUBRIQUE — centrées, six par ligne. * * Le nombre de colonnes est un réglage de la section, pas une constante : six * conviennent à quatorze rubriques, pas à quatre. Il arrive par la variable * `--colonnes-rubriques`, posée sur la grille par le gabarit. * * `minmax(0, 1fr)` et non `1fr` : sans ce minimum à zéro, un nom long élargit * sa colonne et la grille cesse d'être régulière — c'est le défaut classique * des grilles CSS, et il ne se voit qu'avec de vraies données. */ .rubriques { display: grid; grid-template-columns: repeat(var(--colonnes-rubriques, 6), minmax(0, 1fr)); gap: 14px; } .rubrique { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 26px 14px 20px; text-decoration: none; color: var(--encre); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; transition: border-color .18s, box-shadow .18s, transform .18s; } .rubrique:hover { border-color: var(--accent); transform: translateY(-3px); } /* * La pastille : un rond de couleur très diluée, qui accueille indifféremment * une image, un emoji, une icône du jeu ou une initiale. Une seule boîte pour * les quatre — c'est ce qui garde la grille alignée quelles que soient les * icônes choisies, y compris quand certaines rubriques n'en ont aucune. */ .rubrique__vignette { width: 62px; height: 62px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); display: grid; place-items: center; flex: none; transition: background .18s; } .rubrique:hover .rubrique__vignette { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); } .rubrique__vignette img { width: 34px; height: 34px; object-fit: contain; display: block; } .rubrique__emoji { font-size: 30px; line-height: 1; } .rubrique__icone { color: var(--accent); width: 30px; height: 30px; } .rubrique__initiale { font-family: var(--police-titre); font-size: 26px; font-weight: 600; color: var(--accent); line-height: 1; } .rubrique b { font-family: var(--police-titre); font-size: 16.5px; font-weight: 500; line-height: 1.25; /* Deux lignes au plus : trois casseraient l'alignement de la rangée. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rubrique p { margin: 0; font-size: 13.5px; color: var(--secondaire); line-height: 1.5; } .rubrique u { margin-top: auto; text-decoration: none; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; color: var(--secondaire); padding-top: 12px; } /* ---------------------------------------------------------------------- * LES CARTES DE RUBRIQUE (25/09) — maquette du client * ---------------------------------------------------------------------- * * La disposition « Cartes » de la section « Toutes nos adresses » : deux par * ligne, une photo en fond, le pictogramme dans un rond blanc, un filet de * couleur, le nom, la phrase, le compteur et une flèche. * * AUCUNE COULEUR INVENTÉE. Le fond est celui du pied de page — la barre du * haut poussée vers le noir, calculée par le serveur avec son encre * (Site::variablesCss). Le filet, le compteur et la flèche prennent la couleur * « Petits traits et cartes des rubriques » d'Habiller (`--filet`), la même * que les petits traits des étiquettes : un réglage, toutes les touches. * * LA PHOTO PASSE SOUS UN VOILE de cette même couleur, plein à gauche où est le * texte, léger à droite où la photo se montre : c'est ce qui garde le texte * lisible quelle que soit la photo téléversée. */ /* * LES PETITS TRAITS (25/09, maquette du client) — un trait court de la couleur * `--filet` sous l'étiquette de chaque section et sous l'accroche du haut, et * de part et d'autre de « Spécialités ». Tous du même jeton que les cartes : * Habiller, « Petits traits et cartes des rubriques ». */ .entete-section .etiquette::after, .hero__sur-titre::after { content: ""; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--filet); margin-top: 9px; } html[data-allure="epuree"] .hero__sur-titre::after { margin-inline: auto; } /* Sous les bandeaux (case du bloc d'accueil) : toute la largeur de la grille. */ .hero__grille > .puces { grid-column: 1 / -1; padding-top: 0; } .puces__titre { display: inline-flex; align-items: center; gap: 12px; } html[data-allure="epuree"] .puces__titre { display: flex; justify-content: center; gap: 14px; } .puces__titre::before, .puces__titre::after { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--filet); } /* * LE HAUT DE PAGE RESTE BLANC JUSQU'AUX RUBRIQUES (25/09, demande du client). * * Tout ce que la composition range entre le bloc d'accueil et « Les * rubriques » — À la une, Spécialités, Bandeaux du haut, n'importe quelle * autre — prend le blanc du bloc d'accueil, quel que soit l'ordre choisi. Une * section sombre garde sa couleur. Sans section « Les rubriques » dans la * page, rien ne change. Un navigateur trop ancien pour `:has()` garde le * fond de page : rien ne casse. */ body > section.section:has(~ #rubriques):not(.section--sombre) { background: var(--surface); } /* * À LA UNE, SPÉCIALITÉS, BANDEAUX DU HAUT : RESSERRÉES (25/09). Trois pièces * du haut de page qui se lisent d'un bloc — l'écart entre deux d'entre elles * est de 20 px, pas les 80 d'une section ordinaire. */ .section.section--serree, html[data-allure] .section.section--serree { padding-block: 10px; } /* * LA BARRE DE RECHERCHE EN COULEUR (25/09, demande du client). * * Le fond de page reste blanc ; c'est l'INTÉRIEUR de la barre qui prend une * teinte très claire de l'accent de l'annuaire — bleu pâle sur la plongée, * vert pâle sur les élagueurs —, et c'est ce qui la détache du blanc. * * Dans l'allure épurée, la gélule entière est teintée ; dans l'éditoriale, les * champs seulement : le fond de la ligne y dessine les filets entre eux. */ html[data-allure] .chercher .champ { background-color: color-mix(in srgb, var(--accent) 9%, var(--surface)); } html[data-allure="epuree"] .chercher .chercher__ligne { background-color: color-mix(in srgb, var(--accent) 9%, var(--surface)); } /* * Dans la gélule, les champs sont TRANSPARENTS : ils n'ont pas de coins à eux * (voir « Dans la gélule, les champs n'ont pas de coin »), et un champ teinté * dessinait un angle droit qui dépassait de l'arrondi, en haut à gauche. */ html[data-allure="epuree"] .chercher .chercher__ligne > .champ { background-color: transparent; } /* Le bloc d'accueil suivi de l'une d'elles : même écart de 20 px avant elle. */ .hero:has(+ .section--serree), html[data-allure] .hero:has(+ .section--serree) { padding-bottom: 10px; } /* * LES PASTILLES DE SPÉCIALITÉS RESSORTENT (25/09) : fond teinté de l'accent, * filet plus franc, ombre plus présente, texte un peu plus gras. Le survol * reste celui de chaque allure — la pastille se remplit de l'accent. */ html[data-allure] .puces .puce { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--trait)); font-weight: 600; box-shadow: 0 8px 18px -12px rgba(12, 30, 40, .38); } html[data-allure] .puces .puce:hover { border-color: transparent; background: var(--accent); color: var(--sur-accent); } .specialites .puces, html[data-allure="epuree"] .specialites .puces { padding-block: 0; } .section--serree .bandeaux { margin-top: 0; } /* ---------------------------------------------------------------------- * À LA UNE (25/09) — le grand visuel de 980 × 200 * ---------------------------------------------------------------------- * * Le filet du haut et l'onglet se posent PAR-DESSUS le visuel : un trait de * la couleur `--filet` qui part du quart gauche et file jusqu'au bord droit, * puis l'onglet sombre « à la une » (retirés le 25/09, remis le 28/09 : les * commerciaux n'ont plus à les dessiner sur chaque image). * * 980 × 200 depuis le 25/09 au soir (400 avant, hauteur divisée par deux à la * demande du client). Les visuels déjà livrés en 980 × 400 sont recadrés au * centre par la règle ci-dessous ; les nouveaux sont refusés au téléversement * s'ils n'ont pas le bon rapport (EncartResource, `format_strict`). */ .une__cadre { position: relative; max-width: 980px; margin-inline: auto; } .une__cadre .encart { max-width: 980px; } /* * Le FORMAT est tenu, pas seulement la largeur : un visuel livré à la mauvaise * hauteur ferait sauter la page à chaque rotation. Il est recadré au centre, * jamais déformé. */ .une__cadre .encart img { aspect-ratio: 980 / 200; object-fit: cover; } .une__cadre::before { content: ""; position: absolute; z-index: 2; top: 0; left: 25%; /* * Il s'arrête SOUS l'onglet, pas au bord : filé jusqu'au bout, il * ressortait dans le coin arrondi de l'onglet et redessinait un coin * carré au-dessus de l'image (28/09). L'onglet, plus large, le cache. */ right: calc(var(--rayon) * 2); height: 4px; background: var(--filet); pointer-events: none; } /* * La bande foncée du bord droit (28/09) : elle descend de l'onglet jusqu'en * bas, de sa couleur, et suit l'arrondi du coin — c'est pourquoi c'est une * ombre intérieure sur un calque de la taille du visuel, et non une barre de * 4 px qu'un rayon de 18 ne saurait pas courber. Les commerciaux n'ont plus à * la dessiner sur l'image. */ .une__cadre::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: var(--rayon); box-shadow: inset -4px 0 0 var(--pied); pointer-events: none; } .une__etiquette { position: absolute; z-index: 3; top: 0; right: 0; padding: 6px 14px 7px; border-left: 4px solid var(--filet); border-bottom-left-radius: 6px; /* Le même arrondi que le visuel : l'onglet ne dépasse pas de son coin. */ border-top-right-radius: var(--rayon); background: var(--pied); color: var(--sur-pied); font-size: 13px; font-weight: 700; line-height: 1.2; pointer-events: none; } @media (max-width: 520px) { .une__etiquette { font-size: 11.5px; padding: 4px 10px 5px; } } /* ---------------------------------------------------------------------- * LA LIGNE DE LOGOS QUI DÉFILE (25/09) — section « Logos partenaires » * ---------------------------------------------------------------------- * * La piste porte la liste deux fois et glisse de la moitié de sa longueur : * la boucle ne se voit pas. Elle s'arrête au survol — on doit pouvoir viser un * logo —, et ne bouge pas du tout pour qui a demandé moins d'animations : la * ligne se replie alors en rangées, tous les logos visibles. * * Les bords s'effacent en fondu (masque), pour que les logos entrent et * sortent au lieu d'être coupés net par le bord de l'écran. */ .logos-partenaires__titre { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 20px; color: var(--accent); } .logos-partenaires__titre::before, .logos-partenaires__titre::after { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--filet); } .logos-partenaires__fenetre { overflow: hidden; } .logos-partenaires__fenetre.est-defilante { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .logos-partenaires__piste { display: flex; width: max-content; margin-inline: auto; } .est-defilante .logos-partenaires__piste { margin-inline: 0; animation: vac-logos var(--duree, 60s) linear infinite; } .est-defilante:hover .logos-partenaires__piste { animation-play-state: paused; } .logos-partenaires__liste { display: flex; gap: 18px; margin: 0; padding: 4px 9px; list-style: none; } /* * Le logo occupe EXACTEMENT 165 × 80 — le format des logos de fiche * (vac.medias.formats.logo) —, avec 10 px d'air autour (25/09 au soir). D'où * `content-box` : la largeur et la hauteur sont celles du logo, le padding et * le filet s'ajoutent autour. */ .logos-partenaires__logo { display: grid; place-items: center; box-sizing: content-box; width: 165px; height: 80px; padding: 10px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); transition: border-color .18s, transform .18s; } .logos-partenaires__logo:hover { border-color: var(--filet); transform: translateY(-2px); } .logos-partenaires__logo picture { display: contents; } /* * Rempli, pas seulement plafonné : un petit logo est agrandi jusqu'au cadre. * En pixels et non en 100 % : dans la grille, `height: 100%` ne se résout pas * et l'image débordait de la case (165 × 82,5 mesuré sur un logo 2 : 1). */ .logos-partenaires__logo img { width: 165px; height: 80px; object-fit: contain; display: block; } @keyframes vac-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Pas de réduction sur téléphone : le 165 × 80 est tenu partout. */ @media (max-width: 520px) { .logos-partenaires__liste { gap: 12px; } } @media (prefers-reduced-motion: reduce) { .est-defilante .logos-partenaires__piste { animation: none; width: auto; } .logos-partenaires__fenetre.est-defilante { -webkit-mask-image: none; mask-image: none; } .logos-partenaires__liste { flex-wrap: wrap; justify-content: center; } .logos-partenaires__liste[aria-hidden="true"] { display: none; } } .cartes-rubriques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .carte-rubrique { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 24px; min-height: 184px; padding: 24px 76px 24px 22px; border-radius: var(--rayon); background: var(--pied); color: var(--sur-pied); text-decoration: none; box-shadow: var(--ombre, 0 18px 40px -30px rgba(12, 30, 40, .5)); transition: transform .18s, box-shadow .18s; } .carte-rubrique:hover { transform: translateY(-3px); box-shadow: var(--ombre-survol, 0 24px 48px -30px rgba(12, 30, 40, .55)); } .carte-rubrique__photo, .carte-rubrique picture { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .carte-rubrique:hover .carte-rubrique__photo { transform: scale(1.04); } .carte-rubrique::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--pied) 94%, transparent) 0%, color-mix(in srgb, var(--pied) 82%, transparent) 50%, color-mix(in srgb, var(--pied) 45%, transparent) 100%); } .carte-rubrique__picto { flex: none; width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); } .carte-rubrique__picto img { width: 60px; height: 60px; object-fit: contain; display: block; } .carte-rubrique__picto .rubrique__emoji { font-size: 46px; } .carte-rubrique__picto .rubrique__icone { width: 46px; height: 46px; color: var(--entete); } .carte-rubrique__picto .rubrique__initiale { font-size: 38px; color: var(--entete); } .carte-rubrique__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-left: 20px; border-left: 3px solid var(--filet); } .carte-rubrique__nom { font-family: var(--police-texte); font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; } .carte-rubrique__description { font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--sur-pied) 82%, transparent); max-width: 34ch; } .carte-rubrique__compteur { margin-top: 6px; padding: 6px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sur-pied) 28%, transparent); background: color-mix(in srgb, var(--pied) 60%, transparent); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .carte-rubrique__compteur b { color: var(--filet); font-size: 15px; font-variant-numeric: tabular-nums; margin-right: 4px; } .carte-rubrique__fleche { position: absolute; right: 20px; bottom: 20px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--filet); color: var(--sur-pied); display: grid; place-items: center; transition: background .18s, color .18s; } .carte-rubrique:hover .carte-rubrique__fleche { background: var(--filet); color: var(--pied); } @media (max-width: 860px) { .cartes-rubriques { grid-template-columns: minmax(0, 1fr); gap: 14px; } } @media (max-width: 520px) { .carte-rubrique { gap: 16px; padding: 20px 18px 66px; min-height: 0; } .carte-rubrique__picto { width: 72px; height: 72px; } .carte-rubrique__picto img { width: 44px; height: 44px; } .carte-rubrique__texte { padding-left: 14px; } .carte-rubrique__nom { font-size: 16px; } .carte-rubrique__fleche { right: 16px; bottom: 16px; width: 38px; height: 38px; } } @media (prefers-reduced-motion: reduce) { .carte-rubrique, .carte-rubrique__photo { transition: none; } .carte-rubrique:hover, .carte-rubrique:hover .carte-rubrique__photo { transform: none; } } /* * La grille se replie d'elle-même : le réglage donne le maximum, pas une * obligation. Six tuiles de 140 pixels ne tiennent pas sur un téléphone. */ @media (max-width: 1080px) { .rubriques { grid-template-columns: repeat(min(var(--colonnes-rubriques, 6), 4), minmax(0, 1fr)); } } @media (max-width: 760px) { .rubriques { grid-template-columns: repeat(min(var(--colonnes-rubriques, 6), 3), minmax(0, 1fr)); } .rubrique { padding: 20px 10px 16px; } .rubrique__vignette { width: 54px; height: 54px; } } @media (max-width: 480px) { .rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rubrique b { font-size: 15px; } } /* * LE RANG DE BANDEAUX — deux de front, ou l'un sous l'autre, tout seul. * * La grille était pilotée par un `style=` écrit dans le gabarit, qui posait * autant de colonnes qu'il y avait d'encarts. Un style en ligne l'emporte sur * toute feuille : la règle qui repassait à une colonne sur téléphone ne * s'appliquait donc JAMAIS, et deux bandeaux de 520 restaient côte à côte sur * un écran de 375 — soit 170 pixels chacun, illisibles. * * `auto-fit` fait le calcul lui-même, sans média-query et sans style en ligne : * une colonne fait au moins 520 px, ou toute la largeur si elle est plus * étroite. Deux bandeaux tiennent donc de front tant qu'il y a 1 056 px, et * passent l'un sous l'autre en dessous. Un bandeau seul occupe la ligne et se * centre. */ .bandeaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); justify-items: center; gap: 16px; margin-top: 36px; } /* ------------------------- Carte des départements ------------------------ */ .carte-departements { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; } .carte-departements__grille { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 640px; } .departement { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--trait); border-radius: 4px; color: var(--secondaire); cursor: pointer; font-size: clamp(9px, 1.05vw, 12px); font-weight: 700; display: grid; place-content: center; padding: 0; text-decoration: none; font-variant-numeric: tabular-nums; transition: transform .12s, box-shadow .12s; } .departement:hover, .departement:focus-visible { transform: scale(1.18); z-index: 5; box-shadow: 0 0 0 2px var(--accent); } /* Cinq paliers, du plus clair au plus soutenu. */ .departement[data-densite="1"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--encre); } .departement[data-densite="2"] { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); color: var(--encre); } .departement[data-densite="3"] { background: color-mix(in srgb, var(--accent) 62%, var(--surface)); color: var(--sur-accent); } .departement[data-densite="4"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); } .legende { display: flex; align-items: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; color: var(--secondaire); font-size: 12.5px; } .legende i { width: 22px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid var(--trait); } .carte-departements__cote { border-left: 1px solid var(--trait); padding-left: 32px; } .carte__lecture { font-variant-numeric: tabular-nums; } .carte__lecture strong { display: block; font-family: var(--police-titre); font-size: 52px; line-height: 1; color: var(--accent); } .carte__lecture b { display: block; font-family: var(--police-titre); font-size: 19px; font-weight: 400; margin-top: 10px; } .carte__lecture span { color: var(--secondaire); font-size: 13.5px; display: block; margin-top: 4px; } .classement { list-style: none; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--trait); } .classement li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--trait); } .classement li:last-child { border-bottom: 0; } .classement a { color: var(--secondaire); text-decoration: none; } .classement a:hover { color: var(--accent); } .classement span { font-variant-numeric: tabular-nums; font-weight: 700; } /* --------------------------- Fiches en avant ----------------------------- */ .vitrine { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; } .vitrine__fiche { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: .18s; } .vitrine__fiche:hover { border-color: var(--accent); box-shadow: 0 14px 34px -26px rgba(20, 40, 45, .6); } .vitrine__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } /* Même format que sur la fiche (165 × 80), à la hauteur de l'en-tête de carte : 107 × 52. La hauteur ne bouge pas, la vitrine garde son alignement. */ .vitrine__logo { width: 107px; height: 52px; border-radius: 8px; background: var(--fond); border: 1px solid var(--trait); color: var(--accent); display: grid; place-content: center; font-family: var(--police-titre); font-size: 16px; font-weight: 700; overflow: hidden; } .vitrine__logo img { width: 100%; height: 100%; object-fit: contain; } .vitrine__niveau { background: var(--fond); color: var(--signal); border-radius: 999px; padding: 4px 11px; } .vitrine__fiche h3 { font-size: 20px; } .vitrine__fiche h3 a { color: inherit; text-decoration: none; } .vitrine__fiche h3 a:hover { color: var(--accent); } .vitrine__lieu { color: var(--secondaire); font-size: 13.5px; margin: 5px 0 0; } .vitrine__actions { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait); display: flex; gap: 10px; } .vitrine__actions a { flex: 1; text-align: center; text-decoration: none; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 700; } .vitrine__actions .plein { background: var(--action); color: var(--sur-action); } .vitrine__actions .plein:hover { background: var(--action-fonce); } .vitrine__actions .vide { box-shadow: inset 0 0 0 1px var(--trait); color: var(--encre); } .jetons { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .jetons li { border: 1px solid var(--trait); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; color: var(--secondaire); } /* ----------------------------- Actualités -------------------------------- */ .actualites { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; } .actualite { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--encre); transition: .18s; } .actualite:hover { border-color: var(--accent); } /* * LE CADRE D'UNE ACTUALITÉ : 650 × 300, soit 13/6. * * C'est le format du stock d'images existant, et le cadre s'y règle plutôt que * l'inverse — recadrer des centaines d'images coûte plus cher que changer une * ligne ici. La valeur est aussi dans config/vac.php (medias.formats.actualite) : * le CSS ne lit pas la configuration, et c'est la seule duplication du projet * qui ne peut pas être évitée. Changer l'un impose de changer l'autre. * * `object-fit: cover` reste : une image qui n'aurait pas exactement ce rapport * est rognée plutôt que déformée. Un visage étiré se voit, un bord coupé non. */ .actualite__image { aspect-ratio: 650 / 300; background: var(--fond); display: grid; place-content: center; } .actualite__image img { width: 100%; height: 100%; object-fit: cover; } .actualite__corps { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .actualite time { color: var(--accent); } .actualite h3 { font-size: 18px; line-height: 1.2; } .actualite p { margin: 0; font-size: 13.5px; color: var(--secondaire); } .actualite u { text-decoration: none; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--accent); } /* ------------------------------ Inscription ------------------------------ */ /* * « ESSAYEZ VOTRE FICHE » (25/09/2026). À gauche le titre et deux champs ; à * droite un écran d'ordinateur et, devant, un téléphone, qui montrent la * vraie page de fiche avec le nom tapé. Plus de cartes « gratuit » et * « partenaire » : le client n'en voulait plus sur l'accueil. */ .offre { background: var(--fond); } .offre h2 { font-size: clamp(26px, 3.6vw, 42px); max-width: 18ch; margin-top: 12px; } .offre__accroche { max-width: 56ch; margin: 14px 0 0; color: var(--secondaire); font-size: 17px; } .essai { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; align-items: center; } .essai--seul { grid-template-columns: minmax(0, 1fr); } .essai__courriel { margin-top: 24px; } .essai__carte { margin-top: 26px; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 22px; box-shadow: 0 24px 50px -40px rgba(12, 30, 40, .5); } .essai__champ + .essai__champ { margin-top: 14px; } .essai__champ label { display: block; margin-bottom: 6px; font-family: var(--police-etiquette); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--secondaire); } .essai__champ input { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 17px; color: var(--encre); background: var(--fond); border: 1px solid var(--trait); border-radius: 10px; transition: border-color .15s, box-shadow .15s, background .15s; } .essai__champ input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .essai__carte .bouton { width: 100%; margin-top: 18px; padding: 14px 22px; font-size: 13.5px; } .essai__rappel { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 13.5px; color: var(--secondaire); } .essai__rappel svg { flex: none; color: var(--accent); } /* La scène : l'ordinateur, et le téléphone posé devant, en bas à droite. */ .essai__scene { position: relative; padding: 0 70px 60px 0; } .essai__ordi { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 70px -50px rgba(12, 30, 40, .55); } .essai__barre { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--fond); border-bottom: 1px solid var(--trait); } .essai__pastilles { display: flex; gap: 5px; } .essai__pastilles i { width: 9px; height: 9px; border-radius: 50%; background: var(--trait); } .essai__url { flex: 1; min-width: 0; padding: 4px 12px; font-size: 12px; color: var(--secondaire); background: var(--surface); border: 1px solid var(--trait); border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .essai__url b { color: var(--encre); font-weight: 600; } .essai__vue { position: relative; height: 470px; overflow: hidden; } /* Le cadre est rendu à sa largeur réelle, puis réduit par essai-fiche.js. */ .essai__vue iframe, .essai__ecran-tel iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; transition: opacity .25s; } .essai__vue iframe { width: 1280px; height: 2400px; } .essai__tel { position: absolute; right: 0; bottom: 0; width: 230px; height: 470px; box-sizing: border-box; padding: 10px; background: #10181c; border-radius: 36px; box-shadow: 0 40px 60px -30px rgba(12, 30, 40, .6); } .essai__tel::before { content: ""; position: absolute; z-index: 2; top: 18px; left: 50%; width: 64px; height: 18px; margin-left: -32px; background: #10181c; border-radius: 999px; } .essai__ecran-tel { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--surface); border-radius: 27px; } .essai__ecran-tel iframe { width: 390px; height: 1800px; } /* Pendant le rechargement, la fiche pâlit : la frappe a bien été vue. */ .essai__scene.est-recharge iframe { opacity: .35; } @media (max-width: 1020px) { .essai { grid-template-columns: minmax(0, 1fr); gap: 34px; } } /* Sur un téléphone, l'écran d'ordinateur n'apporterait rien : seul le téléphone reste. */ @media (max-width: 620px) { .essai__scene { padding: 0; } .essai__ordi { display: none; } .essai__tel { position: relative; margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { .essai__vue iframe, .essai__ecran-tel iframe, .essai__champ input { transition: none; } } /* ------------------------ Révélation au défilement ----------------------- */ .revele { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .revele.est-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .revele { opacity: 1; transform: none; transition: none; } .rubrique:hover, .departement:hover { transform: none; } } /* ------------------------------- Adaptatif ------------------------------- */ @media (max-width: 1080px) { .hero__grille { grid-template-columns: 1fr; gap: 30px; } .carte-departements { grid-template-columns: 1fr; gap: 30px; } .carte-departements__cote { border-left: 0; border-top: 1px solid var(--trait); padding: 26px 0 0; } } @media (max-width: 860px) { /* * Les deux champs l'un sous l'autre. Le filet de séparation passe de * vertical à horizontal, sinon deux champs empilés paraissent n'en faire * qu'un seul très haut. */ .chercher__ligne { grid-template-columns: 1fr; } .chercher__ligne > .champ:first-of-type { border-radius: var(--rayon) var(--rayon) 0 0; } .chercher__envoi { padding: 16px; justify-content: center; border-radius: 0; } .reperes__grille { grid-template-columns: 1fr 1fr; } /* Plus rien à forcer : `auto-fit` repasse seul à une colonne. */ .entete-section { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { .carte-departements__grille { gap: 4px; } } /* ======================================================================= * LES ALLURES, sur la page d'accueil * ======================================================================= * * Même principe que dans vac.css : l'attribut `data-allure` de porte la * forme, les jetons portent la couleur. C'est ici que la différence se voit le * plus, parce que c'est la page qu'on regarde en premier. * * L'allure « editoriale » n'a aucun bloc : c'est la feuille au-dessus. */ /* ---------------------------------------------------------------------- * ÉPURÉE * ---------------------------------------------------------------------- */ /* * LE BANDEAU D'ACCUEIL EST CENTRÉ, et c'est le changement le plus visible de * tout l'habillage. Le titre, l'accroche et le moteur de recherche tiennent au * milieu de la page, sur beaucoup de blanc ; les encarts partenaires, qui * occupaient une colonne de droite étroite, passent en dessous, en ligne. Ils * y sont plus grands qu'avant — ce qui est vendu se voit mieux. */ html[data-allure="epuree"] .hero { background: var(--surface); border-bottom: 0; /* * Resserré le 25/09 sur la maquette du client : 91 px de blanc sous le * menu et un titre de 62 px sur trois lignes repoussaient la barre de * recherche à mi-écran. Elle remonte d'environ 300 px. */ padding-block: clamp(18px, 2vw, 28px) clamp(24px, 3vw, 40px); } html[data-allure="epuree"] .hero__grille { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 24px; } /* La colonne prend toute la largeur : la barre de recherche peut y faire 980. */ html[data-allure="epuree"] .hero__grille > div { width: 100%; } html[data-allure="epuree"] .hero h1 { font-size: clamp(28px, 3.2vw, 42px); max-width: 26ch; margin-inline: auto; margin-top: 10px; } html[data-allure="epuree"] .hero__accroche { margin-inline: auto; max-width: 70ch; font-size: 16px; } /* Même largeur utile que dans l'habillage d'origine : deux bandeaux de 520. */ html[data-allure="epuree"] .hero__colonne { width: 100%; max-width: 1056px; } /* * Le moteur de recherche : une barre unique, très arrondie, posée sur une * ombre douce. Les champs ne sont plus séparés par un filet plein mais par un * trait court, qui laisse la barre respirer d'un seul tenant. */ /* * La barre de recherche est la LIGNE, pas le bloc : le bloc porte aussi les * spécialités, et leur donner le même fond blanc arrondi produisait une grosse * masse en forme de galet. La ligne prend la gélule et l'ombre ; les puces * redescendent sur le fond de la page, sous elle. */ html[data-allure="epuree"] .chercher { margin-top: 20px; /* * 980 : la largeur de « À la une », juste dessous (25/09, demande du * client). Il faut aussi que la colonne du bloc prenne toute la largeur * (règle suivante) : centrée par `justify-items`, elle se réglait sur son * contenu et plafonnait la barre à 870. */ width: min(100%, 980px); margin-inline: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; text-align: left; } html[data-allure="epuree"] .chercher__ligne { background: var(--surface); box-shadow: var(--ombre); border-radius: 999px; gap: 0; align-items: center; padding: 10px 30px 6px 30px; } html[data-allure="epuree"] .champ { padding: 10px 22px; } html[data-allure="epuree"] .champ + .champ { box-shadow: inset 1px 0 0 var(--trait); } /* * Dans la gélule, les champs n'ont pas de coin à eux : c'est la ligne entière * qui est arrondie, et un coin rendu sur le premier champ se verrait à la * jointure. La liste déroulante, elle, garde ses propres angles et se décale un * peu plus bas — la gélule est plus épaisse que la barre carrée. */ html[data-allure="epuree"] .chercher__ligne > .champ:first-of-type { border-radius: 0; } html[data-allure="epuree"] .suggestions { top: calc(100% + 12px); } html[data-allure="epuree"] .chercher__mot { padding: 10px 22px 0; text-align: center; } html[data-allure="epuree"] .chercher .hero__accroche { text-align: center; margin-inline: auto; max-width: none; font-size: 15px; } html[data-allure="epuree"] .chercher__envoi { border-radius: 999px; text-transform: none; letter-spacing: .01em; font-size: 14.5px; padding: 16px 34px; margin-left: 6px; } /* Les spécialités descendent sous la barre, centrées, en gélules blanches. */ html[data-allure="epuree"] .puces { justify-content: center; padding: 18px 0 0; gap: 9px; } html[data-allure="epuree"] .puces__titre { width: 100%; text-align: center; margin: 0 0 4px; } html[data-allure="epuree"] .puce { background: var(--surface); border-color: var(--trait); padding: 9px 18px; font-size: 13.5px; box-shadow: 0 10px 22px -20px rgba(12, 30, 40, .6); } html[data-allure="epuree"] .puce:hover { border-color: transparent; background: var(--accent); color: var(--sur-accent); } /* * Les chiffres clés : plus de grille cloisonnée par des filets, quatre blocs * posés sur le fond de page. Le nombre est énorme, le libellé minuscule. */ html[data-allure="epuree"] .reperes { background: var(--surface); border-bottom: 0; } html[data-allure="epuree"] .reperes__grille { background: transparent; gap: 18px; padding-block: clamp(24px, 3vw, 44px); } html[data-allure="epuree"] .repere { background: transparent; padding-block: 6px; } html[data-allure="epuree"] .repere strong { font-size: clamp(34px, 4vw, 50px); } html[data-allure="epuree"] .repere span { font-family: var(--police-etiquette); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; } /* * Les titres de section prennent de l'air. Leur taille agrandie * (clamp(28px, 3.6vw, 44px)) est retirée le 25/09 au soir, à la demande du * client : ils reprennent celle de `.entete-section h2`, 24 à 36 px. */ html[data-allure="epuree"] .entete-section { margin-bottom: 42px; } html[data-allure="epuree"] .entete-section a { border-bottom: 0; background: var(--surface); box-shadow: var(--ombre); border-radius: 999px; padding: 11px 20px; } /* Cartes : sans filet, sur une ombre douce, et elles se soulèvent au survol. */ html[data-allure="epuree"] .rubrique, html[data-allure="epuree"] .vitrine__fiche, html[data-allure="epuree"] .actualite, html[data-allure="epuree"] .essai__carte, html[data-allure="epuree"] .essai__ordi { border-color: transparent; box-shadow: var(--ombre); } html[data-allure="epuree"] .rubrique { padding: 28px 14px 22px; } html[data-allure="epuree"] .rubrique:hover, html[data-allure="epuree"] .vitrine__fiche:hover, html[data-allure="epuree"] .actualite:hover { border-color: transparent; box-shadow: var(--ombre-survol); transform: translateY(-4px); } html[data-allure="epuree"] .vitrine__fiche, html[data-allure="epuree"] .actualite { transition: box-shadow .18s, transform .18s; } /* La pastille prend un souffle d'air de plus dans l'allure épurée. */ html[data-allure="epuree"] .rubrique__vignette { width: 68px; height: 68px; } html[data-allure="epuree"] .vitrine__logo, html[data-allure="epuree"] .actualite__image { border-radius: 14px; } html[data-allure="epuree"] .vitrine__actions a { border-radius: 999px; padding: 12px; } html[data-allure="epuree"] .vitrine__niveau, html[data-allure="epuree"] .jetons li { border-radius: 999px; } /* La carte des départements : cases arrondies, grille un peu plus aérée. */ html[data-allure="epuree"] .carte-departements__grille { gap: 6px; } html[data-allure="epuree"] .departement { border-radius: 7px; } html[data-allure="epuree"] .legende i { border-radius: 4px; } html[data-allure="epuree"] .carte-departements__cote { border-left: 0; } /* L'inscription : la carte du formulaire, un peu plus arrondie. */ html[data-allure="epuree"] .essai__carte { border-radius: 18px; padding: 26px; } @media (max-width: 860px) { html[data-allure="epuree"] .chercher { border-radius: var(--rayon); } html[data-allure="epuree"] .chercher__ligne { border-radius: var(--rayon); padding: 6px; } html[data-allure="epuree"] .champ + .champ { box-shadow: inset 0 1px 0 var(--trait); } html[data-allure="epuree"] .chercher__envoi { margin: 6px 0 0; } } /* ------------------------- La carte dessinée ---------------------------- */ /* * Les contours des départements, en SVG inséré dans la page. * * Ils viennent de config/departements-carte.php, projetés et simplifiés hors * ligne : pas de bibliothèque de cartographie, pas de fichier de géométrie à * charger, pas de tuiles appelées chez un tiers — et un tracé net à toutes les * tailles, ce qu'une image de fond n'aurait pas donné. * * Les paliers de couleur sont EXACTEMENT ceux de la grille schématique et de la * légende : changer l'un impose de changer les trois. */ .carte-france { display: block; width: 100%; max-width: 640px; margin-inline: auto; height: auto; overflow: visible; } .carte-france .departement path { fill: var(--surface); stroke: var(--trait); stroke-width: 1.1; stroke-linejoin: round; transition: fill .15s, stroke .15s; } .carte-france .departement[data-densite="1"] path { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); } .carte-france .departement[data-densite="2"] path { fill: color-mix(in srgb, var(--accent) 32%, var(--surface)); } .carte-france .departement[data-densite="3"] path { fill: color-mix(in srgb, var(--accent) 62%, var(--surface)); } .carte-france .departement[data-densite="4"] path { fill: var(--accent); } /* * Le survol souligne le département au lieu de l'agrandir : sur un tracé, un * agrandissement décale la forme par rapport à ses voisines et donne * l'impression d'un défaut d'affichage. * * Les deux annulations qui suivent ne sont pas décoratives : les règles de la * grille schématique portent sur la même classe, et `transform: scale()` * s'applique aussi à un élément SVG — la carte sautait au premier survol. */ .carte-france .departement { cursor: pointer; } .carte-france .departement:hover, .carte-france .departement:focus-visible { transform: none; box-shadow: none; outline: none; } .carte-france .departement:hover path, .carte-france .departement:focus-visible path { stroke: var(--sur-sombre); stroke-width: 2.4; } /* Le tracé survolé passe devant ses voisins, filet compris. */ .carte-france .departement:hover, .carte-france .departement:focus-visible { isolation: isolate; } @media (max-width: 560px) { /* Sur un téléphone, le filet d'un cheveu disparaît : on l'épaissit. */ .carte-france .departement path { stroke-width: 1.6; } } /* --------------------------- Autour de moi ------------------------------ */ /* * Le bouton est masqué dans le HTML (`hidden`) et révélé par le script quand * le navigateur sait répondre : un visiteur sans géolocalisation ne doit pas * voir un bouton qui ne ferait rien. */ /* * « Où êtes-vous ? » sur la page d'accueil. * * Le bloc portait un simple bouton ; il porte maintenant le composant partagé * — un champ d'adresse, un viseur, et le lieu trouvé écrit en toutes lettres. * D'où l'alignement en haut plutôt qu'au centre : le composant a deux lignes * quand il affiche un message, le libellé à côté n'en a qu'une. */ .vitrine__autour { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin: -14px 0 24px; } .vitrine__autour .ou-suis-je { flex: 1 1 340px; max-width: 460px; } .vitrine__autour [data-autour-message] { font-size: 13.5px; color: var(--secondaire); align-self: center; } .vitrine__autour .bouton { padding: 9px 18px; font-size: 13.5px; } /* ======================================================================= * LES ANIMATIONS — discrètes, et toutes annulables * ======================================================================= * * TROIS RÈGLES, tenues par tout ce qui suit : * * 1. rien ne bouge de plus de vingt pixels et rien ne dure plus d'une * demi-seconde. Une page d'annuaire se consulte, elle ne se regarde pas ; * 2. aucun contenu n'existe SEULEMENT dans l'animation : tout est déjà là, * l'animation ne fait que l'amener. Une page sans JavaScript est complète ; * 3. `prefers-reduced-motion` coupe tout, d'un seul bloc en fin de fichier. * Ce n'est pas une option de confort — chez certaines personnes, ces * mouvements donnent la nausée. */ /* ---------------------------------------------------------------------- * L'apparition en cascade * ---------------------------------------------------------------------- * * Les blocs porteurs de `.revele` apparaissent déjà au défilement. Leurs * ENFANTS arrivent maintenant l'un après l'autre, décalés de soixante * millisecondes — c'est ce décalage, et lui seul, qui fait la différence entre * « ça apparaît » et « ça se pose ». * * Le rang vient de `--rang`, posé par accueil.js sur chaque enfant. Le plafond * est dans le script : au-delà de douze, le dernier attendrait une seconde, et * on aurait l'impression que la page rame. */ @keyframes vac-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rubriques.est-visible > *, .cartes-rubriques.est-visible > *, .vitrine.est-visible > *, .actualites.est-visible > *, .bandeaux.est-visible > * { animation: vac-monte .5s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--rang, 0) * 60ms); } /* ---------------------------------------------------------------------- * La barre du haut, une fois qu'on a défilé * ---------------------------------------------------------------------- * * Elle est collante : sans repère, elle flotte au-dessus du contenu sans qu'on * sache si elle est posée dessus ou dedans. Une ombre très basse suffit à le * dire, et elle n'apparaît qu'après le premier défilement — en haut de page, * il n'y a rien à séparer. */ .entete { transition: box-shadow .25s ease; } .entete.est-defilee { box-shadow: 0 14px 34px -28px rgba(12, 30, 40, .55); } /* ---------------------------------------------------------------------- * Les fonds * ---------------------------------------------------------------------- * * Deux halos très dilués, posés dans les coins du bandeau d'accueil. Ils * prennent les couleurs du support — un annuaire vert a des halos verts — et * ne coûtent rien : ce sont des dégradés, pas des images. * * 7 % et 5 % : au-delà, ça se voit ; en dessous, ça ne sert à rien. */ .hero { position: relative; background-image: radial-gradient(60% 80% at 12% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), radial-gradient(50% 70% at 92% 8%, color-mix(in srgb, var(--action) 5%, transparent), transparent 72%); } /* La section d'inscription reçoit le même traitement, en plus discret encore. */ .offre { background-image: radial-gradient(45% 60% at 85% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%); } /* ---------------------------------------------------------------------- * Les micro-mouvements * ---------------------------------------------------------------------- */ /* Le lien d'une section : le filet se déroule au survol au lieu de s'allumer. */ .entete-section a { background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size .28s ease, color .2s ease; } .entete-section a:hover { background-size: 100% 2px; } /* Le bouton s'enfonce d'un cheveu quand on clique : le geste est confirmé. */ .bouton { transition: background .15s, transform .12s; } .bouton:active { transform: translateY(1px); } /* Les puces de spécialité arrivent en cascade elles aussi, sous la barre. */ .puces.est-visible .puce { animation: vac-monte .4s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--rang, 0) * 40ms); } /* ---------------------------------------------------------------------- * Tout s'annule ici * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .rubriques.est-visible > *, .cartes-rubriques.est-visible > *, .vitrine.est-visible > *, .actualites.est-visible > *, .bandeaux.est-visible > *, .puces.est-visible .puce { animation: none; } .entete.est-defilee { box-shadow: none; } .entete-section a { transition: none; background-size: 100% 2px; } .bouton:active { transform: none; } } /* ====================================================================== * TEXTE MIS EN FORME — les pages du réseau, et toute page de texte long * ====================================================================== * * Une page de mentions légales est un document, pas une page d'accueil : * une colonne étroite, des intertitres qui respirent, des tableaux lisibles. * Tout est porté par les jetons du thème — changer l'identité d'un annuaire * change ces pages avec le reste. */ .texte-riche { max-width: 74ch; font-size: 17px; line-height: 1.7; } .texte-riche h1 { font-size: clamp(28px, 4.4vw, 44px); margin-bottom: 24px; } .texte-riche h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--bordure, rgba(0, 0, 0, .1)); } .texte-riche h2:first-of-type { border-top: 0; padding-top: 0; } .texte-riche h3 { font-size: 19px; margin: 28px 0 8px; } .texte-riche p { margin: 0 0 16px; } .texte-riche ul, .texte-riche ol { margin: 0 0 16px; padding-left: 22px; } .texte-riche li { margin-bottom: 6px; } .texte-riche a { color: var(--accent); } /* Un tableau de durées de conservation déborde vite sur téléphone : il * défile dans son propre cadre, jamais la page entière. */ .texte-riche__cadre { overflow-x: auto; margin: 0 0 20px; } .texte-riche table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 16px; } .texte-riche th, .texte-riche td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--bordure, rgba(0, 0, 0, .1)); vertical-align: top; } .texte-riche thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; } .texte-riche hr { border: 0; border-top: 1px solid var(--bordure, rgba(0, 0, 0, .1)); margin: 32px 0; } /* ------------------------------------------------------------------ * * L'ANNUAIRE PAPIER — la carte large de l'accueil (lot 13 bis) * * Une CARTE, et non deux colonnes posées sur le fond de la page : * l'édition papier est un objet qu'on présente, et le cadre la distingue * du reste de l'accueil, qui est fait de listes et de compteurs. * * La couverture ne dépasse jamais 300 px — le format déclaré (config/ * vac.php, medias.formats.couverture) —, si bien qu'une image fournie au * double, comme on le conseille pour les écrans à forte densité, s'y * range sans déformer la grille. * ------------------------------------------------------------------ */ .edition-carte { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--surface); border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--trait); padding: clamp(24px, 3.5vw, 48px); } .edition-carte--droite { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } .edition-carte--droite .edition-carte__image { order: 2; } .section--sombre .edition-carte { background: var(--sombre-surface); box-shadow: inset 0 0 0 1px var(--sombre-trait, rgba(255, 255, 255, .12)); } .edition-carte__image { display: block; } .edition-carte__image img { display: block; width: 100%; height: auto; border-radius: 6px; /* Une couverture est un objet posé : l'ombre la décolle de la carte, ce qu'aucun filet ne fait aussi bien sur onze habillages différents. */ box-shadow: var(--ombre, 0 18px 40px rgba(0, 0, 0, .18)); } .edition-carte__corps .etiquette { color: var(--accent); display: block; margin-bottom: 10px; } .edition-carte__corps h2 { font-size: clamp(24px, 3.2vw, 36px); margin: 0; } .edition-carte__soustitre { margin: 10px 0 0; font-size: 19px; color: var(--secondaire); } .edition-carte__texte { margin-top: 16px; font-size: 17px; max-width: 58ch; } .edition-carte__achat { margin: 24px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; } .edition__prix { font-size: 26px; font-weight: 700; color: var(--encre); white-space: nowrap; } .section--sombre .edition-carte__soustitre, .section--sombre .edition-carte__texte { color: var(--sombre-texte); } .section--sombre .edition__prix { color: var(--sur-sombre); } /* Sur téléphone, la couverture passe au-dessus du texte et se centre : deux colonnes de 150 px ne montrent plus rien d'une couverture. */ @media (max-width: 860px) { .edition-carte, .edition-carte--droite { grid-template-columns: minmax(0, 1fr); } .edition-carte--droite .edition-carte__image { order: 0; } .edition-carte__image { max-width: 240px; } } /* ------------------------------------------------------------------ * * LE CATALOGUE — les couvertures du réseau en grille (lot 13 ter) * * Le nombre de tuiles par ligne est un réglage de la section, passé en * variable : `auto-fit` seul ne suffit pas ici, parce qu'une grille de * huit couvertures doit pouvoir être resserrée volontairement. * ------------------------------------------------------------------ */ .catalogue { display: grid; grid-template-columns: repeat(var(--catalogue-colonnes, 4), minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: 36px; } .catalogue__tuile { display: block; text-decoration: none; color: inherit; position: relative; } .catalogue__tuile img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: var(--ombre, 0 14px 30px rgba(0, 0, 0, .16)); transition: transform .18s ease; } .catalogue__tuile:hover img { transform: translateY(-4px); } .catalogue__titre { margin: 14px 0 0; font-family: var(--police-titre); font-size: 16px; font-weight: 700; line-height: 1.25; } .catalogue__ligne { margin: 6px 0 0; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--secondaire); } .section--sombre .catalogue__ligne { color: var(--sombre-texte); } /* * LA TUILE DE L'ANNUAIRE D'OÙ L'ON VIENT. * * Elle est déjà première ; le repère dit pourquoi. Une grille n'a pas de sens * de lecture évident : sans étiquette, la première place ne se remarque pas. */ .catalogue__repere { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; } .catalogue__tuile--sien img { outline: 2px solid var(--accent); outline-offset: 4px; } @media (max-width: 900px) { .catalogue { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ * * LES ANNUAIRES DU RÉSEAU — les logos (lot 13 ter) * * LE LOGO SE POSE SUR CARTON BLANC, comme dans l'en-tête commune aux * onze : ils sont dessinés pour du blanc, et un fond de couleur en mange * la moitié. Le carton reste blanc même sur fond sombre — c'est * précisément là qu'il sert. * * Hauteur fixe et `object-fit: contain` : onze logos de onze formats * différents doivent s'aligner, et aucun ne doit être déformé pour cela. * ------------------------------------------------------------------ */ .annuaires { display: grid; grid-template-columns: repeat(var(--annuaires-colonnes, 4), minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: 36px; } .annuaires__tuile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .annuaires__carton { display: grid; place-items: center; width: 100%; height: 92px; padding: 14px 18px; background: #fff; border-radius: var(--rayon); box-shadow: inset 0 0 0 1px var(--trait); transition: box-shadow .18s ease, transform .18s ease; } .annuaires__tuile:hover .annuaires__carton { box-shadow: inset 0 0 0 1px var(--accent), var(--ombre, 0 12px 26px rgba(0, 0, 0, .14)); transform: translateY(-3px); } .annuaires__carton img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* Pas encore de logo : le nom tient la place, dans la même boîte. */ .annuaires__carton--nom { font-family: var(--police-titre); font-size: 15px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--encre); } .annuaires__domaine { font-size: 13px; color: var(--secondaire); } .section--sombre .annuaires__domaine { color: var(--sombre-texte); } @media (max-width: 900px) { .annuaires { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .annuaires { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ * * LA FICHE PRODUIT D'UNE ÉDITION — sur le site du réseau * * C'est la page qu'on veut voir remonter sur « annuaire des élagueurs * 2026 ». Elle est bâtie comme une page de vente et non comme une * section : la couverture est plus grande qu'ailleurs (jusqu'à 380 px), * le titre est un h1, et le prix se lit avant le bouton. * ------------------------------------------------------------------ */ .edition-fil { margin: 0 0 24px; font-size: 14px; color: var(--secondaire); display: flex; flex-wrap: wrap; gap: 8px; } .edition-fil a { color: inherit; text-decoration: none; } .edition-fil a:hover { color: var(--accent); text-decoration: underline; } .edition-fiche { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .edition-fiche__image img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: var(--ombre, 0 22px 48px rgba(0, 0, 0, .2)); } .edition-fiche__corps .etiquette { color: var(--accent); display: block; margin-bottom: 12px; } .edition-fiche__corps h1 { font-size: clamp(28px, 4vw, 44px); margin: 0; line-height: 1.15; } .edition-fiche__soustitre { margin: 12px 0 0; font-size: 20px; color: var(--secondaire); } .edition-fiche__texte { margin-top: 22px; font-size: 17px; max-width: 60ch; } /* * Les repères en LISTE et non en puces alignées : sur une page de vente, « 320 * pages » et « 1 240 professionnels » sont des arguments, pas des étiquettes. * Ils méritent une ligne chacun. */ .edition-fiche__reperes { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .edition-fiche__reperes li { position: relative; padding-left: 26px; font-size: 16px; } .edition-fiche__reperes li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .edition-fiche__achat { margin: 30px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .edition-fiche__achat .edition__prix { font-size: 32px; } .edition-fiche__renvoi { margin: 20px 0 0; font-size: 14px; color: var(--secondaire); } .edition-fiche__renvoi a { color: var(--accent); } @media (max-width: 860px) { .edition-fiche { grid-template-columns: minmax(0, 1fr); } .edition-fiche__image { max-width: 260px; } } /* ================================================================== * * LA BOUTIQUE — lot 13 quater * * Panier, tunnel, suivi, facture. Volontairement sobre : une page de * paiement n'a pas à être une démonstration de mise en page, elle a à * être lisible et à ne surprendre personne. * ================================================================== */ .boutique-titre { font-size: clamp(26px, 3.6vw, 40px); margin: 0 0 24px; } .boutique-vide { font-size: 17px; color: var(--secondaire); } .boutique-vide a { color: var(--accent); } /* * L'ALERTE. Elle sert à trois choses : dire que la vente n'est pas ouverte, * qu'un champ manque, ou qu'un paiement n'a pas pu être lancé. Toujours en * haut, toujours visible — un message d'erreur qu'il faut chercher est un * message qui ne sert à rien. */ .boutique-alerte { display: block; padding: 14px 18px; margin: 0 0 24px; border-radius: var(--rayon); background: #fff7ed; box-shadow: inset 0 0 0 1px #fdba74; color: #7c2d12; font-size: 15px; line-height: 1.6; } .boutique-alerte ul { margin: 8px 0 0; padding-left: 20px; } .boutique-alerte a { color: inherit; text-decoration: underline; } /* ---------------------------- Le panier ---------------------------- */ .panier__ligne { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--trait); } .panier__image img { display: block; width: 100%; height: auto; border-radius: 4px; } .panier__titre { margin: 0; font-family: var(--police-titre); font-size: 17px; font-weight: 700; } .panier__titre a { color: inherit; text-decoration: none; } .panier__titre a:hover { color: var(--accent); } .panier__detail { margin: 4px 0 0; font-size: 14px; color: var(--secondaire); } .panier__quantite { display: flex; align-items: center; gap: 12px; } .panier__quantite form { display: flex; align-items: center; gap: 8px; margin: 0; } /* * L'étiquette du champ de quantité : lue par les lecteurs d'écran, invisible * à l'œil. La colonne porte déjà son sens visuellement, mais un champ sans * étiquette n'existe pas pour eux. */ .panier__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .panier__champ { width: 62px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; font: inherit; text-align: center; } .panier__lien { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--secondaire); text-decoration: underline; cursor: pointer; } .panier__lien:hover { color: var(--encre); } .panier__lien--retirer:hover { color: #b91c1c; } .panier__total { margin: 0; font-weight: 700; font-size: 17px; white-space: nowrap; } .panier__addition { margin-top: 28px; margin-left: auto; max-width: 380px; } .panier__addition p, .commande__addition p, .suivi__lignes p, .facture__addition p { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 10px; font-size: 16px; } .panier__addition small, .commande__addition small { display: block; font-size: 13px; color: var(--secondaire); } .panier__addition--fort, .commande__total, .facture__du { padding-top: 12px; border-top: 1px solid var(--trait); font-size: 20px; font-weight: 700; } .panier__tva, .panier__franco, .suivi__note, .commande__rassurance { display: block; font-size: 13.5px; color: var(--secondaire); margin: 8px 0 0; line-height: 1.6; } .panier__actions, .commande__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; } /* --------------------------- Le tunnel ----------------------------- */ .commande__colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); } .commande__section { font-size: 15px; text-transform: none; letter-spacing: 0; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--trait); } .champ { margin: 0 0 16px; } .champ label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ select { width: 100%; padding: 11px 13px; border: 1px solid var(--trait); border-radius: 8px; font: inherit; background: var(--surface); } .champ input:focus, .champ select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .champ small { display: block; font-size: 13px; color: var(--secondaire); margin-top: 5px; } .champ--deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .champ--deux .champ { margin-bottom: 0; } .champ--case { margin-top: 24px; } .champ--case label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; } .champ--case a { color: var(--accent); } .commande__addition { margin-top: 32px; padding: 22px; border-radius: var(--rayon); background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait); } .edition-fiche__form { display: inline; margin: 0; } /* ---------------------------- Le suivi ----------------------------- */ .suivi__etat { font-size: 20px; font-weight: 700; margin: 0 0 8px; padding: 16px 20px; border-radius: var(--rayon); background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait); } .suivi__etat--payee { box-shadow: inset 0 0 0 2px var(--accent); } .suivi__etat--expediee { background: #ecfdf5; box-shadow: inset 0 0 0 2px #34d399; color: #065f46; } .suivi__lignes { margin-top: 28px; max-width: 460px; } .suivi__blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; } .suivi__adresse { line-height: 1.7; } /* --------------------------- La facture ---------------------------- */ .facture__entete { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 24px; border-bottom: 2px solid var(--encre); } .facture__editeur { font-family: var(--police-titre); font-size: 20px; font-weight: 700; margin: 0 0 8px; } .facture__petit { font-size: 13px; color: var(--secondaire); margin: 2px 0 0; line-height: 1.6; } .facture__numero { text-align: right; } .facture__mot { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--secondaire); margin: 0 0 4px; } .facture__valeur { font-size: 22px; font-weight: 700; margin: 0; } .facture__client { margin: 28px 0; line-height: 1.7; } .facture__table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; } .facture__table th { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--trait); font-size: 13px; color: var(--secondaire); } .facture__table td { padding: 10px 0; border-bottom: 1px solid var(--trait); } .facture__chiffre { text-align: right; white-space: nowrap; } .facture__addition { margin-left: auto; max-width: 320px; } .facture__acquit { margin-top: 28px; font-weight: 600; } .facture__pied { margin-top: 32px; } /* * À L'IMPRESSION : la facture, et rien d'autre. L'en-tête du site, le pied de * page et les boutons n'ont rien à faire sur un document comptable — et c'est * ce réglage qui permet de se passer d'un générateur de PDF. */ @media print { .entete, .pied, .facture__imprimer { display: none !important; } .facture .section, .facture { padding: 0 !important; } body { background: #fff; } .facture__table td, .facture__table th { border-color: #ddd; } } @media (max-width: 760px) { .panier__ligne { grid-template-columns: 60px minmax(0, 1fr); row-gap: 12px; } .panier__quantite { grid-column: 1 / -1; } .panier__total { grid-column: 1 / -1; text-align: right; } .panier__addition { max-width: none; } .commande__colonnes, .suivi__blocs { grid-template-columns: minmax(0, 1fr); } .facture__entete { flex-direction: column; gap: 20px; } .facture__numero { text-align: left; } } /* ----------------------------- Fond de site ----------------------------- */ /* * LES DEUX PANNEAUX QUI BORDENT L'ACCUEIL — ce que WordPress appelait * l'habillage, et le seul espace vendu qui soit à CÔTÉ de la page et non * dedans. * * UNE ZONE UTILE ET DU FOND PERDU, comme en imprimerie. * * Ce qui est VENDU, c'est une bande de 250 × 1400 collée au contenu. Elle est * visible en entier partout où le fond de site paraît, à l'échelle 1:1 : jamais * agrandie, jamais réduite, jamais déformée. Un annonceur qui fait composer un * visuel au pixel le voit au pixel. * * Tout ce que le fichier porte au-delà de ces 250 px est du FOND PERDU. Il * remplit la marge des grands écrans jusqu'au bord, et se fait rogner quand * elle se resserre. C'est ce qui permet à un seul fichier de tenir du 1440 au * 2560 sans jamais laisser de blanc au bord ni couper ce qui compte. * * L'ORDRE DES PRIORITÉS, ET C'EST LUI QUI FAIT TOUTE LA MISE EN PAGE. * * Quand l'écran se resserre, ce qui cède cède dans cet ordre : * * 1. LE FOND PERDU. Le centre garde ses 1200 px et les deux bandeaux leurs * vrais 520 × 100 tant qu'il reste 250 px de chaque côté — c'est-à-dire * jusqu'à 1700 px d'écran. Au-dessus de 1700, tout est à sa taille pleine. * * 2. LE CENTRE. Sous 1700, la zone utile de 250 px est intouchable : c'est la * colonne centrale qui se rétrécit pour la laisser passer. Elle tombe à * 1020 px sur un 1536, à 924 px au seuil. Les bandeaux suivent, et restent * côte à côte — voir plus bas, sans quoi la régie perdrait sur l'accueil * ce qu'elle gagne sur les côtés. * * 3. RIEN. Sous 1440 px, les panneaux disparaissent, la colonne reprend ses * 1200 px et la page redevient celle de tout le monde, responsive jusqu'au * téléphone. * * Le seuil de 1440 EST le 15 pouces, et non une approximation : quinze pouces * linéaires à 96 PPI font exactement 1440 pixels. Les deux largeurs courantes * de cette taille d'écran — 1440 chez Apple, 1536 sous Windows en 1920 à 125 % * — sont donc dedans, et les 1366 et 1280 dehors. */ .habillage { display: none; } @media (min-width: 1440px) { /* * LA COLONNE CENTRALE, ET LA SEULE FORMULE QUI COMPTE. * * `min()` dit exactement les deux règles à la fois : jamais plus de 1200 px, * et jamais assez large pour manger les 250 px de chaque côté. Les 516 px * retranchés sont 2 × 250 plus 16 px pour la barre de défilement — `100vw` * la compte, la colonne centrée non, et sans cette réserve la zone utile * serait rognée de quelques pixels chez les visiteurs qui l'ont permanente. * * `position: relative` fait de `body` le repère des deux colonnes, qui * doivent courir sur toute la HAUTEUR de la page et non sur celle de * l'écran. Mesuré sur l'accueil de démonstration : aucun des éléments * absolus de la page ne bouge d'un pixel, et la hauteur du document est * inchangée. La règle est de toute façon portée par `body.a-habillage` : * elle n'existe que sur un accueil dont le fond de site est vendu. */ body.a-habillage { --largeur: min(1200px, calc(100vw - 516px)); position: relative; /* La hauteur vendue, et le haut du rail. Déclarées ici parce que le point d'accrochage du panneau se calcule à partir des deux. */ --fond-hauteur: 1400px; --fond-haut: 90px; /* * RIEN APRÈS LE FOND DE SITE (25/09 au soir). * * La page s'arrête où l'image s'arrête : colonne + deux panneaux. Sur * un écran plus large, barre du haut, sections sombres et pied ne * partent plus jusqu'au bord — au-delà, il n'y a que le fond uni * (celui de `body`, que le navigateur étend à tout l'écran). * * `--fond-largeur` est posée sur `body` par le gabarit : la largeur * du fichier réellement affiché. Sous ce seuil, `max-width` ne joue * pas et rien ne change — les rails gardent `(100% − colonne) / 2`. */ max-width: calc(var(--largeur) + 2 * var(--fond-largeur, 680px)); margin-inline: auto; } /* * LA COLONNE — un rail, pas un panneau. * * Elle ne montre rien : elle occupe toute la marge sur toute la hauteur de * la page, et sert de piste au panneau qui glisse dedans. Il fallait deux * éléments parce qu'un élément collant RESTE DANS LE FLUX : impossible de le * poser lui-même dans la marge. * * `100%` et non `100vw` : le pourcentage se calcule sur `body`, donc sans la * barre de défilement. C'est la seule mesure qui colle exactement au bord * sans mordre sur le contenu — un `100vw` la compterait et la colonne de * droite chevaucherait la page. * * `pointer-events` : le rail traverse toute la page, il n'a aucune raison * d'intercepter un clic. Seul le panneau en reprend. */ .habillage { display: block; position: absolute; top: var(--fond-haut); /* sous la barre du haut */ bottom: 0; width: calc((100% - var(--largeur)) / 2); z-index: 50; /* derrière l'en-tête collant (60) */ pointer-events: none; } .habillage--gauche { left: 0; } .habillage--droite { right: 0; } /* * LE PANNEAU — il descend avec la page, puis s'accroche au bas. * * C'EST `top` QUI FAIT ÇA, ET NON `bottom` — le contraire de l'intuition, * vérifié au navigateur avant d'être écrit. * * `bottom: 0` ne retient rien : il TIRE VERS LE HAUT un élément dont le bas * serait plus bas que l'écran, et lâche prise dès que ce bas remonte * au-dessus du bord. C'est le collage d'un pied de page court, pas celui * d'un panneau plus grand que l'écran — essayé, mesuré, le panneau s'en * allait comme s'il n'y avait pas de règle du tout. * * `top`, lui, POUSSE VERS LE BAS un élément dont le haut monterait au-dessus * de la valeur donnée. En posant cette valeur à « la hauteur de l'écran * moins celle du panneau » — donc un nombre NÉGATIF, −536 sur un écran de * 864 —, on dit exactement : le haut du panneau ne remonte pas plus haut que * ça, c'est-à-dire son bas ne quitte pas le bord inférieur de l'écran. * * Tant que le panneau n'est pas arrivé là, la contrainte ne s'applique pas * et il défile normalement : on découvre ses 1400 px au fur et à mesure. * Ensuite il s'immobilise et ne quitte plus l'écran jusqu'au pied de page. * * `min()` sert le cas inverse, celui d'un écran PLUS HAUT que le panneau : * la soustraction devient positive et pousserait le panneau vers le bas dès * le premier pixel de défilement. Bornée à la hauteur du rail, elle le colle * simplement sous la barre du haut — ce qui est le bon comportement là où * les 1400 px tiennent d'un coup à l'écran. * * `max-height: 100%` est le garde-fou des pages courtes : sur un accueil * plus court que 1400 px, le panneau serait plus grand que son rail, il * dépasserait sous le pied de page et allongerait le document. Il se rogne * là plutôt que de déborder. */ .habillage__lien { position: sticky; top: min(var(--fond-haut), calc(100vh - var(--fond-hauteur))); display: block; height: var(--fond-hauteur); max-height: 100%; overflow: hidden; /* c'est ici que le fond perdu se rogne */ pointer-events: auto; } /* * L'IMAGE NE SE REDIMENSIONNE JAMAIS. Pas de `width: 100%`, pas de * `object-fit` : elle est posée à sa taille naturelle et le panneau la * coupe. C'est toute la différence entre du fond perdu et une image * responsive — l'un garde l'échelle et perd les bords, l'autre garde les * bords et perd l'échelle. * * Elle est collée au CÔTÉ INTÉRIEUR, celui qui touche le contenu : c'est là * qu'est la zone utile, et c'est donc elle qui survit au rognage. Le fond * perdu part vers le bord de l'écran, où il n'y a rien à perdre. */ .habillage__lien img { position: absolute; top: 0; display: block; width: auto; height: auto; max-width: none; max-height: none; } .habillage--gauche .habillage__lien img { right: 0; } .habillage--droite .habillage__lien img { left: 0; } /* * LES DEUX BANDEAUX RESTENT CÔTE À CÔTE — la contrepartie du * rétrécissement, et sans elle il coûterait plus qu'il ne rapporte. * * `.bandeaux` exige 520 px par colonne : dès que la colonne centrale * descend, deux bandeaux ne rentrent plus et la grille les empile. La régie * perdrait alors la moitié de ce qu'elle a vendu sur l'accueil pour habiller * les côtés — un espace payé en remplace un autre, et l'annuaire n'y gagne * rien. * * Le minimum descend donc à 380 px SOUS LE FOND DE SITE SEULEMENT. C'est ce * qu'il faut pour tenir jusqu'au seuil : à 1440 px d'écran, la colonne fait * 924 px et laisse 836 px utiles, soit deux bandeaux de 410. Au-dessus de * 1700 px la question ne se pose plus — la colonne a repris ses 1200 px et * les bandeaux leurs 520 pleins. * * Partout ailleurs — accueil sans fond vendu, actualités, pages libres — la * règle des 520 px reste intacte, et rien ne change. */ body.a-habillage .bandeaux { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } } /* Sur papier, le fond de site n'a rien à faire : il n'y a pas de marge. */ @media print { .habillage { display: none; } } /* ====================================================================== * LE MÉTIER ET LES QUESTIONS FRÉQUENTES (25/09/2026) * ====================================================================== * * Le texte de fond de l'accueil, écrit pour les moteurs, mis en page pour * les lecteurs. Deux sections qui se suivent : fond de carte pour le métier, * fond de page pour les questions — l'alternance les sépare sans filet. */ .metier { background: var(--surface); } .metier__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .metier__grille--seule { grid-template-columns: minmax(0, 1fr); max-width: 72ch; } .metier__texte .entete-section { margin-bottom: 20px; } .metier__texte p { margin: 0 0 14px; color: var(--secondaire); font-size: 16px; line-height: 1.7; } .metier__texte .metier__chapeau { color: var(--encre); font-size: 18.5px; line-height: 1.6; } .metier__action { margin-top: 26px !important; } .metier__cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } /* Trois cartes : la dernière prend toute la largeur plutôt que de laisser un trou. */ .metier__carte:last-child:nth-child(odd) { grid-column: 1 / -1; } .metier__carte { position: relative; padding: 26px 26px 24px; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); transition: transform .18s, box-shadow .18s, border-color .18s; } .metier__carte:hover { transform: translateY(-3px); border-color: transparent; background: var(--surface); box-shadow: var(--ombre, 0 18px 40px -30px rgba(12, 30, 40, .5)); } .metier__numero { display: block; font-family: var(--police-titre); font-size: 34px; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; } .metier__numero::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 12px; border-radius: 2px; background: var(--filet); } .metier__carte h3 { font-size: 20px; margin: 16px 0 8px; } .metier__carte p { margin: 0; color: var(--secondaire); font-size: 15px; line-height: 1.65; } /* ----------------------------- Questions ------------------------------ */ .faq { background: var(--fond); } .faq__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; } /* Le titre reste en vue pendant qu'on parcourt les questions. */ .faq__entete { position: sticky; top: 110px; } .faq__entete .entete-section { margin-bottom: 0; } .faq__liste { display: flex; flex-direction: column; gap: 12px; } .faq__question { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); transition: border-color .18s, box-shadow .18s; } .faq__question:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--trait)); } .faq__question[open] { border-color: transparent; box-shadow: var(--ombre, 0 18px 40px -30px rgba(12, 30, 40, .5)); } .faq__question summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px 20px 24px; cursor: pointer; list-style: none; border-radius: var(--rayon); } .faq__question summary::-webkit-details-marker { display: none; } .faq__question summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .faq__question summary h3 { margin: 0; font-size: 18px; line-height: 1.35; } /* Le signe : un « + » qui devient « − » à l'ouverture. */ .faq__signe { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); transition: background .18s, transform .25s; } .faq__signe::before, .faq__signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--accent); transition: transform .25s; } .faq__signe::after { transform: rotate(90deg); } .faq__question[open] .faq__signe { background: var(--accent); transform: rotate(180deg); } .faq__question[open] .faq__signe::before, .faq__question[open] .faq__signe::after { background: var(--sur-accent); } .faq__question[open] .faq__signe::after { transform: rotate(0deg); } .faq__reponse { padding: 0 24px 22px; color: var(--secondaire); font-size: 16px; line-height: 1.7; } .faq__reponse p { margin: 0 0 10px; } .faq__reponse p:last-child { margin-bottom: 0; } .faq__reponse a { color: var(--accent); font-weight: 600; } @media (max-width: 860px) { .metier__grille, .faq__grille { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .faq__entete { position: static; } } @media (max-width: 560px) { .metier__cartes { grid-template-columns: minmax(0, 1fr); } .faq__question summary { padding: 16px 16px 16px 18px; } .faq__question summary h3 { font-size: 16.5px; } .faq__reponse { padding: 0 18px 18px; } }