@charset "UTF-8"; /* ========================================================================== CANI'COACH VILLEURBANNE - habillage editorial STRUCTURE du kit (Y:\WEB\site\design), COULEURS du site canin. Decision de Frank le 10/08/2026 : deux labos qui se ressemblent deviendraient une variable parasite dans les mesures. On importe donc le rythme, les composants et les garde-fous d'accessibilite, pas la palette terracotta. La palette vient de CHARTE-GRAPHIQUE-CODEX.md, a la racine du site : vert profond, orange corail, ivoire. Les valeurs de cette charte sont reprises telles quelles ; seules deux teintes sont derivees, et le commentaire dit pourquoi a chaque fois. CE QUI N'EST PAS REPRIS de la charte Codex : les polices (Cormorant Garamond + Manrope) cedent la place a celles du kit (Anton + Poppins), et les en-tetes photographiques immersifs avec parallaxe cedent la place au bandeau aplat + mascotte detouree. Le kit n'utilise aucune image de fond. PORTEE : tout est scope sous .k-skin. Cette classe n'est posee sur que pour les pages listees dans la variable kitPages de inc/header.asp. Pour basculer une page de plus sur cette charte, ajouter sa cle dans cette liste ; toutes les autres gardent strictement leur habillage d'origine. Chargee apres assets/style.css, donc elle gagne les arbitrages a specificite egale. ========================================================================== */ .k-skin { /* ---- Palette : vert profond / orange corail / ivoire ------------------- Valeurs reprises de CHARTE-GRAPHIQUE-CODEX.md. Les deux seules teintes derivees sont --k-ink-900 et --k-accent-600, chacune pour une raison de contraste expliquee sur place. ------------------------------------------ */ /* DERIVEE : la charte s'arrete au vert profond #173B32. Il faut un cran plus sombre pour le degrade du bandeau, sinon les deux tons se confondent. */ --k-ink-900: #102A22; /* fond sombre profond (derive) */ --k-ink-800: #173B32; /* vert profond : fond des sections inversees */ --k-fg: #25332E; /* texte principal (couleur « texte » de la charte)*/ /* DERIVEE : le corail de la charte, #D66551, ne monte qu'a 3,2 sur l'ivoire. C'est assez pour un aplat, pas pour du TEXTE, qui exige 4,5. On fonce donc le corail pour l'usage texte (liens, mots surlignes) et on garde le corail d'origine pour les aplats, ci-dessous en --k-sand-500. Meme raisonnement que sur le site Aerial, ou le sable du bouton ne pouvait pas servir de couleur de texte. */ /* Calibre sur le fond le plus defavorable ou il sert : l'encadre de reponse, dont le fond est deja teinte corail (#F4DDD6). Un lien a #B04430 n'y monte qu'a 4,35, sous le seuil. Ce ton-ci tient 4,87 sur l'encadre et 5,73 sur le fond de page. */ --k-accent-600:#A63E2B; /* accent texte : liens, mots surlignes */ --k-accent-800:#82301F; /* survol de l'accent */ --k-accent-50: #F4DDD6; /* orange doux de la charte */ --k-second-500:#2B5B4D; /* vert de la charte : sur-titres, filets */ --k-second-300:#7C9C8E; --k-sand-500: #E37A66; /* corail de la charte : bouton principal, aplats */ /* Corail CLAIR, pour les liens poses sur le vert profond. Le corail plein n'y monte qu'a 4,24, sous le seuil de 4,5. Celui-ci tient 5,76 tout en restant distinct du texte creme qui l'entoure -- un lien doit se voir comme lien. */ --k-sand-300: #F0A08C; --k-sand-700: #B4523F; /* filet du bouton principal, voir .k-btn-primary */ --k-sand-100: #F4DDD6; /* sur-titres poses sur un aplat colore ou sombre */ --k-gold: #A8442C; /* numeros de carte et etoiles de note : le corail plafonne trop bas pour du texte, il faut ce ton fonce (il en faut 4,5) */ --k-cream-50: #FDFCF7; /* fond des en-tetes de page interieure */ --k-cream-100: #FBF8F0; /* papier : fond de page */ --k-cream-500: #F3EFE5; /* ivoire : fond de section alternee */ --k-white: #FFFFFF; /* Ces deux gris sont calcules sur le fond le PLUS FONCE de la charte, l'ivoire #F3EFE5, et non sur le papier. Un gris valide sur papier tombe sous le seuil sur l'ivoire. Le gris secondaire de la charte, #626E68, n'atteint que 4,62 sur ivoire : on le fonce pour se donner de la marge. */ --k-fg-muted: #55625B; /* chapo, descriptions */ --k-fg-subtle: #626E68; /* gris secondaire de la charte, metadonnees */ --k-fg-inv: var(--k-cream-100); --k-border: rgba(37, 51, 46, .12); --k-border-strong: rgba(37, 51, 46, .28); /* CONTOUR DE COMMANDE, distinct des filets ci-dessus. Un bouton fantome est une commande : son contour doit atteindre 3 pour 1 contre la surface qui le porte, sinon il est present et pourtant introuvable. Le filet a .28 tombe a 1,71 sur une carte blanche. Un filet de carte, lui, n'a pas cette obligation : c'est un conteneur, pas une commande. D'ou deux jetons. */ --k-border-control: rgba(37, 51, 46, .55); --k-tint: 37, 51, 46; /* composantes RVB du texte, pour les ombres */ /* ---- Typographie ------------------------------------------------------ */ --k-display: 'Anton', 'Oswald', Impact, sans-serif; --k-body: 'Poppins', 'Helvetica Neue', system-ui, sans-serif; /* ---- Formes et mouvement ---------------------------------------------- */ --k-radius-md: 12px; --k-radius-lg: 20px; --k-radius-pill:999px; --k-ease: cubic-bezier(.22, 1, .36, 1); --k-fast: 140ms; --k-base: 240ms; } /* -------------------------------------------------------------------------- 1. REPRISE EN MAIN DU GABARIT EXISTANT
est bride a 1180px par style.css. On le libere pour que les sections puissent occuper toute la largeur, et on remet un conteneur .k-wrap a l'interieur de chaque section. -------------------------------------------------------------------------- */ .k-skin { background: var(--k-cream-100); color: var(--k-fg); font-family: var(--k-body); font-size: 19.2px; line-height: 1.62; } .k-skin main.wrap { width: 100%; max-width: none; margin: 0; padding: 0; } .k-skin .k-wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; } .k-skin .k-sec { position: relative; padding: 96px 0; } .k-skin .k-sec.k-tight { padding: 64px 0; } .k-skin .k-bg-cream { background: var(--k-cream-100); } /* REGLE DES FONDS DE CARTE : une carte n'a JAMAIS le fond de sa section. Le blanc pur est reserve aux CARTES, il ne sert pas de fond de section. Le neutre d'une section est le creme, pas le blanc. Une carte blanche posee sur une section blanche ne se distingue plus que par un filet a 12 % d'opacite : elle disparait. .k-bg-white ne doit donc heberger aucune carte. Verifie sur le site de reference : 12 sections, 0 carte de la couleur de sa section. */ .k-skin .k-bg-white { background: var(--k-white); } /* Sur le fond beige, le gris des metadonnees n'atteint plus 4,5 : on le rabat sur le gris secondaire, qui lui passe. */ .k-skin .k-bg-warm { background: var(--k-cream-500); --k-fg-subtle: var(--k-fg-muted); } .k-skin .k-bg-ink { background: var(--k-ink-800); color: var(--k-fg-inv); } /* -------------------------------------------------------------------------- 2. TYPOGRAPHIE Anton en capitales pour les titres, Poppins pour tout le reste. -------------------------------------------------------------------------- */ .k-skin h1, .k-skin h2, .k-skin h3 { margin: 0; font-family: var(--k-display); font-weight: 400; /* Anton n'existe qu'en 400 */ text-transform: uppercase; letter-spacing: .02em; line-height: 1.06; color: var(--k-fg); text-wrap: balance; } .k-skin h1 { font-size: clamp(32px, 4.1vw, 56px); line-height: 1.02; max-width: 20ch; } .k-skin h2 { font-size: clamp(30px, 3.8vw, 48px); max-width: 20ch; } /* LARGEUR LIBRE, a poser sur un titre dont les coupures sont FORCEES a la main par des
. La largeur maximale de 20 caracteres ci-dessus ajoute sinon ses propres coupures par-dessus les votres : mesure sur un titre coupe en trois, il sortait en six lignes et 305px de haut. On ne peut pas avoir les deux -- soit le navigateur decide, soit l'auteur. */ .k-skin h1.k-libre, .k-skin h2.k-libre, .k-skin h3.k-libre { max-width: none; } .k-skin h3 { font-size: 24px; } /* Sur fond sombre, les titres doivent basculer explicitement. La couleur posee sur .k-bg-ink ne suffit pas : la regle ci-dessus fixe `color` en dur sur les titres, ce qui bloque l'heritage et laisserait un h2 de la couleur exacte du fond (contraste 1 sur 1, titre invisible). */ .k-skin .k-bg-ink h1, .k-skin .k-bg-ink h2, .k-skin .k-bg-ink h3, .k-skin .k-cite h1, .k-skin .k-cite h2, .k-skin .k-cite h3 { color: var(--k-fg-inv); } /* CODE AU FIL DU TEXTE. overflow-wrap: anywhere n'est pas cosmetique : un nom d'identifiant est un seul « mot » de 43 caracteres que rien ne peut couper. Sur un ecran de 375px il mesure 402px, refuse de rentrer, et pousse tout le document a 480px. Mesure sur la page outil-mots-cles avec `KeywordPlanIdeaService.GenerateKeywordIdeas`. ANYWHERE et pas BREAK-WORD : seul `anywhere` reduit aussi la largeur minimale du contenu, ce qui permet en plus au conteneur de grille de rentrer. */ .k-skin code { overflow-wrap: anywhere; font-size: .92em; } .k-skin p { margin: 0 0 1em; font-size: 19.2px; line-height: 1.62; text-wrap: pretty; } .k-skin p:last-child { margin-bottom: 0; } .k-skin .k-lead { font-size: 21.6px; line-height: 1.6; color: var(--k-fg-muted); max-width: 46ch; } .k-skin a { color: inherit; } /* Le fil d'Ariane est exclu : il herite de la couleur de son conteneur, qui change avec la tonalite de l'en-tete (sauge sur clair, sable sur sombre). Sans cette exclusion, la regle generique le repasse en terracotta et le lien tombe a 2,7 de contraste sur l'en-tete sombre. */ .k-skin main a:not(.k-btn):not(.k-tags a):not(.k-breadcrumb a) { color: var(--k-accent-600); } .k-skin main a:not(.k-btn):not(.k-breadcrumb a):hover { color: var(--k-accent-800); } /* Lien au fil du texte : la couleur ne suffit pas. L'accent et le gris du texte courant sont a 1,06 de contraste l'un de l'autre, donc indistinguables pour un daltonien. Il faut un second signal, ici le souligne. */ .k-skin main p a:not(.k-btn), .k-skin main li a:not(.k-btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .k-skin .k-bg-ink p, .k-skin .k-cite p { color: rgba(255, 255, 255, .84); } /* Lien au fil du texte DANS une section sombre : la terracotta n'y tient pas (2,18 de contraste mesure sur l'encre). Elle bascule sur le sable. Le selecteur reprend exactement la forme de la regle generique ci-dessus, plus la classe de section : sans ca il perd l'arbitrage de specificite et la regle reste sans effet. */ .k-skin main .k-bg-ink a:not(.k-btn):not(.k-tags a):not(.k-breadcrumb a), .k-skin main .k-cite a:not(.k-btn):not(.k-tags a):not(.k-breadcrumb a), .k-skin main .k-page-head.k-dark a:not(.k-btn):not(.k-tags a):not(.k-breadcrumb a) { color: var(--k-sand-300); } .k-skin main .k-bg-ink a:not(.k-btn):not(.k-tags a):not(.k-breadcrumb a):hover { color: var(--k-white); } /* Mise en valeur dans un titre : un titre n'est jamais monochrome. REPARTITION : le H1 prend le simple changement de couleur (.k-hl), les H2 prennent l'aplat arrondi (.k-hl-box). Ca hierarchise les deux niveaux au lieu de repeter le meme effet, et ca laisse le H1 respirer. */ .k-skin .k-hl { color: var(--k-accent-600); } .k-skin .k-bg-ink .k-hl, .k-skin .k-cite .k-hl { color: var(--k-sand-500); } /* Aplat arrondi. box-decoration-break: clone est indispensable : sans lui, l'aplat d'un segment qui passe a la ligne n'est arrondi qu'aux deux extremites, pas sur chaque fragment. */ /* UN TITRE QUI PORTE UN APLAT A BESOIN D'INTERLIGNE, et ce n'est pas une question de rembourrage. La boite peinte d'un element en ligne ne suit PAS son interligne : sa hauteur vient des metriques de la police (montante + descendante). Pour Anton elle vaut environ 1,5 fois la taille de police -- 72px pour un titre a 48px -- alors que l'interligne de 1,06 ne reserve que 50,9px. L'aplat deborde donc de 21px et mord la ligne du dessus et le paragraphe du dessous. Ajouter du rembourrage vertical ne corrige rien : il s'AJOUTE a ces 72px. La seule reponse est d'ouvrir la ligne a 1,5. On ne l'applique qu'aux titres qui contiennent reellement un aplat, pour garder l'interligne serre -- qui est la signature de la charte -- partout ailleurs. */ .k-skin h1:has(.k-hl-box), .k-skin h2:has(.k-hl-box), .k-skin h3:has(.k-hl-box) { line-height: 1.5; } .k-skin .k-hl-box { background: var(--k-accent-600); color: var(--k-cream-100); padding: 0 .18em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Sur fond sombre, l'aplat terracotta ne se detache pas assez du fond (2,7 en contraste de forme). On bascule sur le sable, texte encre. */ .k-skin .k-bg-ink .k-hl-box, .k-skin .k-cite .k-hl-box, .k-skin .k-page-head.k-dark .k-hl-box { background: var(--k-sand-500); /* ink-900 et non ink-800 : sur le corail, le vert profond ne donne que 4,24. Le cran plus sombre porte a 5,21. Le texte est grand ici, donc 4,24 suffisait deja au seuil de 3 -- mais on aligne sur le bouton principal : meme aplat, meme exigence, une seule chose a retenir. */ color: var(--k-ink-900); } /* Sur-titre : petit texte gras tres espace, precede d'un trait de 24px. C'est le marqueur qui ouvre chaque section. */ .k-skin .k-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 14.4px/1 var(--k-body); letter-spacing: .06em; text-transform: uppercase; color: var(--k-second-500); } .k-skin .k-eyebrow::before { content: ""; width: 24px; height: 1.5px; background: currentColor; } .k-skin .k-eyebrow.k-accent { color: var(--k-accent-600); } /* Sur-titre sur surface sombre : le corail plein n'y monte qu'a 4,24, sous le seuil de 4,5 exige d'un petit texte. Le corail clair tient 5,76. Meme correctif que pour les liens. Cette regle n'avait jamais servi jusqu'au panneau de citation : aucune bande sombre du site ne portait de sur-titre. */ .k-skin .k-bg-ink .k-eyebrow, .k-skin .k-cite .k-eyebrow { color: var(--k-sand-300); } .k-skin .k-head h2 { margin-top: 14px; } .k-skin .k-head .k-lead { margin-top: 18px; } /* -------------------------------------------------------------------------- 3. BOUTONS Pilule. Le bouton fantome utilise une ombre interne et non une bordure, pour que le survol ne decale jamais la mise en page. -------------------------------------------------------------------------- */ .k-skin .k-btn { display: inline-flex; align-items: center; gap: 9px; font: 600 17px/1 var(--k-body); border: 0; padding: 15px 26px; border-radius: var(--k-radius-pill); text-decoration: none; cursor: pointer; transition: transform var(--k-fast) var(--k-ease), background var(--k-base) var(--k-ease), color var(--k-base) var(--k-ease); } .k-skin .k-btn:hover { transform: translateY(-2px); } /* Libelle en --k-ink-900 et non --k-ink-800 : le corail est une teinte MOYENNE, pas un jaune clair comme le sable du site Aerial. Le vert profond dessus ne monte qu'a 4,24, sous le seuil de 4,5 exige pour du texte. Le cran plus sombre le porte a 5,21. C'est la seule facon de garder le corail de la charte comme aplat de bouton. */ /* FILET DU BOUTON PRINCIPAL, en plus de l'aplat. Le corail est une teinte moyenne : pose sur un fond clair il ne se detache qu'a 2,73 sur creme et 2,90 sur blanc, sous les 3 pour 1 exiges d'une commande. Le site Aerial vivait avec cet ecart faute de mieux ; ici un filet du meme corail en plus fonce le comble sans changer l'aplat -- il monte a 4,97 sur blanc. C'est une ombre interne et non un border, pour ne pas decaler le libelle. */ .k-skin .k-btn-primary { background: var(--k-sand-500); color: var(--k-ink-900); box-shadow: inset 0 0 0 1.5px var(--k-sand-700), 0 2px 6px rgba(var(--k-tint), .08); } .k-skin .k-btn-primary:hover { background: var(--k-accent-800); color: var(--k-white); } .k-skin .k-btn-ghost { background: transparent; color: var(--k-ink-800); box-shadow: inset 0 0 0 1.5px var(--k-border-control); } .k-skin .k-btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--k-ink-800); } /* Bouton fantome sur TOUTE surface sombre. Lister .k-bg-ink seul laissait le bandeau .k-page-head.k-dark avec un libelle encre sur fond encre, a 1,23 de contraste. Chaque nouvelle surface sombre doit etre ajoutee ici. */ .k-skin .k-bg-ink .k-btn-ghost, .k-skin .k-cite .k-btn-ghost, .k-skin .k-page-head.k-dark .k-btn-ghost { color: var(--k-fg-inv); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); } .k-skin .k-bg-ink .k-btn-ghost:hover, .k-skin .k-cite .k-btn-ghost:hover, .k-skin .k-page-head.k-dark .k-btn-ghost:hover { background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1.5px var(--k-cream-100); } /* La fleche glisse de 3px au survol */ .k-skin .k-btn .k-arr { transition: transform var(--k-base) var(--k-ease); } .k-skin .k-btn:hover .k-arr { transform: translateX(3px); } .k-skin .k-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 28px; } /* Format reduit, pour les cartouches poses a l'interieur d'une carte. line-height et text-align sont indispensables : .k-btn fixe line-height a 1 via la propriete raccourcie font, ce qui ecrase un libelle long sur deux lignes (cas de « Referencement a Villeurbanne »). */ .k-skin .k-btn-sm { font-size: 15.6px; padding: 11px 20px; gap: 7px; line-height: 1.3; text-align: center; } /* REGLE DU SYSTEME : dans une carte, un lien n'est JAMAIS du texte nu. Il prend la forme d'un cartouche (pilule), comme sur le site de reference. Deux liens = deux cartouches cote a cote, jamais un point median entre deux libelles en couleur. Le cartouche fantome est le defaut ; le cartouche plein est reserve a l'action principale, une seule par carte. */ .k-skin .k-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } /* -------------------------------------------------------------------------- 4. HERO Ordre impose : sur-titre > H1 bicolore > chapo > pastilles > boutons. A droite, le bloc de chiffres cles remplace la photo detouree du modele. -------------------------------------------------------------------------- */ .k-skin .k-hero { position: relative; overflow: hidden; padding: 40px 0 132px; background: var(--k-cream-100); } /* Voile decoratif : degrade fondu en haut et en bas par un masque, pour eviter la coupure nette qu'on voit sur la plupart des sites. */ .k-skin .k-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Teintes de la charte canin : corail, corail fonce, vert. Ces valeurs sont ecrites en RVB litteral parce qu'une variable CSS ne peut pas porter une opacite differente a chaque etape d'un degrade. Si la palette bouge, ces trois triplets sont a reporter a la main. */ background: linear-gradient(160deg, rgba(227,122,102,.26) 0%, rgba(176,68,48,.13) 46%, rgba(43,91,77,.18) 100%); -webkit-mask-image: linear-gradient(transparent 0, #000 30%, #000 78%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 30%, #000 78%, transparent 100%); } .k-skin .k-hero .k-wrap { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); gap: 56px; align-items: start; } .k-skin .k-hero h1 { margin-top: 16px; max-width: 22ch; } .k-skin .k-hero .k-lead { margin-top: 22px; } /* Pastilles de navigation vers les pages cles. Filet en --k-border-control et non --k-border-strong : ces pastilles sont CLIQUABLES, donc des commandes, et une commande doit atteindre 3 pour 1 contre la surface qui la porte. Avec le filet de conteneur elles tombaient a 1,69 sur creme. C'est exactement la meme distinction que pour le bouton fantome. Les pastilles INERTES (.k-pills) gardent, elles, --k-border-strong : elles ne promettent aucune action. */ .k-skin .k-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } .k-skin .k-tags a { font: 600 15.6px/1 var(--k-body); color: var(--k-ink-800); background: var(--k-white); border: 1px solid var(--k-border-control); border-radius: var(--k-radius-pill); padding: 9px 16px; text-decoration: none; transition: background var(--k-base) var(--k-ease), color var(--k-base) var(--k-ease); } .k-skin .k-tags a:hover { background: var(--k-ink-800); color: var(--k-sand-500); } /* -------------------------------------------------------------------------- ENCADRE DE CITATION ILLUSTRE (.k-cite) La forme que prend le passage citable QUAND IL A UNE IMAGE : un grand panneau arrondi sur fond sombre, visuel detoure a gauche, propos a droite. Pourquoi un panneau et pas l'encadre .k-answer habituel : sur une page qui detient un extrait optimise, ce passage est le contenu le plus important de la page. Un filet d'accent le signale ; un panneau pleine largeur sur fond sombre le rend impossible a manquer, et loge le visuel sans le releguer. background-color EN PLUS du degrade, jamais le raccourci `background` seul : celui-ci remet la couleur de fond a transparent, on perdrait la couleur de repli et le controle automatique de contraste ne lirait plus rien. .k-cite est une SURFACE SOMBRE : elle est declaree comme telle dans les regles de titres, de paragraphes, de sur-titre, d'aplat, de liens, de bouton fantome et d'anneau de focus, plus haut dans cette feuille. Toute nouvelle surface sombre doit y etre ajoutee, sinon son texte reste de la couleur du fond. -------------------------------------------------------------------------- */ .k-skin .k-cite { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); gap: 48px; align-items: center; padding: 56px 60px; border-radius: 34px; background-color: var(--k-ink-800); background-image: linear-gradient(150deg, var(--k-ink-800), var(--k-ink-900)); color: var(--k-fg-inv); box-shadow: 0 30px 60px -34px rgba(var(--k-tint), .40); } .k-skin .k-cite-img { justify-self: center; } .k-skin .k-cite-img img { display: block; width: 100%; max-width: 330px; /* height:auto est OBLIGATOIRE : les attributs width/height du HTML posent une hauteur en dur, l'image sortirait a sa hauteur source. */ height: auto; /* Le visuel est detoure : ni cadre, ni recadrage. L'ombre suit la silhouette du sujet et non le rectangle de la boite -- c'est ce que drop-shadow sait faire et pas box-shadow. */ object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .34)); } /* VARIANTE ENCADREE, pour un visuel OPAQUE. Toutes les illustrations du site ne sont pas detourees : une image pleine posee sans cadre sur le panneau donne un carre brut colle dessus. Elle recoit donc des coins arrondis et une vraie ombre de boite -- drop-shadow n'aurait aucun sens ici, la silhouette EST le rectangle. Verifier le fond de l'image avant de choisir : coins transparents = sans cadre, coins opaques = .k-cadre. */ .k-skin .k-cite-img.k-cadre img { border-radius: 24px; filter: none; box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .55); } /* VARIANTE MIROIR : le propos a gauche, le visuel a droite. On inverse les COLONNES, jamais l'ordre d'affichage (`order`) : celui-ci deplacerait l'image a l'ecran sans la deplacer dans le document, et un lecteur d'ecran lirait donc la page dans un ordre different de ce qui est vu. Ici l'ordre du balisage est deja texte puis image -- il suffit d'elargir la premiere colonne. */ .k-skin .k-cite.k-inverse { grid-template-columns: minmax(0, .62fr) minmax(0, .38fr); } .k-skin .k-cite h2 { margin-top: 14px; } .k-skin .k-cite p { margin-top: 20px; font-size: 19.2px; } .k-skin .k-cite .k-cta { margin-top: 26px; } /* -------------------------------------------------------------------------- DUO TEXTE + VISUEL (.k-duo) Deux colonnes : le propos a gauche, un visuel encadre a droite. Sert a ouvrir une page sur son passage le plus important, celui que les moteurs citent, en lui donnant de l'air plutot qu'en l'empilant sous le bandeau. Le visuel est pose sur un aplat doux et non recadre : les illustrations du site sont DETOUREES, fond transparent. object-fit: contain les montre entieres ; un cover trancherait dedans. -------------------------------------------------------------------------- */ .k-skin .k-duo { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; } .k-skin .k-duo-img { justify-self: center; } .k-skin .k-duo-img img { display: block; width: 100%; max-width: 460px; /* height:auto est OBLIGATOIRE : les attributs width/height du HTML posent une hauteur en dur et aspect-ratio ne s'applique que si l'une des deux dimensions vaut auto. */ height: auto; /* SANS CADRE : l'image est detouree, elle flotte directement sur le fond de section. Ni aplat, ni rayon, ni rembourrage -- un cadre autour d'un sujet detoure lui redessine le rectangle qu'on avait justement retire. drop-shadow et non box-shadow : seule la premiere suit la silhouette du sujet, la seconde dessinerait l'ombre de la boite. */ object-fit: contain; object-position: center; filter: drop-shadow(0 18px 30px rgba(var(--k-tint), .22)); } /* VARIANTE MIROIR (.k-inverse) : le visuel a GAUCHE, le propos a droite. On inverse les COLONNES, jamais l'ordre d'affichage (`order`) : celui-ci deplacerait le visuel a l'ecran sans le deplacer dans le document, et un lecteur d'ecran lirait la page dans un ordre different de ce qui est vu. Le balisage doit donc deja porter le visuel EN PREMIER. Meme regle sur .k-cite. Les colonnes ne sont pas la simple symetrie de 1,12/0,88 mais un partage egal : un visuel place en tete de lecture porte le bloc, l'ecraser a 0,88 le ferait passer pour une vignette d'accompagnement. */ .k-skin .k-duo.k-inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* VARIANTE ENCADREE (.k-cadre), pour une PHOTO opaque. Le .k-duo de base est ecrit pour les illustrations detourees : sans cadre, avec une ombre qui suit la silhouette. Une photo pleine posee dans ces conditions donne un carre brut flottant, et drop-shadow n'aurait aucun sens -- la silhouette EST le rectangle. Elle recoit donc des coins arrondis et une vraie ombre de boite. Verifier le fond du fichier avant de choisir : coins transparents = sans cadre, coins opaques = .k-cadre. La borne passe a 560px : une photo encadree tient le bloc, 460px la laisseraient flotter dans sa colonne des que celle-ci est a egalite. */ .k-skin .k-duo-img.k-cadre img { max-width: 560px; border-radius: var(--k-radius-lg); filter: none; box-shadow: 0 1px 3px rgba(var(--k-tint), .06), 0 24px 48px -24px rgba(var(--k-tint), .34); } /* -------------------------------------------------------------------------- FIGURE AU FIL DU TEXTE (.k-figure) Une photographie posee dans le flux, avec sa legende facultative. Le kit Aerial n'en avait pas besoin : ses seules images etaient des mascottes detourees. Ce site-ci a de vraies photos de chiens, et sa charte demande que chaque image ait une fonction editoriale a cote du texte qu'elle illustre. .k-etroite pour une image qui accompagne un paragraphe sans le dominer ; sans modificateur elle prend la largeur du bloc. -------------------------------------------------------------------------- */ .k-skin .k-figure { margin: 34px 0 0; } .k-skin .k-figure.k-etroite { max-width: 360px; } .k-skin .k-figure img { display: block; width: 100%; /* height:auto est OBLIGATOIRE : les attributs width/height du HTML sont des indications de proportion, pas des tailles. Sans lui, l'image est etiree a la hauteur declaree. */ height: auto; border-radius: var(--k-radius-lg); box-shadow: 0 1px 3px rgba(var(--k-tint), .06), 0 18px 36px -22px rgba(var(--k-tint), .28); } .k-skin .k-figure figcaption { margin-top: 10px; font-size: 15.6px; line-height: 1.45; color: var(--k-fg-subtle); } /* PHOTO DETOUREE DU HERO, colonne de droite de l'accueil. Aerial n'en avait pas -- il y logeait un bloc de chiffres cles. Ici c'est la mascotte qui tient ce role. Memes bornes que la photo des pages interieures : on borne la largeur ET la hauteur, parce que les illustrations n'ont pas toutes le meme format et qu'une portrait bridee en largeur seule etirerait le bandeau. drop-shadow et non box-shadow : seule la premiere suit la silhouette du sujet au lieu du rectangle de la boite. */ .k-skin .k-hero-photo { justify-self: center; align-self: center; } .k-skin .k-hero-photo img { display: block; width: 100%; max-width: 420px; max-height: 460px; height: auto; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(var(--k-tint), .22)); } /* deviendrait l'element de grille a la place de l'image et casserait le centrage : on le rend transparent a la mise en page. */ .k-skin .k-hero-photo picture { display: contents; } /* Bloc de chiffres cles, a la place de la photo detouree du modele */ .k-skin .k-stats { position: relative; margin-top: 46px; background: var(--k-white); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); padding: 34px 30px 30px; box-shadow: 0 1px 3px rgba(var(--k-tint), .05), 0 18px 40px -20px rgba(var(--k-tint), .22); } .k-skin .k-stat + .k-stat { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--k-border); } .k-skin .k-stat .k-num { display: block; font-family: var(--k-display); font-size: 40px; line-height: 1; letter-spacing: .02em; color: var(--k-accent-600); } .k-skin .k-stat .k-lbl { display: block; margin-top: 7px; font-size: 15.6px; line-height: 1.45; color: var(--k-fg-muted); } .k-skin .k-stat .k-stars { color: var(--k-gold); letter-spacing: 2px; } /* Cartouche blanc incline pose sur le bloc de chiffres */ .k-skin .k-hello { position: absolute; top: -26px; right: -10px; z-index: 4; background: var(--k-white); color: var(--k-ink-800); padding: 13px 20px; border-radius: 14px; box-shadow: 0 14px 28px -10px rgba(var(--k-tint), .34); transform: rotate(3deg); white-space: nowrap; } .k-skin .k-hello .k-nm { display: block; font: 700 17px/1.25 var(--k-body); } .k-skin .k-hello .k-role { display: block; margin-top: 3px; font: 500 13.6px/1.2 var(--k-body); color: var(--k-fg-muted); } /* Ruban incline qui traverse le bas du hero */ .k-skin .k-ribbon { position: absolute; left: -12%; right: -12%; bottom: 30px; z-index: 2; padding: 10px 0; overflow: hidden; background: var(--k-second-500); transform: rotate(-2deg); } .k-skin .k-ribbon .k-track { display: flex; justify-content: center; white-space: nowrap; font-family: var(--k-display); text-transform: uppercase; letter-spacing: .06em; font-size: 20px; color: var(--k-cream-100); } .k-skin .k-ribbon .k-star { color: var(--k-sand-500); padding: 0 16px; } /* -------------------------------------------------------------------------- 5. CARTES DE SERVICE Double ombre : une courte pour le contact avec le fond, une longue et diffuse (etalement negatif) pour l'elevation. -------------------------------------------------------------------------- */ .k-skin .k-grid { display: grid; gap: 24px; } .k-skin .k-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-skin .k-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .k-skin .k-mt { margin-top: 48px; } .k-skin .k-card { background: var(--k-white); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); padding: 32px 30px; box-shadow: 0 1px 3px rgba(var(--k-tint), .05), 0 14px 30px -16px rgba(var(--k-tint), .16); transition: transform var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease); } .k-skin .k-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(var(--k-tint), .26); } .k-skin .k-card .k-icon { display: block; width: 46px; height: 46px; color: var(--k-accent-600); } .k-skin .k-card .k-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Un h2 place DANS une carte est un intitule de carte, pas un titre de section : il reste a 26px et ne prend pas l'aplat arrondi, reserve aux titres de section. */ .k-skin .k-card h2 { font-size: 26px; max-width: none; margin-bottom: 20px; } .k-skin .k-card h3 { margin: 18px 0 10px; max-width: 20ch; } /* EXCEPTION : carte dont le titre est une question ou un titre d'article. Retour au Poppins minuscules. Anton en capitales sur une question de 45 signes etalee sur trois lignes est illisible. C'est la meme exception que pour les cartes d'article du blog. */ .k-skin .k-card.k-card-article h3 { font-family: var(--k-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 21px; line-height: 1.32; max-width: 26ch; margin-top: 0; } .k-skin .k-card.k-card-article h3 a { text-decoration: none; } .k-skin .k-card.k-card-article h3 a:hover { color: var(--k-accent-600); } .k-skin .k-card p { font-size: 17px; line-height: 1.6; color: var(--k-fg-muted); max-width: 46ch; } /* -------------------------------------------------------------------------- 6. SECTION SOMBRE : POURQUOI AERIAL GROUP -------------------------------------------------------------------------- */ .k-skin .k-why { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-skin .k-why li { display: flex; gap: 18px; align-items: flex-start; } .k-skin .k-why .k-icon { flex: 0 0 auto; width: 42px; height: 42px; color: var(--k-sand-500); } .k-skin .k-why .k-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .k-skin .k-why .k-txt { font-size: 17.6px; line-height: 1.6; color: rgba(255,255,255,.84); } .k-skin .k-why .k-txt strong { display: block; margin-bottom: 4px; font-family: var(--k-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 20px; color: var(--k-cream-100); } /* Separateur " : " du texte d'origine : masque a l'oeil (le titre est deja sur sa propre ligne) mais conserve pour les lecteurs d'ecran et les robots, qui liraient sinon "personaune" d'un seul tenant. */ .k-skin .k-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 7. AVIS CLIENTS -------------------------------------------------------------------------- */ .k-skin .k-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 9px 18px; border-radius: var(--k-radius-pill); background: var(--k-white); border: 1px solid var(--k-border); font-size: 15.6px; color: var(--k-fg-muted); } .k-skin .k-badge .k-stars { color: var(--k-gold); letter-spacing: 2px; font-size: 17px; } .k-skin .k-badge strong { color: var(--k-ink-800); font-size: 17px; } .k-skin .k-review { position: relative; background: var(--k-white); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); padding: 30px 26px 24px; box-shadow: 0 12px 26px -18px rgba(var(--k-tint), .18); } .k-skin .k-review::before { content: "\201C"; position: absolute; top: 8px; left: 18px; font-family: Georgia, serif; font-size: 52px; line-height: 1; color: var(--k-sand-500); } .k-skin .k-review .k-review-text { position: relative; margin: 12px 0 16px; font-size: 16.4px; line-height: 1.62; color: var(--k-fg-muted); } .k-skin .k-review .k-review-author { margin: 0; font: 600 15.6px/1.4 var(--k-body); color: var(--k-ink-800); } .k-skin .k-review .k-review-meta { display: block; font: 500 13.6px/1.4 var(--k-body); color: var(--k-fg-subtle); } /* -------------------------------------------------------------------------- 8. FAQ -------------------------------------------------------------------------- */ .k-skin .k-faq { max-width: 940px; margin-top: 40px; border-top: 1px solid var(--k-border); } .k-skin .k-faq details { border-bottom: 1px solid var(--k-border); background: transparent; } .k-skin .k-faq summary { position: relative; padding: 22px 52px 22px 0; font: 600 18px/1.45 var(--k-body); color: var(--k-ink-800); cursor: pointer; list-style: none; } .k-skin .k-faq summary::-webkit-details-marker { display: none; } .k-skin .k-faq summary::after { content: "+"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 400 30px/1 var(--k-display); color: var(--k-accent-600); } .k-skin .k-faq details[open] summary::after { content: "\2013"; } .k-skin .k-faq details p { margin: 0; padding: 0 52px 24px 0; font-size: 17.6px; color: var(--k-fg-muted); max-width: 75ch; } /* -------------------------------------------------------------------------- 8 bis. PAGES INTERIEURES Meme grammaire que l'accueil, en plus ramasse : pas de ruban, pas de bloc lateral, un en-tete de page a la place du hero plein. -------------------------------------------------------------------------- */ /* Fil d'Ariane : il occupe la place du sur-titre et en reprend le dessin (petites capitales espacees + trait de 24px). Pas de libelle invente. */ .k-skin .k-breadcrumb { display: inline-flex; align-items: center; /* flex-wrap OBLIGATOIRE : une boite flexible ne se plie pas par defaut, ses elements restent sur une seule ligne et sortent du cadre. Mesure a 375px sur un fil a trois niveaux : 385px de large pour 327 disponibles, la fin du chemin passait hors de l'ecran. Le premier ecart est vertical, pour que deux lignes de fil ne se touchent pas. */ flex-wrap: wrap; gap: 6px 10px; font: 600 13.6px/1 var(--k-body); letter-spacing: .08em; text-transform: uppercase; color: var(--k-second-500); } .k-skin .k-breadcrumb::before { content: ""; width: 24px; height: 1.5px; background: currentColor; } .k-skin .k-breadcrumb a { color: inherit; text-decoration: none; } .k-skin .k-breadcrumb a:hover { color: var(--k-accent-800); } .k-skin .k-breadcrumb .k-bc-sep { opacity: .55; } /* En-tete de page interieure : un aplat, sans photo. Voir la regle « aucune image de fond » plus bas. */ .k-skin .k-page-head { position: relative; overflow: hidden; padding: 30px 0 78px; /* REGLE DE TONALITE : l'en-tete d'une page interieure n'est JAMAIS du meme ton que la barre de navigation. Celle-ci passe en beige (voir plus bas), l'en-tete prend donc le creme le plus clair de la charte. */ background: var(--k-cream-50); } /* DECISION 10/08 : aucune image de fond dans le kit. Les visuels sont des poses en clair (mascottes detourees du bandeau, couvertures de carte), jamais des textures derriere du texte. Consequence : plus de variable --k-head-img, et le prechargement n'est emis que pour les pages qui affichent reellement un visuel. */ .k-skin .k-page-head .k-wrap { position: relative; z-index: 2; } .k-skin .k-page-head h1 { margin-top: 18px; max-width: 18ch; } .k-skin .k-page-head .k-lead { margin-top: 20px; } /* REGLE : le bandeau d'une page interieure porte TOUJOURS son appel a l'action, sous le chapo. Le visiteur arrive sur la page, il doit pouvoir agir sans avoir a la derouler jusqu'en bas. Le meme libelle et la meme destination sont repris dans la bande d'appel de fin de page : la duplication d'un lien de conversion est voulue, pas une erreur. */ .k-skin .k-page-head .k-cta { margin-top: 30px; } /* VARIANTE SOMBRE : pour une page de prestation, l'en-tete peut basculer en aplat sombre photographique. Le contraste avec la barre de nav beige devient maximal, comme sur la page services du site de reference. Le voile n'est PAS un degrade qui s'eclaircit : il reste entre 88 % et 74 % d'opacite. A 74 % sur la zone la plus claire possible d'une photo (du blanc pur), le fond composite reste a 6,06 de contraste avec le texte creme. Un voile qui descend a 40 % tomberait a 1,7 : illisible des que la photo est claire, et le balayage automatique ne le verrait pas puisqu'il ne lit que la couleur de fond, pas l'image. */ .k-skin .k-page-head.k-dark { /* background-color EN PLUS du degrade, jamais le raccourci `background` seul : celui-ci remet la couleur de fond a transparent. On perdrait la couleur de repli si le degrade ne peignait pas, et surtout le controle automatique de contraste ne lit que backgroundColor : sans elle il remonte le fond de la page et signale du texte clair sur clair. */ background-color: var(--k-ink-900); background-image: linear-gradient(160deg, var(--k-ink-800), var(--k-ink-900)); color: var(--k-fg-inv); padding: 40px 0 84px; } /* VARIANTE DEUX COLONNES : texte a gauche, photo encadree a droite. La photo etant montree en clair dans son cadre, on ne la repasse PAS en fond : le meme visuel a deux endroits visibles, c'est la repetition que la charte du site interdit. Le fond redevient un simple degrade sombre. */ .k-skin .k-page-head.k-split .k-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: center; } .k-skin .k-head-photo { justify-self: center; } .k-skin .k-head-photo img { display: block; width: 100%; max-width: 340px; /* height:auto est OBLIGATOIRE : les attributs width/height du HTML sont des indications de presentation qui posent une hauteur en dur, et aspect-ratio ne s'applique que si une des deux dimensions est auto. Sans cette ligne l'image sort a sa hauteur source (900px). */ height: auto; /* Le cadrage portrait est assume : la source est un paysage 16/9, elle perd son format. object-fit: cover recadre sans deformer, object-position centre la zone conservee. */ aspect-ratio: 5 / 6; object-fit: cover; object-position: center; border-radius: 32px; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55); } /* VARIANTE DETOUREE : l'image a un fond transparent, le sujet flotte donc directement sur l'en-tete. Ni cadre, ni recadrage : on montre le visuel entier. L'ombre passe de box-shadow a drop-shadow, la seule qui suive la silhouette du sujet au lieu du rectangle de la boite. */ .k-skin .k-head-photo.k-cutout { max-width: 420px; } .k-skin .k-head-photo.k-cutout img { /* Deux bornes et non une seule : les illustrations ne partagent pas le meme format. Les unes sont larges (ratio 1,2), les autres en portrait (0,74). Brider uniquement la largeur ferait monter une portrait a 568px de haut et etirerait le bandeau. On borne donc la largeur ET la hauteur, et on laisse l'image choisir laquelle des deux la contraint. */ width: auto; max-width: 100%; max-height: 440px; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); } .k-skin .k-page-head.k-dark h1 { color: var(--k-fg-inv); } .k-skin .k-page-head.k-dark .k-hl { color: var(--k-sand-500); } .k-skin .k-page-head.k-dark .k-lead { color: rgba(255, 255, 255, .86); } .k-skin .k-page-head.k-dark .k-breadcrumb { color: var(--k-sand-100); } .k-skin .k-page-head.k-dark .k-breadcrumb a:hover { color: var(--k-white); } /* Encadre de reponse directe : le bloc que Google et les moteurs generatifs citent en priorite. Il doit se voir sans hurler. */ .k-skin .k-answer { max-width: 78ch; padding: 26px 30px; border-left: 4px solid var(--k-accent-600); border-radius: 0 var(--k-radius-md) var(--k-radius-md) 0; background: var(--k-accent-50); font-size: 18.4px; line-height: 1.62; } /* AVERTISSEMENT URGENT (.k-urgence). Meme forme que l'encadre de reponse, mais il ne dit pas la meme chose : l'un repond a une question, l'autre signale un cas prioritaire. Sans distinction visuelle, deux encadres identiques empiles se lisent comme un seul bloc et l'urgence se perd. L'aplat plein le detache ; le texte reste en encre, pas en blanc, parce qu'il contient des liens qui doivent rester distinguables du texte. */ .k-skin .k-answer.k-urgence { border-left-width: 6px; background: var(--k-sand-500); color: var(--k-ink-900); border-left-color: var(--k-sand-700); } /* Le selecteur reprend la forme de la regle generique des liens (`main` + les memes exclusions), plus la classe du bloc : sans ca il perd l'arbitrage de specificite, le lien reste en corail fonce sur l'aplat corail et tombe a 2,16 de contraste. Meme piege que pour les liens sur fond sombre. */ .k-skin main .k-answer.k-urgence a:not(.k-btn):not(.k-tags a):not(.k-breadcrumb a) { color: var(--k-ink-900); text-decoration: underline; } .k-skin .k-answer .k-q { display: block; margin-bottom: 8px; font: 600 19px/1.35 var(--k-body); color: var(--k-ink-800); } /* Methode : liste d'etapes numerotees automatiquement par un compteur CSS, pour ne pas ecrire les numeros dans le balisage. REGLE : une liste de prestations ou d'etapes ne s'affiche jamais en ligne, toujours en cartes, 2 par 2 (ou 3 par 3 avec .k-steps-3 quand le nombre s'y prete). Un nombre impair : la derniere carte occupe la largeur restante au lieu de laisser un trou dans la grille. */ .k-skin .k-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); counter-reset: k-step; } .k-skin .k-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .k-skin .k-steps > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .k-skin .k-steps-3 > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } .k-skin .k-steps li { counter-increment: k-step; padding: 26px 24px; border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); background: var(--k-white); box-shadow: 0 1px 3px rgba(var(--k-tint), .05), 0 14px 30px -18px rgba(var(--k-tint), .16); transition: transform var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease); } .k-skin .k-steps li:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(var(--k-tint), .24); } /* VARIANTE ILLUSTREE : chaque carte porte son icone, dans une pastille teintee. L'ordre visuel est pastille, numero, titre, description. On le pose avec `order` parce que le numero est un ::before, donc premier enfant par nature : sans ca il passerait avant la pastille. */ .k-skin .k-steps.k-illustre li { display: flex; flex-direction: column; } .k-skin .k-steps.k-illustre li::before { order: 2; } .k-skin .k-steps.k-illustre li > div { order: 3; } /* VARIANTE PHOTO des cartes d'etapes. .k-illustre ci-dessus loge une icone de 54px ; celle-ci loge une vraie photographie en couverture, pleine largeur de la carte. Le rembourrage quitte le
  • pour passer sur ses enfants, sinon l'image resterait encadree de blanc au lieu d'aller bord a bord. overflow: hidden est sans risque ici -- aucune mascotte ne deborde de ces cartes, contrairement au panneau manifeste. */ .k-skin .k-steps.k-photos li { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .k-skin .k-steps.k-photos li::before { order: 2; margin: 22px 24px 0; } .k-skin .k-steps.k-photos li > div { order: 3; padding: 0 24px 26px; } .k-skin .k-step-img { order: 1; display: block; width: 100%; /* height:auto sinon l'attribut height du HTML fige la hauteur et le cadrage ne s'applique jamais. */ height: auto; aspect-ratio: 4 / 3; /* Plafond de hauteur : la derniere carte d'un nombre impair occupe toute la largeur de la grille. Sans ce plafond, son image montait a 899px de haut sur un ecran de 1280 et ecrasait le reste de la page. */ max-height: 300px; /* contain et NON cover : ces visuels sont DETOURES, fond transparent, comme les mascottes. Un recadrage en cover trancherait dans l'illustration -- on peut recadrer une photographie, pas un dessin. On la montre donc entiere, posee sur un aplat doux qui lui sert de fond. */ object-fit: contain; object-position: center; background: var(--k-accent-50); padding: 12px; } .k-skin .k-step-ico { order: 1; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 15px; background: var(--k-accent-50); color: var(--k-accent-600); } .k-skin .k-step-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Numero au-dessus du titre, pas dans une colonne laterale : c'est la composition du site de reference. Anton 18px dore. */ .k-skin .k-steps li::before { content: "0" counter(k-step); display: block; margin-bottom: 10px; font-family: var(--k-display); font-size: 18px; line-height: 1; letter-spacing: .06em; color: var(--k-gold); } /* Titre de carte en Poppins gras minuscules, PAS en Anton capitales. Anton est fait pour les titres de section, pas pour un intitule de carte de 19px qui peut courir sur deux lignes. Releve sur le site de reference : les titres de carte y sont en Poppins 700, 19px, casse normale. */ .k-skin .k-steps .k-step-t { display: block; margin-bottom: 6px; font: 700 19px/1.35 var(--k-body); color: var(--k-ink-800); } .k-skin .k-steps .k-step-d { font-size: 17px; line-height: 1.55; color: var(--k-fg-muted); } /* LE TITRE DE CARTE PEUT ETRE UN VRAI TITRE (h2 / h3), pas seulement un . Une suite de causes ou d'etapes reste une suite d'intertitres, que Google peut reprendre en lien de saut dans ses resultats : la mise en carte ne doit pas couter la hierarchie de titres. Il faut alors neutraliser ce que la regle generale des titres impose et que la propriete raccourcie `font` de .k-step-t ne remet PAS : les capitales, l'interlettrage et la largeur maximale de 20 caracteres. Sans ces trois lignes, un h2 en carte sort en majuscules et se casse au tiers de la carte. */ .k-skin .k-steps h2.k-step-t, .k-skin .k-steps h3.k-step-t, .k-skin .k-points h2.k-step-t, .k-skin .k-points h3.k-step-t { text-transform: none; letter-spacing: normal; max-width: none; } /* Points cles : meme regle que les etapes (jamais en ligne, toujours en cartes) mais SANS decoupage titre/description. A utiliser quand les items sont des phrases avec du gras au fil du texte, et non des couples « intitule : explication » : forcer un titre en tete mutilerait la phrase. Le petit trait d'accent reprend le dessin du sur-titre. */ .k-skin .k-points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); counter-reset: k-point; } .k-skin .k-points li { counter-increment: k-point; padding: 26px 24px; border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); background: var(--k-white); font-size: 17px; line-height: 1.55; color: var(--k-fg-muted); box-shadow: 0 1px 3px rgba(var(--k-tint), .05), 0 14px 30px -18px rgba(var(--k-tint), .16); } /* VARIANTE PHOTO des points cles, jumelle de .k-steps.k-photos. Le rembourrage quitte le
  • pour passer sur ses enfants, sinon l'image resterait encadree de blanc au lieu d'aller bord a bord. Le texte doit alors etre enveloppe dans un .k-point-txt : sans conteneur, un noeud de texte nu ne peut pas recevoir d'ordre ni de rembourrage dans une boite flexible. */ .k-skin .k-points.k-photos li { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .k-skin .k-points.k-photos li::before { order: 2; margin: 22px 24px 0; } .k-skin .k-points.k-photos li > .k-point-txt { order: 3; display: block; padding: 0 24px 26px; } /* Numerote comme les etapes : une carte de liste porte son rang. */ .k-skin .k-points li::before { content: "0" counter(k-point); display: block; margin-bottom: 10px; font-family: var(--k-display); font-size: 18px; line-height: 1; letter-spacing: .06em; color: var(--k-gold); } .k-skin .k-points li strong { color: var(--k-ink-800); font-weight: 600; } .k-skin .k-points > li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* -------------------------------------------------------------------------- FOCUS CLAVIER style.css pose un anneau global en orange de l'ancienne charte, a 42 % d'opacite : 3,26 de contraste, et hors palette. On le reprend en accent plein pour TOUS les elements focalisables des pages du kit, pas seulement les champs : liens, boutons, cartouches, resumes de FAQ. -------------------------------------------------------------------------- */ .k-skin :focus-visible { outline: 3px solid var(--k-accent-600); outline-offset: 3px; border-radius: 2px; } .k-skin .k-bg-ink :focus-visible, .k-skin .k-cite :focus-visible, .k-skin .k-page-head.k-dark :focus-visible { outline-color: var(--k-sand-500); } /* -------------------------------------------------------------------------- FORMULAIRE Le kit n'en fournissait pas. Points non negociables : un libelle
  • a 456px dans une fenetre de 375. Le poser une fois ici evite d'y revenir composant par composant. */ .k-skin .k-points > li, .k-skin .k-steps > li, .k-skin .k-teasers > li, .k-skin .k-vcards > li, .k-skin .k-notes > li, .k-skin .k-grid > * { min-width: 0; } .k-skin .k-stack { display: grid; gap: 22px; margin-top: 36px; } .k-skin .k-stack > * { scroll-margin-top: 104px; /* min-width: 0 est OBLIGATOIRE, ce n'est pas une precaution. Un element de grille vaut `min-width: auto` par defaut, c'est-a-dire qu'il REFUSE de rentrer en dessous de la largeur minimale de son contenu. Une carte qui contient un tableau herite donc de la largeur minimale de ce tableau : mesure sur cette page, une carte figee a 732px dans une grille de 437, et tout le document pousse a 756px de large sur un ecran de 500. Avec min-width: 0 la carte suit la colonne, et c'est .k-table-wrap qui reprend son role -- confiner le defilement au tableau. */ min-width: 0; } /* -------------------------------------------------------------------------- PANNEAU MANIFESTE Un seul grand bloc arrondi sur fond chaud, centre dans la page, qui porte a lui seul tout le contenu. Pour les pages d'un seul tenant -- mentions legales, politique de confidentialite, manifeste, page « a propos » courte -- ou l'alternance de sections pleine largeur sonnerait creux : on empilerait cinq bandes de fond pour cinq paragraphes. Fond BEIGE et non blanc : le blanc reste reserve aux cartes, et on veut justement pouvoir en poser dedans (.k-notes). position: relative et PAS d'overflow: hidden : c'est ce bloc qui ancre la mascotte assise, et un debordement masque lui couperait la tete. -------------------------------------------------------------------------- */ .k-skin .k-manifeste { position: relative; max-width: 1000px; margin: 0 auto; padding: 64px 72px; background: var(--k-cream-500); border-radius: 40px; box-shadow: 0 1px 3px rgba(var(--k-tint), .05), 0 30px 60px -34px rgba(var(--k-tint), .26); } /* RESERVATION POUR LA MASCOTTE ASSISE, a declarer avec .k-a-mascotte. Sans elle, la mascotte remonte de 152px au-dessus du bord du panneau, passe sous l'en-tete collant et se fait couper la tete : l'en-tete est a z-index 50 et la mascotte a 3, elle perd toujours. Monter son z-index ne reglerait rien, elle passerait alors PAR-DESSUS la barre de navigation. 162px de debord + 24px de respiration. Classe explicite plutot qu'un `:has()` : la reservation doit tenir sur tous les navigateurs, et l'obligation de la declarer rappelle a l'auteur que la mascotte coute de la place. */ .k-skin .k-manifeste.k-a-mascotte { margin-top: 186px; } .k-skin .k-manifeste > h1 { margin-bottom: 26px; } .k-skin .k-manifeste > h2 { margin: 46px 0 16px; } .k-skin .k-manifeste > h3 { margin: 34px 0 12px; } .k-skin .k-manifeste > h2:first-child, .k-skin .k-manifeste > h3:first-child { margin-top: 0; } /* Le gris des metadonnees est calibre sur le fond de page, le plus clair. Sur le beige du panneau il perd un demi-point et passe sous le seuil : on le ramene au gris de texte courant, comme le fait deja .k-bg-warm. */ .k-skin .k-manifeste { --k-fg-subtle: var(--k-fg-muted); } /* NOTES : petites cartes en pied de panneau. Blanches parce qu'elles sont posees SUR le beige -- une carte ne partage jamais le fond de ce qui la porte, sinon elle s'y dissout. */ .k-skin .k-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; } .k-skin .k-notes li { background: var(--k-white); border: 1px solid var(--k-border); border-radius: var(--k-radius-md); padding: 20px 22px; font-size: 17px; line-height: 1.5; color: var(--k-fg-muted); } .k-skin .k-notes strong { display: block; margin-bottom: 4px; color: var(--k-ink-800); } /* Carte Google. Le conteneur porte le rayon et masque les coins de l'iframe, que l'on ne peut pas arrondir de l'interieur. */ .k-skin .k-map { margin-top: 24px; border-radius: var(--k-radius-md); overflow: hidden; border: 1px solid var(--k-border-strong); background: var(--k-cream-500); } /* La hauteur reelle vient de l'attribut height du
    : tarteaucitron la recopie en style EN LIGNE sur l'iframe qu'il fabrique, et un style en ligne bat la feuille. Regler la taille dans le balisage, pas ici. Cette regle ne sert donc qu'au cas ou l'iframe serait posee a la main. */ .k-skin .k-map iframe { display: block; width: 100%; border: 0; } /* Message affiche par tarteaucitron tant que le consentement n'est pas donne */ .k-skin .k-map .tac_activate { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 24px; text-align: center; font-size: 16px; color: var(--k-fg-muted); } /* -------------------------------------------------------------------------- CARTE ILLUSTREE La carte teaser, augmentee d'une couverture qui porte une illustration. Structure : couverture, puis cartouche portant le libelle du lien d'origine, puis description. L'ordre du DOM reste celui du texte source. La couverture est un aplat clair et non une photo : l'illustration est detouree, elle a besoin d'un fond qui la porte. Trois variantes de teinte pour distinguer les cartes d'une meme rangee sans changer leur structure. -------------------------------------------------------------------------- */ .k-skin .k-vcards { list-style: none; margin: 36px 0 34px; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .k-skin .k-vcard { display: flex; flex-direction: column; background: var(--k-white); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); overflow: hidden; /* la couverture epouse les coins arrondis */ box-shadow: 0 1px 3px rgba(var(--k-tint), .05), 0 14px 30px -18px rgba(var(--k-tint), .16); transition: transform var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease); } .k-skin .k-vcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(var(--k-tint), .26); } .k-skin .k-vcard-cover { position: relative; aspect-ratio: 16 / 11; display: flex; align-items: flex-end; /* la mascotte pose les pieds sur le bord bas */ justify-content: center; overflow: hidden; background: linear-gradient(160deg, var(--k-sand-100), var(--k-cream-500)); } /* display:contents efface la boite du : sans ca il s'interpose entre le conteneur flex et l'image, l'image n'est plus l'element flexible, et son max-height en POURCENTAGE n'a plus aucune hauteur de reference. Resultat, elle sort de la couverture. */ .k-skin .k-vcard-cover picture { display: contents; } .k-skin .k-vcard-cover img { display: block; width: auto; max-width: 76%; max-height: 90%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(var(--k-tint), .22)); } /* Variantes de teinte, toutes claires : les mascottes sont sombres et contrastent donc sur les trois. */ .k-skin .k-vcard.k-v-sable .k-vcard-cover { background: linear-gradient(160deg, #FBEADA, #EFE4D6); } .k-skin .k-vcard.k-v-sauge .k-vcard-cover { background: linear-gradient(160deg, #E7EFEA, #D6E2DB); } .k-skin .k-vcard.k-v-argile .k-vcard-cover { background: linear-gradient(160deg, #FBEDE6, #F1DBD1); } .k-skin .k-vcard-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 24px 26px; } .k-skin .k-vcard .k-card-actions { margin: 0 0 14px; } .k-skin .k-vcard-desc { flex: 1 1 auto; font-size: 16.6px; line-height: 1.55; color: var(--k-fg-muted); } /* -------------------------------------------------------------------------- PASTILLES NON CLIQUABLES Meme dessin que les pastilles de navigation du hero, mais sans lien : sert a lister des zones, des quartiers, des specialites. Pas de survol, pour ne pas laisser croire qu'on peut cliquer. -------------------------------------------------------------------------- */ .k-skin .k-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; } .k-skin .k-pills span, .k-skin .k-pills li { display: inline-flex; align-items: center; font: 600 15.6px/1 var(--k-body); color: var(--k-ink-800); background: var(--k-white); border: 1px solid var(--k-border-strong); border-radius: var(--k-radius-pill); padding: 9px 16px; } /* -------------------------------------------------------------------------- TABLEAU Le conteneur porte le cadre, le rayon et le defilement horizontal : un tableau en border-collapse ne peut pas arrondir ses propres coins, et sur telephone il doit defiler DANS sa boite plutot que d'elargir la page. -------------------------------------------------------------------------- */ .k-skin .k-table-wrap { margin-top: 28px; overflow-x: auto; border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); background: var(--k-white); box-shadow: 0 1px 3px rgba(var(--k-tint), .05), 0 14px 30px -18px rgba(var(--k-tint), .16); } /* Les trois premieres proprietes neutralisent la parade « tableau responsive » des feuilles de site existantes, qui s'ecrit presque toujours `table { display:block; overflow-x:auto; white-space:nowrap }` sous 760px. Combinee a l'emballage du kit elle donne DEUX barres de defilement imbriquees, et son `nowrap` interdit a toute cellule de revenir a la ligne : un tableau qui tiendrait dans 330px reclame alors 705px. Le defilement appartient a .k-table-wrap, et a lui seul. */ .k-skin .k-table { display: table; overflow: visible; white-space: normal; width: 100%; min-width: 440px; border-collapse: collapse; } .k-skin .k-table th { text-align: left; font: 600 14.4px/1.3 var(--k-body); letter-spacing: .06em; text-transform: uppercase; color: var(--k-fg-muted); background: var(--k-cream-100); padding: 15px 22px; border-bottom: 1px solid var(--k-border); } .k-skin .k-table td { padding: 16px 22px; font-size: 17px; line-height: 1.45; color: var(--k-fg-muted); border-bottom: 1px solid var(--k-border); } .k-skin .k-table tr:last-child td { border-bottom: 0; } /* COLONNE DE CHIFFRES : a declarer avec .k-chiffres sur le tableau. Ce n'est PAS le comportement par defaut. Alignee a droite, en gras, et surtout insecable pour qu'un montant ne soit jamais coupe en deux. Pourquoi en option et non d'office : `nowrap` pose que la derniere colonne tient en quelques caracteres. Des qu'elle contient une phrase -- « 100 a 200 € (TPE) — jusqu'a 500-5 000 € pour les gros sites » -- elle ne peut plus revenir a la ligne. Mesure sur la page agence SEO : cette colonne reclamait 550px, la premiere etait ecrasee a 206px, ses libelles se cassaient et les lignes montaient a 106px de haut, pour un tableau de 755px dans un cadre de 629. Un tableau dont la derniere colonne est du texte reste donc aligne a gauche et libre de se plier. */ .k-skin .k-table.k-chiffres td:last-child, .k-skin .k-table.k-chiffres th:last-child { text-align: right; white-space: nowrap; } .k-skin .k-table.k-chiffres td:last-child { font-weight: 600; color: var(--k-ink-800); } /* Bloc de texte suivi : largeur de lecture bridee */ .k-skin .k-prose { max-width: 74ch; } .k-skin .k-prose p { font-size: 18px; color: var(--k-fg-muted); } .k-skin .k-prose p + p { margin-top: 4px; } /* Carte teaser : une description, puis le lien en cartouche portant son libelle d'origine. Jamais de lien nu au bas d'une carte. */ .k-skin .k-teasers { list-style: none; margin: 36px 0 34px; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-skin .k-teasers-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .k-skin .k-teasers > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .k-skin .k-teasers-3 > li:last-child:nth-child(odd) { grid-column: auto; } .k-skin .k-teasers li { display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); background: var(--k-white); box-shadow: 0 1px 3px rgba(var(--k-tint), .05), 0 14px 30px -18px rgba(var(--k-tint), .16); transition: transform var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease); } .k-skin .k-teasers li:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(var(--k-tint), .26); } /* Le cartouche vient en premier : il porte le libelle du lien d'origine, la description le suit. L'ordre de lecture du DOM reste celui du texte source. */ .k-skin .k-teasers .k-card-actions { margin: 0 0 14px; } .k-skin .k-teasers .k-teaser-d { flex: 1 1 auto; font-size: 17px; line-height: 1.55; color: var(--k-fg-muted); } /* -------------------------------------------------------------------------- 9. EN-TETE ET PIED DE PAGE Le balisage de inc/header.asp et inc/footer.asp n'est pas modifie : on ne fait que le repeindre, et uniquement sur la page d'accueil. -------------------------------------------------------------------------- */ .k-skin .site-header { background: rgba(250, 246, 240, .88); border-bottom: 1px solid var(--k-border); } /* REGLE DE TONALITE (pages interieures) : la barre de navigation prend le beige, plus soutenu que le fond de page. Elle se detache donc toujours de l'en-tete, qu'il soit clair (creme le plus pale) ou sombre (variante .k-dark). L'accueil garde son creme translucide. */ .k-skin:not(.page-home) .site-header { background: rgba(239, 228, 214, .92); } .k-skin .site-header .logo { font-family: var(--k-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 26px; color: var(--k-ink-800); } .k-skin .site-header .logo span { color: var(--k-accent-600); } .k-skin .main-nav a { font: 500 16px/1 var(--k-body); color: var(--k-ink-800); } .k-skin .main-nav a:hover { color: var(--k-accent-600); } /* REGLE : l'en-tete porte TOUJOURS l'appel a l'action, sur toutes les pages et a toutes les largeurs. C'est le seul point de conversion visible en permanence : sur une page interieure, le visiteur qui se decide au milieu du contenu ne doit pas avoir a chercher. On ne le masque donc jamais en responsive, contrairement au numero de telephone. Il est pousse a droite et separe des liens de navigation, pour se lire comme une action et non comme une rubrique de plus. */ .k-skin .main-nav { flex-wrap: wrap; } .k-skin .main-nav .nav-cta { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; /* ACCENT et non sable : le bouton est un composant d'interface, il lui faut 3 de contraste de FORME contre le fond sur lequel il est pose. Le sable sur la barre beige des pages interieures ne fait que 1,47 : le bouton existe, mais on ne le voit pas. L'accent monte a 4,59 sur le beige et 5,35 sur le creme de l'accueil. */ background: var(--k-accent-600); /* !important indispensable : style.css declare `.nav-cta { color: var(--white) !important }` et gagne sinon quelle que soit la specificite. Un !important ne se bat qu'avec un !important. */ color: var(--k-cream-100) !important; border: 0; border-radius: var(--k-radius-pill); padding: 11px 20px; font-weight: 600; box-shadow: none; transition: background var(--k-base) var(--k-ease), color var(--k-base) var(--k-ease); } .k-skin .main-nav .nav-cta:hover { background: var(--k-ink-800); color: var(--k-cream-100) !important; transform: none; } .k-skin .phone-btn { font: 600 16px/1 var(--k-body); color: var(--k-ink-800); } .k-skin .phone-btn:hover { color: var(--k-accent-600); } .k-skin .site-footer { border-top: 0; background: var(--k-ink-800); color: rgba(255,255,255,.80); } .k-skin .site-footer a { color: rgba(255,255,255,.80); } .k-skin .site-footer a:hover { color: var(--k-sand-500); } .k-skin .site-footer strong { font-family: var(--k-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 20px; color: var(--k-cream-100); } .k-skin .footer-grid { width: min(1200px, calc(100% - 48px)); } .k-skin .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.58); font-size: 13px; } /* -------------------------------------------------------------------------- 10. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 1040px) { /* Trois cartes illustrees deviennent trop etroites : on passe a deux, la troisieme prend la largeur restante. */ .k-skin .k-vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-skin .k-vcards > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .k-skin .k-vcards > li:last-child:nth-child(odd) .k-vcard-cover { aspect-ratio: 21 / 8; } .k-skin .k-hero .k-wrap { grid-template-columns: 1fr; gap: 40px; } .k-skin .k-stats { margin-top: 22px; max-width: 460px; } .k-skin .k-hero { padding-bottom: 116px; } } @media (max-width: 900px) { /* PHOTO D'EN-TETE : elle disparait des qu'on quitte le format ordinateur. Pas d'etape intermediaire ou elle passerait sous le texte : une photo decorative empilee au-dessus du contenu repousse le texte utile hors de l'ecran sur telephone. Grille et photo basculent au meme point. */ .k-skin .k-page-head.k-split .k-wrap { grid-template-columns: 1fr; gap: 0; } .k-skin .k-head-photo { display: none; } /* Le duo passe a une colonne, mais son visuel RESTE affiche : contrairement a la mascotte du bandeau, qui est decorative, celui-ci illustre le propos. Il passe donc sous le texte au lieu de disparaitre. */ .k-skin .k-duo { grid-template-columns: 1fr; gap: 34px; } .k-skin .k-duo-img img { max-width: 380px; } /* Les deux variantes doivent etre remises a plat NOMMEMENT : elles portent deux classes, elles l'emportent sur les regles ci-dessus quel que soit l'ordre d'ecriture. Sans ces lignes, un duo inverse resterait a deux colonnes sur telephone et une photo encadree y sortirait a 560px. */ .k-skin .k-duo.k-inverse { grid-template-columns: 1fr; } .k-skin .k-duo-img.k-cadre img { max-width: 380px; } /* Le panneau de citation passe a une colonne, visuel EN PREMIER : c'est lui qui annonce le sujet, le releguer sous le texte le rendrait decoratif. */ .k-skin .k-cite { grid-template-columns: 1fr; gap: 28px; padding: 38px 26px; border-radius: 26px; } /* La variante miroir doit etre remise a plat NOMMEMENT : `.k-cite.k-inverse` porte deux classes, il l'emporte sur la regle ci-dessus quel que soit l'ordre d'ecriture, et le panneau resterait a deux colonnes sur telephone avec un visuel de 136px. Toute future variante qui redefinit les colonnes doit etre annulee ici de la meme facon. Consequence assumee : la variante miroir empile TEXTE puis visuel, l'inverse du panneau standard. C'est l'ordre du balisage, et on ne le contredit pas avec `order` -- ce qui est vu doit rester ce qui est lu. */ .k-skin .k-cite.k-inverse { grid-template-columns: 1fr; } .k-skin .k-cite-img img { max-width: 240px; } /* La mascotte du hero disparait au meme point et pour la meme raison : sur telephone la grille passe a une colonne, l'image se retrouverait empilee au-dessus du texte utile et le repousserait hors de l'ecran. */ .k-skin .k-hero .k-wrap { grid-template-columns: 1fr; gap: 0; } .k-skin .k-hero-photo { display: none; } .k-skin .k-sec { padding: 68px 0; } .k-skin .k-grid-2, .k-skin .k-grid-4, .k-skin .k-why { grid-template-columns: 1fr; } .k-skin .k-why { gap: 24px; } .k-skin .k-teasers, .k-skin .k-teasers-3 { grid-template-columns: 1fr; } .k-skin .k-steps, .k-skin .k-steps-3 { grid-template-columns: 1fr; } .k-skin .k-points { grid-template-columns: 1fr; } .k-skin .k-vcards { grid-template-columns: 1fr; } .k-skin .k-notes { grid-template-columns: 1fr; } } @media (max-width: 640px) { .k-skin { font-size: 17.6px; } .k-skin p { font-size: 17.6px; } .k-skin .k-hero { padding: 24px 0 92px; } .k-skin .k-card { padding: 26px 22px; } .k-skin .k-cta .k-btn { width: 100%; justify-content: center; } /* Cartouches de carte : empiles et pleine largeur, ce qui garantit la cible tactile de 44px et evite qu'un libelle long ne se casse n'importe comment. */ .k-skin .k-card-actions { flex-direction: column; align-items: stretch; } .k-skin .k-btn-sm { padding: 14px 20px; width: 100%; justify-content: center; } /* Les pastilles cliquables passent de 36 a 44px de haut : c'est la cible tactile minimale que le kit s'impose. Elles restent cote a cote, seule leur hauteur change -- les passer pleine largeur ferait neuf lignes empilees. */ .k-skin .k-tags a { padding: 13px 16px; } .k-skin .k-hello { position: static; transform: none; margin-bottom: 16px; white-space: normal; box-shadow: none; border: 1px solid var(--k-border); } .k-skin .k-ribbon { left: -20%; right: -20%; bottom: 16px; } .k-skin .k-ribbon .k-track { font-size: 16px; } .k-skin .k-faq summary { padding-right: 40px; font-size: 16.4px; } .k-skin .k-faq details p { padding-right: 0; } .k-skin .k-page-head { padding: 22px 0 56px; } .k-skin .k-page-head.k-dark { padding: 26px 0 60px; } /* La mascotte assise disparait : au telephone la carte occupe toute la largeur et la mascotte mordrait sur le texte au lieu de le border. */ .k-skin .k-mascotte-assise { display: none; } .k-skin .k-nap > h2, .k-skin .k-nap > p:first-of-type { padding-right: 0; } /* Telephone : le CTA d'en-tete atteint la cible tactile de 44px sans passer pleine largeur. Le mettre sur sa propre ligne ferait grimper l'en-tete collant a 188px, soit pres d'un quart de l'ecran occupe en permanence. Il reste visible, jamais masque. */ .k-skin .header-inner { min-height: 0; padding: 10px 0; } .k-skin .main-nav { gap: 12px 14px; } .k-skin .main-nav a { font-size: 15px; } .k-skin .main-nav .nav-cta { min-height: 44px; padding: 12px 18px; font-size: 15px; } .k-skin .k-answer { padding: 22px 20px; font-size: 17.2px; } /* Le panneau resserre son rembourrage et son rayon : 72px de marge interieure sur un ecran de 375px ne laisserait que 231px de texte. */ .k-skin .k-manifeste { padding: 34px 24px; border-radius: 26px; } /* La mascotte est masquee au telephone : la reservation qu'elle imposait n'a plus lieu d'etre, elle laisserait 176px de vide en haut de page. */ .k-skin .k-manifeste.k-a-mascotte { margin-top: 0; } /* TABLEAU AU TELEPHONE : il essaie D'ABORD de tenir dans la largeur. min-width remis a zero, rembourrage resserre, et la colonne des chiffres garde son `nowrap` pour qu'un montant ne soit jamais coupe en deux. Un tableau a deux ou trois colonnes rentre alors sans defilement du tout. .k-table-wrap n'est PAS supprime pour autant : si le contenu minimal depasse quand meme (tableau large, comparatif a six colonnes), il reprend la main et confine le defilement. Le repli reste, il n'est plus la regle. */ .k-skin .k-table { min-width: 0; } .k-skin .k-table th { padding: 12px 14px; font-size: 13.2px; letter-spacing: .04em; } .k-skin .k-table td { padding: 13px 14px; font-size: 16px; } .k-skin .k-steps li { grid-template-columns: 1fr; gap: 6px; padding: 22px; } .k-skin .k-steps li::before { font-size: 26px; } .k-skin .k-teasers li { padding: 24px 22px; } } /* Reglage systeme "reduire les animations" */ @media (prefers-reduced-motion: reduce) { .k-skin .k-btn, .k-skin .k-card, .k-skin .k-tags a, .k-skin .k-more { transition: none; } .k-skin .k-btn:hover, .k-skin .k-card:hover { transform: none; } }