/* Cartes de conseils (« Conseils sur le même thème » de la page conseil, page d'accueil des conseils…), refaites en octobre 2026. Chargée par header2.php quand la page met $cartesConseils = 1, après les 3 feuilles du site et avant $cssPage. : toute la carte est le lien, titre dans .cnCarteTitre, flèche ronde dessinée par ::after (le texte du lien reste le titre). */ .cnMeme { display: grid; gap: 12px; margin-bottom: 30px; } .cnCarte { position: relative; display: block; min-height: 112px; padding: 20px 56px 22px 20px; border-radius: 12px; background: #fbebc5; font-size: 25px; /* Taille d'origine des cartes (styleMobile2.css) */ line-height: 28px; letter-spacing: -1px; font-style: italic; font-weight: 600; color: #222; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .cnCarte:nth-child(even) { background: #fbe3a9; } .cnCarte .italicLight { font-weight: 200; } .cnCarte::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; border-radius: 50%; /* Flèche dessinée en SVG (et non avec le caractère →, que la police place un peu de travers) : pile au centre du rond */ background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10.5M9 4l4 4-4 4' fill='none' stroke='%238f6200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px; } @media screen and (min-width: 500px) { .cnMeme { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .cnCarte { display: flex; align-items: center; aspect-ratio: 1 / 1; min-height: auto; padding: 46px 20px; border-radius: 14px; } /* Damier d'aujourd'hui : 4 par ligne, la 2e ligne inversée */ .cnCarte:nth-child(even) { background: #fbebc5; } .cnCarte:nth-child(8n+2), .cnCarte:nth-child(8n+4), .cnCarte:nth-child(8n+5), .cnCarte:nth-child(8n+7) { background: #fbe3a9; } .cnCarte::after { right: 16px; bottom: 16px; width: 34px; height: 34px; background-size: 15px 15px; } .cnCarte:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(143, 98, 0, .16); } } /* Grand écran (styleWide2.css dès 1280 px) : titres à 30 px comme les anciennes cartes */ @media screen and (min-width: 1280px) { .cnCarte { padding: 50px 30px; font-size: 30px; line-height: 31px; } .cnCarte::after { right: 20px; bottom: 20px; width: 36px; height: 36px; background-size: 16px 16px; } } @media (prefers-reduced-motion: reduce) { .cnCarte { transition: none; } } /* Date « Il y a 2 jours » (page d'accueil des conseils) : pastille blanche en haut à gauche, écrite par ::before depuis data-date pour que le texte du lien reste le titre seul ; le titre reste centré verticalement entre la pastille et la flèche */ .cnCarte[data-date] { display: flex; align-items: center; padding-top: 47px; padding-bottom: 44px; } /* iPhone : 3 px de plus en haut seulement, pour l'écart avec la pastille */ .cnCarte[data-date]::before { content: attr(data-date); position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .5); /* Blanc léger : la pastille prend la teinte de sa case du damier, à peine plus claire */ font-size: 10px; line-height: 14px; letter-spacing: .1em; text-transform: uppercase; font-style: normal; font-weight: 600; color: #6b5a33; white-space: nowrap; } @media screen and (min-width: 500px) { .cnCarte[data-date] { padding-top: 46px; padding-bottom: 46px; } .cnCarte[data-date]::before { left: 16px; top: 16px; font-size: 10.5px; } } @media screen and (min-width: 1280px) { .cnCarte[data-date] { padding-top: 50px; padding-bottom: 50px; } } /* Pages de tag :