/* ═══════════════════════════════════════════════════════════════════ CECACERT WordPress Theme — main.css Portage fidèle de tokens.css + vitrine.css + site.css de la maquette ═══════════════════════════════════════════════════════════════════ */ /* ── GOOGLE FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap'); /* ── DESIGN TOKENS ── */ :root { /* Icône « information » de l'encart « À retenir » — inlinée en data-URI pour éviter une requête réseau et rester colorable via mask-image. */ --cc-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); --color-primary: #6D071A; --color-primary-700: #8B0D21; --color-primary-500: #A81428; --color-primary-100: #FDECEA; --color-accent: #348500; --color-accent-hover: #4CAF00; --color-accent-100: #F1F8E9; --color-gold: #C8860A; --color-gold-100: #FFF8E1; --color-success: #2E7D32; --color-error: #B71C1C; --color-error-100: #FFEBEE; --color-info: #1565C0; --color-text: #1A1A1A; --color-text-secondary: #455A64; --color-text-muted: #78909C; --color-bg: #FFFFFF; --color-bg-secondary: #F8F9FA; --color-border: #CCCCCC; --font-heading: 'Montserrat', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'Roboto Mono', monospace; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;--space-8:32px; --space-12:48px;--space-20:80px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-full:99px; --shadow-sm: 0 1px 3px rgba(109,7,26,.08); --shadow-md: 0 2px 8px rgba(109,7,26,.10); --shadow-lg: 0 8px 24px rgba(109,7,26,.12); --badge-reu-bg: #E8F5E9; --badge-reu-text: #2E7D32; --badge-bci-bg: #E3F2FD; --badge-bci-text: #1565C0; } /* ── RESET ── */ *,*::before,*::after { box-sizing:border-box; } body { margin:0; font-family:var(--font-body); color:var(--color-text); background:#fff; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); margin:0; line-height:1.2; } p { margin:0 0 1em; } a { color:inherit; text-decoration:none; } img { max-width:100%; height:auto; display:block; } ul,ol { padding-left:1.5em; } button { cursor:pointer; } /* ── LAYOUT ── */ .wrap { max-width:1200px; margin:0 auto; padding:0 40px; } .mw-prose { max-width:760px; margin:0 auto; } section.block { padding:84px 0; } .bg-pale { background:var(--color-primary-100); } .bg-gray { background:var(--color-bg-secondary); } .bg-dark { background:#1A1A1A; color:#fff; } /* ── KICKER ── */ .kicker { font-family:var(--font-heading); font-weight:600; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--color-accent); display:block; } /* ── SEC-HEAD ── */ .sec-head { text-align:center; max-width:680px; margin:0 auto 52px; } .sec-head h2 { color:var(--color-heading,var(--color-primary)); font-weight:700; font-size:36px; letter-spacing:-.5px; margin-top:14px; } .sec-head p { color:var(--color-text-secondary); font-size:17px; margin-top:14px; line-height:1.6; } /* ── BUTTONS ── */ .btn { font-weight:600; font-size:15px; padding:14px 26px; border-radius:var(--radius-md); transition:.15s; display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:none; text-decoration:none; } .btn-primary { background:var(--color-primary); color:#fff; } .btn-primary:hover { background:var(--color-primary-700); } .btn-green, .btn-accent { background:var(--color-accent); color:#fff; } .btn-green:hover, .btn-accent:hover { background:var(--color-accent-hover); } .btn-gold { background:var(--color-gold); color:#fff; } .btn-gold:hover { background:#b3760a; } .btn-white { background:#fff; color:var(--color-primary); } .btn-white:hover { background:var(--color-primary-100); } .btn-outline { background:transparent; border:2px solid var(--color-primary); color:var(--color-primary); padding:12px 24px; } .btn-outline:hover { background:var(--color-primary-100); } .btn-sm { padding:10px 18px; font-size:14px; } .btn-lg { padding:17px 32px; font-size:17px; } /* ═══════════════════════════════════════════ HEADER — portage exact de site-nav.js Préfixe cc- identique à la maquette ═══════════════════════════════════════════ */ .cc-header { position:sticky; top:0; z-index:60; background:#fff; border-bottom:2px solid var(--color-primary); } .cc-nav { height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .cc-logo-link { display:flex; align-items:center; flex-shrink:0; min-width:0; max-width:min(320px, 42vw); overflow:hidden; } /* ── Logo : s'adapte à TOUTE image téléversée ───────────────── * Aucune dimension n'est imposée à l'administrateur. La hauteur est * plafonnée, la largeur suit le ratio, et `max-width` empêche un logo * très allongé de repousser la navigation. `object-fit:contain` garantit * qu'aucune partie n'est rognée si les deux limites s'appliquent. * * Le sélecteur couvre aussi `.custom-logo` : c'est la classe posée par * WordPress si un gabarit appelle the_custom_logo() ailleurs. * ─────────────────────────────────────────────────────────── */ .cc-logo-link img, .cc-logo-link .cc-logo-img, .cc-logo-link .custom-logo { height: auto; width: auto; max-height: 52px; max-width: 100%; object-fit: contain; display: block; } .cc-logo-text { font-family:var(--font-heading); font-weight:700; font-size:20px; color:var(--color-primary); } /* Nav desktop */ .cc-menu { display:flex; align-items:center; gap:4px; } .cc-link { position:relative; font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--color-text); text-decoration:none; padding:9px 11px; border-radius:var(--radius-md); white-space:nowrap; transition:color .15s, background .15s; display:inline-flex; align-items:center; gap:5px; cursor:pointer; background:none; border:none; } .cc-link:hover { color:var(--color-primary); background:var(--color-primary-100); } .cc-link.active { color:var(--color-primary); } .cc-link.active::after { content:""; position:absolute; left:11px; right:11px; bottom:2px; height:2px; background:var(--color-gold); border-radius:2px; } .cc-caret { width:11px; height:11px; transition:transform .18s; } .cc-has-sub { position:relative; } .cc-has-sub:hover .cc-caret, .cc-has-sub:focus-within .cc-caret { transform:rotate(180deg); } /* Dropdown Certifications — riche avec icônes */ .cc-sub { position:absolute; top:calc(100% + 6px); left:0; min-width:296px; background:#fff; border:1px solid #eee; border-radius:var(--radius-lg); box-shadow:0 12px 34px rgba(109,7,26,.16); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s; z-index:70; } .cc-has-sub:hover .cc-sub, .cc-has-sub:focus-within .cc-sub { opacity:1; visibility:visible; transform:translateY(0); } .cc-sub a { display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:var(--radius-md); text-decoration:none; transition:background .12s; color:var(--color-text); } .cc-sub a:hover { background:var(--color-primary-100); } .cc-ic { width:34px; height:34px; flex-shrink:0; border-radius:var(--radius-md); background:var(--color-primary-100); color:var(--color-primary); display:flex; align-items:center; justify-content:center; transition:.12s; } .cc-sub a:hover .cc-ic { background:var(--color-primary); color:#fff; } .cc-st { font-family:var(--font-heading); font-weight:600; font-size:14px; color:var(--color-text); line-height:1.25; display:block; } .cc-sn { font-size:12px; color:var(--color-text-muted); margin-top:2px; display:block; } /* Droite du header */ .cc-right { display:flex; align-items:center; gap:16px; flex-shrink:0; } .cc-lang { font-size:13px; color:var(--color-text-secondary); display:flex; gap:6px; align-items:center; white-space:nowrap; } .cc-lang b { color:var(--color-primary); } .cc-lang a { color:var(--color-text-secondary); text-decoration:none; } .cc-lang a:hover { color:var(--color-primary); } .cc-cta { background:var(--color-accent); color:#fff; font-weight:600; font-size:14px; padding:11px 18px; border-radius:var(--radius-md); text-decoration:none; white-space:nowrap; transition:background .15s; } .cc-cta:hover { background:var(--color-accent-hover); } .cc-burger { display:none; width:44px; height:44px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; align-items:center; justify-content:center; color:var(--color-primary); padding:0; } /* Menu mobile */ .cc-mobile { display:none; border-top:1px solid #eee; background:#fff; padding:10px 22px 20px; } .cc-mobile.open { display:block; } .cc-mobile a { display:block; padding:12px 8px; font-size:15px; color:var(--color-text); text-decoration:none; border-bottom:1px solid #f2f2f2; } .cc-mobile a.active { color:var(--color-primary); font-weight:600; } .cc-mgroup { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-muted); padding:14px 8px 4px; } .cc-msub { padding-left:22px !important; font-size:14px; } /* ── PAGE BANNER (pages intérieures) ── */ .page-banner { background:linear-gradient(135deg,#5A0615,#6D071A 60%,#8B0D21); color:#fff; padding:54px 0 60px; position:relative; overflow:hidden; } .page-banner.has-bg-image { background-size:cover; background-position:center; } .page-banner::after { content:""; position:absolute; right:-90px; top:-90px; width:300px; height:300px; border:42px solid rgba(255,255,255,.05); border-radius:50%; pointer-events:none; } .page-banner .kicker { color:rgba(255,255,255,.75); margin-bottom:8px; } .page-banner h1 { font-size:42px; font-weight:700; letter-spacing:-.5px; margin:14px 0 0; max-width:760px; line-height:1.12; } .page-banner .gold-rule { width:80px; height:3px; background:var(--color-gold); margin:20px 0 0; } .page-banner__desc { font-size:17px; color:rgba(255,255,255,.84); margin:16px 0 0; max-width:600px; line-height:1.6; } .breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.6); margin:0 0 0; flex-wrap:wrap; } .breadcrumb a { color:rgba(255,255,255,.65); } .breadcrumb a:hover { color:#fff; } .breadcrumb__sep { opacity:.5; } /* ═══════════════════════════════════════════ FOOTER — portage exact de la maquette ═══════════════════════════════════════════ */ .site-footer { background:#1A1A1A; color:#fff; border-top:3px solid var(--color-primary); } .foot-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding:60px 0 44px; } .foot-col--brand {} .foot-logo img { height: auto; width: auto; max-height: 46px; max-width: 220px; object-fit: contain; margin-bottom: 18px; display: block; } .foot-logo-text { font-family:var(--font-heading); font-weight:700; font-size:18px; color:#fff; display:block; margin-bottom:16px; } .foot-about { color:rgba(255,255,255,.6); font-size:14px; line-height:1.7; max-width:300px; } .foot-contact { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:10px; font-size:14px; color:rgba(255,255,255,.65); } .foot-contact li { display:flex; align-items:flex-start; gap:10px; } .foot-contact svg { flex-shrink:0; opacity:.6; margin-top:2px; } .foot-contact a { color:rgba(255,255,255,.65); } .foot-contact a:hover { color:var(--color-gold); } .foot-col h4 { font-size:13px; letter-spacing:1px; text-transform:uppercase; color:#fff; margin-bottom:18px; font-family:var(--font-heading); } .foot-col-nav { list-style:none; padding:0; margin:0; } .foot-col-nav li a, .foot-col-nav a { display:block; color:rgba(255,255,255,.65); font-size:14px; margin-bottom:12px; transition:.15s; text-decoration:none; } .foot-col-nav li a:hover, .foot-col-nav a:hover { color:var(--color-gold); } /* APDP band */ .foot-apdp { border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .apdp-badge { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); padding:12px 16px; } .apdp-badge .shield { width:34px; height:34px; flex-shrink:0; border-radius:8px; background:var(--color-accent-100); color:var(--color-accent); display:flex; align-items:center; justify-content:center; } .apdp-badge .txt { font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.82); } .apdp-badge .txt b { color:#fff; font-weight:600; } .apdp-note { font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.6; max-width:520px; flex:1; min-width:280px; } .apdp-note a { color:rgba(255,255,255,.72); text-decoration:underline; } /* Bottom bar */ .foot-bottom { border-top:1px solid rgba(255,255,255,.1); padding:20px 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:10px; } .foot-legal { display:flex; list-style:none; padding:0; margin:0; gap:18px; } .foot-legal li a { font-size:13px; color:rgba(255,255,255,.55); } .foot-legal li a:hover { color:var(--color-gold); } /* ═══════════════════════════════════════════ HERO — portage pixel-perfect Accueil.html ═══════════════════════════════════════════ */ .hero { --hero-rgb:109,7,26; position:relative; height:88vh; min-height:600px; max-height:820px; overflow:hidden; background:linear-gradient(125deg,rgba(var(--hero-rgb),1),rgba(var(--hero-rgb),.78) 55%,rgba(var(--hero-rgb),.9)); } .hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; } .hero-slide.is-active { opacity:1; pointer-events:auto; position:relative; height:100%; } .hero-bg { position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; } .hero-bg--placeholder { background:linear-gradient(125deg,rgba(var(--hero-rgb),1),rgba(var(--hero-rgb),.78) 55%,rgba(var(--hero-rgb),.9)); } .hero-overlay { position:absolute; inset:0; background:linear-gradient(120deg,rgba(var(--hero-rgb),.86) 0%,rgba(var(--hero-rgb),.62) 55%,rgba(var(--hero-rgb),.78) 100%); z-index:2; } .hero-pattern { position:absolute; inset:0; z-index:3; opacity:.10; background-image:radial-gradient(circle at 1px 1px,#fff 1.4px,transparent 0); background-size:30px 30px; } .hero-inner { position:relative; z-index:4; height:100%; display:flex; flex-direction:column; justify-content:center; } .hero-badge { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:13px; font-weight:600; padding:8px 16px; border-radius:var(--radius-full); backdrop-filter:blur(4px); margin-bottom:8px; } .hero-badge .lf { color:#9BE26B; } .hero h1 { color:#fff; font-weight:700; font-size:56px; line-height:1.1; letter-spacing:-1px; margin:24px 0 0; max-width:880px; } .hero-sub { color:rgba(255,255,255,.88); font-size:20px; margin:22px 0 0; max-width:620px; line-height:1.55; } .hero-rule { width:120px; height:3px; background:var(--color-gold); margin:26px 0 0; } .hero-cta { display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; } /* Hero slider arrows + dots */ .hero-slider__prev, .hero-slider__next { position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; backdrop-filter:blur(4px); } .hero-slider__prev { left:20px; } .hero-slider__next { right:20px; } .hero-slider__prev:hover, .hero-slider__next:hover { background:rgba(255,255,255,.3); } .hero-slider__dots { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:8px; } .hero-slider__dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; padding:0; transition:.2s; } .hero-slider__dot.is-active { background:#fff; transform:scale(1.25); } /* ── CAROUSEL RÉFÉRENCES ── */ .ref-carousel { position:relative; display:flex; align-items:center; gap:0; } .ref-carousel__viewport { overflow:hidden; flex:1; } .ref-carousel__track { display:flex; gap:18px; transition:transform .35s cubic-bezier(.4,0,.2,1); will-change:transform; } .ref-carousel__track .ref { flex:0 0 calc(25% - 14px); min-width:160px; } .ref-carousel__btn { flex-shrink:0; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--color-border); color:var(--color-primary); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; z-index:2; } .ref-carousel__btn:hover { background:var(--color-primary); color:#fff; border-color:var(--color-primary); } .ref-carousel__btn--prev { margin-right:12px; } .ref-carousel__btn--next { margin-left:12px; } /* ═══════════════════════════════════════════ STATS — portage exact Accueil.html ═══════════════════════════════════════════ */ .stats { background:#fff; padding:64px 0; } .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .stat { text-align:center; position:relative; } .stat:not(:last-child)::after { content:""; position:absolute; right:-15px; top:14%; height:72%; width:1px; background:#eee; } .stat .ic { width:48px; height:48px; margin:0 auto 16px; color:var(--color-accent); display:flex; align-items:center; justify-content:center; background:var(--color-accent-100); border-radius:var(--radius-md); } .stat .num { font-family:var(--font-heading); font-weight:800; font-size:46px; color:var(--color-primary); line-height:1; } .stat .lab { font-size:15px; color:var(--color-text-secondary); margin-top:10px; } /* ── CERTIFICATIONS GRID (maquette) ── */ section.certs { background:var(--color-primary-100); } .cert-cards { display:grid; grid-template-columns:1fr 1fr; gap:30px; } .cert-card { background:#fff; border-top:4px solid var(--color-primary); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:38px; transition:transform .18s, box-shadow .18s; } .cert-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); } .cert-card__row { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; } .cert-icon { width:58px; height:58px; border-radius:var(--radius-md); background:var(--color-primary-100); color:var(--color-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .badge-gold { background:var(--color-gold-100); color:var(--color-gold); font-size:12px; font-weight:600; padding:6px 13px; border-radius:var(--radius-full); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .cert-card h3 { color:var(--color-heading,var(--color-primary)); font-size:24px; margin:0 0 6px; font-weight:700; } .std { font-family:var(--font-mono); font-size:13px; color:var(--color-accent); font-weight:500; margin-bottom:16px; } .cert-card p { color:var(--color-text-secondary); font-size:15px; line-height:1.6; margin:0 0 24px; } .cert-card ul { list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:10px; } .cert-card li { font-size:14.5px; color:var(--color-text); display:flex; align-items:center; gap:10px; } .cert-card li svg { color:var(--color-accent); flex-shrink:0; } /* Legacy grid (Elementor widgets) */ .cert-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; } .cert-card__header { padding:36px 28px; color:#fff; } .cert-card__header .kicker { color:rgba(255,255,255,.75); margin-bottom:8px; } .cert-card__header h3 { font-size:22px; font-weight:700; } .cert-card__body { padding:28px; flex:1; } .cert-card__body p { color:var(--color-text-secondary); font-size:15px; line-height:1.6; } .cert-card__footer { padding:0 28px 28px; } /* ── PRÉSENCE GÉOGRAPHIQUE (maquette) ── */ .presence-grid { display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center; } .presence-stat { background:var(--color-primary); color:#fff; border-radius:var(--radius-lg); padding:42px 38px; position:relative; overflow:hidden; } .presence-stat::before { content:""; position:absolute; right:-40px; bottom:-40px; width:180px; height:180px; border:30px solid rgba(255,255,255,.06); border-radius:50%; } .presence-stat .big { font-family:var(--font-heading); font-weight:800; font-size:72px; line-height:1; } .presence-stat .cap { font-size:16px; opacity:.85; margin-top:10px; } .presence-stat .sub { font-size:13.5px; opacity:.7; margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); } .countries { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .country { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #eee; border-radius:var(--radius-md); padding:14px 16px; transition:.15s; } .country:hover { border-color:var(--color-primary); background:var(--color-primary-100); } .country .dot { width:9px; height:9px; border-radius:50%; background:var(--color-accent); flex-shrink:0; } .country .nm { font-size:14.5px; font-weight:500; } .country.soon .dot { background:var(--color-gold); } .country.soon .nm { color:var(--color-text-muted); } /* ── RÉFÉRENCES (maquette) ── */ section.refs { background:var(--color-bg-secondary); } .ref-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .ref { height:100px; background:#fff; border:1px solid #eee; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; transition:.15s; padding:0 18px; text-align:center; overflow:hidden; } .ref:hover { background:var(--color-primary-100); border-color:var(--color-primary); transform:translateY(-3px); } .ref span { font-family:var(--font-heading); font-weight:700; color:var(--color-text-secondary); font-size:16px; } .ref:hover span { color:var(--color-primary); } .ref img { max-height:52px; max-width:100%; object-fit:contain; filter:grayscale(1); opacity:.7; transition:.2s; } .ref:hover img { filter:none; opacity:1; } /* ── NEWS GRID (maquette .article) ── */ .news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .article { background:#fff; border:1px solid #eee; border-radius:var(--radius-lg); overflow:hidden; transition:.18s; display:flex; flex-direction:column; } .article:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); } .article-thumb { display:block; width:100%; height:190px; overflow:hidden; } .article-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; } .article:hover .article-thumb img { transform:scale(1.04); } .article-body { padding:24px; flex:1; display:flex; flex-direction:column; } .cat-badge { align-self:flex-start; background:var(--color-primary-100); color:var(--color-primary); font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--radius-full); white-space:nowrap; } .article h3 { font-size:19px; color:var(--color-text); margin:14px 0 0; line-height:1.3; font-weight:600; } .article .date { font-size:13px; color:var(--color-text-muted); margin-top:10px; } .article .more { margin-top:auto; padding-top:18px; color:var(--color-primary); font-weight:600; font-size:14px; display:inline-flex; gap:6px; align-items:center; } .article:hover .more { text-decoration:underline; } /* Legacy news-card (archives/blog) */ .news-card { background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--color-border); transition:.2s; display:flex; flex-direction:column; } .news-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); } .news-card__img { display:block; aspect-ratio:16/10; overflow:hidden; } .news-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; } .news-card:hover .news-card__img img { transform:scale(1.04); } .news-card__body { padding:22px; } .news-card__cat { font-size:12px; font-weight:600; color:var(--color-accent); text-transform:uppercase; letter-spacing:1px; } .news-card__title { font-size:17px; font-weight:600; margin-top:8px; line-height:1.3; } .news-card__title a:hover { color:var(--color-primary); } .news-card__excerpt { font-size:14px; color:var(--color-text-secondary); margin-top:10px; line-height:1.6; } .news-card__meta { font-size:13px; color:var(--color-text-muted); margin-top:14px; display:flex; align-items:center; gap:8px; } /* ── GALERIE MASONRY ── */ .gallery-tabs { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; } .gallery-tabs .tab-btn { padding:8px 18px; border:1px solid var(--color-border); border-radius:var(--radius-full); font-size:14px; font-weight:500; cursor:pointer; background:#fff; transition:.15s; } .gallery-tabs .tab-btn.active, .gallery-tabs .tab-btn:hover { background:var(--color-primary); color:#fff; border-color:var(--color-primary); } .gallery-masonry { columns:3; gap:16px; } .gallery-item { break-inside:avoid; margin-bottom:16px; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; position:relative; } .gallery-item img { width:100%; display:block; transition:transform .3s; } .gallery-item:hover img { transform:scale(1.03); } .gallery-item__overlay { position:absolute; inset:0; background:rgba(109,7,26,.5); opacity:0; transition:.2s; display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; } .gallery-item:hover .gallery-item__overlay { opacity:1; } /* ── FAQ ACCORDION ── */ .faq-list { display:flex; flex-direction:column; gap:8px; } .faq-item { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; } .faq-item__question { width:100%; text-align:left; background:#fff; border:none; padding:18px 22px; font-family:var(--font-heading); font-size:16px; font-weight:600; color:var(--color-text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:.15s; } .faq-item__question:hover { background:var(--color-primary-100); color:var(--color-primary); } .faq-item__question[aria-expanded="true"] { background:var(--color-primary); color:#fff; } .faq-item__chevron { flex-shrink:0; transition:transform .25s; font-size:12px; } .faq-item__question[aria-expanded="true"] .faq-item__chevron { transform:rotate(180deg); } .faq-item__answer { display:none; padding:18px 22px 22px; font-size:15px; color:var(--color-text-secondary); line-height:1.7; border-top:1px solid var(--color-border); } .faq-item__answer.is-open { display:block; } /* ── NEWS FILTERS ── */ .news-filters { display:flex; gap:8px; margin-bottom:36px; flex-wrap:wrap; } .filter-tab { padding:8px 18px; border:1px solid var(--color-border); border-radius:var(--radius-full); font-size:14px; font-weight:500; cursor:pointer; background:#fff; text-decoration:none; color:var(--color-text); transition:.15s; } .filter-tab.active, .filter-tab:hover { background:var(--color-primary); color:#fff; border-color:var(--color-primary); } /* ── PAGINATION ── */ .pagination { display:flex; gap:6px; justify-content:center; margin-top:48px; flex-wrap:wrap; } .pagination a, .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:14px; font-weight:500; transition:.15s; } .pagination a:hover { background:var(--color-primary-100); border-color:var(--color-primary); color:var(--color-primary); } .pagination .current { background:var(--color-primary); color:#fff; border-color:var(--color-primary); } /* ── CTA FINAL (maquette) ── */ .cta-final { background:var(--color-primary); color:#fff; text-align:center; padding:84px 0; position:relative; overflow:hidden; } .cta-final::before, .cta-final::after { content:""; position:absolute; border-radius:50%; border:40px solid rgba(255,255,255,.04); } .cta-final::before { width:300px; height:300px; left:-120px; top:-120px; } .cta-final::after { width:240px; height:240px; right:-90px; bottom:-90px; } .cta-final h2 { font-size:40px; font-weight:700; position:relative; margin-bottom:18px; } .cta-final p { font-size:18px; opacity:.85; max-width:560px; margin:0 auto 32px; position:relative; line-height:1.55; } .cta-final .btn-gold { position:relative; font-size:16px; padding:16px 34px; } .cta-final__actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:36px; } /* ── NEWSLETTER SECTION ── */ .newsletter-section { background:var(--color-bg-secondary); } .newsletter-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .newsletter-content h2 { font-size:28px; color:var(--color-heading,var(--color-primary)); margin-top:12px; } .newsletter-content p { color:var(--color-text-secondary); margin-top:12px; } .newsletter-form__notice { border-radius:var(--radius-md); padding:12px 16px; font-size:14px; margin-top:20px; background:var(--color-accent-100); border:1px solid var(--color-accent); color:var(--color-success); } .newsletter-form__notice--error { background:#fdecec; border-color:var(--color-error); color:var(--color-error); } .newsletter-form__group { display:flex; gap:0; margin-top:24px; } .newsletter-form__input { flex:1; padding:14px 18px; border:1px solid var(--color-border); border-right:none; border-radius:var(--radius-md) 0 0 var(--radius-md); font-size:15px; font-family:var(--font-body); } .newsletter-form__input:focus { outline:2px solid var(--color-primary); outline-offset:-2px; } .newsletter-form .btn { border-radius:0 var(--radius-md) var(--radius-md) 0; } .newsletter-form__consent { font-size:12.5px; color:var(--color-text-muted); margin-top:10px; line-height:1.5; } .newsletter-form__consent a { color:var(--color-primary); text-decoration:underline; } /* ── CONTENU GÉNÉRIQUE (pages, index blog) ── */ .entry-content { font-size:17px; line-height:1.8; color:var(--color-text); } .entry-content h2 { font-size:26px; color:var(--color-heading,var(--color-primary)); margin:40px 0 14px; } .entry-content h3 { font-size:21px; margin:32px 0 10px; } .entry-content p { margin:0 0 1.2em; } .entry-content a { color:var(--color-primary); text-decoration:underline; } .entry-content ul, .entry-content ol { margin:0 0 1.2em; } .entry-content blockquote { border-left:4px solid var(--color-primary); padding:12px 20px; margin:24px 0; background:var(--color-primary-100); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; color:var(--color-text-secondary); } /* ═══════════════════════════════════════════ SINGLE ARTICLE — portage maquette Article.html ═══════════════════════════════════════════ */ /* Barre de progression de lecture */ .read-progress { position:fixed; top:0; left:0; height:4px; width:0%; background:linear-gradient(90deg,var(--color-primary),var(--color-gold)); z-index:80; transition:width .08s linear; } /* En-tête d'article */ .art-header { background:var(--color-bg-secondary); border-bottom:1px solid #eee; } .art-head-inner { max-width:820px; margin:0 auto; padding:40px 0 36px; } .art-crumb { font-size:13px; color:var(--color-text-muted); margin-bottom:20px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .art-crumb a { color:var(--color-text-muted); } .art-crumb a:hover { color:var(--color-primary); } .cat-badge.reg { background:var(--color-primary-100); color:var(--color-primary); } .cat-badge.coton { background:var(--badge-bci-bg); color:var(--badge-bci-text); } .cat-badge.event { background:var(--color-gold-100); color:var(--color-gold); } .cat-badge.bio { background:var(--color-accent-100); color:var(--color-accent); } .art-title { font-family:var(--font-heading); font-weight:700; color:var(--color-heading,var(--color-primary)); font-size:38px; line-height:1.18; letter-spacing:-.5px; margin:16px 0 0; text-wrap:balance; } .art-excerpt { font-size:18px; color:var(--color-text-secondary); line-height:1.6; margin:16px 0 0; } .art-meta { display:flex; align-items:center; gap:16px; margin-top:24px; flex-wrap:wrap; } .art-author { display:flex; align-items:center; gap:11px; } .art-author .av { width:44px; height:44px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:15px; flex-shrink:0; } .art-author .who .nm { display:block; font-weight:600; font-size:14.5px; color:var(--color-text); } .art-author .who .rl { display:block; font-size:12.5px; color:var(--color-text-muted); } .art-meta .dot { color:#ccc; } .art-meta .mi { font-size:13.5px; color:var(--color-text-muted); display:inline-flex; align-items:center; gap:6px; } .art-meta .mi svg { color:var(--color-accent); } /* Image à la une */ .art-hero-img { max-width:980px; margin:0 auto; padding:0 40px; } .art-hero-fig { margin:0; } .art-hero-img .art-hero-media { display:block; width:100%; height:440px; object-fit:cover; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); margin-top:-30px; position:relative; z-index:2; } .art-figcaption { font-size:12.5px; color:var(--color-text-muted); text-align:center; margin-top:12px; font-style:italic; } /* Corps : grille article + rails latéraux */ .art-layout { max-width:1140px; margin:0 auto; padding:48px 40px 20px; display:grid; grid-template-columns:64px minmax(0,1fr); gap:36px; align-items:start; } /* La troisième piste n'existe que si le sommaire a réellement été rempli — il * est généré depuis les

de l'article, et single-article.js pose alors la * classe. Sans cela, un article sans titre de niveau 2 laissait 230 px de vide * à droite de la prose. */ .art-layout.has-toc { grid-template-columns:64px minmax(0,1fr) 230px; } /* Rail de partage sticky (gauche) */ .share-rail { position:sticky; top:120px; display:flex; flex-direction:column; gap:10px; } .share-rail .lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-muted); writing-mode:vertical-rl; margin:0 auto 4px; } .share-rail .share-btn { width:44px; height:44px; padding:0; border-radius:50%; border:1px solid var(--color-border); background:#fff; color:var(--color-text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; } .share-rail .share-btn:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-100); transform:translateY(-2px); } .share-rail .share-btn.copied { border-color:var(--color-accent); color:var(--color-accent); background:var(--color-accent-100); } /* Corps de l'article (prose) */ .prose { font-size:17.5px; line-height:1.8; color:var(--color-text); max-width:680px; } .prose > p { margin:0 0 22px; } .prose > p:first-of-type, .prose .lead-p { font-size:19px; color:var(--color-text-secondary); } .prose h2 { font-family:var(--font-heading); font-weight:700; color:var(--color-heading,var(--color-primary)); font-size:26px; margin:42px 0 14px; scroll-margin-top:110px; line-height:1.25; } .prose h3 { font-family:var(--font-heading); font-weight:600; color:var(--color-heading,var(--color-text)); font-size:20px; margin:30px 0 10px; scroll-margin-top:110px; } .prose ul, .prose ol { margin:0 0 22px; padding-left:0; list-style:none; } .prose ul li { position:relative; padding-left:30px; margin-bottom:11px; } .prose ul li::before { content:""; position:absolute; left:6px; top:11px; width:8px; height:8px; border-radius:2px; background:var(--color-accent); } .prose ol { counter-reset:c; } .prose ol li { position:relative; padding-left:38px; margin-bottom:13px; counter-increment:c; } .prose ol li::before { content:counter(c); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:50%; background:var(--color-primary-100); color:var(--color-primary); font-family:var(--font-heading); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; } .prose a { color:var(--color-primary); font-weight:500; text-decoration:underline; text-underline-offset:3px; } .prose strong { color:var(--color-text); font-weight:600; } .prose blockquote { margin:28px 0; padding:6px 0 6px 26px; border-left:4px solid var(--color-gold); font-size:20px; line-height:1.6; color:var(--color-primary); font-family:var(--font-heading); font-weight:600; } .prose figure { margin:30px 0; } .prose figure img { display:block; width:100%; border-radius:var(--radius-md); } .prose figcaption { font-size:12.5px; color:var(--color-text-muted); margin-top:9px; font-style:italic; text-align:center; } .prose .callout { background:var(--color-accent-100); border:1px solid #cfe6b8; border-radius:var(--radius-md); padding:20px 22px; margin:28px 0; display:flex; gap:14px; } .prose .callout .ic { color:var(--color-accent); flex-shrink:0; margin-top:2px; } .prose .callout p { margin:0; font-size:15px; line-height:1.65; color:var(--color-text-secondary); } .prose .callout p strong { color:var(--color-text); } /* Sommaire sticky (droite) */ .toc { position:sticky; top:120px; } .toc h4 { font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:14px; } .toc a { display:block; font-size:13.5px; color:var(--color-text-secondary); padding:7px 0 7px 13px; border-left:2px solid #e6e6e6; margin-left:-2px; line-height:1.4; transition:.12s; } .toc a:hover, .toc a.active { color:var(--color-primary); border-left-color:var(--color-primary); font-weight:500; } /* Tags + bas d'article */ .art-foot { max-width:680px; margin:0 auto; padding:0 0 10px; } .art-tags { display:flex; gap:9px; flex-wrap:wrap; margin:30px 0; } .tag-chip { font-size:13px; color:var(--color-text-secondary); background:var(--color-bg-secondary); border:1px solid #eee; border-radius:var(--radius-full); padding:7px 15px; transition:.15s; } .tag-chip:hover { border-color:var(--color-primary); color:var(--color-primary); } /* Encart auteur */ .author-box { max-width:680px; margin:30px auto 0; background:var(--color-bg-secondary); border-radius:var(--radius-lg); padding:28px; display:flex; gap:20px; align-items:flex-start; } .author-box .av { width:64px; height:64px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:22px; flex-shrink:0; } .author-box .who .role { font-size:12.5px; font-weight:600; color:var(--color-accent); text-transform:uppercase; letter-spacing:.4px; } .author-box .who h4 { font-size:19px; color:var(--color-heading,var(--color-primary)); margin:3px 0 8px; } .author-box .who p { font-size:14.5px; color:var(--color-text-secondary); line-height:1.6; margin:0; } /* ── ARTICLES LIÉS ── */ .related { background:var(--color-bg-secondary); margin-top:56px; } .related-inner { max-width:1140px; margin:0 auto; padding:64px 40px; } .related h2 { font-family:var(--font-heading); color:var(--color-heading,var(--color-primary)); font-size:26px; font-weight:700; text-align:center; margin-bottom:36px; } .rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .rel-card { background:#fff; border:1px solid #eee; border-radius:var(--radius-lg); overflow:hidden; transition:.18s; display:flex; flex-direction:column; } .rel-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); } .rel-card .thumb { height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .rel-card .thumb.reg { background:linear-gradient(140deg,#5A0615,#8B0D21); } .rel-card .thumb.coton { background:linear-gradient(140deg,#1565C0,#42a5f5); } .rel-card .thumb.bio { background:linear-gradient(140deg,#2f6d1e,#4CAF00); } .rel-card .thumb.event { background:linear-gradient(140deg,#9a6a08,#C8860A); } .rel-card .thumb svg { color:rgba(255,255,255,.55); } .rel-card .thumb .rc-img { width:100%; height:100%; object-fit:cover; } .rel-card .rc-body { padding:20px; flex:1; display:flex; flex-direction:column; } .rel-card h3 { font-size:16.5px; color:var(--color-text); margin:11px 0 0; line-height:1.34; font-weight:600; } .rel-card .rc-meta { font-size:12.5px; color:var(--color-text-muted); margin-top:auto; padding-top:12px; } /* ── NEWSLETTER (carte article) ── */ .news-letter { max-width:1140px; margin:56px auto 0; padding:0 40px; } .nl-card { background:var(--color-primary); border-radius:var(--radius-lg); padding:44px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; position:relative; overflow:hidden; } /* pointer-events:none est INDISPENSABLE : la boîte de ce pseudo-élément * couvre 160 × 160 px dans le coin haut-droit de la carte — bien au-delà * de l'anneau visible — et, généré en dernier, il est peint par-dessus le * formulaire. Sans cela, le champ e-mail et le bouton « S'abonner » y * deviennent incliquables. C'est aussi la raison des position:relative * posés sur le titre et le paragraphe. */ .nl-card::after { content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border:36px solid rgba(255,255,255,.05); border-radius:50%; pointer-events:none; } .nl-card h3 { color:#fff; font-size:24px; position:relative; } .nl-card p { color:rgba(255,255,255,.82); font-size:15px; margin-top:8px; position:relative; max-width:440px; line-height:1.55; } .nl-form { display:flex; gap:10px; position:relative; } .nl-form input { border:none; border-radius:var(--radius-md); padding:14px 16px; font-size:14px; width:250px; font-family:var(--font-body); outline:none; } .nl-form button { background:var(--color-gold); color:#fff; border:none; border-radius:var(--radius-md); padding:0 24px; font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; } .nl-form button:hover { background:#b3760a; } /* Lien retour */ .back-link { max-width:1140px; margin:40px auto 0; padding:0 40px; } .back-link a { color:var(--color-primary); font-weight:600; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; } .back-link a:hover { gap:12px; } /* Responsive single article */ @media (max-width:1080px){ /* .has-toc est plus spécifique que .art-layout : une requête média ne modifiant pas la spécificité, il faut le neutraliser nommément, sinon un article pourvu d'un sommaire resterait en trois colonnes. */ .art-layout, .art-layout.has-toc { grid-template-columns:1fr; gap:0; padding:36px 24px 10px; } .share-rail { position:static; flex-direction:row; gap:10px; margin-bottom:26px; } .share-rail .lbl { writing-mode:horizontal-tb; margin:0; align-self:center; } .toc { display:none; } .prose, .art-foot, .author-box { max-width:100%; } .rel-grid { grid-template-columns:1fr 1fr; } } @media (max-width:680px){ .art-head-inner { padding:28px 22px; } .art-title { font-size:27px; } .art-excerpt { font-size:16px; } .art-hero-img { padding:0 22px; } .art-hero-img .art-hero-media { height:230px; margin-top:0; } .prose { font-size:16.5px; } .prose h2 { font-size:22px; } .nl-card { grid-template-columns:1fr; padding:30px; } .nl-form { flex-direction:column; } .nl-form input { width:100%; } .rel-grid { grid-template-columns:1fr; } .author-box { flex-direction:column; gap:14px; } } @media print { /* .site-footer : le sélecteur « footer.site » venait de la maquette, mais le pied de page réel porte la classe .site-footer — il s'imprimait donc en entier. */ .read-progress, #site-header, .cc-header, .share-rail, .toc, .related, .news-letter, .back-link, .site-footer, #back-to-top { display:none !important; } .art-layout { display:block; } } /* ── SIDEBAR ── */ .sidebar-blog { display:flex; flex-direction:column; gap:24px; } .widget { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:24px; } .widget-title { font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--color-heading,var(--color-primary)); margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--color-heading,var(--color-primary)); } /* ── BACK TO TOP ── */ #back-to-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; background:var(--color-primary); color:#fff; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; border:none; opacity:0; visibility:hidden; transition:.25s; z-index:99; } #back-to-top.visible { opacity:1; visibility:visible; } #back-to-top:hover { background:var(--color-primary-700); } /* ── SEARCH COUNT ── */ .search-count { color:var(--color-text-secondary); font-size:15px; margin-bottom:28px; } .search-term { color:var(--color-primary); font-weight:600; } /* ── SCREEN READER ONLY ── */ .screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ── EDITOR ALIGNMENT ── */ .alignleft { float:left; margin:0 28px 16px 0; } .alignright { float:right; margin:0 0 16px 28px; } .aligncenter { margin:0 auto 16px; display:block; } .alignfull { width:100vw; margin-left:calc((100vw - 100%) / -2); max-width:100vw; } .alignwide { width:calc(100% + 160px); margin-left:-80px; max-width:1440px; } /* ── RESPONSIVE ── */ @media (max-width:1100px) { .alignwide { width:100%; margin-left:0; } .news-grid { grid-template-columns:repeat(2,1fr); } .stats-grid { grid-template-columns:repeat(2,1fr); } .stat::after { display:none; } .ref-grid { grid-template-columns:repeat(4,1fr); } .ref-carousel__track .ref { flex-basis:calc(33.333% - 12px); } .newsletter-inner { grid-template-columns:1fr; gap:32px; } .gallery-masonry { columns:2; } } @media (max-width:1080px) { /* Header mobile */ .cc-nav { padding:0 22px; } /* Barre plus étroite : on abaisse le plafond du logo pour laisser la place au bouton de menu, plutôt que de laisser l'image l'écraser. */ .cc-logo-link { max-width:min(240px, 58vw); } .cc-logo-link img, .cc-logo-link .cc-logo-img, .cc-logo-link .custom-logo { max-height:44px; } .cc-menu,.cc-lang { display:none !important; } .cc-burger { display:flex; } .cc-cta { display:none; } } @media (max-width:960px) { .wrap { padding:0 22px; } .foot-top { grid-template-columns:1fr 1fr; } .page-banner h1 { font-size:30px; } .sec-head h2 { font-size:26px; } .cert-grid { grid-template-columns:1fr; } .cert-cards { grid-template-columns:1fr; } .news-grid { grid-template-columns:1fr 1fr; } .hero h1 { font-size:38px; } .hero-sub { font-size:17px; } .hero-cta { flex-direction:column; } .hero-cta .btn { width:100%; justify-content:center; } .stats-grid { grid-template-columns:1fr 1fr; gap:36px 20px; } .ref-grid { grid-template-columns:1fr 1fr; } .ref-carousel__track .ref { flex-basis:calc(50% - 9px); } .presence-grid { grid-template-columns:1fr; gap:28px; } .countries { grid-template-columns:1fr 1fr; } .cta-final h2 { font-size:30px; } } @media (max-width:600px) { .stats-grid { grid-template-columns:repeat(2,1fr); gap:16px; } .ref-grid { grid-template-columns:repeat(2,1fr); } .news-grid { grid-template-columns:1fr; } .countries { grid-template-columns:1fr; } .foot-top { grid-template-columns:1fr; } .foot-bottom { flex-direction:column; gap:10px; } .gallery-masonry { columns:1; } .hero { height:auto; min-height:70vh; padding:60px 0; } .hero h1 { font-size:30px; } section.block { padding:56px 0; } .stats { padding:40px 0; } } /* ── CONTACT FORM 7 OVERRIDE ── */ .wpcf7 .wpcf7-form-control { font-family:var(--font-body); } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select { width:100%; padding:13px 16px; border:1px solid var(--color-border); border-radius:var(--radius-md); font-family:var(--font-body); font-size:15px; color:var(--color-text); background:#fff; transition:border-color .15s; } .wpcf7 input:focus, .wpcf7 textarea:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(109,7,26,.08); } .wpcf7 .wpcf7-submit { background:var(--color-primary); color:#fff; font-family:var(--font-heading); font-weight:600; padding:14px 28px; border:none; border-radius:var(--radius-md); cursor:pointer; font-size:15px; transition:.15s; } .wpcf7 .wpcf7-submit:hover { background:var(--color-primary-700); } .wpcf7 .wpcf7-not-valid-tip { color:var(--color-error); font-size:13px; margin-top:4px; } .wpcf7 .wpcf7-response-output { border-radius:var(--radius-md); padding:12px 16px; margin-top:16px; font-size:14px; } /* ── CF7 — APDP CONSENT ── */ .apdp-consent-wrap { display:block; margin-top:4px; } .apdp-consent-label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:14px; color:var(--color-text-secondary); line-height:1.5; } .apdp-consent-label input[type="checkbox"] { flex-shrink:0; width:17px; height:17px; margin-top:2px; accent-color:var(--color-primary); cursor:pointer; } .apdp-consent-label a { color:var(--color-primary); text-decoration:underline; } .apdp-consent-label a:hover { text-decoration:none; } .wpcf7 .wpcf7-apdp-consent.wpcf7-not-valid { outline:2px solid var(--color-error); } /* ── CF7 — HONEYPOT (invisible) ── */ ._cc_trap, [name="_cc_time"] { display:none !important; visibility:hidden !important; position:absolute !important; left:-9999px !important; } /* ── APDP BADGE ── */ .apdp-badge { display:inline-flex; align-items:center; gap:10px; } .apdp-badge--inline { } .apdp-badge--band { display:flex; width:100%; justify-content:center; background:var(--color-accent-100); padding:14px 24px; border-radius:var(--radius-md); } .apdp-badge .shield { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--color-accent-100); color:var(--color-accent); flex-shrink:0; } .apdp-badge .txt { display:flex; flex-direction:column; gap:2px; } .apdp-badge .txt strong { font-size:13px; font-weight:700; color:var(--color-text); } .apdp-badge .txt span { font-size:11px; color:var(--color-text-muted); } .apdp-badge__link { font-size:12px; color:var(--color-primary); text-decoration:underline; } /* ── CTA BAND ── */ .cta-band { padding:48px 0; } .cta-band--horizontal { display:flex; align-items:center; justify-content:space-between; gap:32px; } .cta-band--horizontal .cta-band__text { flex:1; } .cta-band--centered { text-align:center; } .cta-band--centered .cta-band__text { margin-bottom:28px; } .cta-band__text h2 { font-size:clamp(20px,2.5vw,30px); font-weight:700; font-family:var(--font-heading); margin:0 0 8px; } .cta-band__text p { margin:0; font-size:16px; } .cta-band__actions { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; } .btn-white { background:#fff; color:var(--color-primary); font-family:var(--font-heading); font-weight:600; padding:14px 28px; border-radius:var(--radius-md); text-decoration:none; transition:.15s; display:inline-flex; align-items:center; gap:6px; } .btn-white:hover { background:rgba(255,255,255,.9); } .btn-ghost-light { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); font-family:var(--font-heading); font-weight:600; padding:12px 26px; border-radius:var(--radius-md); text-decoration:none; transition:.15s; display:inline-flex; align-items:center; gap:6px; } .btn-ghost-light:hover { border-color:#fff; background:rgba(255,255,255,.1); } @media (max-width:768px) { .cta-band--horizontal { flex-direction:column; text-align:center; } .cta-band__actions { justify-content:center; } } /* ── CERT CARD (Elementor widget) ── */ .cert-card { background:#fff; border-radius:var(--radius-lg); padding:32px; box-shadow:0 4px 20px rgba(0,0,0,.06); } .cert-card--reu { border-top:4px solid var(--color-primary); } .cert-card--bci { border-top:4px solid var(--color-accent); } .cert-card__emblem { margin-bottom:20px; } .cert-card h3 { font-family:var(--font-heading); font-size:20px; margin:0 0 12px; } .cert-card p { color:var(--color-text-secondary); font-size:15px; margin:0 0 20px; } .cert-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; } .cert-badge { font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; background:var(--color-primary-100); color:var(--color-primary); } .cert-badge--green { background:var(--color-accent-100); color:var(--color-accent); } /* ── FAQ ACCORDION (Elementor widget) ── */ .faq-accordion { border-top:1px solid var(--color-border); } .faq-item { border-bottom:1px solid var(--color-border); } .faq-item__q { width:100%; background:none; border:none; text-align:left; padding:18px 0; font-size:16px; font-weight:600; font-family:var(--font-heading); color:var(--color-text); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; } .faq-item__q:hover { color:var(--color-primary); } .faq-item__q[aria-expanded="true"] { color:var(--color-primary); } .faq-item__q[aria-expanded="true"] .faq-item__caret svg { transform:rotate(180deg); } .faq-item__caret svg { transition:transform .2s; flex-shrink:0; } .faq-item__a { overflow:hidden; } .faq-item__body { padding:0 0 20px; color:var(--color-text-secondary); font-size:15px; line-height:1.7; } /* ── TEAM GRID (Elementor widget) ── */ .team-grid { display:grid; gap:28px; } .team-grid--2col { grid-template-columns:repeat(2,1fr); } .team-grid--3col { grid-template-columns:repeat(3,1fr); } .team-grid--4col { grid-template-columns:repeat(4,1fr); } .team-card { background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.06); } .team-card__photo img { width:100%; aspect-ratio:1; object-fit:cover; display:block; } .team-card__photo--placeholder { display:flex; align-items:center; justify-content:center; aspect-ratio:1; background:var(--color-bg-secondary); color:var(--color-border); } .team-card__body { padding:20px; } .team-card__body h3 { font-family:var(--font-heading); font-size:16px; margin:0 0 4px; } .team-card__poste { font-size:13px; font-weight:600; color:var(--color-primary); margin:0 0 10px; } .team-card__bio { font-size:13px; color:var(--color-text-secondary); margin:0 0 12px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .team-card__socials { display:flex; gap:10px; } .team-card__socials a { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--color-bg-secondary); color:var(--color-text-secondary); text-decoration:none; transition:.15s; } .team-card__socials a:hover { background:var(--color-primary); color:#fff; } @media (max-width:900px) { .team-grid--4col { grid-template-columns:repeat(2,1fr); } .team-grid--3col { grid-template-columns:repeat(2,1fr); } } @media (max-width:600px) { .team-grid--4col,.team-grid--3col,.team-grid--2col { grid-template-columns:1fr; } } /* ── PAGE À PROPOS ── */ /* Intro split */ .intro-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; } .intro-text .kicker { color:var(--color-accent); } .intro-text h2 { color:var(--color-heading,var(--color-primary)); font-size:34px; font-weight:700; margin:14px 0 0; line-height:1.2; } .intro-text p { color:var(--color-text-secondary); font-size:16px; line-height:1.75; margin:20px 0 0; } .intro-media { position:relative; } .intro-media__img, .intro-media__placeholder { width:100%; height:400px; display:block; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); object-fit:cover; } .intro-media__placeholder { background:var(--color-bg-secondary); } .intro-media .float { position:absolute; bottom:-26px; left:-26px; background:var(--color-primary); color:#fff; border-radius:var(--radius-lg); padding:22px 26px; box-shadow:var(--shadow-lg); } .intro-media .float .n { font-family:var(--font-heading); font-weight:800; font-size:38px; line-height:1; } .intro-media .float .l { font-size:13px; opacity:.85; margin-top:6px; max-width:140px; } /* Mission / Vision */ .mv { background:var(--color-primary-100); } .mv-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; } .mv-card { background:#fff; border-radius:var(--radius-lg); padding:38px; box-shadow:var(--shadow-sm); border-top:4px solid var(--color-primary); } .mv-card.green { border-top-color:var(--color-accent); } .mv-card .ic { width:56px; height:56px; border-radius:var(--radius-md); background:var(--color-primary-100); color:var(--color-primary); display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .mv-card.green .ic { background:var(--color-accent-100); color:var(--color-accent); } .mv-card h3 { font-size:22px; color:var(--color-heading,var(--color-primary)); margin-bottom:12px; } .mv-card.green h3 { color:var(--color-accent); } .mv-card p { color:var(--color-text-secondary); font-size:15.5px; line-height:1.7; margin:0; } /* Valeurs */ .val-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .val-card { text-align:center; padding:30px 22px; border-radius:var(--radius-lg); border:1px solid #eee; transition:border-color .18s, box-shadow .18s, transform .18s; } .val-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md); transform:translateY(-4px); } .val-card .ic { width:54px; height:54px; margin:0 auto 16px; border-radius:50%; background:var(--color-gold-100); color:var(--color-gold); display:flex; align-items:center; justify-content:center; } .val-card h4 { font-size:18px; color:var(--color-text); margin-bottom:8px; } .val-card p { font-size:13.5px; color:var(--color-text-secondary); line-height:1.6; margin:0; } /* Timeline */ .timeline { max-width:760px; margin:0 auto; position:relative; padding-left:40px; } .timeline::before { content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--color-primary),var(--color-accent)); } .tl-item { position:relative; padding-bottom:38px; } .tl-item:last-child { padding-bottom:0; } .tl-item::before { content:""; position:absolute; left:-37px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--color-primary); } .tl-item .yr { font-family:var(--font-mono); font-weight:600; color:var(--color-accent); font-size:14px; margin-bottom:4px; } .tl-item h4 { font-size:19px; color:var(--color-heading,var(--color-primary)); margin:5px 0 7px; } .tl-item p { color:var(--color-text-secondary); font-size:15px; line-height:1.65; margin:0; } /* Équipe */ .team { background:var(--color-bg-secondary); } .team .team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .member { background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .18s, transform .18s; } .member:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); } .member-thumb img { width:100%; height:220px; object-fit:cover; display:block; } .member-thumb--empty { width:100%; height:220px; display:flex; align-items:center; justify-content:center; background:var(--color-bg-secondary); color:var(--color-border); } .member-body { padding:20px; } .member-body h4 { font-size:17px; color:var(--color-text); margin:0 0 4px; } .member-body .role { font-size:13px; color:var(--color-accent); font-weight:600; margin-top:4px; } .member-body .bio { font-size:13px; color:var(--color-text-secondary); margin-top:10px; line-height:1.55; } .member-li { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--color-bg-secondary); color:var(--color-text-secondary); text-decoration:none; margin-top:10px; transition:.15s; } .member-li:hover { background:var(--color-primary); color:#fff; } /* Accréditation */ .accred { background:var(--color-primary); color:#fff; } .accred-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .accred h2 { font-size:32px; font-weight:700; color:#fff; margin:0; } .accred .gold-rule { width:80px; height:3px; background:var(--color-gold); margin:18px 0 24px; } .accred > .wrap > div > p { font-size:16px; color:rgba(255,255,255,.84); line-height:1.7; margin:0; } .accred-list { display:flex; flex-direction:column; gap:16px; } .accred-item { display:flex; gap:16px; align-items:flex-start; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md); padding:20px 22px; } .accred-item .ic { width:44px; height:44px; flex-shrink:0; border-radius:var(--radius-md); background:rgba(255,255,255,.12); color:#9BE26B; display:flex; align-items:center; justify-content:center; } .accred-item h4 { font-size:16px; color:#fff; margin:0 0 4px; } .accred-item p { font-size:13.5px; color:rgba(255,255,255,.72); margin:0; } /* Responsive À propos */ @media (max-width:960px) { .intro-grid { grid-template-columns:1fr; gap:32px; } .intro-media .float { bottom:-16px; left:-16px; } .mv-grid { grid-template-columns:1fr; } .val-grid { grid-template-columns:1fr 1fr; } .accred-grid { grid-template-columns:1fr; gap:32px; } .team .team-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:600px) { .val-grid { grid-template-columns:1fr; } .team .team-grid { grid-template-columns:1fr; } .intro-media .float { position:static; margin-top:16px; display:inline-block; } } /* ── PAGES CERTIFICATION ── */ /* Breadcrumb */ .crumb { font-size:13px; color:rgba(255,255,255,.7); margin-bottom:18px; } .crumb a { color:rgba(255,255,255,.7); text-decoration:none; } .crumb a:hover { color:#fff; } .crumb span { color:#fff; } /* Hero certification */ .cert-hero .ch-grid { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; } .cert-hero .emblem { width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; } .cert-hero .std-chip { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff; font-family:var(--font-mono); font-size:13px; font-weight:500; padding:7px 14px; border-radius:var(--radius-full); } .page-banner.coton { background:linear-gradient(135deg,#1f5e0f,#348500 60%,#4CAF00); } /* Intro split */ .split2 { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; } .split2.rev .s2-media { order:2; } .s2-media img { width:100%; height:360px; display:block; border-radius:var(--radius-lg); object-fit:cover; box-shadow:var(--shadow-lg); } .s2-media__placeholder { width:100%; height:360px; border-radius:var(--radius-lg); background:var(--color-bg-secondary); } .s2 h2 { color:var(--color-heading,var(--color-primary)); font-size:30px; font-weight:700; margin:14px 0 0; line-height:1.2; } .s2 p { color:var(--color-text-secondary); font-size:16px; line-height:1.75; margin:18px 0 0; } /* Key facts strip */ .facts { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .fact { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:24px; border-top:3px solid var(--color-primary); } .fact.green { border-top-color:var(--color-accent); } .fact .ic { width:42px; height:42px; border-radius:var(--radius-md); background:var(--color-primary-100); color:var(--color-primary); display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .fact.green .ic { background:var(--color-accent-100); color:var(--color-accent); } .fact .n { font-family:var(--font-heading); font-weight:800; font-size:24px; color:var(--color-text); } .fact .l { font-size:13.5px; color:var(--color-text-secondary); margin-top:4px; line-height:1.45; } /* Requirements grid */ .req-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .req { display:flex; gap:15px; align-items:flex-start; background:#fff; border:1px solid #eee; border-radius:var(--radius-md); padding:22px; transition:.15s; } .req:hover { border-color:var(--color-primary); box-shadow:var(--shadow-sm); } .req .num { width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--color-primary); color:#fff; font-family:var(--font-heading); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; } .req h4 { font-size:16px; color:var(--color-text); margin-bottom:5px; } .req p { font-size:14px; color:var(--color-text-secondary); line-height:1.6; margin:0; } /* Document / référentiel cards */ .docs { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .doc { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid #eee; border-radius:var(--radius-lg); padding:22px; transition:.15s; text-decoration:none; color:inherit; } .doc:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md); transform:translateY(-3px); } .doc .ficon { width:52px; height:62px; flex-shrink:0; border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-family:var(--font-heading); font-weight:700; font-size:11px; letter-spacing:.5px; position:relative; } .doc .ficon.pdf { background:var(--color-error); } .doc .ficon.ext { background:var(--color-info); } .doc .ficon.doc-type { background:var(--color-accent); } .doc .ficon::before { content:""; position:absolute; top:0; right:0; border-width:0 12px 12px 0; border-style:solid; border-color:#fff transparent; opacity:.4; } .doc .d-body { flex:1; min-width:0; } .doc .d-body h4 { font-size:15.5px; color:var(--color-text); line-height:1.3; margin:0 0 5px; } .doc .d-body .d-desc { font-size:13px; color:var(--color-text-secondary); line-height:1.5; } .doc .d-body .d-meta { font-size:12px; color:var(--color-text-secondary); margin-top:8px; display:flex; align-items:center; gap:8px; } .doc .d-body .d-meta .src { font-weight:600; color:var(--color-primary); } .doc .d-action { color:var(--color-primary); flex-shrink:0; align-self:center; transition:.15s; } .doc:hover .d-action { transform:translateX(3px); } .docs-note { font-size:13px; color:var(--color-text-secondary); margin-top:18px; display:flex; align-items:flex-start; gap:9px; line-height:1.55; } .docs-note svg { color:var(--color-accent); flex-shrink:0; margin-top:2px; } /* Benefits */ .ben-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .ben { text-align:left; padding:26px; border-radius:var(--radius-lg); border:1px solid #eee; } .ben .ic { width:50px; height:50px; border-radius:var(--radius-md); background:var(--color-gold-100); color:var(--color-gold); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .ben h4 { font-size:17px; color:var(--color-text); margin-bottom:7px; } .ben p { font-size:14px; color:var(--color-text-secondary); line-height:1.6; margin:0; } /* Cross-links */ .xlinks { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .xlink { display:flex; gap:16px; align-items:center; background:var(--color-primary-100); border-radius:var(--radius-lg); padding:24px; text-decoration:none; transition:.15s; } .xlink:hover { background:var(--color-primary); } .xlink .ic { width:46px; height:46px; flex-shrink:0; border-radius:var(--radius-md); background:#fff; color:var(--color-primary); display:flex; align-items:center; justify-content:center; } .xlink h4 { font-size:17px; color:var(--color-heading,var(--color-primary)); margin:0 0 3px; } .xlink p { font-size:13.5px; color:var(--color-text-secondary); margin:0; } .xlink:hover h4, .xlink:hover p { color:#fff; } .xlink .arr { margin-left:auto; color:var(--color-primary); flex-shrink:0; } .xlink:hover .arr { color:#fff; } /* Responsive certification pages */ @media (max-width:900px) { .cert-hero .ch-grid { grid-template-columns:1fr; } .cert-hero .emblem { display:none; } .split2, .split2.rev { grid-template-columns:1fr; } .split2.rev .s2-media { order:0; } .req-grid, .docs, .ben-grid, .xlinks { grid-template-columns:1fr; } .facts { grid-template-columns:1fr 1fr; } } @media (max-width:600px) { .facts { grid-template-columns:1fr; } } /* ── PAGE SERVICES ── */ .svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .svc-card { background:#fff; border:1px solid #eee; border-radius:var(--radius-lg); padding:34px 30px; transition:.18s; position:relative; overflow:hidden; } .svc-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--color-primary); transform:scaleX(0); transform-origin:left; transition:.25s; } .svc-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-5px); border-color:transparent; } .svc-card:hover::before { transform:scaleX(1); } .svc-card .ic { width:60px; height:60px; border-radius:var(--radius-md); background:var(--color-primary-100); color:var(--color-primary); display:flex; align-items:center; justify-content:center; margin-bottom:22px; } .svc-card.alt .ic { background:var(--color-accent-100); color:var(--color-accent); } .svc-card.gold .ic { background:var(--color-gold-100); color:var(--color-gold); } .svc-card h3 { font-size:21px; color:var(--color-text); margin-bottom:10px; } .svc-card > p { color:var(--color-text-secondary); font-size:15px; line-height:1.7; margin-bottom:18px; } .svc-card .feat { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; } .svc-card .feat li { font-size:13.5px; color:var(--color-text); display:flex; gap:9px; align-items:center; } .svc-card .feat svg { color:var(--color-accent); flex-shrink:0; } /* Pour qui */ .who { background:var(--color-primary-100); } .who-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .who-card { background:#fff; border-radius:var(--radius-lg); padding:28px 24px; text-align:center; box-shadow:var(--shadow-sm); } .who-card .ic { width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; } .who-card h4 { font-size:17px; color:var(--color-heading,var(--color-primary)); margin-bottom:8px; } .who-card p { font-size:13.5px; color:var(--color-text-secondary); line-height:1.6; margin:0; } /* Accompagnement */ .support-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .support-media .svc-photo { width:100%; height:420px; object-fit:cover; display:block; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); } .support-media .svc-photo-ph { width:100%; height:420px; border-radius:var(--radius-lg); background:var(--color-bg-secondary); } .support h2 { color:var(--color-heading,var(--color-primary)); font-size:32px; font-weight:700; margin:14px 0 0; } .support .num-list { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:18px; } .support .num-list li { display:flex; gap:16px; align-items:flex-start; } .support .num-list .n { width:36px; height:36px; flex-shrink:0; border-radius:50%; background:var(--color-accent); color:#fff; font-family:var(--font-heading); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:16px; } .support .num-list h4 { font-size:17px; color:var(--color-text); margin-bottom:4px; } .support .num-list p { font-size:14.5px; color:var(--color-text-secondary); line-height:1.6; margin:0; } @media (max-width:960px) { .svc-grid { grid-template-columns:1fr 1fr; } .who-grid { grid-template-columns:1fr 1fr; } .support-grid { grid-template-columns:1fr; gap:32px; } } @media (max-width:600px) { .svc-grid { grid-template-columns:1fr; } } /* ── PAGE GALERIE ── */ .gal-tabs { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:38px; } .gal-tab { display:inline-flex; align-items:center; gap:9px; border:1.5px solid var(--color-border); background:#fff; border-radius:var(--radius-full); padding:10px 20px; font-size:14.5px; font-weight:600; color:var(--color-text-secondary); cursor:pointer; transition:.15s; font-family:var(--font-body); } .gal-tab:hover { border-color:var(--color-primary); color:var(--color-primary); } .gal-tab.on { background:var(--color-primary); border-color:var(--color-primary); color:#fff; } .gal-tab .c { font-size:12px; background:var(--color-primary-100); color:var(--color-primary); border-radius:var(--radius-full); padding:1px 9px; } .gal-tab.on .c { background:rgba(255,255,255,.25); color:#fff; } /* Grille masonry */ .gal-masonry { column-count:3; column-gap:18px; } .tile { break-inside:avoid; margin-bottom:18px; border-radius:var(--radius-lg); overflow:hidden; position:relative; cursor:zoom-in; box-shadow:var(--shadow-sm); display:block; text-decoration:none; } .tile .ph { position:relative; } .tile .ph::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,0,0,.05),rgba(0,0,0,.18)); } .tile .photo { width:100%; display:block; } .tile .overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; background:linear-gradient(transparent 40%,rgba(26,4,9,.82)); opacity:0; transition:opacity .2s; z-index:2; } .tile:hover .overlay { opacity:1; } .tile:hover { box-shadow:var(--shadow-lg); } .tile .cat-badge { align-self:flex-start; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:4px 10px; border-radius:var(--radius-full); background:var(--color-primary); color:#fff; margin-bottom:8px; } .tile .cat-badge.terrain { background:var(--color-accent); } .tile .cat-badge.event { background:var(--color-gold); } .tile .cap { color:#fff; font-family:var(--font-heading); font-weight:600; font-size:15px; line-height:1.3; } .tile .zoom { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--color-primary); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.8); transition:.2s; z-index:2; } .tile:hover .zoom { opacity:1; transform:scale(1); } .tile.hidden { display:none; } .gal-empty { text-align:center; color:var(--color-text-secondary); padding:60px 0; font-size:15px; } /* Lightbox galerie */ .gal-lb { position:fixed; inset:0; background:rgba(20,3,7,.94); z-index:120; display:none; align-items:center; justify-content:center; } .gal-lb.open { display:flex; } .gal-lb__stage { position:relative; width:min(860px,92vw); } .gal-lb__frame { width:100%; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#000; text-align:center; } .gal-lb__frame img { max-width:100%; max-height:72vh; object-fit:contain; display:block; margin:0 auto; user-select:none; pointer-events:none; } .gal-lb__cap { margin-top:18px; text-align:center; color:#fff; } .gal-lb__cap h3 { font-size:20px; font-weight:600; margin:0 0 6px; } .gal-lb__cap p { color:rgba(255,255,255,.6); font-size:13.5px; margin:0; } .gal-lb__counter { color:rgba(255,255,255,.5); font-size:12.5px; font-family:var(--font-mono); margin-top:12px; } .gal-lb__nodl { margin-top:6px; font-size:11.5px; color:rgba(255,255,255,.4); display:inline-flex; align-items:center; gap:6px; } .gal-lb__btn { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; } .gal-lb__btn:hover { background:rgba(255,255,255,.25); } .gal-lb__prev { left:-72px; } .gal-lb__next { right:-72px; } .gal-lb__close { position:fixed; top:24px; right:26px; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; } .gal-lb__close:hover { background:rgba(255,255,255,.25); } @media (max-width:1000px) { .gal-masonry { column-count:2; } .gal-lb__prev { left:8px; } .gal-lb__next { right:8px; } } @media (max-width:640px) { .gal-masonry { column-count:1; } } /* ── PAGE PROCESSUS ── */ .proc-timeline { max-width:860px; margin:0 auto; position:relative; padding-left:64px; } .proc-timeline::before { content:""; position:absolute; left:23px; top:10px; bottom:10px; width:3px; background:linear-gradient(var(--color-primary),var(--color-accent)); border-radius:2px; } .step-item { position:relative; padding-bottom:36px; } .step-item:last-child { padding-bottom:0; } .step-item .dot { position:absolute; left:-64px; top:0; width:48px; height:48px; border-radius:50%; background:#fff; border:3px solid var(--color-primary); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:800; font-size:18px; color:var(--color-primary); z-index:2; } .step-item.green .dot { border-color:var(--color-accent); color:var(--color-accent); } .step-card { background:#fff; border:1px solid #eee; border-radius:var(--radius-lg); padding:24px 26px; box-shadow:var(--shadow-sm); transition:box-shadow .15s; } .step-card:hover { box-shadow:var(--shadow-md); } .step-card .top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; flex-wrap:wrap; } .step-card h3 { color:var(--color-heading,var(--color-primary)); font-size:20px; font-weight:700; margin:0; } .step-card .dur { font-size:12.5px; font-weight:600; color:var(--color-accent); background:var(--color-accent-100); padding:4px 11px; border-radius:var(--radius-full); white-space:nowrap; } .step-card > p { color:var(--color-text-secondary); font-size:15px; line-height:1.65; margin:0 0 12px; } .step-card ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; } .step-card li { font-size:13.5px; color:var(--color-text); display:flex; gap:9px; align-items:flex-start; } .step-card li svg { color:var(--color-accent); flex-shrink:0; margin-top:3px; } .total-band { display:flex; align-items:center; justify-content:center; gap:14px; background:var(--color-primary-100); border-radius:var(--radius-lg); padding:22px; max-width:860px; margin:36px auto 0; } .total-band .ic { color:var(--color-primary); display:flex; align-items:center; justify-content:center; } .total-band > span { font-size:16px; color:var(--color-text); } .total-band b { color:var(--color-primary); font-family:var(--font-heading); } @media (max-width:700px) { .proc-timeline { padding-left:48px; } .step-item .dot { left:-48px; width:38px; height:38px; font-size:15px; } } /* ── PAGE FAQ ── */ .faq-layout { display:grid; grid-template-columns:230px 1fr; gap:44px; align-items:start; } .faq-cats { position:sticky; top:108px; display:flex; flex-direction:column; gap:4px; } .faq-cat { display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:var(--radius-md); font-size:14px; font-weight:600; color:var(--color-text-secondary); cursor:pointer; transition:.12s; background:none; border:none; text-align:left; font-family:var(--font-body); width:100%; } .faq-cat:hover { background:var(--color-primary-100); color:var(--color-primary); } .faq-cat.on { background:var(--color-primary); color:#fff; } .faq-cat svg { flex-shrink:0; } .faq-group { margin-bottom:36px; scroll-margin-top:108px; } .faq-group > h2 { color:var(--color-heading,var(--color-primary)); font-size:23px; font-weight:700; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--color-primary-100); } details.faq-item { border:1px solid #eee; border-radius:var(--radius-md); margin-bottom:12px; overflow:hidden; transition:border-color .15s; background:#fff; } details.faq-item[open] { border-color:var(--color-primary); box-shadow:var(--shadow-sm); } details.faq-item summary { padding:18px 22px; font-family:var(--font-heading); font-weight:600; font-size:16.5px; color:var(--color-text); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none; } details.faq-item summary::-webkit-details-marker { display:none; } details.faq-item summary .plus { width:28px; height:28px; flex-shrink:0; border-radius:50%; background:var(--color-primary-100); color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:19px; transition:.2s; line-height:1; } details.faq-item[open] summary .plus { transform:rotate(45deg); background:var(--color-primary); color:#fff; } details.faq-item .ans { padding:0 22px 20px; color:var(--color-text-secondary); font-size:15px; line-height:1.7; } details.faq-item .ans a { color:var(--color-primary); font-weight:500; } .faq-help { background:var(--color-primary); border-radius:var(--radius-lg); padding:34px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:20px; flex-wrap:wrap; } .faq-help h3 { font-size:21px; margin:0 0 6px; color:#fff; } .faq-help > div > p { color:rgba(255,255,255,.82); font-size:14.5px; margin:0; } .btn-gold { background:var(--color-gold); color:#fff; font-weight:600; font-size:15px; padding:14px 26px; border-radius:var(--radius-md); white-space:nowrap; text-decoration:none; display:inline-block; } .btn-gold:hover { background:#b3760a; color:#fff; } @media (max-width:860px) { .faq-layout { grid-template-columns:1fr; } .faq-cats { position:static; flex-direction:row; flex-wrap:wrap; } } /* ── PAGE RÉFÉRENCES ── */ /* Stat band */ .ref-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-bottom:18px; } .ref-stat { text-align:center; } .ref-stat .n { font-family:var(--font-heading); font-weight:800; font-size:44px; color:var(--color-primary); line-height:1; display:block; } .ref-stat .l { font-size:14px; color:var(--color-text-secondary); margin-top:8px; display:block; } /* Logo grid */ .logos { background:var(--color-bg-secondary); } .logo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } .logo { height:96px; background:#fff; border:1px solid #eee; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; text-align:center; padding:0 16px; transition:.15s; } .logo:hover { border-color:var(--color-primary); transform:translateY(-3px); box-shadow:var(--shadow-md); } .logo img { max-height:64px; max-width:100%; object-fit:contain; display:block; } .logo span { font-family:var(--font-heading); font-weight:700; font-size:14px; color:var(--color-text-secondary); line-height:1.2; } .logo:hover span { color:var(--color-primary); } /* Sector grid */ .sector-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .sector { border:1px solid #eee; border-radius:var(--radius-lg); padding:26px; transition:.15s; background:#fff; } .sector:hover { box-shadow:var(--shadow-md); border-color:transparent; } .sector .ic { width:52px; height:52px; border-radius:var(--radius-md); background:var(--color-accent-100); color:var(--color-accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .sector h4 { font-size:18px; color:var(--color-heading,var(--color-primary)); margin-bottom:4px; } .sector .cnt { font-family:var(--font-mono); font-size:13px; color:var(--color-text-muted); margin:4px 0 10px; } .sector > p { font-size:14px; color:var(--color-text-secondary); line-height:1.6; margin:0; } /* Case studies */ .cases { background:var(--color-bg-secondary); } .case { display:grid; grid-template-columns:1fr 1.2fr; gap:0; background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:26px; } .case:last-child { margin-bottom:0; } .case:nth-child(even) .case-media { order:2; } .case-media { overflow:hidden; min-height:300px; } .case-media img { width:100%; height:100%; object-fit:cover; display:block; } .case-media-ph { width:100%; height:100%; min-height:300px; background:linear-gradient(140deg,var(--color-primary),var(--color-primary-700)); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3); } .case-body { padding:38px; display:flex; flex-direction:column; justify-content:center; } .case .badges { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .type-badge { font-size:12px; font-weight:600; padding:4px 12px; border-radius:var(--radius-full); background:var(--color-primary-100); color:var(--color-primary); } .type-badge.reu { background:var(--badge-reu-bg); color:var(--badge-reu-text); } .type-badge.bci { background:var(--badge-bci-bg); color:var(--badge-bci-text); } .type-badge.pays { background:var(--color-primary-100); color:var(--color-primary); } .case h3 { color:var(--color-heading,var(--color-primary)); font-size:24px; font-weight:700; margin-bottom:6px; } .case .role { font-size:13.5px; color:var(--color-text-muted); margin-bottom:16px; } .case .quote { font-size:16px; color:var(--color-text); line-height:1.7; font-style:italic; border-left:3px solid var(--color-gold); padding-left:18px; margin:0 0 18px; } .case .author { display:flex; align-items:center; gap:12px; } .case .author .av { width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:15px; } .case .author .nm { font-weight:600; font-size:14px; color:var(--color-text); } .case .author .pos { font-size:12.5px; color:var(--color-text-muted); } /* CTA centré simple (fond blanc, spécifique à la page Références) */ .cta-refs { text-align:center; padding:80px 0; } .cta-refs h2 { color:var(--color-heading,var(--color-primary)); font-size:34px; font-weight:700; font-family:var(--font-heading); margin-bottom:14px; } .cta-refs > .wrap > p { color:var(--color-text-secondary); font-size:17px; max-width:520px; margin:0 auto 28px; line-height:1.6; } @media (max-width:960px) { .ref-stats { grid-template-columns:1fr 1fr; gap:34px 20px; } .logo-grid { grid-template-columns:repeat(3,1fr); } .sector-grid { grid-template-columns:1fr; } .case, .case:nth-child(even) { grid-template-columns:1fr; } .case:nth-child(even) .case-media { order:0; } } @media (max-width:600px) { .logo-grid { grid-template-columns:repeat(2,1fr); } } /* ── PAGE ACTUALITES ── */ /* Featured article */ .feat { display:grid; grid-template-columns:1.15fr 1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); margin-bottom:44px; background:#fff; } .feat-img-wrap { display:block; overflow:hidden; min-height:340px; } .feat-img-wrap .feat-img { width:100%; height:100%; object-fit:cover; display:block; } .feat-img-ph { display:flex; align-items:center; justify-content:center; min-height:340px; background:linear-gradient(140deg,var(--color-primary),var(--color-primary-700)); color:rgba(255,255,255,.55); } .feat .body { padding:40px; display:flex; flex-direction:column; justify-content:center; } .feat .tagrow { display:flex; gap:10px; align-items:center; margin-bottom:16px; } .feat-flag { font-size:12px; font-weight:600; color:var(--color-gold); letter-spacing:.5px; text-transform:uppercase; } .feat h2 { color:var(--color-heading,var(--color-primary)); font-size:30px; font-weight:700; line-height:1.2; margin-bottom:14px; } .feat h2 a { color:inherit; text-decoration:none; } .feat .body > p { color:var(--color-text-secondary); font-size:16px; line-height:1.65; margin-bottom:20px; } .feat .meta { font-size:13px; color:var(--color-text-muted); margin-bottom:22px; display:flex; gap:14px; } .read-btn { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; } /* Cat badges (articles) */ .cat-badge { font-size:12px; font-weight:600; padding:5px 13px; border-radius:var(--radius-full); background:var(--color-primary-100); color:var(--color-primary); display:inline-block; } .cat-badge.bio, .cat-badge.agriculture-bio { background:var(--color-accent-100); color:var(--color-accent); } .cat-badge.coton, .cat-badge.filiere-coton { background:#E3F2FD; color:var(--color-info); } .cat-badge.event, .cat-badge.evenements { background:var(--color-gold-100); color:var(--color-gold); } /* Filter bar */ .news-filter { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:30px; } .nf { border:1.5px solid var(--color-border); background:#fff; border-radius:var(--radius-full); padding:8px 17px; font-size:13.5px; font-weight:600; color:var(--color-text-secondary); cursor:pointer; transition:.15s; font-family:var(--font-body); } .nf:hover { border-color:var(--color-primary); color:var(--color-primary); } .nf.on { background:var(--color-primary); border-color:var(--color-primary); color:#fff; } /* News grid */ .news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .article { background:#fff; border:1px solid #eee; border-radius:var(--radius-lg); overflow:hidden; transition:.18s; display:flex; flex-direction:column; } .article:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); } .article .thumb { height:180px; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,var(--color-primary),var(--color-primary-700)); color:rgba(255,255,255,.55); } .article .thumb.bio, .article .thumb.agriculture-bio { background:linear-gradient(140deg,#2f6d1e,#4CAF00); } .article .thumb.coton, .article .thumb.filiere-coton { background:linear-gradient(140deg,#1565C0,#42a5f5); } .article .thumb.event, .article .thumb.evenements { background:linear-gradient(140deg,#b3760a,#e0a829); } .article .a-thumb-wrap { display:block; overflow:hidden; height:180px; } .article .a-thumb-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; } .article:hover .a-thumb-img { transform:scale(1.04); } .article .a-body { padding:22px; flex:1; display:flex; flex-direction:column; } .article h3 { font-size:18px; color:var(--color-text); margin:12px 0 0; line-height:1.32; font-weight:600; } .article h3 a { color:inherit; text-decoration:none; } .article h3 a:hover { color:var(--color-primary); } .article .a-body > p { font-size:13.5px; color:var(--color-text-secondary); line-height:1.55; margin:10px 0 0; } .article .a-meta { font-size:12.5px; color:var(--color-text-muted); margin-top:14px; display:flex; gap:10px; } .article .more { margin-top:auto; padding-top:16px; color:var(--color-primary); font-weight:600; font-size:14px; text-decoration:none; display:inline-flex; gap:6px; align-items:center; transition:gap .15s; } .article:hover .more { gap:10px; } /* ── NEWS CAROUSEL (homepage) ── */ .news-carousel { position:relative; padding:0 56px; } .news-carousel__viewport { overflow:hidden; container-type:inline-size; } .news-carousel__track { display:flex; gap:24px; transition:transform .38s cubic-bezier(.4,0,.2,1); will-change:transform; } .news-carousel__track .article { flex:0 0 calc((100cqi - 48px) / 3); min-width:0; } .news-carousel__btn { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:2px solid var(--color-primary); background:#fff; color:var(--color-primary); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:background .15s,color .15s,opacity .15s; } .news-carousel__btn:hover:not(:disabled) { background:var(--color-primary); color:#fff; } .news-carousel__btn:disabled { opacity:.35; cursor:default; } .news-carousel__btn--prev { left:0; } .news-carousel__btn--next { right:0; } @container (max-width:700px) { .news-carousel__track .article { flex-basis:calc((100cqi - 24px) / 2); } } @container (max-width:420px) { .news-carousel__track .article { flex-basis:100cqi; } } @media (max-width:600px) { .news-carousel { padding:0 44px; } } /* Newsletter — conteneur et carte sont définis une seule fois, dans le bloc * « NEWSLETTER (carte article) » plus haut : .news-letter est le CONTENEUR, * .nl-card la carte. * * Une seconde définition de .news-letter vivait ici et la transformait en * carte. De même spécificité mais plus tardive, elle l'emportait : sur un * article — où le gabarit imbrique .nl-card dans .news-letter — le visiteur * voyait une carte bordeaux DANS une carte bordeaux, avec deux fois le * rembourrage et deux pastilles décoratives. La page Actualités emploie * désormais la même structure, une seule règle suffit donc. */ @media (max-width:960px) { .feat { grid-template-columns:1fr; } .feat-img-wrap { min-height:220px; } .news-grid { grid-template-columns:1fr 1fr; } /* La carte newsletter n'est PAS repliée ici : elle bascule en une colonne à 680 px, comme le prévoit le gabarit d'article (cf. plus haut). Ces règles doublonnaient ce point de rupture et l'avançaient à 960 px pour les articles, sans que rien ne le justifie. */ } @media (max-width:600px) { .news-grid { grid-template-columns:1fr; } } /* ── PAGE CONTACT ── */ .contact-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:start; } /* Form card */ .form-card { background:#fff; border:1px solid #eee; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:38px; } .form-card h2 { color:var(--color-heading,var(--color-primary)); font-size:24px; margin-bottom:6px; } .form-card .sub { color:var(--color-text-secondary); font-size:14.5px; margin-bottom:26px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field { margin-bottom:18px; } .field label { display:block; font-size:13px; font-weight:600; color:var(--color-text); margin-bottom:7px; } .field label .lbl-req { color:var(--color-error); } .field input, .field select, .field textarea { width:100%; border:2px solid var(--color-border); border-radius:var(--radius-md); padding:12px 14px; font-size:14.5px; font-family:var(--font-body); color:var(--color-text); outline:none; transition:.15s; background:#fff; } .field textarea { resize:vertical; min-height:120px; } .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--color-primary); box-shadow:0 0 0 4px rgba(109,7,26,.12); } .field .with-icon { position:relative; } .field .with-icon svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--color-text-muted); pointer-events:none; } .field .with-icon input { padding-left:40px; } /* APDP consent */ .consent { display:flex; gap:12px; align-items:flex-start; background:var(--color-accent-100); border:1px solid #cfe6b8; border-radius:var(--radius-md); padding:15px 16px; margin:6px 0 22px; } .consent input[type="checkbox"] { width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color:var(--color-accent); cursor:pointer; } .consent label { font-size:12.5px; color:var(--color-text-secondary); line-height:1.6; cursor:pointer; } .consent label b { color:var(--color-text); } .consent label a { color:var(--color-accent); text-decoration:underline; } /* Submit button */ .btn-submit { width:100%; height:52px; background:var(--color-primary); color:#fff; border:none; border-radius:var(--radius-md); font-weight:600; font-size:15.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:.15s; font-family:var(--font-body); } .btn-submit:hover { background:var(--color-primary-700); } /* Form success */ .form-success { display:none; background:var(--color-accent-100); border:1px solid var(--color-accent); border-radius:var(--radius-md); padding:16px 18px; color:var(--color-success); font-size:14.5px; align-items:center; gap:12px; margin-bottom:20px; } .form-success.show { display:flex; } .form-success.form-notice--error { background:#fdecec; border-color:var(--color-error); color:var(--color-error); } /* Info card */ .info-card { background:var(--color-primary); color:#fff; border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-md); } .info-card h3 { font-size:20px; margin-bottom:22px; color:#fff; } .info-item { display:flex; gap:15px; align-items:flex-start; margin-bottom:22px; } .info-item .ic { width:44px; height:44px; flex-shrink:0; border-radius:var(--radius-md); background:rgba(255,255,255,.12); color:#9BE26B; display:flex; align-items:center; justify-content:center; } .info-item .lab { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.55); } .info-item .val { font-size:15px; color:#fff; margin-top:3px; line-height:1.5; } .info-item .val a { color:#fff; } .hours { border-top:1px solid rgba(255,255,255,.15); padding-top:20px; margin-top:4px; } .hours h4 { font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.7); margin-bottom:12px; } .hours .row { display:flex; justify-content:space-between; font-size:14px; padding:5px 0; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.07); } .hours .row:last-child { border-bottom:none; } .hours .row span:last-child { font-family:var(--font-mono); } /* CSS map placeholder */ .map { margin-top:24px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); height:240px; position:relative; background:#E8EDE9; } .map .grid-bg { position:absolute; inset:0; background-image:linear-gradient(#d4ddd6 1px,transparent 1px),linear-gradient(90deg,#d4ddd6 1px,transparent 1px); background-size:38px 38px; } .map .road { position:absolute; background:#fff; } .map .pin { position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); color:var(--color-primary); } .map .label { position:absolute; bottom:14px; left:14px; background:#fff; border-radius:var(--radius-md); padding:9px 14px; font-size:13px; font-weight:600; color:var(--color-primary); box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:8px; } @media (max-width:960px) { .contact-grid { grid-template-columns:1fr; gap:28px; } .form-row { grid-template-columns:1fr; } } /* ── GUTENBERG BLOCK STYLES ── */ .wp-block-button .wp-block-button__link { background:var(--color-primary); border-radius:var(--radius-md); } .wp-block-button.is-style-cecacert-outline .wp-block-button__link { background:transparent; border:2px solid var(--color-primary); color:var(--color-primary); } .wp-block-button.is-style-cecacert-gold .wp-block-button__link { background:var(--color-gold); } .wp-block-separator.is-style-cecacert-bordeaux { border-color:var(--color-primary); border-top-width:3px; width:80px; } /* ── Document non encore disponible ─────────────────────────── * Une carte de téléchargement sans fichier associé restait cliquable * en apparence, neutralisée par un simple onclick="return false" : le * visiteur cliquait sans rien obtenir ni comprendre pourquoi. * * Le gabarit rend désormais un
au lieu d'un quand aucun * fichier n'est attaché : la carte est inerte par construction, même * si cette feuille de style n'est pas chargée. Ne reste ici que * l'atténuation visuelle. * ─────────────────────────────────────────────────────────── */ .doc--unavailable { opacity: .55; } .doc--unavailable .d-status { font-style: italic; } /* ── Menus : niveaux profonds ───────────────────────────────── * Les walkers n'affichaient que deux niveaux : un item de 3ᵉ niveau * ajouté depuis l'éditeur de menus WordPress n'était rendu nulle part * — enregistré côté admin, invisible sur le site, sans avertissement. * Les niveaux profonds sont désormais aplatis dans le même menu, avec * un retrait qui conserve la lecture de la hiérarchie. * ─────────────────────────────────────────────────────────── */ .cc-sub a.cc-sub-deep { padding-left: 28px; } .cc-msub-deep { padding-left: 32px; } /* Note d'un sous-item mobile (remplace un style inline non surchargeable). */ .cc-msub-note { opacity: .65; } /* ── Auteur d'article : photo Gravatar et adresse e-mail ────── * Les éléments affichés se règlent dans Options du thème → Articles. * `.av--photo` est une vraie image (Gravatar) : elle réutilise le * gabarit circulaire des initiales, en recadrant proprement. * ─────────────────────────────────────────────────────────── */ .art-author .av--photo, .author-box .av--photo { object-fit: cover; background: var( --color-primary ); } /* Lien e-mail : discret dans le bandeau, aligné sur la fonction. */ .art-author .ml { display: block; font-size: 13px; color: var( --color-text-secondary ); text-decoration: none; } .art-author .ml:hover { text-decoration: underline; } .author-mail { margin: 6px 0 0; font-size: 14px; } .author-mail a { color: var( --color-primary ); } /* ── Encart « À retenir » (style du bloc Citation) ──────────── * Reprend l'apparence de l'encart `.callout` du gabarit d'article, * mais produisible depuis l'éditeur : l'auteur insère une citation * et choisit le style « Encart ». L'icône est posée en CSS. * ─────────────────────────────────────────────────────────── */ .prose .is-style-cecacert-callout, .prose blockquote.is-style-cecacert-callout { background: var( --color-accent-100 ); border: 1px solid #cfe6b8; border-left: 1px solid #cfe6b8; border-radius: var( --radius-md ); padding: 20px 22px 20px 56px; margin: 28px 0; position: relative; font-family: var( --font-body ); font-weight: 400; font-size: 15px; line-height: 1.65; color: var( --color-text-secondary ); } /* Icône « information », en CSS pour ne rien exiger de l'auteur. */ .prose .is-style-cecacert-callout::before { content: ""; position: absolute; left: 22px; top: 22px; width: 22px; height: 22px; background-color: var( --color-accent ); -webkit-mask: var( --cc-icon-info ) center / contain no-repeat; mask: var( --cc-icon-info ) center / contain no-repeat; } .prose .is-style-cecacert-callout p { margin: 0 0 8px; font-size: 15px; } .prose .is-style-cecacert-callout p:last-child { margin-bottom: 0; } .prose .is-style-cecacert-callout strong { color: var( --color-text ); } .prose .is-style-cecacert-callout cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; color: var( --color-text-muted ); }