/* =============================================================================
   finitions.css

   Couche de finition posee APRES site.css. Elle ne redessine rien, elle
   termine. Aucune couleur nouvelle, aucune section nouvelle, aucune structure
   nouvelle. On travaille le rythme typographique, les espacements, les etats
   (survol, focus, chargement) et deux defauts reels de mise en page.

   Pourquoi une couche separee plutot qu'une reecriture de site.css. site.css
   EST la charte, elle est validee. Une couche posee par dessus se retire en
   supprimant une seule ligne dans le gabarit, et le site revient exactement a
   ce qu'il etait. Une reecriture, elle, ne se defait pas.

   Note de cascade. Ce fichier est charge apres site.css, donc a specificite
   egale il gagne. Partout ou site.css corrige deja quelque chose dans une
   requete media, on reprend le meme selecteur ou un selecteur plus fort, sans
   quoi la regle d'origine reprend la main.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Correctif — le titre des recommandations

   « Vous aimerez aussi » porte la classe .reco-head sur les neuf fiches
   produit. Cette classe n'a jamais eu de definition dans site.css, le titre
   retombait donc sur le style de h2 par defaut du navigateur : gras, noir,
   colle a gauche. On lui rend le dessin des autres titres de section.
   -------------------------------------------------------------------------- */
.reco-head{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(26px,3vw,32px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.005em;
  text-align:center;
  color:var(--ink);
  margin:0 0 34px;
}


/* -----------------------------------------------------------------------------
   2. Correctif — la barre de navigation sur ordinateur

   La barre est une grille en trois colonnes : liens, nom de la maison, icones.
   Les colonnes laterales valent 1fr chacune, soit 500 px sur une page de
   1280 px. Les six liens en petites capitales espacees demandent 533 px. Il
   manquait 33 px, donc « Pulls et gilets », « Le journal » et « Notre maison »
   passaient a la ligne et venaient buter contre le nom de la maison, qui est
   centre en absolu. Le defaut etait visible sur toutes les pages, a toutes les
   largeurs entre 641 et 1440 px.

   Le budget d'origine avait ete calcule pour cinq liens. « Le journal » est
   arrive apres, et les six liens redemandent 533 px a 1121 px, 568 px a
   1920 px, toujours pour 500 px disponibles. La gouttiere fluide aggravait le
   defaut au lieu de le reduire, puisqu'elle grandissait avec la fenetre alors
   que la rangee restait plafonnee a 1280 px.

   Trois mesures. La rangee de l'entete seule passe a 1440 px, ce qui donne
   580 px par colonne laterale sans toucher a la largeur du reste du site. La
   gouttiere devient fixe a 14 px et l'interlettrage descend a .08em, la taille
   de 11,5 px est conservee. Le menu en tiroir se declenche maintenant jusqu'a
   1339 px au lieu de 1120, parce qu'en dessous de 1340 px la place ne suffit
   pas quoi qu'on fasse. Les deux bornes sont collees, 1339 et 1340, pour
   qu'aucune largeur ne tombe entre les deux et n'herite du style de base.
   Resultat mesure sur une page a six liens : 8 px d'air a 1340 px, 21 px a
   1366 px, 58 px au dela, nom de la maison parfaitement centre partout.
   -------------------------------------------------------------------------- */
header.nav .wrap{max-width:1440px}

@media(min-width:1340px){
  .navlinks{
    flex-wrap:nowrap;
    gap:14px;
    font-size:11.5px;
    letter-spacing:.08em;
    align-items:center;
  }
  .navlinks a{
    white-space:nowrap;
    position:relative;
    padding:7px 0;
    opacity:.78;
  }
  /* Le survol ne change plus seulement la couleur : un filet dore se deploie
     sous le mot. C'est le geste des maisons de mode, et il rend l'etat actif
     lisible sans alourdir la barre. */
  .navlinks a::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:1px;
    height:1px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .navlinks a:hover::after,
  .navlinks a.on::after{transform:none}
}

/* Le menu en tiroir garde les trois colonnes egales plutot que « auto 1fr auto ».
   Avec des colonnes automatiques, le bouton du menu mesure 44 px a gauche et
   les trois icones 113 px a droite : le nom de la maison se retrouvait pousse
   de 69 px vers la gauche. Le decalage passait inapercu sur telephone, il
   devenait une faute a 1280 px. Deux colonnes laterales identiques recentrent
   le nom au pixel. Sur telephone en revanche les trois icones sont plus larges
   que la moitie de la place libre : la colonne laterale deborde et le
   recentrage se retourne contre nous. En dessous de 641 px on garde donc les
   colonnes automatiques d'origine, qui etaient deja verifiees. */
@media(max-width:1339px){
  .navlinks{display:none}
  .burger{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    margin-left:-10px;
  }
}

@media(min-width:641px) and (max-width:1339px){
  .navrow{grid-template-columns:1fr auto 1fr}
  .navicons{justify-content:flex-end}
}

/* Sur les trois largeurs d'iPhone, le nom de la maison en 21 px mesure 162 px
   pour 162 px de place libre entre le bouton du menu et le panier : les lettres
   touchaient les deux icones, sans jamais faire deborder la page, donc sans
   jamais declencher le moindre controle. La taille suit maintenant la largeur
   de l'ecran, entre 18 et 19,5 px : 9 px d'air de chaque cote sur un iPhone SE
   a 375 px, 11 px sur un 14 a 390 px, 31 px sur un Pro Max a 430 px. Le nom
   reste largement le plus gros element de la barre. */
@media(max-width:430px){
  .logo{font-size:clamp(18px,4.9vw,19.5px)}
}


/* -----------------------------------------------------------------------------
   3. Rendu du texte

   La Cormorant Garamond est une didone fine : sans lissage sous pixel et sans
   ligatures, ses deliés se cassent. Le corps du texte est en Jost 300, qui
   gagne a garder ses chiffres alignes dans les prix et les tableaux.
   -------------------------------------------------------------------------- */
body{
  text-rendering:optimizeLegibility;
  font-variant-ligatures:common-ligatures;
  -moz-osx-font-smoothing:grayscale;
}
.serif,h1,h2,h3,h4{font-optical-sizing:auto}

/* Les prix, les quantites et les tailles se lisent en colonne. Des chiffres de
   largeur constante evitent le tremblement quand une valeur change. */
.card .price,
.pdp .info .price,
.qty,.qty input,
.summary,.cart-line,
table td,table th{font-variant-numeric:tabular-nums}


/* -----------------------------------------------------------------------------
   4. Rythme typographique

   Les grands titres en serif sont dessines pour etre serres. A 46 ou 58 px,
   l'interlettrage par defaut du navigateur les fait flotter et l'interligne
   de 1,7 herite du corps les casse en deux blocs sans rapport. On resserre.
   text-wrap:balance repartit les titres sur deux lignes egales au lieu d'une
   ligne pleine suivie d'un mot orphelin, et pretty empeche le mot seul en fin
   de paragraphe.
   -------------------------------------------------------------------------- */
.page-head h1,
.pdp .info h1,
.reco-head,
.doc h1,.doc h2{
  text-wrap:balance;
  letter-spacing:-.002em;
}
.page-head h1{line-height:1.06;margin-bottom:2px}
.page-head p{max-width:52ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
.doc p,.doc li{text-wrap:pretty}

/* Le surtitre dore de la page annonce le titre, il doit respirer au dessus et
   coller en dessous. L'oeil lit alors un bloc, pas trois lignes empilees. */
.page-head .kick{margin-bottom:16px;opacity:.9}

/* Les paragraphes longs des guides et des pages legales depassaient la mesure
   confortable. Au dela de 75 signes par ligne, l'oeil perd le debut de la
   ligne suivante. */
.doc p,.doc li{max-width:72ch}


/* -----------------------------------------------------------------------------
   5. Boutons

   Le dessin ne change pas. Ce sont les etats qui sont repris : la bascule
   fond/texte se faisait en .3s lineaire, ce qui claque. Une courbe sortante
   plus longue donne la sensation de matiere. La cible tactile est garantie a
   44 px meme sur les petits boutons.
   -------------------------------------------------------------------------- */
.btn{
  transition:background-color .45s cubic-bezier(.22,.61,.36,1),
             color .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s cubic-bezier(.22,.61,.36,1);
}
.btn.sm{min-height:40px;line-height:1.5}
.btn:active{transform:translateY(.5px)}
.btn[disabled]:active{transform:none}


/* -----------------------------------------------------------------------------
   6. Focus visible

   Rien n'etait dessine au clavier : la cliente qui navigue a la tabulation ne
   voyait pas ou elle etait, et le contour bleu du navigateur jurait avec la
   charte quand il apparaissait. On pose un liseré dore, detache de 3 px pour
   ne pas ecraser le trait du bouton. :focus-visible ne s'affiche qu'au
   clavier, la souris ne declenche rien.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}
/* Sur fond sombre (pied de page, bandeau) le dore ne ressort pas assez. */
footer a:focus-visible,
.announce a:focus-visible{outline-color:var(--blush)}


/* -----------------------------------------------------------------------------
   7. Cartes produit

   Le zoom au survol existait deja. Trois manques : la vignette etait blanche
   avant le chargement de la photo, ce qui clignote sur une page ivoire ; le
   nom de la piece ne reagissait pas au survol alors que toute la carte est
   cliquable ; la transition de zoom etait lineaire.
   -------------------------------------------------------------------------- */
.card .thumb{background:var(--ivory)}
.card .thumb .sw,
.card .thumb .pimg{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.card h4{transition:color .3s}
.card:hover h4{color:var(--gold-d)}

/* La deuxieme photo d'une piece. Le code l'emettait deja, mais aucune feuille ne
   la dessinait : faute de position, elle se posait par dessus la premiere dans
   les cartes et dans le panier, et c'est elle qu'on voyait. On la remet a sa
   place, cachee, et on ne la revele qu'au survol d'une carte, sur les appareils
   qui ont un vrai pointeur. Au doigt, il n'y a pas de survol : la regle ne se
   declenche jamais et l'image, chargee en lazy, n'est jamais peinte. */
.pimg2{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
@media(hover:hover) and (pointer:fine){
  .card:hover .thumb .pimg2{opacity:1;transform:scale(1.045)}
}

/* Le texte alternatif d'une image s'affiche en noir brut le temps du
   chargement. Transparent, il ne se voit pas ; le lecteur d'ecran, lui,
   continue de le lire. */
img{color:transparent}

/* La pastille Nouveau et le rayon sont poses sur la photo. Un fond a peine
   plus opaque et un flou les detachent quand la photo est claire. */
.card .lbl{
  background:rgba(253,250,245,.82);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}


/* -----------------------------------------------------------------------------
   8. Liens de texte

   Les liens dans le corps du texte avaient un soulignement colle aux jambages.
   On l'eloigne et on l'affine, c'est la difference entre un lien de blog et un
   lien de maison.
   -------------------------------------------------------------------------- */
.doc a,
.ph a,
main p a{
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}


/* -----------------------------------------------------------------------------
   9. Details de page
   -------------------------------------------------------------------------- */
::selection{background:var(--blush);color:var(--ink)}

/* La barre de defilement du systeme est grise et large. Sur ordinateur on la
   ramene a un filet taupe, dans la charte. */
@media(min-width:1025px){
  html{scrollbar-width:thin;scrollbar-color:var(--taupe) transparent}
}

/* Une ancre cliquee dans le sommaire des CGV se posait sous la barre collante.
   On reserve la hauteur de la barre au dessus de la cible. */
html{scroll-behavior:smooth}
:target{scroll-margin-top:96px}

/* Le trait de separation du bas de page etait le meme que partout ailleurs.
   Sur fond sombre il disparait, on le remonte d'un cran. */
footer h5{opacity:.92}

/* Les liens des colonnes du pied de page mesuraient 35 px de haut, sous le
   plancher de 40 px tenu partout ailleurs sur le site. Trois pixels de plus
   en haut et en bas les y ramenent ; la gouttiere de la liste passe de 4 a 0
   pour que la hauteur totale du pied de page ne bouge pas.
   Les libelles courts (Jeans, Tops, FAQ) ne faisaient que 26 a 36 px de large,
   la cible etait haute mais etroite ; un minimum de largeur la rend visable au
   pouce sans changer l'aspect du texte. */
footer ul{gap:0}
footer ul a{padding:10px 0;min-height:40px;min-width:44px}

/* Le bouton de fermeture du menu en tiroir porte une marge negative de 8 px
   pour aligner son dessin sur le bord. Cette marge faisait deborder sa ligne
   de 8 px a l'interieur du tiroir : un defilement horizontal minuscule mais
   bien reel au doigt. On elargit la ligne de 8 px vers la droite et on lui rend
   ces 8 px en marge interieure : le bouton garde son alignement optique et plus
   rien ne depasse. */
.mmenu .top{margin-right:-8px;padding-right:8px}


/* -----------------------------------------------------------------------------
   10. Mouvement reduit

   Certaines personnes ont regle leur systeme pour supprimer les animations,
   souvent pour des raisons vestibulaires. On respecte le reglage partout, y
   compris sur le defilement doux pose juste au dessus.
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .card:hover .thumb .sw,
  .card:hover .thumb .pimg,
  .card:hover .thumb .pimg2{transform:none}
}


/* -----------------------------------------------------------------------------
   11. Fiche produit depliante

   Le pave editorial qui courait sous la fiche (La matiere, La coupe, Comment le
   porter) poussait le reste de la page tres bas et faisait doublon avec la
   colonne d'achat. Il vit maintenant en accordeons dans cette meme colonne, a
   la maniere des fiches Oraije. Le texte reste entier dans le HTML, donc le
   referencement ne perd rien ; seule la lecture change.

   Un <details> natif suffit : il s'ouvre sans JavaScript, il reste accessible
   au clavier et le contenu replie est bien dans le document pour les moteurs.
   -------------------------------------------------------------------------- */
.fiche{margin-top:24px;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
/* le dernier volet touche la ligne de contact, on evite le double filet */
.fiche .acc:last-child{border-bottom:none}
/* On retire la fleche native, remplacee par un chevron dessine en bordures. */
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:15px 2px 15px 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);transition:color .2s}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::marker{content:""}
.acc>summary:hover{color:var(--gold-d)}
.acc>summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-right:4px;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.acc[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.acc-b{padding:0 0 22px}
.acc-b p{font-size:14.5px;line-height:1.75;color:#4a423b;margin:0 0 12px}
.acc-b p:last-child{margin-bottom:0}
.acc-b h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:18px;color:var(--ink);margin:18px 0 6px}
.acc-b h3:first-child{margin-top:0}
.acc-b a{color:var(--gold-d);border-bottom:1px solid var(--line)}
/* Liste de caracteristiques, puce ronde doree comme la reassurance. */
.spec{list-style:none;margin:16px 0 0;padding:0}
.spec li{position:relative;padding-left:20px;font-size:14px;line-height:1.6;color:#4a423b;margin-bottom:8px}
.spec li:last-child{margin-bottom:0}
.spec li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--gold)}


/* -----------------------------------------------------------------------------
   12. Le mot de la maison

   Une respiration entre la fiche et les recommandations, a la place du pave de
   texte supprime. Une phrase, centree, en serif italique. Rien d'autre.
   -------------------------------------------------------------------------- */
.mot{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(44px,6vw,76px) 0;text-align:center}
.mot-q{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(21px,2.7vw,30px);line-height:1.5;color:var(--ink);max-width:720px;margin:0 auto}
.mot-s{margin:20px 0 0;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-d)}
/* Le fil de visite, en une ligne discrete sous la citation. */
.suite{max-width:760px;margin:0 auto;padding:30px 0 0;text-align:center;font-size:14px;line-height:1.8;color:var(--soft)}
.suite a{color:var(--gold-d);border-bottom:1px solid var(--line)}