/* Socle : remise à zéro légère, typographie, conteneurs, boutons et petits composants
   communs à toutes les pages. Valeurs lues dans tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond-page);color:var(--encre);font:400 var(--t-courant)/1.6 var(--police-texte);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit}
:where(h1,h2,h3,h4){margin:0;font-family:var(--police-titre);font-weight:500;letter-spacing:var(--ls-titre);line-height:1.05}
:where(p){margin:0 0 1em}
:where(ul,ol){margin:0 0 1em;padding-left:1.2em}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.cs-evitement{position:absolute;left:-9999px;top:0;z-index:100;background:var(--encre);color:var(--blanc);padding:10px 16px}
.cs-evitement:focus{left:16px;top:16px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Conteneurs : contenu (1312 px) et cadre pleine largeur (1376 px) ---- */
.cs-conteneur{width:100%;max-width:calc(var(--largeur) + var(--gouttiere)*2);margin-inline:auto;padding-inline:var(--gouttiere)}
.cs-cadre{width:100%;max-width:calc(var(--largeur-cadre) + var(--gouttiere-cadre)*2);margin-inline:auto;padding-inline:var(--gouttiere-cadre)}

/* ---- Typographie de rubrique ---- */
.cs-surtitre{font-size:var(--t-surtitre);letter-spacing:var(--ls-surtitre);text-transform:uppercase;color:var(--discret);margin:0 0 10px}
.cs-titre-1{font:500 var(--t-h1)/1 var(--police-titre);letter-spacing:var(--ls-titre)}
.cs-titre-2{font:500 var(--t-h2)/1.05 var(--police-titre);letter-spacing:var(--ls-titre)}
.cs-titre-rubrique{font:500 var(--t-h2-b)/1 var(--police-titre);letter-spacing:var(--ls-titre)}
.cs-titre-3{font:500 var(--t-h3)/1.15 var(--police-titre);letter-spacing:-.005em}
.cs-chapo{font-size:var(--t-chapo);line-height:1.55}
.cs-texte{color:var(--texte);line-height:1.7}

/* ---- Boutons et liens d'action ---- */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid currentColor;padding:15px 28px;font-size:var(--t-mini);letter-spacing:var(--ls-bouton);text-transform:uppercase;line-height:1.2;background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cs-btn:hover{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.cs-btn--plein{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.cs-btn--plein:hover{background:#000;color:var(--blanc)}
.cs-btn--clair{color:var(--blanc);border-color:var(--blanc)}
.cs-btn--clair:hover{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.cs-lien-souligne{display:inline-block;font-size:var(--t-mini);letter-spacing:var(--ls-bouton);text-transform:uppercase;border-bottom:1px solid currentColor;padding:6px 0}
.cs-lien-fleche{border-bottom:1px solid currentColor;padding-bottom:3px;font-size:var(--t-petit)}

/* ---- Étiquette posée sur une photo (Nouveauté, Coup de cœur, Vendue) ---- */
.cs-etiquette{display:inline-block;background:var(--blanc);color:var(--encre);font-size:var(--t-etiquette);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;line-height:1.3}
.cs-etiquette.cs-etiquette--reservee{background:var(--encre);color:var(--blanc)}