/*
Theme Name: Projet Cercle
Description: Thème sur mesure pour Projet Cercle — vitrine de poteries d'Anne-Sophie
             Gervais, bilingue FR/EN par Polylang, sans commerce en ligne. Grille
             régulière sur fond Sand Dollar, typographie système uniquement (aucune
             police externe : la Loi 25 interdit d'exposer l'IP des visiteurs à un
             tiers comme Google Fonts).
Author: Anne-Sophie Gervais
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: projet-cercle
Tags: portfolio, translation-ready, accessibility-ready
*/

/* ==========================================================================
   Jetons. Les sept couleurs sont celles d'Anne-Sophie (question 24) ; --enc et
   --doux sont le même brun-gris qu'elle a choisi, simplement assombris pour
   passer le contraste AA sur le sable. Ne pas réintroduire #6b6356 pour du
   texte : il ne donne que 3,83 sur #decdbe. Voir CLAUDE.md.
   ========================================================================== */
:root{
  --sable:#decdbe;      /* fond — Pantone Sand Dollar 13-1106 */
  --enc:#3d3730;        /* texte courant — 7,60 sur le sable */
  --doux:#595245;       /* texte secondaire — 5,00 sur le sable */
  --trait:#cdbfa8;      /* filets */
  --pale:#e4e2dd;       /* seul autre aplat : le bandeau de la Colonie */
  --sauge:#b4c4a4;      /* pastille « disponible » */
  --bleu:#b8cade;       /* pastille « en boutique » */
  --taupe:#8f7d6b;      /* pastille « vendue » */
  --photo-vide:linear-gradient(168deg,#f5f2ed,#e9e3d9);

  --page:1240px;
  --marge:clamp(18px,4vw,40px);
}

/* Pas de thème sombre : la maquette approuvée est une surface sable unique, et
   l'inverser rendrait les photos — qui doivent être plus claires que le fond —
   plus sombres que lui. Déclaré explicitement pour que les contrôles de
   formulaire du navigateur restent clairs eux aussi. */
:root{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--sable);
  color:var(--enc);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,h4{margin:0; font-weight:400; text-wrap:balance; letter-spacing:-.01em; line-height:1.2}
p{margin:0}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--enc); outline-offset:3px}

/* Lien d'évitement — obligatoire pour la navigation au clavier. */
.evitement{position:absolute; left:-9999px; top:0; background:var(--pale); color:var(--enc);
  padding:10px 16px; z-index:10}
.evitement:focus{left:var(--marge)}

.seul-lecteur{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap}

.zone{max-width:var(--page); margin-inline:auto; padding-inline:var(--marge)}

/* ---------- En-tête : marque à gauche, menu et langues à droite ------------ */
.tete{padding-block:clamp(18px,2.6vw,28px) clamp(14px,2.2vw,22px)}
.tete-ligne{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px clamp(16px,3vw,32px)}
.marque{display:flex; align-items:center; gap:9px; text-decoration:none}
.marque-cercle{width:17px; height:17px; border:1.3px solid currentColor; border-radius:50%; flex:none}
/* Le mot-symbole est le SEUL élément en serif de tout le site : c'est ce
   contraste qui fait exister la marque en attendant un vrai logo. */
.marque-mot{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-size:clamp(17px,2.1vw,23px); letter-spacing:.04em; font-weight:400}
.tete-filet{height:1px; background:var(--trait); max-width:var(--page); margin-inline:auto}

.menu{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px clamp(14px,2.4vw,28px);
  font-size:clamp(12px,1.25vw,13px); color:var(--doux); list-style:none; margin:0; padding:0}
.menu a{text-decoration:none}
.menu a:hover{text-decoration:underline}
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu [aria-current="page"]{color:var(--enc); border-bottom:1px solid var(--enc); padding-bottom:2px}

.langues{display:flex; align-items:baseline; gap:8px; list-style:none; margin:0; padding:0;
  letter-spacing:.14em; font-size:11.5px; text-transform:uppercase}
.langues .current-lang a{color:var(--enc); font-weight:500; text-decoration:none}

/* ---------- Rythme vertical général --------------------------------------- */
.corps{padding-block:clamp(22px,3.4vw,40px) clamp(40px,6vw,72px);
  display:flex; flex-direction:column; gap:clamp(26px,4vw,48px)}

.etiquette{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--doux)}
.section-ligne{display:flex; justify-content:space-between; align-items:baseline; gap:16px}

/* ---------- Grille de la galerie ------------------------------------------ */
/* Régulière, à deux colonnes : elle encaisse dix nouvelles pièces par mois sans
   qu'Anne-Sophie ait à recomposer la page. C'est la raison du choix. */
.grille{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,3vw,38px);
  list-style:none; margin:0; padding:0}
.vignette{display:flex; flex-direction:column; gap:9px}
.vignette a{text-decoration:none; display:flex; flex-direction:column; gap:9px}
.photo{aspect-ratio:4/5; background:var(--photo-vide); overflow:hidden}
.photo img{width:100%; height:100%; object-fit:cover}
.photo-large{aspect-ratio:16/9}
.legende{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:clamp(12px,1.2vw,13px)}
/* Le numéro est un champ TEXTE LIBRE : tabular-nums ne fait qu'aligner ce qui
   se trouve être chiffré, rien n'y suppose une séquence. */
.legende .numero{color:var(--doux); font-variant-numeric:tabular-nums}

/* ---------- Bandeau de la Colonie ----------------------------------------- */
/* Deux colonnes volontairement séparées : à gauche ce qu'Anne-Sophie remet, à
   droite ce que le visiteur peut donner lui-même. Rien n'est encaissé ici. */
.colonie{background:var(--pale); border:1px solid #d3cec4; padding:clamp(18px,3.4vw,40px);
  display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(20px,4vw,48px); align-items:start}
.colonie h2{font-size:clamp(16px,1.9vw,21px); line-height:1.35}
.colonie p{margin-top:8px; font-size:clamp(12.5px,1.25vw,13.5px); color:var(--doux); max-width:46ch}
.barometre{display:flex; flex-direction:column; gap:8px}
.barometre-piste{height:3px; background:#cdc9c1; position:relative}
.barometre-part{position:absolute; inset:0 auto 0 0; background:var(--doux)}
.barometre-chiffres{display:flex; justify-content:space-between;
  font-size:clamp(12px,1.2vw,13px); font-variant-numeric:tabular-nums}
.lien-souligne{display:inline-block; margin-top:14px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:3px;
  text-decoration:none}

/* ---------- Fiche d'une pièce --------------------------------------------- */
.fiche{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(20px,4vw,52px)}
.fiche-photos{display:flex; flex-direction:column; gap:clamp(10px,1.6vw,16px)}
.fiche-vignettes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.6vw,16px)}
.fiche-vignettes .photo{aspect-ratio:1/1}
.fiche h1{font-size:clamp(21px,2.7vw,32px); margin-top:10px}
.fiche-histoire{margin-top:14px; font-size:clamp(13px,1.3vw,14.5px); color:var(--doux); max-width:44ch}

/* L'ordre des lignes est celui qu'Anne-Sophie a demandé, révisé le 2026-09-12 :
   numéro, matériel, technique, prix, puis la disponibilité en dernier. */
.details{margin:clamp(20px,3vw,32px) 0 0; display:flex; flex-direction:column}
.details > div{display:flex; justify-content:space-between; gap:16px; padding:10px 0;
  border-top:1px solid var(--trait); font-size:clamp(12.5px,1.25vw,13.5px)}
.details > div:last-child{border-bottom:1px solid var(--trait)}
.details dt{color:var(--doux)}
.details dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.details .dispo dd{display:inline-flex; align-items:center; gap:7px; text-align:left}

/* La pastille ne porte JAMAIS le sens à elle seule : le mot est toujours écrit
   à côté. Elle est purement décorative, d'où aria-hidden dans le gabarit. */
.pastille{width:7px; height:7px; border-radius:50%; flex:none;
  box-shadow:0 0 0 1px rgba(61,55,48,.22); background:var(--sauge)}
.pastille.en-boutique{background:var(--bleu)}
.pastille.vendue{background:var(--taupe)}

/* ---------- Pages de texte et journal ------------------------------------- */
.texte{max-width:64ch; display:flex; flex-direction:column; gap:1em}
.texte h1{font-size:clamp(24px,3.4vw,36px)}
.texte h2{font-size:clamp(18px,2.2vw,24px); margin-top:.6em}
.texte a{color:var(--enc)}
.texte blockquote{margin:0; padding-left:16px; border-left:2px solid var(--trait); color:var(--doux)}
.texte figure{margin:0}

.liste-articles{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.liste-articles > li{border-top:1px solid var(--trait); padding-block:clamp(14px,2vw,20px)}
.liste-articles > li:last-child{border-bottom:1px solid var(--trait)}
.article-date{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux)}
.article-titre{font-size:clamp(17px,2vw,22px); margin-top:6px}
.article-titre a{text-decoration:none}
.article-titre a:hover{text-decoration:underline}

/* ---------- Pagination ---------------------------------------------------- */
/* Prévue dès maintenant : 5 à 10 pièces par mois, la 2e année en demandera. */
.pagination{display:flex; gap:14px; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; border-top:1px solid var(--trait); padding-top:18px}
.pagination .current{border-bottom:1px solid var(--enc)}

/* ---------- Formulaire de contact ----------------------------------------- */
.contact{max-width:44ch; display:flex; flex-direction:column; gap:4px}
.contact p{display:flex; flex-direction:column; gap:6px; margin-block:10px}
.contact label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux)}
.contact input[type="text"],
.contact input[type="email"],
.contact textarea{
  font:inherit; color:var(--enc); background:#f3ece4;
  border:1px solid var(--trait); border-radius:0; padding:10px 12px; width:100%;
}
.contact textarea{resize:vertical}
.contact input:focus-visible,.contact textarea:focus-visible{outline:2px solid var(--enc); outline-offset:1px}
.contact-envoyer{
  align-self:flex-start; font:inherit; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--enc); background:transparent; cursor:pointer;
  border:0; border-bottom:1px solid var(--enc); border-radius:0; padding:0 0 3px;
}
.contact-piece{font-size:13px; color:var(--doux)}
.contact-erreur{border-left:2px solid var(--taupe); padding:8px 0 8px 14px; font-size:13.5px}
.contact-succes{border-left:2px solid var(--sauge); padding:8px 0 8px 14px; max-width:44ch}

/* Le leurre anti-pourriel. Déplacé hors de l'écran plutôt que mis en
   `display:none` ou `visibility:hidden` : plusieurs robots sautent justement
   les champs masqués de cette façon, et le leurre ne servirait alors à rien.
   Hors écran, il reste un champ « normal » à leurs yeux — et il est retiré du
   clavier et des lecteurs d'écran par tabindex et aria-hidden dans le
   gabarit, donc aucune visiteuse ne peut le remplir par accident. */
.contact-leurre{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* ---------- Pied ---------------------------------------------------------- */
.pied{border-top:1px solid var(--trait); padding-block:clamp(16px,2.4vw,24px);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 24px;
  font-size:clamp(11.5px,1.15vw,12.5px); color:var(--doux)}
.pied a{color:inherit}

/* ---------- Étroit -------------------------------------------------------- */
@media (max-width:640px){
  .grille,.colonie,.fiche{grid-template-columns:1fr}
  .corps{gap:32px}
}