/* ==========================================================================
   ajouts.css — sections ajoutées en 2026 : séries, tirages, offre
   professionnelle, journal, contact.

   Se charge APRÈS style.css et n'en modifie rien. Reprend ses conventions :
   couleurs #333 / #666 / #000 / #eaeaea, Poppins pour le texte, Merriweather
   italique pour les légendes d'image, grilles à trois colonnes espacées de
   2rem, survol en zoom 1.05 sous voile sombre, bouton noir qui s'inverse.
   ========================================================================== */

/* --- ossature de page ---------------------------------------------------- */
.contenu-page{max-width:1100px; margin:0 auto; padding:3rem 2rem 4rem}
.contenu-large{max-width:1800px; margin:0 auto; padding:3rem 2rem 4rem}
.mesure{max-width:660px}
.mesure p{color:#555}

.titre{font-size:2.4rem; font-weight:300; letter-spacing:-.01em; color:#111; margin-bottom:.5rem}
.chapo{color:#666; font-size:1.05rem; max-width:58ch; margin-bottom:0}
.surtitre{display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:#999; margin-bottom:.9rem}
.filet{border:0; border-top:1px solid #eaeaea; margin:3rem 0}
.tete{display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem}
.tete h2{font-size:1.5rem; font-weight:400; color:#333}
.tete .plus{margin-left:auto; font-size:.9rem; color:#666; text-decoration:none;
  border-bottom:1px solid #ccc}
.tete .plus:hover{color:#000; border-bottom-color:#000}

/* --- bandeau d'accueil --------------------------------------------------- */
.bandeau-une{margin-bottom:3rem}
.bandeau-une .vue{width:100%; aspect-ratio:16/7; overflow:hidden; background:#f5f5f5}
.bandeau-une .vue img{width:100%; height:100%; object-fit:cover}
.bandeau-une h1{font-size:2.6rem; font-weight:300; line-height:1.15; color:#111;
  margin:1.5rem 0 .6rem}
.bandeau-une p{color:#666; font-size:1.05rem; max-width:56ch}

/* --- cartes (séries, tirages) -------------------------------------------- */
.cartes{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.carte{text-decoration:none; color:inherit; display:block}
.carte .vue{aspect-ratio:4/5; overflow:hidden; background:#f5f5f5; position:relative; display:block}
.carte .vue img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.carte:hover .vue img{transform:scale(1.05)}
.carte .vue::after{content:attr(data-survol); position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.3); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease}
.carte:hover .vue::after{opacity:1}
.carte h3{margin-top:1rem; font-size:1.15rem; font-weight:500; color:#333}
.carte .infos{color:#666; font-size:.9rem}
.carte .infos b{color:#111; font-weight:500}
.carte h3.italique{font-family:'Merriweather',Georgia,serif; font-style:italic; font-weight:400}

/* --- galerie de série : images non recadrées ----------------------------- */
.grille-serie{columns:3; column-gap:2rem}
.grille-serie>.vignette{break-inside:avoid; -webkit-column-break-inside:avoid;
  page-break-inside:avoid; margin:0 0 2rem}
.vignette{display:block; width:100%; padding:0; border:0; background:none; font:inherit;
  color:inherit; cursor:zoom-in; text-align:center}
.vignette .cadre{display:block; position:relative; overflow:hidden; background:#f5f5f5}
.vignette img{width:100%; height:auto; display:block; transition:transform .5s ease}
.vignette:hover img{transform:scale(1.05)}
.vignette .cadre::after{content:"Agrandir"; position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.3); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease}
.vignette:hover .cadre::after,.vignette:focus-visible .cadre::after{opacity:1}
.vignette .titre-photo{display:block; margin-top:.7rem; font-family:'Merriweather',Georgia,serif;
  font-style:italic; font-size:.95rem; color:#333}
.vignette .code{display:block; font-family:'Poppins',sans-serif; font-style:normal;
  font-size:.72rem; letter-spacing:.1em; color:#bbb; margin-top:.2rem}

/* --- visionneuse --------------------------------------------------------- */
.visio{position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000;
  background:rgba(255,255,255,.985); display:none; align-items:center; justify-content:center;
  padding:3rem}
.visio.ouverte{display:flex}
.visio figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:1.2rem;
  max-width:100%}
.visio img{max-width:100%; max-height:78vh; object-fit:contain}
.visio figcaption{text-align:center; max-width:60ch; color:#666; font-size:.95rem}
.visio figcaption b{display:block; font-weight:400; color:#111; font-size:1.15rem;
  margin-bottom:.3rem; font-family:'Merriweather',Georgia,serif; font-style:italic}
.visio button{position:absolute; background:#fff; border:1px solid #ddd; color:#333;
  width:44px; height:44px; cursor:pointer; font-size:1.2rem; line-height:1; display:flex;
  align-items:center; justify-content:center}
.visio button:hover{border-color:#333}
.visio .fermer{top:2rem; right:2rem}
.visio .prec{left:2rem; top:50%; transform:translateY(-50%)}
.visio .suiv{right:2rem; top:50%; transform:translateY(-50%)}

/* --- fiche tirage -------------------------------------------------------- */
.fiche{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr); gap:3.5rem;
  align-items:start}
.fiche .visuel{background:#f5f5f5; position:sticky; top:2rem}
.fiche .visuel img{width:100%; height:auto; display:block}
.fiche h1{font-size:2rem; font-weight:400; font-family:'Merriweather',Georgia,serif;
  font-style:italic; color:#111; margin:.3rem 0 .6rem}
.fiche .desc{color:#666; margin-bottom:2rem}
.choix{display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.4rem}
.choix label{display:flex; align-items:center; gap:1rem; border:1px solid #eaeaea;
  padding:.9rem 1rem; cursor:pointer; transition:border-color .2s ease}
.choix label:hover{border-color:#bbb}
.choix label:has(input:checked){border-color:#333}
.choix input{accent-color:#333; width:15px; height:15px; flex:none; margin:0}
.choix .nom{font-size:.98rem; color:#333}
.choix .det{display:block; font-size:.78rem; color:#999; margin-top:.1rem}
.choix .prix{margin-left:auto; white-space:nowrap; color:#333}
.total{display:flex; align-items:baseline; gap:1rem; padding:1rem 0;
  border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; margin-bottom:1.4rem}
.total .etiq{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#999}
.total .val{margin-left:auto; font-size:1.4rem; color:#111}
.details{margin-top:2rem; border-top:1px solid #eaeaea; padding-top:1.4rem}
.details dl{display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.4rem; margin:0;
  font-size:.88rem}
.details dt{color:#999}
.details dd{margin:0; color:#555}

/* --- bouton : reprend le .cta de index.css ------------------------------- */
.btn{display:flex; align-items:center; justify-content:center; width:100%; padding:.95rem 1.5rem;
  text-decoration:none; font-size:.95rem; border:1px solid #000; margin-bottom:.6rem;
  cursor:pointer; font-family:inherit; background:#000; color:#fff;
  transition:background .3s ease, color .3s ease}
.btn:hover{background:#fff; color:#000}
.btn.clair{background:#fff; color:#000}
.btn.clair:hover{background:#000; color:#fff}
.btn.paypal{background:#ffc439; color:#111; border-color:#e5a400}
.btn.paypal:hover{background:#fff}

/* --- tableaux, étapes, blocs, questions ---------------------------------- */
.tbl{width:100%; border-collapse:collapse; font-size:.92rem; color:#333}
.tbl th{text-align:left; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:#999; font-weight:500; padding:.9rem 1rem .9rem 0; border-bottom:1px solid #eaeaea}
.tbl td{padding:.9rem 1rem .9rem 0; border-bottom:1px solid #eaeaea; vertical-align:top;
  border-left:0; border-right:0}
.tbl td.n{text-align:right; white-space:nowrap; padding-right:0}
.tbl tr:last-child td{border-bottom:0}
.tbl-boite{overflow-x:auto}

.etapes{list-style:none; padding:0; margin:0; counter-reset:e}
.etapes li{display:grid; grid-template-columns:2.4rem 1fr; gap:1.4rem; padding:1.3rem 0;
  border-bottom:1px solid #eaeaea}
.etapes li:last-child{border-bottom:0}
.etapes li::before{counter-increment:e; content:counter(e,decimal-leading-zero); color:#bbb;
  font-size:.85rem; padding-top:.15rem}
.etapes h3{font-size:1rem; font-weight:500; margin-bottom:.2rem; color:#333}
.etapes p{color:#666; font-size:.94rem; margin:0; max-width:72ch}

.blocs{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.bloc .vue{aspect-ratio:3/2; overflow:hidden; background:#f5f5f5; margin-bottom:1rem}
.bloc .vue img{width:100%; height:100%; object-fit:cover}
.bloc .quand{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:#aaa;
  margin-bottom:.4rem}
.bloc h3{font-size:1.05rem; font-weight:500; margin-bottom:.3rem; color:#333}
.bloc p{color:#666; font-size:.94rem; margin:0}

.questions{max-width:74ch}
.questions details{border-bottom:1px solid #eaeaea}
.questions summary{padding:1.1rem 0; cursor:pointer; list-style:none; display:flex; gap:1rem;
  align-items:baseline; color:#333}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+"; margin-left:auto; color:#999}
.questions details[open] summary::after{content:"–"}
.questions .rep{padding-bottom:1.2rem; color:#666; font-size:.95rem}
.questions .rep p{margin:0}

.note{border-left:2px solid #333; padding:1rem 1.4rem; margin:0 0 1.6rem; background:#f5f5f5;
  max-width:74ch}
.note p{margin:0; font-size:.94rem; color:#555}

/* --- infolettre ---------------------------------------------------------- */
.lettre{border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; padding:2.6rem 0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); gap:2rem;
  align-items:center}
.lettre h2{font-size:1.4rem; font-weight:400; margin-bottom:.4rem; color:#333}
.lettre p{color:#666; font-size:.94rem; margin:0; max-width:46ch}
.lettre form{display:flex; gap:.6rem; flex-wrap:wrap}
.lettre input{flex:1; min-width:180px; padding:.85rem 1rem; border:1px solid #eaeaea;
  font:inherit; font-size:.92rem; color:#333; background:#fff}
.lettre input:focus{border-color:#333; outline:none}
.lettre .btn{width:auto; margin:0; padding:.85rem 1.6rem}
.lettre .rgpd{font-size:.76rem; color:#aaa; margin-top:.6rem}

/* --- liens du pied de page ----------------------------------------------- */
.pied-liens{margin-top:1rem; font-size:.85rem; color:#bbb}
.pied-liens a{color:#666; text-decoration:none}
.pied-liens a:hover{color:#000}

/* --- adaptations, alignées sur les seuils de style.css ------------------- */
@media (max-width:1200px){
  .cartes,.blocs{grid-template-columns:repeat(2,1fr)}
  .grille-serie{columns:2}
}
@media (max-width:1024px){
  .contenu-page,.contenu-large{padding-top:6.5rem}
  .fiche{grid-template-columns:1fr; gap:2rem}
  .fiche .visuel{position:static}
  .lettre{grid-template-columns:1fr}
  .bandeau-une h1{font-size:2rem}
  .titre{font-size:1.9rem}
}
@media (max-width:700px){
  .cartes,.blocs{grid-template-columns:1fr; gap:1.5rem}
  .grille-serie{columns:1}
  .visio{padding:1.2rem}
  .visio .fermer{top:1rem; right:1rem}
  .visio .prec{left:.5rem}
  .visio .suiv{right:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .carte .vue img,.vignette img,.btn{transition:none}
}

/* --- liens secondaires de la page d'accueil ------------------------------ */
.entrees{display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; margin-top:2.2rem}
.entrees a{color:#666; text-decoration:none; font-size:.9rem; border-bottom:1px solid transparent;
  padding-bottom:2px}
.entrees a:hover{color:#000; border-bottom-color:#000}
@media (max-width:1024px){.entrees{margin-top:1.4rem; gap:1rem}}

/* --- mention de droits sous une grille de série -------------------------- */
.note-droits{max-width:64ch; margin:1.6rem 0 0; font-size:.86rem; line-height:1.6;
  color:#8a8a8a; border-left:2px solid #e4e4e4; padding-left:1rem}

/* --- un seul mot au survol -----------------------------------------------
   style.css affiche « Voir la photo » sur les grilles, ajouts.css affichait
   « Agrandir » sur les séries. Les deux ouvrent la même visionneuse : un
   seul libellé, partout. */
.photo-link::after{content:"Agrandir"}