et au margin-top de la grille - Maintenant : 0.5rem -> garde de l’air sans “trou” visuel */ padding-top: 0.5rem; } /* ========================================================================== 2.1) ITEMS DE LA GRILLE ========================================================================== */ .assistance-page .assistance-item { text-align: center; } /* Images : - width flexible (Cover) : agrandie pour sublimer le titre intégré - height:auto (évite déformation) - drop-shadow néon cohérent avec le thème */ .assistance-page .assistance-item img { width: 100%; max-width: 100%; /* Modification : L'image prend toute la largeur de la carte */ height: auto; margin: 0 auto 1.2rem auto; display: block; border-radius: 0.5rem; /* Modification : Ajout d'un arrondi pour le format Cover */ filter: drop-shadow(0 0 6px var(--secondary-color)); transition: transform 0.4s ease; /* Fluidité pour le survol */ } /* Titres h3 */ .assistance-page .assistance-item h3 { font-size: 1.3rem; margin-bottom: 0.5rem; } /* Descriptions */ .assistance-page .assistance-item p { font-size: 0.95rem; line-height: 1.5; } /* ========================================================================== 2.2) AJOUT : STYLE "CARTES" POUR LES 9 ITEMS -------------------------------------------------------------------------- Objectif : - Donner un vrai rendu "carte" (bordure + fond + relief léger) - Rester cohérent avec ton design (border-soft, surfaces translucides) - Garder un effet hover subtil (pas agressif / pas "gaming") IMPORTANT : - On NE change pas la structure HTML - On ne casse pas tes règles existantes (on ajoute simplement des styles) -------------------------------------------------------------------------- */ /* Carte : fond + bordure + padding + relief */ .assistance-page .assistance-item{ background: rgba(255,255,255,0.22); border: 1px solid var(--border-soft); border-radius: 1rem; /* Respiration interne pour le contenu */ padding: 1.6rem 1.4rem; /* Relief discret */ box-shadow: 0 0 14px rgba(0,0,0,0.08); /* Animation douce au survol */ transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; } /* Hover : léger lift + glow soft */ .assistance-page .assistance-item:hover{ transform: translateY(-4px); border-color: rgba(59,130,246,0.45); background: rgba(255,255,255,0.26); box-shadow: 0 0 18px rgba(59,130,246,0.16), 0 0 26px rgba(96,165,250,0.10); } /* Hover : Zoom subtil sur l'image quand on survole la carte */ .assistance-page .assistance-item:hover img { transform: scale(1.05); } /* ========================================================================== 2.3) AJOUT : NOTE SOUS LA GRILLE (phrase "accompagnement / mise en route") -------------------------------------------------------------------------- Utilise la classe ajoutée dans le PHP :
Objectif : - Faire respirer la phrase - Garder un rendu pro, discret, lisible -------------------------------------------------------------------------- */ .assistance-page .assistance-note{ margin-top: 2rem; /* espace après la grille */ margin-bottom: 0.5rem; /* espace avant le CTA */ line-height: 1.6; opacity: 0.95; } /* ========================================================================== 3) LISTES (cartes "déroulé" + "infos") ========================================================================== */ /* Ajustements lisibilité : - padding-left : laisse respirer les puces - margin-top : sépare le texte d'intro de la liste */ .assistance-page .services-container ul { margin-top: 1.2rem; padding-left: 1.2rem; /* Option : tu peux forcer un style de puces si nécessaire */ list-style: disc; } /* Items de liste */ .assistance-page .services-container li { margin-bottom: 0.6rem; line-height: 1.5; } /* ========================================================================== 4) CTA SUBTIL (dans "Domaines") ========================================================================== */ /* contact-button--small : - Variante plus compacte du bouton global (.contact-button dans reference.css) - On ne touche pas au style principal : on ajuste seulement taille/centrage. */ .assistance-page .contact-button--small { display: block; /* permet de centrer */ width: fit-content; /* garde la taille du bouton */ margin: 1.8rem auto 0 auto; /* centré horizontalement */ padding: 0.65rem 1.6rem; font-size: 0.95rem; font-weight: 600; text-decoration: none; /* car c’est un */ } /* ========================================================================== 5) RESPONSIVE ========================================================================== */ /* AJOUT PRO : Harmonisation du breakpoint avec reference.css (992px au lieu de 900px) */ @media (max-width: 992px) { .assistance-page .assistance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Centrage automatique du dernier élément si on est sur un nombre impair (ex: 9 items). Le width est calculé pour correspondre à 50% moins la moitié du gap (2.5rem / 2 = 1.25rem). */ .assistance-page .assistance-item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 1.25rem); } } @media (max-width: 480px) { .assistance-page .assistance-grid { grid-template-columns: 1fr; } /* On annule le centrage en mode portrait (1 colonne) pour que l'item reprenne bien toute la largeur disponible. */ .assistance-page .assistance-item:last-child:nth-child(odd) { grid-column: auto; width: 100%; } /* Petit ajustement mobile (optionnel, pro) : icônes un peu plus petites */ .assistance-page .assistance-item img { width: 100%; max-width: 100%; /* Modification : L'image prend toute la largeur sur mobile aussi */ } /* AJOUT mobile : cartes un peu plus compactes - Ne change pas le design desktop - Evite les cartes trop “hautes” sur petit écran */ .assistance-page .assistance-item{ padding: 1.3rem 1.1rem; } /* FIX TEXTE LONG MOBILE : Empêche le mot "complémentaires" de déborder de la carte sur petit écran (375px) */ .assistance-page .service-header h2 { font-size: 1.25rem; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } }