:root{ /* Crème — retenu après confrontation aux photos, qui sont chaudes. Pour repasser au bleu : ajouter la classe "t-bleu" sur . */ --ink:#241C16; --second:#6E5B4A; --accent:#C9A227; /* or du logo — APLAT SEULEMENT, jamais en texte (2,2:1) */ --on-accent:#241C16; /* 6,9:1 sur l'or */ --surface:#EFE6DA; --bg:#F6F1EA; --error:#8A2116; /* Les filets noirs sont retirés. La séparation passe désormais par les gouttières et les aplats de surface. --edge reste pour les limites que l'on n'a pas le droit de faire disparaître — contour des champs, vue sélectionnée : 3:1 minimum exigé sur les éléments non textuels. #6E5B4A donne 5,7:1. */ --rule-c:transparent; --edge:#6E5B4A; --font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; --t-label:0.6875rem; --u:8px; --frame:24px; --gap:10px; --rule:1px solid var(--rule-c); --ease:cubic-bezier(.22,.61,.36,1); --fast:180ms; --mid:400ms; --slow:600ms; } body.t-bleu{ --ink:#192338; --second:#31487A; --accent:#8FB3E2; --on-accent:#192338; --surface:#D9E1F1; --bg:#EDF1F8; } @media (max-width:768px){ :root{ --frame:14px } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font); font-size:1rem;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} h1,h2,h3,p,dl,dd,figure{margin:0} button{font-family:inherit;font-size:inherit} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bg); padding:12px 20px;font-size:var(--t-label);font-weight:600;letter-spacing:.18em; text-transform:uppercase} .skip:focus{left:var(--frame);top:var(--frame)} .frame{border:var(--rule);margin:var(--frame);background:var(--bg)} .label{font-size:var(--t-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase} .lede{color:var(--second);line-height:1.6} .num{font-variant-numeric:tabular-nums} .fine{font-size:var(--t-label);color:var(--second);letter-spacing:.02em} /* ============================================================ LE COEUR EN PUZZLE — motif de marque Silhouette pleine, coutures tracées dans la couleur du fond et rognées à la silhouette. Hérite de la couleur du texte. ============================================================ */ .coeur{display:block;width:1em;height:1em;flex:0 0 auto;overflow:visible} .coeur__forme{fill:currentColor} .coeur__coutures{fill:none;stroke:var(--bg);stroke-width:5; stroke-linecap:round;stroke-linejoin:round} .coeur--logo{width:1.05em;height:1.05em;color:var(--accent)} .coeur--logo .coeur__coutures{stroke:var(--bg)} .coeur--badge{width:.9em;height:.9em;color:var(--accent)} .coeur--badge .coeur__coutures{stroke:var(--surface)} .coeur--hero{width:2.2rem;height:2.2rem;color:var(--accent)} .coeur--section{width:1.8rem;height:1.8rem;color:var(--accent)} .coeur--grand{width:3rem;height:3rem;color:var(--accent);margin:0 auto 18px} /* ---------- boutons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center; min-height:46px;padding:13px 26px; font-size:var(--t-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase; border:var(--rule);border-radius:0;background:var(--accent);color:var(--on-accent); cursor:pointer; transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease), transform var(--fast) var(--ease)} .btn:hover{background:var(--ink);color:var(--bg)} .btn:active{transform:translateY(1px)} .btn[disabled]{background:var(--surface);color:var(--second);opacity:.5;cursor:not-allowed} .btn--ghost{background:transparent;color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:var(--bg)} .btn--block{display:flex;width:100%} .btn--block+.btn--block{margin-top:var(--u)} /* ---------- entête ---------- */ .masthead{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 24px;border-bottom:var(--rule)} .logo{display:inline-flex;align-items:center;gap:10px;min-height:46px} .logo__mot{font-size:1.15rem;font-weight:700;letter-spacing:.02em;line-height:1} .mainnav{display:flex;gap:24px;align-items:center} .mainnav a,.mainnav button{display:inline-flex;align-items:center;min-height:44px;position:relative; font-size:var(--t-label);font-weight:600;letter-spacing:.22em;text-transform:uppercase; background:none;border:0;cursor:pointer;color:inherit;padding:0} .mainnav a::after,.mainnav button::after{content:'';position:absolute;left:0;right:0;bottom:11px; height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform var(--mid) var(--ease)} .mainnav a:hover::after,.mainnav button:hover::after, .mainnav a[aria-current="page"]::after{transform:scaleX(1)} @media (max-width:600px){ .mainnav{gap:16px} .mainnav a:nth-child(2){display:none} } .retour{background:var(--surface);border-bottom:var(--rule)} .retour a{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 24px; font-size:var(--t-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--second);transition:color var(--fast) var(--ease)} .retour a:hover{color:var(--ink)} .retour .arrow{transition:transform var(--mid) var(--ease)} .retour a:hover .arrow{transform:translateX(-4px)} /* ---------- accueil ---------- */ .hero{display:grid;grid-template-columns:.58fr .42fr;border-bottom:var(--rule)} .hero__img{border-right:var(--rule);overflow:hidden} .hero__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:9/16} .hero__txt{padding:56px 44px;display:flex;flex-direction:column;justify-content:center; gap:20px;align-items:flex-start} .hero__txt h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600; letter-spacing:-.035em;line-height:.98} .hero__txt p{color:var(--second);max-width:36ch} @media (max-width:860px){ .hero{grid-template-columns:1fr} .hero__img{border-right:0;border-bottom:var(--rule)} .hero__img img{aspect-ratio:4/5} .hero__txt{padding:32px 22px} .hero .btn{width:100%} } .pagehead{padding:40px 24px;border-bottom:var(--rule)} .pagehead h1{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:600; letter-spacing:-.03em;line-height:1.04;margin-bottom:10px} .pagehead .lede{max-width:52ch} .sechead{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:20px 24px;border-bottom:var(--rule)} .sechead .c{color:var(--second)} /* ---------- bande vidéo ---------- */ .bande{display:grid;grid-template-columns:.42fr .58fr;border-bottom:var(--rule)} .bande .video{border-right:var(--rule)} .bande__txt{padding:48px 40px;display:flex;flex-direction:column;justify-content:center; gap:18px;align-items:flex-start} .bande__txt h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600; letter-spacing:-.03em;line-height:1.06} .bande__txt p{color:var(--second);max-width:52ch} @media (max-width:860px){ .bande{grid-template-columns:1fr} .bande .video{border-right:0;border-bottom:var(--rule)} .bande__txt{padding:30px 22px} } /* ---------- vidéo ---------- */ .video{position:relative;overflow:hidden} .video video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover;background:var(--surface)} .video__pause{position:absolute;right:12px;bottom:12px;z-index:2; width:38px;height:38px;display:grid;place-items:center;padding:0; font-size:11px;line-height:1;cursor:pointer; background:var(--surface);color:var(--ink);border:var(--rule); transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)} .video__pause:hover{background:var(--accent)} .video__pause::after{content:'';position:absolute;inset:-4px} source-holder{display:none} .videos{display:grid;grid-template-columns:repeat(2,1fr); border-top:var(--rule);border-left:var(--rule)} .videos .video{border-right:var(--rule);border-bottom:var(--rule)} @media (max-width:700px){ .videos{grid-template-columns:1fr} } /* ---------- grilles ---------- */ .grille{display:grid;grid-template-columns:repeat(3,1fr); border-top:var(--rule);border-left:var(--rule)} .grille--2{grid-template-columns:repeat(2,1fr)} @media (max-width:860px){ .grille,.grille--2{grid-template-columns:1fr 1fr} } .carte{display:block;position:relative;background:var(--bg); border-right:var(--rule);border-bottom:var(--rule)} .carte[hidden]{display:none} .carte__img{display:block;overflow:hidden} .carte__img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%; transition:opacity var(--slow) var(--ease)} .carte:hover .carte__img img,.carte:focus-visible .carte__img img{opacity:.9} .carte__meta{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 16px;min-height:46px;border-top:var(--rule); transition:background-color var(--fast) var(--ease)} .carte:hover .carte__meta,.carte:focus-visible .carte__meta{background:var(--surface)} .carte__nom{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase} .carte__prix{font-size:var(--t-label);font-weight:600;color:var(--second)} @media (max-width:480px){ .carte__meta{flex-direction:column;align-items:flex-start;gap:2px} } .badge{position:absolute;top:12px;left:12px;z-index:2; display:inline-flex;align-items:center;gap:6px; background:var(--surface);color:var(--ink);border:var(--rule); padding:5px 9px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} .badge--panel{position:static;margin-bottom:14px} /* Planche : vignettes volontairement petites — la planche sert a montrer l'ampleur du fonds, pas a detailler chaque photo. */ .planche{display:grid;grid-template-columns:repeat(6,1fr); border-top:var(--rule);border-left:var(--rule)} .planche figure{border-right:var(--rule);border-bottom:var(--rule)} .planche img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%} @media (max-width:1100px){ .planche{grid-template-columns:repeat(4,1fr)} } @media (max-width:700px){ .planche{grid-template-columns:repeat(3,1fr)} } /* ---------- encart de détail au survol ---------- Un gros plan sur le vêtement, découpé dans l'original en pleine résolution — ce n'est pas un agrandissement de la vignette, donc l'image reste nette. */ .duo{position:relative;overflow:hidden} .duo > img{display:block;width:100%} .detail{ position:absolute;right:6px;bottom:6px;z-index:2; width:56%;display:block;overflow:hidden; background:var(--surface); box-shadow:0 0 0 1px var(--ink), 0 6px 18px rgba(36,28,22,.28); opacity:0;transform:translateY(8px) scale(.94);transform-origin:100% 100%; transition:opacity 260ms var(--ease), transform 320ms var(--ease); pointer-events:none; } .detail__img{display:block;width:100%;height:auto} .duo:hover .detail, .duo:focus-within .detail{opacity:1;transform:none} /* sous 700 px il n'y a pas de survol, et l'encart mangerait la vignette */ @media (max-width:700px), (hover:none){ .detail{display:none} } /* ---------- filtres ---------- */ .filtres{display:flex;align-items:stretch;flex-wrap:wrap; background:var(--surface);border-bottom:var(--rule)} .filtres button{display:inline-flex;align-items:center;min-height:46px;padding:12px 20px; font-size:var(--t-label);font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--second);background:transparent; border:0;border-right:var(--rule);cursor:pointer; transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)} .filtres button:hover{background:var(--bg);color:var(--ink)} .filtres button[aria-pressed="true"]{background:var(--ink);color:var(--bg)} .filtres__compte{display:inline-flex;align-items:center;min-height:46px;padding:12px 20px; margin-left:auto;color:var(--second);border-left:var(--rule)} @media (max-width:600px){ .filtres__compte{margin-left:0;border-left:0;width:100%} } .vide{padding:72px 24px;text-align:center;border-bottom:var(--rule)} .vide[hidden]{display:none} .vide h2{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin-bottom:8px} .vide .btn{margin-top:20px} /* ---------- page produit ---------- */ .produit{display:grid;grid-template-columns:.55fr .45fr;align-items:start; border-bottom:var(--rule)} .produit__media{border-right:var(--rule)} .produit__grande img{width:100%;aspect-ratio:9/16;object-fit:cover} .produit__vues{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--rule)} .vue{padding:0;border:0;border-right:var(--rule);border-bottom:var(--rule); background:var(--bg);cursor:pointer;position:relative;min-height:44px} .vue img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%; transition:opacity var(--fast) var(--ease)} .vue:hover img{opacity:.85} .vue[aria-pressed="true"]::after{content:'';position:absolute;inset:0; box-shadow:inset 0 0 0 3px var(--ink)} .produit__panel{position:sticky;top:0;display:flex;flex-direction:column} @media (max-width:900px){ .produit{grid-template-columns:1fr} .produit__media{border-right:0;border-bottom:var(--rule)} .produit__panel{position:static} } .produit__head{padding:32px 24px 24px;border-bottom:var(--rule)} .produit__head h1{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:600; letter-spacing:-.03em;line-height:1.04;margin-bottom:8px} .produit__prix{font-size:1.35rem;font-weight:600;margin-bottom:14px} .produit__texte{padding:24px;border-bottom:var(--rule);color:var(--second)} .details{border-bottom:var(--rule)} .detail{display:flex;gap:16px;padding:12px 24px;border-bottom:var(--rule)} .detail:last-child{border-bottom:0} .detail dt{flex:0 0 34%;font-size:var(--t-label);font-weight:600; letter-spacing:.14em;text-transform:uppercase} .detail dd{flex:1;font-size:.9375rem;color:var(--second)} .produit__cta{padding:24px;border-bottom:var(--rule)} .dispo{color:var(--second);margin-bottom:14px} .reassure{display:flex;flex-wrap:wrap;gap:18px;padding:18px 24px; font-size:var(--t-label);font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--second)} /* ---------- pied ---------- */ .pied{background:var(--surface);padding:32px 24px} .pied__logo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px} .pied__baseline{width:100%;font-size:var(--t-label);font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--second);margin-top:4px} .pied__liens{display:flex;flex-wrap:wrap;gap:32px;margin-bottom:10px} .pied__liens a,.pied__liens button{display:inline-flex;align-items:center;min-height:44px; font-size:var(--t-label);font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--second);background:none;border:0; cursor:pointer;padding:0;transition:color var(--fast) var(--ease)} .pied__liens a:hover,.pied__liens button:hover{color:var(--ink)} /* ---------- formulaire ---------- */ .modal{width:min(560px,calc(100vw - 32px));padding:0;border:var(--rule);border-radius:0; background:var(--bg);color:var(--ink)} .modal::backdrop{background:rgba(20,14,10,.55)} .modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px; padding:24px;border-bottom:var(--rule)} .modal__head h2{font-size:1.35rem;font-weight:600;letter-spacing:-.025em;margin-bottom:8px} .modal__contexte{margin-top:12px;color:var(--second)} .modal__close{width:44px;height:44px;flex:0 0 44px;padding:0;cursor:pointer; background:transparent;color:var(--ink);border:var(--rule); transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)} .modal__close:hover{background:var(--ink);color:var(--bg)} .modal__body{padding:24px;max-height:min(58vh,520px);overflow-y:auto} .modal__foot{padding:24px;border-top:var(--rule)} .modal__foot .fine{margin-top:12px;text-align:center} .field{margin-bottom:24px} .field:last-child{margin-bottom:0} .field>label{display:block;margin-bottom:var(--u);font-size:var(--t-label); font-weight:600;letter-spacing:.16em;text-transform:uppercase} .field .opt{color:var(--second);font-weight:400;text-transform:none;letter-spacing:.02em} .hint{display:block;margin-top:6px;font-size:var(--t-label);color:var(--second); letter-spacing:.02em;text-transform:none;font-weight:400} .input,.textarea{display:block;width:100%;min-height:46px;padding:12px 14px; background:#fff;color:var(--ink);border:var(--rule);border-radius:0; transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)} .textarea{min-height:92px;resize:vertical;line-height:1.5} .input:hover,.textarea:hover{border-color:var(--second)} .input:focus,.textarea:focus{outline:0;box-shadow:inset 0 0 0 1px var(--ink)} .input[aria-invalid="true"],.textarea[aria-invalid="true"]{ border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)} .err{display:block;margin-top:6px;font-size:var(--t-label);color:var(--error); letter-spacing:.02em;text-transform:none;font-weight:500} .err:empty{display:none} .formstatus{margin-bottom:16px} .formstatus:empty{display:none} .formstatus .box{padding:14px 16px;border:var(--rule);font-size:.9375rem;line-height:1.5} .formstatus .box--err{border-color:var(--error);color:var(--error);background:#fff} .done{text-align:center;padding:44px 24px} .done h2{font-size:1.5rem;font-weight:600;letter-spacing:-.025em;margin-bottom:10px} .done .btn{margin-top:24px} /* ============================================================ RETRAIT DES FILETS ------------------------------------------------------------ Sans trait, il faut autre chose pour tenir la hiérarchie : des gouttières entre les blocs, des aplats de surface sur les bandes, et davantage de blanc entre les sections. ============================================================ */ .frame{border:0} .grille,.grille--2,.planche,.videos,.produit__vues{ border:0; gap:var(--gap); padding:0 24px calc(var(--u)*4); } .grille .carte,.planche figure,.videos .video,.produit__vues .vue{border:0} .sechead{border-bottom:0;padding:44px 24px 18px} .masthead{padding:20px 24px} .pagehead{border-bottom:0;padding-bottom:24px} .carte__meta{border-top:0;padding:12px 2px 4px} .carte:hover .carte__meta,.carte:focus-visible .carte__meta{background:transparent} .carte:hover .carte__nom{text-decoration:underline;text-underline-offset:4px} .hero{border-bottom:0;gap:var(--gap);padding:0 24px} .hero__img{border-right:0} .hero__txt{padding:48px 8px 48px 32px} .bande{border-bottom:0;gap:var(--gap);padding:24px 24px calc(var(--u)*5)} .bande .video{border-right:0} .produit{border-bottom:0;gap:calc(var(--gap)*2);padding:0 24px} .produit__media{border-right:0} .produit__vues{padding:var(--gap) 0 0} .produit__head{border-bottom:0;padding:24px 0 16px} .produit__texte{border-bottom:0;padding:0 0 20px} .produit__cta{border-bottom:0;padding:20px 0} .reassure{padding:0 0 24px} .details{border-bottom:0;background:var(--surface);padding:6px 18px;margin-bottom:4px} .detail{border-bottom:0;padding:10px 0} .filtres{border-bottom:0;background:transparent;gap:var(--gap);padding:0 24px 24px} .filtres button{border:1px solid var(--edge);color:var(--second)} .filtres button[aria-pressed="true"]{border-color:var(--ink)} .filtres__compte{border-left:0} .retour{background:transparent} .vide{border-bottom:0} /* --- limites fonctionnelles : elles restent visibles --- */ .btn{border-color:transparent} .btn--ghost{border-color:var(--edge)} .input,.textarea{border-color:var(--edge)} .input:hover,.textarea:hover{border-color:var(--ink)} .modal{border:0} .modal__head,.modal__foot{border-color:var(--surface)} .modal__close{border-color:var(--edge)} .badge{border-color:var(--edge)} .vue[aria-pressed="true"]::after{box-shadow:inset 0 0 0 3px var(--ink)} @media (max-width:860px){ .hero__txt{padding:28px 8px 36px} .grille,.grille--2,.planche,.videos{padding:0 14px calc(var(--u)*3)} .hero,.bande,.produit,.filtres{padding-left:14px;padding-right:14px} .sechead{padding:32px 14px 14px} } /* ============================================================ APPARITIONS ------------------------------------------------------------ L'état masqué n'est posé que par le script (classe .reveal) : sans JavaScript, rien ne disparaît. Seules opacity et transform sont animées — aucune reprise de mise en page, donc aucun décalage cumulatif. ============================================================ */ .reveal{opacity:0;transform:translateY(22px)} .reveal.vu{ opacity:1;transform:none; transition:opacity 700ms var(--ease), transform 700ms var(--ease); } .planche figure.reveal{transform:translateY(14px) scale(.985)} .carte.reveal{transform:translateY(26px)} /* entrée de page : le hero n'attend pas le défilement */ @keyframes monte{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} } @keyframes ouvre{ from{opacity:0;transform:scale(1.05)} to{opacity:1;transform:none} } .hero__img img{animation:ouvre 1100ms var(--ease) both} .hero__txt > *{animation:monte 800ms var(--ease) both} .hero__txt > *:nth-child(1){animation-delay:120ms} .hero__txt > *:nth-child(2){animation-delay:200ms} .hero__txt > *:nth-child(3){animation-delay:280ms} .hero__txt > *:nth-child(4){animation-delay:360ms} .masthead{animation:monte 600ms var(--ease) both} /* ============================================================ ZOOM AU SURVOL ------------------------------------------------------------ L'image grandit dans un cadre qui, lui, ne bouge pas : le conteneur est en overflow hidden et seule la transform est animée, donc la mise en page ne bouge jamais et le rendu reste compositée par le GPU. Le focus clavier déclenche le même effet — sur mobile, le survol n'existe pas. ============================================================ */ .carte__img,.planche figure,.vue,.produit__grande,.hero__img{overflow:hidden} .carte__img img, .vue img, .produit__grande img{ transition:transform var(--slow) var(--ease); will-change:transform; } /* sur une paire, la transition d'opacite pilote deja le changement : on n'anime que la transformation, sinon les deux se marchent dessus */ .planche figure img{transition:transform var(--slow) var(--ease), opacity 450ms var(--ease)} .carte:hover .carte__img img, .carte:focus-visible .carte__img img{transform:scale(1.06)} .planche figure:hover img{transform:scale(1.05)} .vue:hover img, .vue:focus-visible img{transform:scale(1.09)} .produit__grande:hover img{transform:scale(1.05)} @media (hover:none){ .carte__img img,.planche figure img,.vue img,.produit__grande img{will-change:auto} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} /* sans cela, le zoom s'appliquerait d'un coup au lieu d'être supprimé */ .carte:hover .carte__img img,.carte:focus-visible .carte__img img, .planche figure:hover img,.vue:hover img,.vue:focus-visible img, .produit__grande:hover img{transform:none} /* le contenu doit être visible d'emblée, jamais en attente d'apparition */ .reveal,.reveal.vu{opacity:1;transform:none} .hero__img img,.hero__txt > *,.masthead{animation:none;opacity:1;transform:none} }