/*
Theme Name: Twenty Twenty-Five CoLean
Theme URI: https://www.colean.fr
Author: CoLean
Author URI: https://www.colean.fr
Description: Theme enfant de Twenty Twenty-Five pour CoLean. Il abrite les gabarits, les styles et les fonctions propres au site. Les mises a jour du theme parent ne l effacent jamais.
Template: twentytwentyfive
Version: 1.0.3
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-colean
*/

/* ==========================================================================
   Styles propres a CoLean.
   Le theme parent est charge en premier, ce fichier passe par-dessus.
   Charte : Poppins, #107494 bleu petrole, #F58800 orange, #4DB350 vert.
   ========================================================================== */

:root {
	--colean-petrole: #107494;
	--colean-orange: #F58800;
	--colean-vert: #4DB350;
	--colean-fonce: #0B3A4A;
	--colean-clair: #F4F8FA;
	--colean-ciel: #B0D9EA;
	--colean-texte: #223038;
	--colean-gris: #6b7a82;
}


/* ==========================================================================
   En-tete et pied de page CoLean.
   Reprend a l identique ceux des pages statiques du site, pour que les pages
   generees par WordPress, fiches produits, panier, espace client, ne sortent
   plus du site. Extrait de /boutique/ le 30 septembre 2026, par balayage des
   classes reellement utilisees par les deux gabarits.
   ========================================================================== */


:root{--vert:#4DB350;--rouge:#D32F2F;--orange:#F58800;--gris:#C8CACC;--teal:#107494;--vert-light:#B8F4B8;--rose-light:#F29E9E;--beige:#EFCEAB;--bleu-light:#B0D9EA;--blanc:#FFFFFF;--off-white:#F8F8F6;--gris-clair:#F2F2F0;--gris-bord:#E5E5E2;--texte:#1A1A1A;--texte-mid:#4A4A4A;--texte-light:#7A7A7A;--teal-dark:#0B5570;--teal-deeper:#073A4E;--encre:#0B3A4A;--font:'Poppins',sans-serif;--r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:20px;--r-xl:32px;--shadow-sm:0 2px 8px rgba(0,0,0,0.06);--shadow-md:0 6px 24px rgba(0,0,0,0.09);--shadow-lg:0 16px 48px rgba(0,0,0,0.12);--shadow-xl:0 28px 72px rgba(0,0,0,0.16);--ease:cubic-bezier(0.25,0.46,0.45,0.94)}

.container{max-width:1200px;margin:0 auto;padding:0 40px}


/* ── NAV */
.nav-wrap{position:sticky;top:0;z-index:200;background:var(--blanc);border-bottom:2px solid var(--gris-bord);transition:box-shadow .3s}

.nav-wrap.scrolled{box-shadow:var(--shadow-lg);border-bottom-color:transparent}

.nav-inner{display:flex;align-items:center;gap:8px;height:72px}

.nav-logo img{height:42px;width:auto}

.nav-links{display:flex;align-items:center;gap:2px;flex:1;margin-left:16px}

.nav-links a{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--texte-mid);padding:8px 12px;border-radius:var(--r-sm);transition:all .2s;white-space:nowrap}

.nav-links a:hover{color:var(--teal);background:rgba(16,116,148,0.06)}

.nav-links a.active{color:var(--teal);font-weight:600}

.nav-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

.nav-dot.vert{background:var(--vert)}

.nav-dot.orange{background:var(--orange)}

.nav-dot.teal{background:var(--teal)}

.nav-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:var(--blanc)!important;font-weight:700!important;font-size:13px!important;padding:10px 20px!important;border-radius:var(--r-sm)!important;transition:all .2s!important;box-shadow:0 4px 16px rgba(245,136,0,.3);white-space:nowrap}

.nav-cta:hover{background:#e07c00!important;transform:translateY(-1px)}

.nav-burger{display:none;margin-left:auto;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}

.nav-burger svg{display:block;color:var(--teal)}


/* ── MOBILE MENU */
.mobile-menu{display:none;position:fixed;inset:0;z-index:300;background:var(--blanc);padding:24px;flex-direction:column;gap:6px;overflow-y:auto}

.mobile-menu.open{display:flex}

.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}

.mobile-close{background:var(--gris-clair);border:none;cursor:pointer;width:40px;height:40px;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center}

.mobile-menu a{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--texte);padding:14px 16px;border-radius:var(--r-md);border-bottom:1px solid var(--gris-bord)}

.mobile-menu a:hover{background:var(--gris-clair);color:var(--teal)}

.mobile-menu .nav-dot{width:9px;height:9px}

.mobile-menu-cta{margin-top:16px}

.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:var(--blanc);font-weight:700;font-size:14px;padding:14px 28px;border-radius:var(--r-sm);transition:all .25s var(--ease);box-shadow:0 6px 20px rgba(245,136,0,.35)}

.btn-primary:hover{background:#e07c00;transform:translateY(-2px);box-shadow:0 10px 30px rgba(245,136,0,.45)}


/* ── FOOTER */
footer{background:var(--teal-deeper);padding:64px 0 28px}

.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.2fr;gap:44px;margin-bottom:48px}

.footer-logo-img{height:36px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1)}

.footer-desc{font-size:13px;font-weight:300;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:16px}

.footer-contact{font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.9;margin-bottom:18px}

.footer-contact a{color:rgba(255,255,255,.6)}

.footer-contact a:hover{color:#fff}

.footer-social{display:flex;gap:10px;flex-wrap:wrap}

.footer-soc{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.45);padding:7px 12px;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);transition:all .2s}

.footer-soc:hover{color:var(--blanc);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}

.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:16px}

.footer-col ul{display:flex;flex-direction:column;gap:9px}

.footer-col ul li a{font-size:13.5px;font-weight:300;color:rgba(255,255,255,.5);transition:color .2s}

.footer-col ul li a:hover{color:var(--blanc)}

.footer-univers{display:flex;flex-direction:column;gap:10px}

.footer-uni{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,.04);border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.07);transition:all .2s}

.footer-uni:hover{background:rgba(255,255,255,.08)}

.footer-uni img{height:20px;width:auto;filter:brightness(0) invert(1);opacity:.75}

.footer-uni span{font-size:12.5px;color:rgba(255,255,255,.55)}

.footer-sign{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.4)}

.footer-sign strong{font-weight:600;color:rgba(255,255,255,.55)}

.footer-sign a{color:rgba(255,255,255,.55)}

.footer-sign a:hover{color:#fff}

.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}

.footer-bottom p{font-size:12.5px;color:rgba(255,255,255,.22)}

.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap}

.footer-bottom nav a{font-size:12.5px;color:rgba(255,255,255,.28);transition:color .2s}

.footer-bottom nav a:hover{color:rgba(255,255,255,.55)}
@media(max-width:1180px){

 .container{padding:0 28px}

 .nav-links a{font-size:12.5px;padding:8px 9px}

 .nav-logo img{height:36px}
}
@media(max-width:1024px){

 .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){

 .container{padding:0 20px}
.nav-links,.nav-cta{display:none}
.nav-burger{display:flex}

 .footer-grid{grid-template-columns:1fr;gap:28px}

 .footer-bottom,.footer-sign{flex-direction:column;text-align:center}
}
@media(max-width:400px){

 .container{padding:0 16px}

 .btn-primary,.btn-secondary,.btn-ghost{width:100%;justify-content:center}
}

.nav-links a.active{color:var(--teal)}


/* Corrections propres aux pages WordPress ------------------------------- */

body {
	font-family: var(--font, 'Poppins', sans-serif);
}

/* Le contenu WordPress respire entre l en-tete et le pied */
.wp-site-blocks > main {
	padding-top: 40px;
	padding-bottom: 56px;
}

/* Securite : le logo du pied ne doit jamais s etaler */
.wp-site-blocks > footer img.footer-logo-img {
	height: 36px !important;
	width: auto !important;
	max-width: 160px !important;
}

/* Securite : la navigation reste horizontale au-dessus de 1024 px */
@media (min-width: 1025px) {

	.wp-site-blocks > header .nav-links {
		display: flex !important;
	}

	.wp-site-blocks > header .nav-burger {
		display: none !important;
	}

	.wp-site-blocks > header .nav-cta {
		display: inline-flex !important;
	}
}


/* Socle de remise a zero, limite a l en-tete et au pied.
   Le site statique s appuie sur un reset global que WordPress n a pas.
   L appliquer largement casserait WooCommerce, donc il reste confine ici. */

.wp-site-blocks > header *,
.wp-site-blocks > footer * {
	box-sizing: border-box;
}

.wp-site-blocks > header ul,
.wp-site-blocks > footer ul,
.wp-site-blocks > header ol,
.wp-site-blocks > footer ol {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wp-site-blocks > header li,
.wp-site-blocks > footer li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wp-site-blocks > header li::marker,
.wp-site-blocks > footer li::marker {
	content: none !important;
}

.wp-site-blocks > header a,
.wp-site-blocks > footer a {
	text-decoration: none !important;
}

.wp-site-blocks > header a:hover,
.wp-site-blocks > footer a:hover {
	text-decoration: none !important;
}

.wp-site-blocks > header p,
.wp-site-blocks > footer p,
.wp-site-blocks > header h4,
.wp-site-blocks > footer h4 {
	margin: 0;
}

.wp-site-blocks > header img,
.wp-site-blocks > footer img {
	max-width: 100%;
	height: auto;
}

.wp-site-blocks > header .nav-logo img {
	height: 42px;
	width: auto;
}

.wp-site-blocks > footer .footer-uni img {
	height: 26px;
	width: auto;
}