racine) */
.nav-links,
.nav-links > ul{
list-style: none;
margin: 0;
padding: 0 0 0 0;
display: flex;
flex-direction: column;
gap: 14px; /* espacement vertical des items */
}
/* Chaque lien est cliquable sur toute la largeur */
.nav-links a{
display: block;
padding: 12px 8px;
color: #222;
text-decoration: none;
font-size: 17px;
}
/* Items de type “bloc” (tes ) */
.nav-links .nav-item{
display: block;
}
/* Sous-menus : légère indentation (comme tu avais) */
.nav-links .submenu{
margin: 6px 0 0 12px;
padding-left: 10px;
border-left: 2px solid #eee;
}
/* Voile derrière le panneau */
.nav-overlay{
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
opacity: 0; pointer-events: none;
transition: opacity .28s ease;
z-index: 1100;
}
.nav-overlay.is-active{ opacity: 1; pointer-events: auto; }
/* Le container du header ne doit pas masquer le panneau */
.site-header .container{ overflow: visible !important; }
body.nav-open{ overflow: hidden; } /* bloque le scroll derrière */
}
/* === HAMBURGER — PATCH FINAL (ajouter tout en bas) === */
@media (max-width:768px){
/* s'assure que le bouton est cliquable au-dessus de tout */
.mobile-toggle{ position: relative; z-index: 1300; }
/* l’overlay passe sous le panneau, mais au-dessus du reste */
.nav-overlay{ z-index: 1100; }
.nav-links{ z-index: 1200; will-change: transform; }
/* au cas où un style ailleurs mettrait pointer-events:none */
.nav-links.is-open{ pointer-events: auto; }
}
/* ============== MENU MOBILE 100% CSS ============== */
@media (max-width:768px){
/* Cache le checkbox */
.nav-toggle{ position:absolute; pointer-events:none; opacity:0; }
/* Panneau (fermé par défaut) */
.nav-links{
position: fixed; top:0; right:0; bottom:0; left:auto;
width: 82%; max-width: 420px;
background:#fff;
transform: translateX(100%);
transition: transform .28s ease;
z-index: 1200;
padding: 72px 20px 24px; /* laisse la zone du header */
overflow-y: auto;
display: block !important;
}
/* OUVERTURE via :checked */
.nav-toggle:checked ~ .nav-links{
transform: translateX(0);
}
/* Overlay (fermé par défaut) */
.nav-overlay{
position: fixed; inset:0;
background: rgba(0,0,0,.45);
opacity:0; pointer-events:none;
transition: opacity .28s ease;
z-index:1100;
display:block;
}
/* Overlay actif quand coché */
.nav-toggle:checked ~ .nav-overlay{
opacity:1; pointer-events:auto;
}
/* Le hamburger doit toujours être cliquable au-dessus */
.mobile-toggle{ position:relative; z-index:1300; cursor:pointer; }
/* Lisibilité des liens dans le panneau */
.nav-links,
.nav-links > ul{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column; gap:14px;
}
.nav-links a{
display:block; padding:12px 8px;
color:#222; text-decoration:none; font-size:17px;
}
.nav-links .nav-item{ display:block; }
.nav-links .submenu{
margin:6px 0 0 12px; padding-left:10px; border-left:2px solid #eee;
}
}
/* ======= DESKTOP RESET (≥769px) — annule les styles mobile du menu ======= */
@media (min-width: 769px){
/* Le checkbox du toggle + le burger ne doivent pas apparaître en desktop */
.nav-toggle{ display: none !important; }
.mobile-toggle{ display: none !important; }
.nav-overlay{ display: none !important; }
/* Le panneau nav redevient “inline” (pas coulissant) */
.nav-links{
position: static !important;
transform: none !important;
width: auto !important;
max-width: none !important;
height: auto !important;
padding: 0 !important;
overflow: visible !important;
box-shadow: none !important;
background: transparent !important;
}
/* Le header garde la structure classique : logo à gauche, nav à côté */
.site-header .container.navbar{
display: flex;
align-items: center;
justify-content: space-between; /* logo à gauche / nav + CTA à droite */
}
/* La barre de navigation redevient horizontale */
.nav-links,
.nav-links > ul{
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 24px;
margin: 0; padding: 0;
}
/* Les items “bloc” restent inline en desktop */
.nav-links .nav-item{ display: inline-block; }
/* Les sous-menus conservent ton style desktop (dropdown) :
si tu utilises déjà :hover ailleurs, on ne touche pas */
.nav-links .submenu{
position: absolute;
/* garde tes règles existantes pour le dropdown desktop */
}
}
/* ====== NAV MOBILE — hauteur utile + sous-menus en flux ====== */
@media (max-width:768px){
/* 1) Panneau : pleine hauteur, scroll interne confortable */
.nav-links{
height: 100vh; /* occupe toute la hauteur écran */
padding: 64px 20px 24px; /* un peu moins d’espace en haut */
overflow-y: auto; /* le contenu défile dans le panneau */
-webkit-overflow-scrolling: touch; /* scroll fluide iOS */
}
/* 2) Sous-menus : plus d’overlay, tout est dans le flux */
.nav-links .nav-item{ position: static; }
.nav-links .submenu{
position: static !important; /* annule un éventuel absolute desktop */
display: block !important; /* on les montre en mobile (simple & fiable) */
margin: 6px 0 12px 12px;
padding-left: 10px;
border-left: 2px solid #eee;
background: transparent;
box-shadow: none;
}
/* 3) Lisibilité et rythme vertical */
.nav-links a{
display: block;
padding: 12px 8px;
font-size: 17px;
line-height: 1.3;
color: #222;
text-decoration: none;
}
}
/* === HÉRO (mobile) — la boîte = exactement la hauteur de l’image === */
@media (max-width: 768px){
/* 1) Le grid n’étire plus les éléments en hauteur */
.hero-grid{
align-items: start !important;
gap: 16px !important;
}
/* 2) Le conteneur visuel ne force AUCUNE hauteur/padding/ombre */
.hero-visual{
align-self: start !important;
justify-self: stretch !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
line-height: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.hero-visual picture{
display: block !important;
margin: 0 !important;
}
/* 3) L’ombre + arrondi se mettent SUR L’IMAGE (donc pile à sa taille) */
.hero-visual img{
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
border-radius: 12px !important;
box-shadow: 0 4px 18px rgba(0,0,0,.10) !important;
object-fit: contain !important;
}
}
/* =========================================================
ACCUEIL — espace au-dessus de l'image héros (MOBILE seulement)
========================================================= */
/* 1) Solution simple et robuste : on ajoute de l'espace entre les 2 blocs de la grille */
@media (max-width: 1023px) {
.page-accueil .hero-grid {
grid-template-columns: 1fr; /* (au cas où) */
row-gap: 32px !important; /* crée de l'espace ENTRE le texte et l'image */
}
}
/* 2) Filet de sécurité : si le gap ne suffit pas, on insère un espace AU-DESSUS de l'image */
@media (max-width: 1023px) {
.page-accueil .hero-visual::before {
content: "";
display: block;
height: 4px; /* augmente à 48/64 si tu veux plus d'air */
}
}
/* 3) Dernier recours si un autre style casse encore l'espacement */
@media (max-width: 1023px) {
.page-accueil .hero-visual {
margin-top: 0 !important; /* neutralise d'anciennes marges contradictoires */
transform: none !important; /* neutralise d'anciens translate */
}
}
/* === Hover "Cliquer pour voir le calendrier" — version ajustée === */
.product-card.v2 .pc-thumb {
position: relative;
cursor: pointer;
}
.product-card.v2 .hover-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 40px 20px; /* l'espace intérieur : ajuste si tu veux */
max-width: 70%; /* évite que la bulle devienne trop large */
background: rgba(247, 242, 238, 0.85); /* beige semi-transparent */
border: 1px solid var(--burgundy-900);
border-radius: 999px; /* forme pastille/bulle qui suit le texte */
color: var(--burgundy-900);
font-family: 'Poppins', sans-serif;
font-size: 24px;
line-height: 1.2;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.product-card.v2 .pc-thumb:hover .hover-hint {
opacity: 1;
}
/* === Product Card V2 — espace autour du titre et sous-titre === */
.product-card.v2 .pc-head {
padding: 18px 0 0px 20px;
/* top | right | bottom | left */
}
.product-card.v2 .pc-head h3 {
margin: 0 0 8px 0; /* espace sous le titre */
}
/* Sous-titre compact sous le titre principal */
.product-card.v2 .pc-head .subtitle{
margin: 2px 0 0 0;
color: var(--gray-900);
font-size: 14px;
}
/* Mise en valeur du format (8,5" × 11") */
.product-card.v2 .pc-head .subtitle .format-highlight{
font-weight: 700;
color: var(--burgundy-900);
}
/* === Product Card V2 — année plus petite et non bold === */
.product-card.v2 .pc-head h3 .year {
font-size: 0.55em; /* environ 50% plus petit */
font-weight: 400; /* normal, pas bold */
opacity: 0.85; /* optionnel : un peu plus doux */
}
/* === PRODUCT CARD V2 — layout image gauche + texte semaine à droite === NOV-19, 10.37 CLEAN */
/* La carte reste une colonne globale */
.product-card.v2{
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
/* Bloc principal : image + résumé de la semaine */
.product-card.v2 .pc-main{
display: flex; /* ✅ layout principal = flex */
gap: 14px; /* espace entre image et texte */
align-items: flex-start;
}
/* Image alignée à gauche, même style que tu avais déjà */
.product-card.v2 .pc-thumb{
width: 100%;
display: flex;
justify-content: flex-start;
position: relative;
cursor: pointer;
}
/* Bloc semaine en un coup d’œil, sans encadré, sur fond blanc */
.product-card.v2 .pc-week{
padding-top: 4px;
}
/* === Ajustement des espacements autour de la rangée image + texte === */
/* Réduit l'espace AU-DESSUS du bloc pc-main */
.product-card.v2 .pc-head {
margin-bottom: 2px !important; /* ← était souvent ~24px, on réduit fortement */
}
/* Réduit l'espace SOUS le bloc pc-main */
.product-card.v2 .pc-main {
margin-bottom: 2px !important; /* ← enlève ~30px de trop sous la rangée */
}
/* Réduit encore un peu l’espace avant le bouton */
.product-card.v2 .pc-actions {
margin-top: 10px !important; /* ← était 18px, on compacte sans serrer */
}
/* === Product Card V2 — styles texte communs Semaine + Mois === NOV-20 09:22 */
.product-card.v2 .pc-week,
.product-card.v2 .pc-month{
padding-top: 4px;
}
/* Titre bourgogne, un peu plus grand */
.product-card.v2 .pc-week .view-title,
.product-card.v2 .pc-month .view-title{
margin: 0 0 2px 0;
font-family: 'Poppins', sans-serif;
font-size: 17px;
font-weight: 400;
color: var(--burgundy-900);
}
/* Sous-titre petit, noir et gras */
.product-card.v2 .pc-week .view-subtitle,
.product-card.v2 .pc-month .view-subtitle{
margin: 0 0 6px 0;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--gray-900);
}
/* Liste simple, sans boîte beige */
.product-card.v2 .pc-week ul,
.product-card.v2 .pc-month ul{
margin: 0;
padding-left: 18px;
list-style: disc;
font-size: 14px;
line-height: 1.5;
color: var(--gray-700);
}
.product-card.v2 .pc-week ul li,
.product-card.v2 .pc-month ul li{
margin-bottom: 4px;
}
/* Un peu plus d’espace entre le bloc texte et le bouton */
.product-card.v2 .pc-actions{
margin-top: 18px;
}
/* Mobile, on empile image puis texte semaine */
@media (max-width: 900px){
.product-card.v2 .pc-main{
flex-direction: column; /* ✅ empile image puis texte */
gap: 12px;
}
.product-card.v2 .pc-thumb img{
width: 100%;
margin: 0 auto;
}
}
/* Le bloc Mois en un coup d’œil reste caché dans la page,
il sera injecté dans le lightbox via JS */
.product-card.v2 .pc-month-detail{
display: none;
}
/* Lightbox : suppression des flèches gauche/droite */
.lightbox .lb-prev,
.lightbox .lb-next {
display: none !important;
}
/* === PATCH ESPACE VERTICAL AUTOUR DE LA PHOTO (PRODUCT CARD V2) === NOV-19 13.29 */
/* On resserre le padding général de la carte */
.product-card.v2{
padding-top: 8px !important;
padding-bottom: 10px !important;
}
/* On enlève la grosse marge sous l'image */
.product-card.v2 .pc-thumb{
margin-top: 0 !important;
margin-bottom: 4px !important; /* ajuste à 0 si tu veux vraiment collé */
}
/* On évite de rajouter de l'air inutile sous le bloc image+texte */
.product-card.v2 .pc-main{
margin-bottom: 0 !important;
}
/* On rapproche encore un peu le bouton du reste du contenu */
.product-card.v2 .pc-actions{
margin-top: 0px !important;
margin-bottom: 20px !important;
}
/* === PRODUCT CARD V2 — bouton sous l'image + image ~80% de largeur === NOV-20 16:16 (version consolidée) */
@media (min-width: 900px) {
/* Carte en 2 colonnes : image (80%) | texte (20%) */
.product-card.v2 {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
column-gap: 16px;
align-items: flex-start;
}
/* Le bloc pc-main ne sert qu'à regrouper les éléments */
.product-card.v2 .pc-main {
display: contents;
}
/* Titre sur toute la largeur */
.product-card.v2 .pc-head {
grid-column: 1 / -1;
margin-bottom: 4px;
}
/* Image dans la colonne 1 */
.product-card.v2 .pc-thumb {
grid-column: 1;
justify-content: flex-start;
}
.product-card.v2 .pc-thumb img {
width: 100%;
height: auto;
display: block;
}
/* Colonne texte à droite : bloc 1 + bloc 2 empilés */
.product-card.v2 .pc-week,
.product-card.v2 .pc-month {
grid-column: 2;
max-width: 260px;
padding-right: 8px;
}
.product-card.v2 .pc-month {
margin-top: 12px; /* petit espace seulement entre les deux blocs */
}
/* Bouton sous l’image (colonne 1) */
.product-card.v2 .pc-actions {
grid-column: 1;
justify-self: center;
width: auto !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
}
}
/* === PRODUCT CARD V2 — centrage du bloc texte sous l'image en mobile === NOV-20 09:27 */
@media (max-width: 900px){
/* Blocs texte (semaine + mois) centrés sous l'image */
.product-card.v2 .pc-week,
.product-card.v2 .pc-month{
text-align: center;
margin: 0 auto;
max-width: 90%;
}
/* Listes internes : texte à gauche mais bloc centré */
.product-card.v2 .pc-week ul,
.product-card.v2 .pc-month ul{
text-align: left;
margin-left: auto;
margin-right: auto;
}
/* Image au-dessus, texte en dessous (ce que tu as déjà) */
.product-card.v2 .pc-main{
flex-direction: column;
gap: 12px;
}
.product-card.v2 .pc-thumb img{
width: 100%;
margin: 0 auto;
}
}
/* Saut de ligne visible uniquement en mobile */
.br-mobile-only {
display: none;
}
@media (max-width: 900px) {
.br-mobile-only {
display: block;
}
}
/* ============================
TEST GLOBAL FULL-WIDTH
============================ */
.container{
max-width: 100% !important; /* le container peut enfin occuper toute la largeur */
padding-left: 80px;
padding-right: 80px;
}
/* Ajuste les marges sur les écrans plus petits */
@media (max-width: 1024px){
.container{
padding-left: 40px;
padding-right: 40px;
}
}
@media (max-width: 640px){
.container{
padding-left: 20px;
padding-right: 20px;
}
}
/* ============================
CONTAINER FLUIDE "À LA PiQ"
============================ */
.container{
max-width: 100% !important;
padding-left: clamp(20px, 6vw, 140px);
padding-right: clamp(20px, 6vw, 140px);
}
/* === HEADER — marges logo / bouton plus larges que les gaps internes === */
@media (min-width: 1200px){
.site-header .brand{
margin-right: clamp(40px, 6vw, 180px); /* espace logo → “Accueil” */
}
.nav-cta{
margin-left: clamp(40px, 6vw, 180px); /* espace “Soumission” → bouton */
}
}
/* === NAV DESKTOP — version finale fluide et propre === */
@media (min-width: 1024px){
/* Conteneur principal du header */
.site-header .container.navbar {
display: grid;
grid-template-columns: auto 1fr auto; /* logo | nav-links | bouton */
align-items: center;
column-gap: clamp(40px, 6vw, 160px); /* espace fluide entre colonnes */
max-width: 1600px; /* largeur max élégante */
padding-inline: clamp(20px, 4vw, 80px);
margin-inline: auto;
}
/* Le bloc navigation au centre */
.nav-links {
display: flex;
flex-wrap: nowrap;
justify-content: space-between; /* liens répartis uniformément */
gap: clamp(16px, 3vw, 64px); /* espace entre Accueil / Produits / ... */
flex: 1 1 auto;
}
/* Espace de luxe entre logo et menu */
.site-header .brand {
margin-right: clamp(40px, 7vw, 200px);
}
/* Espace de luxe entre menu et CTA */
.nav-cta {
margin-left: clamp(40px, 7vw, 200px);
}
}
/* === PRODUCT CARD V2 — rapprocher "Mois en un coup d’œil" du bloc semaine === NOV-20 09:44 */
.product-card.v2 .pc-week .month-title{
margin-top: 30px; /* petit espace propre entre les deux blocs */
}
/* On s'assure que la liste qui suit colle bien au sous-titre */
.product-card.v2 .pc-week .month-title + .view-subtitle{
margin-top: 2px;
}
.product-card.v2 .pc-week .month-title + .view-subtitle + ul{
margin-top: 4px;
}
/* === Lightbox — on masque définitivement le bloc texte Mois en un coup d’œil === NOV-20 09:47 */
.lb-month{
display: none !important;
}
/* === CARD PROJET BIEN-ÊTRE — lien vers la couverture === NOV-20 11:26 */
.product-card.v2 .view-cover-link{
margin-top: 20px; /* ⬅️ ajoute ~20px d’espace au-dessus */
font-size: 14px;
font-weight: 600; /* ⬅️ un peu plus gras pour attirer l’œil */
color: var(--gray-800);
}
.product-card.v2 .view-cover-link .cover-link{
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: var(--burgundy-900);
text-decoration: underline;
cursor: pointer;
}
.product-card.v2 .view-cover-link .cover-link:hover{
color: var(--burgundy-700);
}
/* === LIGHTBOX — pastilles de pagination pour les galeries === */
.lightbox .lb-dots{
margin-top: 12px;
display: flex;
justify-content: center;
gap: 8px;
}
.lightbox .lb-dot{
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.6);
background: rgba(0,0,0,0.3);
cursor: pointer;
transition: transform 0.15s ease, background-color 0.15s ease;
}
.lightbox .lb-dot.is-active{
background: #ffffff;
transform: scale(1.2);
}
/* ==== PAGE TITRE – Aperçu maquette ==== NOV-21 09:39 */
.page-id-thumb {
position: relative;
background: #f7f7f7;
padding: 0;
border-radius: 10px;
overflow: hidden;
cursor: zoom-in;
}
.page-id-thumb img {
width: 100%;
height: auto;
display: block;
}
/* Hover hint */
.page-id-thumb .hover-hint {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 14px;
color: #fff;
background: rgba(0,0,0,0.55);
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.page-id-thumb:hover .hover-hint {
opacity: 1;
}
/* === GUIDE DE L'ÉLÈVE — vignette sans fond beige + hover local === NOV-21 10:17 */
.guide-thumb{
background: none !important; /* enlève le beige de .panel */
padding: 0 !important;
box-shadow: none !important;
border: none !important;
position: relative; /* référence pour l'overlay */
display: block;
}
/* L'image remplit sa colonne, comme sur Page titre */
.guide-thumb img{
display: block;
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
/* Overlay uniquement sur l'image, centré */
.guide-thumb .hover-hint{
position: absolute;
inset: 0; /* couvre exactement la surface de l'image */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px 18px;
background: rgba(0,0,0,0.35); /* gris seulement sur l'image */
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 20px;
line-height: 1.3;
border-radius: 12px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.guide-thumb:hover .hover-hint{
opacity: 1;
}
/* 🎯 Centrage mobile pour toutes les cartes et sections du site NOV-21 15:48 */
@media (max-width: 768px){
/* TOUTES les sections avec titres */
h1, h2, h3 {
text-align: center;
}
/* Titres des cartes (perso-card, card, product-card, etc.) */
.card h3,
.perso-card h3,
.product-card h3 {
text-align: center;
}
/* Textes descriptifs sous les titres */
.card p,
.perso-card p,
.product-card p,
.lead {
text-align: center;
}
/* Boutons dans les cartes */
.card .actions,
.perso-card .actions,
.product-card .actions {
text-align: center;
}
/* Boutons seuls dans une carte sans .actions */
.card .btn,
.perso-card .btn,
.product-card .btn {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
}
/* Réduit l’espace au-dessus de “Formats & contenu” uniquement sur la page Agenda élèves NOV-21 16:10 */
.page-eleves #formats-contenu.section {
padding-top: 20px !important; /* tu peux mettre 10px ou 30px selon ton goût */
}
/* Bloc vedette NOV-21 16:58 */
.card.highlight {
border: 2px solid var(--primary);
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.card.highlight h3 {
color: var(--primary);
}
/* PAGE ACCESSOIRES — cartes produits NOV-22 09:20 */
.page-accessoires .cards.accessories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
align-items: stretch;
}
.page-accessoires .cards.accessories .card {
background: #fff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
display: flex;
flex-direction: column;
}
/* Produit vedette : bordure colorée */
.page-accessoires .cards.accessories .card.accessory-feature {
border: 3px solid var(--primary);
}
.page-accessoires .cards.accessories h3 {
margin-top: 0;
margin-bottom: 8px;
}
.page-accessoires .cards.accessories p {
margin-top: 0;
margin-bottom: 8px;
}
.page-accessoires .cards.accessories ul {
margin-top: 0;
padding-left: 1.2rem;
}
.page-accessoires .cards.accessories .actions {
margin-top: auto;
display: flex;
justify-content: center;
}
/* Mobile : titres centrés, listes lisibles */
@media (max-width: 768px) {
.page-accessoires .cards.accessories .card {
text-align: center;
}
.page-accessoires .cards.accessories ul {
text-align: left;
display: inline-block;
}
}
/* === PAGE ACCESSOIRES — vignettes dédiées, indépendantes du reste === NOV-22 09:59 */
.page-accessoires .accessory-thumb{
margin: 0 0 16px 0;
padding: 0;
background: transparent; /* plus de rectangle gris */
border-radius: 12px;
overflow: hidden; /* si jamais l’image dépasse un peu */
}
.page-accessoires .accessory-thumb img{
display: block;
max-width: 100%;
height: auto;
object-fit: contain; /* on voit l’image au complet */
}
/* === PAGE À PROPOS === DEC-05 13:54 */
.about-contact {
display: flex;
flex-direction: column;
gap: 12px; /* espace SANS exagérer entre les sections */
}
.about-contact h2 {
margin-bottom: 10px;
}
.about-office {
padding-left: 0;
margin-bottom: 6px;
}
.about-contact p strong {
display: block;
margin-bottom: 4px; /* petit espace entre le sous-titre et l’info */
}
.about-contact p {
margin: 0; /* enlève les grands espaces qu’on voit actuellement */
}
/* === PAGE À PROPOS — Ajustements fins === */
/* 1. Réduit l'espace entre les paragraphes */
.page-apropos .about-main p {
margin-bottom: 14px; /* plus compact, très propre */
}
/* 2. Style général des H2 */
.page-apropos .about-main h2 {
margin-top: 28px;
margin-bottom: 12px;
}
/* 3. Premier h2 (« Qui nous sommes ») ne doit rien avoir au-dessus */
.page-apropos .about-main h2:first-of-type {
margin-top: 0;
}