/* * SILLAGE — RISK. Copie d'exploration, pas le thème de production. * * Parti pris : abandonner le vocabulaire "quiet luxury" générique (bronze/ * or + serif + Arial) au profit de choix identifiables à Sillage seul : * - --bronze/--bronze-deep gardent leur NOM (pour ne rien casser ailleurs * dans le CSS) mais changent de VALEUR : un vert-de-gris/patine, la * couleur réelle que prend un objet ancien en métal qui s'oxyde — un * accent qui vient du sujet (les objets), pas du genre "luxe discret". * - --serif devient Fraunces (Google Fonts), une serif à axe optique, plus * de caractère que Georgia — jamais un fallback système. * - --mono, nouveau : une monospace pour tout ce qui est notice/étiquette * (surtitres, prix, badges) — le geste d'une fiche de catalogue ou * d'une étiquette de musée, jamais vu dans une boutique "premium". */ :root{ --ivory:#efe7da;--paper:#f7f1e7;--paper-2:#ece1d0;--paper-deep:#e1d3c0;--ink:#18130f;--muted:#776b5f; --line:#cbbba7;--bronze:#5b7a68;--bronze-deep:#3d5348;--dark:#17110d;--dark-2:#241a14; --max:1540px;--pad:clamp(20px,4vw,66px); --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:Arial,Helvetica,sans-serif; --mono:'Space Mono','IBM Plex Mono',ui-monospace,'Courier New',monospace } *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);line-height:1.55;overflow-x:hidden} /* Bug de "décalage" mobile : une image dans une colonne de grille "1fr" fait remonter sa propre taille intrinsèque comme minimum implicite de la piste (min-width:auto par défaut) — la piste peut alors dépasser la largeur de l'écran même si elle est censée occuper "tout l'espace disponible" (1fr), ce qui pousse toute la page en scroll horizontal. Reset générique sur toutes les grilles de section qui contiennent une image et qui se réduisent à 1 colonne sur mobile. */ .trust-grid>*,.intro>*,.collections-head>*,.house-grid>*,.featured-wrap>*,.craft-grid>*,.craft-media>*,.collections-grid>*,.editorial-grid>*,.footer-grid>*,.empreintes-grid>*,.empreintes-list>*,.adoptes-grid>*,.apropos-grid>*{min-width:0}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")} img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}.wrap{max-width:var(--max);margin:auto;padding-inline:var(--pad)} /* Focus clavier visible, partout — remplace le contour navigateur par défaut uniquement pour la navigation clavier (jamais au clic souris/tactile). */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--bronze);outline-offset:3px} /* Texte accessible uniquement aux lecteurs d'écran — définition canonique partagée (main.css est chargé en dépendance de toutes les autres feuilles du thème), pour ne plus la redéclarer à l'identique page par page. */ .screen-reader-text{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Coupe toute animation/transition pour qui a désactivé les animations — règle unique et globale plutôt qu'une déclinaison par composant. */ @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}} /* SILLAGE — RISK : le surtitre passe en monospace — le geste d'une étiquette de catalogue/musée plutôt qu'un simple petit texte capitalisé. */ .eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .ornament{display:flex;align-items:center;gap:14px;margin:18px 0 24px}.ornament:before,.ornament:after{content:"";width:58px;height:1px;background:currentColor;opacity:.45}.ornament i{width:7px;height:7px;background:currentColor;transform:rotate(45deg);display:block} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1;margin:0}h1{font-size:clamp(3.6rem,7.9vw,8.8rem);letter-spacing:-.05em}h2{font-size:clamp(2.5rem,5.2vw,5.6rem);letter-spacing:-.04em}h3{font-size:clamp(1.5rem,2.4vw,2.45rem)}p{margin:0;color:var(--muted)} /* Le minimum desktop du h1 (3.6rem=57.6px) tient sur deux lignes même à 390px de large ; sur un mobile plus court (ex. 375x667), le hero (align-items:flex-end, contenu ancré en bas) voit alors son bloc de texte pousser le surtitre quasiment sous le header — ~10px d'écart mesuré en direct au lieu d'une vraie respiration. Seul ".hero h1" (page d'accueil) dépend de ce h1 nu sans le surcharger déjà — toutes les autres pages (page-header, #sillage-auth, #empreinte-single, page.php) ont leur propre règle plus spécifique et ne sont pas concernées par ce correctif. */ @media(max-width:640px){ h1{font-size:clamp(2.3rem,10vw,3.1rem)} /* Le h1 plus court ne suffisait pas à lui seul (voir mesure en direct : l'écart eyebrow/header restait à 10px) — c'est le paragraphe du hero (jusqu'à 7 lignes à 18px sur un écran de 375px) qui domine la hauteur du bloc ancré en bas. Resserré ici uniquement pour ".hero p". */ .hero p{font-size:.95rem;line-height:1.5;margin:14px 0 22px} .hero-content .ornament{margin:12px 0 16px} } .btn{display:inline-flex;align-items:center;gap:14px;border:1px solid currentColor;padding:15px 22px;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;transition:.25s}.btn:hover{background:var(--ink);color:var(--ivory);transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn span{display:inline-block;transition:transform .2s ease}.btn:hover span{transform:translateX(4px)} /* SILLAGE — RISK : discipline de la flèche — elle n'appartient plus qu'à l'action PRINCIPALE d'un écran. ".btn-quiet" est le lien éditorial/ secondaire : pas de boîte, pas de flèche, un simple soulignement qui s'efface légèrement au survol plutôt que de rivaliser visuellement avec le vrai bouton de la page. */ .btn-quiet{display:inline-block;border:0;background:none;padding:0 0 4px;border-bottom:1px solid currentColor;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;transition:opacity .2s ease} .btn-quiet:hover{opacity:.6} /* Regroupe un CTA principal + un lien secondaire côte à côte (hero, blocs éditoriaux commerciaux) — un seul point d'ajout plutôt qu'un style par section qui les utilise. */ .cta-group{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:8px} /* Bouton "remonter en haut" — même anneau que les icônes du header, affiché uniquement une fois qu'on a scrollé (voir main.js), sur toutes les pages. */ .back-to-top{position:fixed;right:26px;bottom:26px;z-index:40;width:48px;height:48px;border-radius:50%;background:var(--dark);color:#fff;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,visibility .25s,background-color .2s ease} .back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)} .back-to-top:hover,.back-to-top:focus-visible{background:var(--bronze)} .back-to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} @media(max-width:640px){.back-to-top{right:16px;bottom:16px;width:44px;height:44px}.back-to-top svg{width:18px;height:18px}} @media(prefers-reduced-motion:reduce){.back-to-top{transition:opacity .01ms,visibility .01ms}} header{position:absolute;z-index:30;top:0;left:0;right:0;color:#fff}.nav{height:88px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.2)}.nav ul{list-style:none;display:flex;gap:28px;padding:0;margin:0;font-size:.69rem;letter-spacing:.14em;text-transform:uppercase}.nav-right{justify-content:flex-end} .nav ul a{position:relative;display:inline-block;padding-bottom:4px}.nav ul a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s ease}.nav ul a:hover:after,.nav ul a:focus-visible:after{right:0} .hero{min-height:96vh;position:relative;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0f0c0a}.hero-media{position:absolute;inset:0}.hero-media img{filter:brightness(.7) saturate(.9);object-position:center 45%;transform:scale(1.015)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.32) 48%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.22))}.hero-content{position:relative;z-index:2;max-width:820px;padding-bottom:9vh}.hero p{color:rgba(255,255,255,.8);max-width:590px;font-family:var(--serif);font-size:1.13rem;margin:22px 0 34px}.hero-side{position:absolute;right:var(--pad);bottom:36px;z-index:3;color:rgba(255,255,255,.72);font-family:var(--serif);font-style:italic}.hero-stamp{position:absolute;right:7vw;top:24%;z-index:3;width:150px;height:150px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;text-align:center;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;transform:rotate(9deg);color:rgba(255,255,255,.76)} .trust{background:var(--paper);border-bottom:1px solid var(--line)} .trust-grid{display:grid;grid-template-columns:repeat(5,1fr);max-width:var(--max);margin:auto} .trust-item{min-height:190px;padding:34px 22px 30px;text-align:center;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center} .trust-item:last-child{border-right:0} .trust-icon{width:48px;height:48px;margin:0 auto 18px;color:var(--bronze-deep)} .trust-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} .trust-item strong{font-family:var(--serif);font-size:1.05rem;font-weight:400} .trust-item span{font-size:.78rem;color:var(--muted);margin-top:7px;max-width:220px} section{padding:clamp(82px,9.5vw,155px) 0}.intro{display:grid;grid-template-columns:.62fr 1.38fr;gap:10vw;align-items:start}.intro p{font-family:var(--serif);font-size:clamp(1.9rem,3.5vw,3.7rem);line-height:1.12;color:var(--ink)} .collections-head{display:grid;grid-template-columns:.82fr 1.18fr;gap:6vw;align-items:end;margin-bottom:48px}.collections-head p{max-width:650px}.collections-grid{display:grid;grid-template-columns:1.1fr .95fr .95fr;gap:18px}.card{position:relative;overflow:hidden;min-height:600px;background:#d6cec2}.card img{transition:transform .8s ease,filter .8s ease}.card:hover img{transform:scale(1.02);filter:brightness(.95)}.card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.74))}.card-copy{position:absolute;left:28px;right:28px;bottom:26px;z-index:2;color:#fff}.card-copy p{color:rgba(255,255,255,.76);font-size:.88rem;margin-top:9px;max-width:300px} .house{background:var(--paper);padding:0}.house-grid{display:grid;grid-template-columns:1fr 1fr;min-height:760px}.house-image{min-height:760px;position:relative}.house-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.25))}.house-copy{padding:clamp(58px,7vw,118px);display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line)}.house-copy p{font-size:1.06rem;max-width:610px;margin-top:26px}.principles{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:46px;border:1px solid var(--line)}.principle{padding:24px;min-width:0}.principle:nth-child(odd){border-right:1px solid var(--line)}.principle:nth-child(-n+2){border-bottom:1px solid var(--line)}.principle strong{display:block;font-family:var(--serif);font-size:1.12rem;margin-bottom:6px}.principle span{font-size:.82rem;color:var(--muted)} .featured-image{min-height:720px}.featured-image img{filter:brightness(.84) saturate(.9)} .craft{background:var(--paper-deep)}.craft-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:6vw;align-items:center}.craft-media{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.craft-media figure{margin:0;overflow:hidden}.craft-media figure:first-child{aspect-ratio:3/4}.craft-media figure:last-child{aspect-ratio:4/5;margin-top:90px}.craft-copy p{font-size:1.05rem;margin-top:25px;max-width:580px}.craft-list{margin-top:40px;border-top:1px solid var(--line)}.craft-row{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}.craft-row span{font-family:var(--serif);font-size:1.5rem;color:var(--bronze)}.craft-row strong{font-family:var(--serif);font-weight:400;font-size:1.15rem}.craft-row small{display:block;color:var(--muted);margin-top:4px} .quote{background:linear-gradient(90deg,#1a120d,#2c2018);color:#fff;padding:96px 0;text-align:center;position:relative}.quote:before,.quote:after{content:"";position:absolute;top:0;bottom:0;width:22%;opacity:.16;background:url('../images/placeholder-quote.jpg') center/cover no-repeat}.quote:before{left:0}.quote:after{right:0;transform:scaleX(-1)}.quote blockquote{font-family:var(--serif);font-size:clamp(2.2rem,4.5vw,5rem);line-height:1.08;margin:0 auto;max-width:1080px;position:relative;z-index:2}.quote span{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.46);margin-top:25px;position:relative;z-index:2} .editorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.editorial-item{background:var(--ivory)}.editorial-item figure{aspect-ratio:4/3;margin:0;overflow:hidden}.editorial-item img{transition:transform .5s ease}.editorial-item:hover img{transform:scale(1.02)}.editorial-copy{padding:30px}.editorial-copy .eyebrow{margin-bottom:10px}.editorial-copy p{margin-top:10px} footer{background:#100d0a;color:#fff;padding:72px 0 36px}.footer-grid{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:52px}.footer-brand{font-family:var(--serif);font-size:3.15rem;letter-spacing:.15em}footer p,footer a{color:rgba(255,255,255,.63);font-size:.87rem}footer a{transition:color .2s ease}footer a:hover,footer a:focus-visible{color:#fff}.copyright{border-top:1px solid rgba(255,255,255,.14);margin-top:60px;padding-top:22px;color:rgba(255,255,255,.4);font-size:.72rem} /* Widgets/blocs déposés dans les zones de pied de page (Apparence > Widgets) : forcer le même habillage discret que les colonnes codées en dur ("La maison", "Services"), quel que soit le widget ou bloc Gutenberg utilisé (ex. Archives/Catégories natifs, qui impriment leur propre

hors de tout style "eyebrow"). */ .footer-widget{margin:0} .footer-widget + .footer-widget{margin-top:30px} .footer-widget h1,.footer-widget h2,.footer-widget h3,.footer-widget h4,.footer-widget .wp-block-heading{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.45);margin:0 0 14px} .footer-widget ul{list-style:none;margin:0;padding:0} .footer-widget li{margin-top:10px} .footer-widget li:first-child{margin-top:0} .footer-socials{display:flex;gap:10px;margin-top:18px} .footer-socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;transition:.2s} .footer-socials a:hover{background:#fff;border-color:#fff} .footer-socials a:hover svg{stroke:#100d0a} .footer-socials svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} @media(max-width:960px){.nav ul{display:none}.nav{grid-template-columns:1fr auto}.brand{justify-self:start}.hero-side,.hero-stamp{display:none}.trust-grid{grid-template-columns:1fr 1fr}.trust-item:nth-child(2n){border-right:0}.trust-item:last-child{grid-column:1/-1}.intro,.collections-head,.house-grid,.featured-wrap,.craft-grid,.principles{grid-template-columns:1fr} /* Les 4 "engagements" (Choisir peu / Comprendre avant d'agir / Préserver la trace / Transmettre le récit) passent d'une grille 2x2 (déjà trop étroite sur mobile, voir le bug de débordement corrigé ci-dessus) à une colonne unique avec un repère numéroté discret — même geste que les étapes du checkout (voir checkout.css, "counter(sillage-step,...)") plutôt qu'une simple pile de boîtes. */ .principles{counter-reset:sillage-principle} .principle{counter-increment:sillage-principle;border-right:0!important;border-bottom:1px solid var(--line);padding:22px 2px} .principle:last-child{border-bottom:0} .principle:before{content:counter(sillage-principle,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--bronze);margin-bottom:8px} .collections-grid,.editorial-grid{grid-template-columns:1fr}.card{min-height:500px}.house-image,.featured-image{min-height:520px}.house-copy{border-left:0;border-top:1px solid var(--line)}.craft-media figure:last-child{margin-top:55px}.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:640px){.house-copy{padding:48px 22px}} /* Identité Sillage : wordmark texte par défaut, logo personnalisé WordPress si renseigné */ .brand{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.42rem;letter-spacing:.42em;color:#fff;text-transform:uppercase;white-space:nowrap} .brand a{color:inherit} .brand img{max-height:46px;width:auto;display:block} .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px} .header-action{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:#fff;background:transparent;border:0;padding:0;cursor:pointer} /* SILLAGE — RISK : icônes agrandies par rapport à la version de production — le motif "anneau + marque" a besoin de plus d'air pour rester lisible à la même taille que les icônes-traits simples qu'il remplace. */ .header-action svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .cart-count{position:absolute;right:-2px;top:0px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:rgba(255,255,255,.96);color:#171614;font:600 10px/16px Arial,sans-serif;text-align:center} .footer-brand img{display:block;width:230px;height:auto;filter:brightness(0) invert(1)} .mobile-menu-button{display:none} /* SILLAGE — RISK, repasse mobile : à 900px et en dessous, ".brand" (nowrap, pour ne jamais couper "SILLAGE" en deux lignes) est un enfant de grille ".nav{grid-template-columns:1fr auto}" — sans min-width:0 son texte imposait sa propre largeur comme minimum de la piste "1fr", quel que soit l'espace réellement disponible. Sous ~480px, cette largeur "de droit" devenait supérieure à l'espace restant une fois les 4 icônes du bloc ".header-actions" retirées, poussant tout le bloc d'actions hors de la zone de contenu — la dernière icône (menu) se retrouvait à ~10px du bord au lieu des ~20px de marge prévus. Correctif : réduire la taille du logo texte ET donner explicitement min-width:0 à ".brand" pour que la grille puisse le réduire sans faire déborder la ligne. Hauteur du header réduite (88px→72px) pour un chrome mobile plus maîtrisé ; zones tactiles remontées à 44px (le minimum demandé) avec un espacement régulier de 4px au lieu de 2px. */ @media(max-width:900px){ .nav{height:72px} .brand{font-size:1rem;letter-spacing:.2em;min-width:0} .header-actions{gap:4px} .header-action{width:44px;height:44px} .header-action svg{width:24px;height:24px} .cart-count{right:-1px;top:1px} .mobile-menu-button{display:inline-flex} .footer-brand img{width:190px} /* Sticky mobile uniquement — desktop garde le header en absolute, transparent, qui défile avec le hero (identité inchangée). ".header-scrolled" (ajoutée en JS, voir main.js) bascule sur un fond plein dès qu'on quitte le tout haut de la page, pour que le logo/les icônes blancs restent lisibles une fois qu'ils ne se superposent plus au hero/bandeau sombre. */ header{position:fixed;background:transparent;transition:background-color .3s ease} header.header-scrolled{background:var(--dark)} } /* Recherche en surimpression */ .search-form{display:none;position:absolute;top:88px;left:0;right:0;z-index:31;background:rgba(15,12,10,.96);border-bottom:1px solid rgba(255,255,255,.18)} @media(max-width:900px){.search-form{top:72px}} .search-form.is-open{display:block} .site-search-form{padding:22px var(--pad)} .search-field{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.5);color:#fff;font-family:var(--serif);font-size:1.3rem;padding:10px 2px} .search-field::placeholder{color:rgba(255,255,255,.5)} /* Menu mobile */ .mobile-nav{display:none} .mobile-nav.is-open{display:block;position:absolute;top:88px;left:0;right:0;z-index:29;background:var(--dark);border-bottom:1px solid rgba(255,255,255,.14)} @media(max-width:900px){.mobile-nav.is-open{top:72px}} .mobile-nav ul{list-style:none;margin:0;padding:24px var(--pad);display:flex;flex-direction:column;gap:20px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff} /* Sections globales V7 */ .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:46px} .section-head p{max-width:600px} .empreintes{background:#1b1815;color:#fff} .empreintes-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:5vw;align-items:center} .empreintes-copy p{color:rgba(255,255,255,.68);margin-top:24px;max-width:590px} .empreintes-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:38px} .empreinte-card{display:block;border:1px solid rgba(255,255,255,.18);padding:24px;min-height:170px;transition:.25s} .empreinte-card:hover{border-color:rgba(255,255,255,.4)} .empreinte-card small{display:block;letter-spacing:.18em;text-transform:uppercase;color:#a8c4b8;margin-bottom:26px} .empreinte-card strong{font-family:var(--serif);font-weight:400;font-size:1.4rem} .adoptes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .adopte-card{background:#ddd;position:relative;aspect-ratio:4/5;overflow:hidden;transition:box-shadow .3s ease} .adopte-card:hover{box-shadow:0 16px 34px rgba(23,20,17,.12)} .adopte-card>a{display:block;width:100%;height:100%} .adopte-card img{transition:transform .5s ease} .adopte-card:hover img{transform:scale(1.02)} .adopte-card:after{content:"Adopté";position:absolute;top:18px;left:18px;background:rgba(20,18,16,.86);color:#fff;padding:8px 12px;font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;z-index:3} .adopte-card .card-copy{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff} .apropos{background:var(--paper-2)} .apropos.bg-tabac{background:var(--bronze-deep);color:#fff} .apropos.bg-tabac p,.apropos.bg-tabac .eyebrow{color:#d9e5df} .apropos.bg-sombre{background:var(--dark);color:#fff} .apropos.bg-sombre p,.apropos.bg-sombre .eyebrow{color:#c3cec8} .apropos-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:6vw;align-items:center} .apropos-grid.image-right{grid-template-columns:1.1fr .9fr} .apropos-grid.image-right .apropos-photo{order:2} .apropos-photo{aspect-ratio:4/5;background:#d8d0c4;overflow:hidden} .apropos-photo img{width:100%;height:100%;object-fit:cover;display:block} .apropos-copy p{margin-top:24px;max-width:620px;font-size:1.03rem} .apropos-copy p+p{margin-top:14px} .newsletter{background:#171614;color:#fff;text-align:center;padding:110px 0} .newsletter-logo{width:min(340px,70vw);margin:0 auto 30px;filter:brightness(0) invert(1)} .newsletter-logo img{width:100%;height:auto} .newsletter p{color:rgba(255,255,255,.66);max-width:620px;margin:20px auto 34px} .newsletter-form{display:flex;max-width:620px;margin:auto;border-bottom:1px solid rgba(255,255,255,.55)} .newsletter-form input{flex:1;background:transparent;border:0;color:#fff;padding:16px 4px;font:inherit} .newsletter-form button{background:transparent;border:0;color:#fff;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;cursor:pointer} @media(max-width:1000px){ .empreintes-grid,.apropos-grid{grid-template-columns:1fr} .adoptes-grid{grid-template-columns:1fr 1fr} .section-head{align-items:flex-start;flex-direction:column} } @media(max-width:700px){ .empreintes-list,.adoptes-grid{grid-template-columns:1fr} } /* Champ de formulaire ".field" (label + input + focus + erreur) — partagé par Connexion/Inscription (#sillage-auth) et Mot de passe oublié (#sillage-password-reset), qui ne sont jamais chargées ensemble. Regroupé ici une seule fois plutôt que dupliqué à l'identique dans auth.css et password-reset.css. */ #sillage-auth .field label, #sillage-password-reset .field label { display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; color: #6f6256; } #sillage-auth .field input, #sillage-password-reset .field input { width: 100%; border: 1px solid var(--line); background: #f4eee5; color: var(--ink); padding: 15px; outline: none; font-size: .95rem; border-radius: 0; appearance: none; -webkit-appearance: none; font-family: var(--sans); } #sillage-auth .field input:focus, #sillage-password-reset .field input:focus { border-color: var(--bronze); box-shadow: 0 0 0 2px rgba(111, 148, 131,.12); } #sillage-auth .woocommerce-invalid input, #sillage-password-reset .woocommerce-invalid input { border-color: #b3413a; } @media (max-width: 640px) { #sillage-auth .field input, #sillage-password-reset .field input { padding: 16px 15px; } } /* Style de liste éditoriale réutilisable — à poser explicitement sur un conteneur de contenu (À propos, Informations & services, Empreintes, Journal, fiche produit enrichie) via la classe .sillage-content, jamais sur ul/ol/li nus : WooCommerce et les menus impriment eux aussi des