/*
Theme Name: Clément Chambaud
Theme URI: https://www.clementchambaud.com
Description: Thème enfant de Blocksy pour clementchambaud.com. Fond blanc, Sansita et Nunito Sans, en-tête à trois zones, galeries en mosaïque justifiée ou en colonnes, diaporama plein écran, pied de page avec réseaux. Contient aussi les correctifs de performance issus de l'audit.
Author: Refonte 2026
Template: blocksy
Version: 2.1.0
Requires PHP: 8.1
Text Domain: clement-child
*/

/* =====================================================================
   SOMMAIRE
     1.  Jetons — couleurs, polices, rythme
     2.  Polices locales
     3.  Base typographique
     4.  Utilitaires
     5.  En-tête
     6.  Menu mobile
     7.  Icônes de réseaux
     8.  Diaporama plein écran (accueil)
     9.  Galerie A — mosaïque justifiée
     10. Galerie B — colonnes aérées
     11. Cartels et légendes
     12. Journal
     13. Formulaire
     14. Pied de page
     15. WooCommerce
     16. Compatibilité Elementor
     17. Accessibilité et mouvement
   ===================================================================== */


/* =====================================================================
   1. JETONS
   ===================================================================== */
:root{
  --cc-paper:#ffffff;
  --cc-wall:#fafaf9;
  --cc-ink:#2b2b2b;
  --cc-ink-soft:#5c5c5a;
  --cc-muted:#8f8f8a;
  --cc-line:#e6e6e2;
  --cc-line-2:#cfcfc9;

  --cc-serif:"Sansita","Iowan Old Style",Georgia,"Times New Roman",serif;
  --cc-sans:"Nunito Sans","Helvetica Neue",Arial,sans-serif;

  --cc-pad:clamp(18px,3.4vw,44px);
  --cc-max:1180px;
  --cc-header-h:clamp(58px,7vw,74px);

  /* Galeries */
  --cc-gap:clamp(10px,1.4vw,20px);
  --cc-row:20rem;        /* hauteur de rangée visée en mosaïque justifiée */
  --cc-col-min:19rem;    /* largeur mini d'une colonne aérée */
}


/* =====================================================================
   2. POLICES LOCALES
   Déposer les .woff2 dans assets/fonts/ (voir le README de ce dossier).
   Tant qu'ils ne sont pas là, les polices de repli s'appliquent :
   le site reste lisible, rien ne casse.
   ===================================================================== */
@font-face{font-family:"Nunito Sans";src:url("assets/fonts/nunito-sans-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("assets/fonts/nunito-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("assets/fonts/nunito-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Sansita";src:url("assets/fonts/sansita-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sansita";src:url("assets/fonts/sansita-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}


/* =====================================================================
   3. BASE TYPOGRAPHIQUE
   ===================================================================== */
body{
  background:var(--cc-paper);
  color:var(--cc-ink);
  font-family:var(--cc-sans);
  font-size:16px;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:var(--cc-serif);
  font-weight:400;
  letter-spacing:-.005em;
  text-wrap:balance;
}
h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1}
h2{font-size:clamp(1.4rem,2.5vw,1.85rem);line-height:1.2}
h3{font-size:1.16rem}
p{margin:0 0 1.15em}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:where(a,button,input,select,textarea):focus-visible{
  outline:1px solid var(--cc-ink);
  outline-offset:3px;
}


/* =====================================================================
   4. UTILITAIRES
   Classes à saisir dans Elementor (Avancé → Classes CSS) ou dans
   l'éditeur de blocs (Avancé → Classe(s) CSS additionnelle(s)).
   ===================================================================== */

/* Petites capitales espacées — la signature du site */
.cc-label,
.cc-label p,
.cc-label .elementor-heading-title{
  font-family:var(--cc-sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--cc-muted);
  line-height:1.7;
  margin:0;
}

/* Bande de fond gris très clair */
.cc-wall,
.cc-wall.elementor-element{background:var(--cc-wall)}

/* Filet de séparation */
.cc-rule{border:0;border-top:1px solid var(--cc-line);margin:clamp(40px,5vw,72px) 0}

/* Titre de section avec filet au-dessus */
.cc-sectionhead,
.cc-sectionhead.elementor-element{border-top:1px solid var(--cc-ink);padding-top:13px}

/* Largeur de lecture confortable */
.cc-prose{max-width:60ch}

/* Bouton */
.cc-btn,
.wp-block-button__link,
.elementor-widget-button .elementor-button{
  font-family:var(--cc-sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:14px 26px;
  border:1px solid var(--cc-ink);
  border-radius:0;
  background:transparent;
  color:var(--cc-ink);
  display:inline-block;
  transition:background .18s,color .18s;
}
.cc-btn:hover,
.wp-block-button__link:hover,
.elementor-widget-button .elementor-button:hover{
  background:var(--cc-ink);
  color:var(--cc-paper);
}


/* =====================================================================
   5. EN-TÊTE
   Structure visée : navigation à gauche, nom au centre, réseaux à droite.
   Dans Blocksy, cela se règle dans le constructeur d'en-tête (trois zones).
   Ces règles ne font que l'habiller et garantir qu'il tient sur une ligne.
   ===================================================================== */
.ct-header [data-row="middle"]{border-bottom:1px solid var(--cc-line)}

/* Entrées de menu : capitales espacées, jamais coupées */
.ct-header .menu-item > a,
.ct-header .ct-menu-link,
.cc-nav a{
  font-family:var(--cc-sans);
  font-size:clamp(.7rem,.85vw,.78rem);
  font-weight:400;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--cc-ink);
}
.ct-header .menu > li{white-space:nowrap}

/* Nom du site au centre */
.site-title,
.ct-logo-container .site-title a,
.cc-wordmark{
  font-family:var(--cc-serif);
  font-weight:700;
  font-size:clamp(.92rem,1.45vw,1.34rem);
  letter-spacing:clamp(.16em,.28vw,.32em);
  text-transform:uppercase;
  white-space:nowrap;
  /* compense l'interlettrage ajouté après la dernière lettre */
  padding-left:clamp(.16em,.28vw,.32em);
}

/* Garde-fou : rien ne doit forcer l'en-tête sur deux lignes */
.ct-header [data-column]{min-width:0}


/* =====================================================================
   6. MENU MOBILE
   Blocksy gère l'ouverture et le seuil de bascule (à régler vers 1080 px).
   Le panneau hors-écran de Blocksy arrive en fond presque noir
   (rgba(18,21,25,.98)). On le ramène au blanc du site.
   ===================================================================== */
#offcanvas .ct-panel-inner,
.ct-panel-inner{
  background:var(--cc-paper);
  color:var(--cc-ink);
}
#offcanvas .ct-toggle-close,
.ct-panel .ct-toggle-close{color:var(--cc-ink)}

#offcanvas .menu-item > a,
.ct-panel-content .menu-item > a{
  font-family:var(--cc-serif);
  font-weight:400;
  font-size:1.6rem;
  letter-spacing:0;
  text-transform:none;
}
#offcanvas .menu-item > a{color:var(--cc-ink)}
#offcanvas .menu-item{border-bottom:1px solid var(--cc-line)}


/* =====================================================================
   7. ICÔNES DE RÉSEAUX
   Utiliser le raccourci [cc_reseaux] dans un élément HTML de l'en-tête
   ou du pied de page Blocksy, ou dans un widget Raccourci d'Elementor.
   Il inclut l'icône « bagues » vers Los Caballeros, que Blocksy ne
   propose pas nativement.
   ===================================================================== */
.cc-social{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:clamp(9px,1.05vw,16px);
}
.cc-social a{
  display:inline-flex;
  color:var(--cc-ink);
  opacity:.85;
  transition:opacity .18s;
}
.cc-social a:hover,
.cc-social a:focus-visible{opacity:1}
.cc-social svg{width:21px;height:21px;display:block}

/* Version pied de page : un peu plus grandes, centrées */
.cc-social--footer{justify-content:center;gap:22px}
.cc-social--footer svg{width:23px;height:23px}


/* =====================================================================
   8. DIAPORAMA PLEIN ÉCRAN — page d'accueil
   Balisage attendu : un conteneur .cc-slideshow contenant des <figure>,
   chacune avec une <img>. Le script assets/js/cc-slideshow.js ajoute
   les flèches, les pastilles et la rotation.
   ===================================================================== */
.cc-slideshow{
  position:relative;
  height:calc(100svh - var(--cc-header-h));
  min-height:420px;
  overflow:hidden;
  background:#111;
}
.cc-slideshow figure{position:absolute;inset:0;margin:0}
.cc-slideshow img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.6s ease;
}
.cc-slideshow figure.is-on img{opacity:1}

/* Voile bas, pour la lisibilité de la ligne de titre */
.cc-slideshow::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.16) 0%,
    rgba(0,0,0,0) 26%,
    rgba(0,0,0,0) 58%,
    rgba(0,0,0,.52) 100%);
}

/* Flèches */
.cc-slideshow__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:#fff;
  opacity:0;transition:opacity .25s;
}
.cc-slideshow:hover .cc-slideshow__arrow,
.cc-slideshow__arrow:focus-visible{opacity:.9}
.cc-slideshow__arrow:hover{opacity:1}
.cc-slideshow__arrow--prev{left:clamp(6px,1.4vw,20px)}
.cc-slideshow__arrow--next{right:clamp(6px,1.4vw,20px)}
.cc-slideshow__arrow svg{width:26px;height:26px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
@media(max-width:820px){.cc-slideshow__arrow{opacity:.75}}

/* Ligne de titre en bas de l'image */
.cc-baseline{
  position:absolute;left:0;right:0;bottom:clamp(20px,3.4vw,40px);z-index:3;
  padding:0 var(--cc-pad);text-align:center;color:#fff;
}
.cc-baseline h1{
  font-family:var(--cc-serif);font-weight:400;
  font-size:clamp(.98rem,1.9vw,1.32rem);
  line-height:1.35;margin:0;color:#fff;
  text-shadow:0 1px 22px rgba(0,0,0,.55);
}
.cc-baseline p{
  font-family:var(--cc-sans);font-size:.7rem;font-weight:400;
  letter-spacing:.19em;text-transform:uppercase;
  margin:.75em 0 0;color:rgba(255,255,255,.88);
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}

/* Pastilles */
.cc-slideshow__dots{
  position:absolute;left:0;right:0;bottom:clamp(8px,1.4vw,14px);z-index:4;
  display:flex;justify-content:center;gap:7px;
}
.cc-slideshow__dots button{
  width:5px;height:5px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.42);
  transition:background .25s,transform .25s;
}
.cc-slideshow__dots button[aria-current="true"]{background:#fff;transform:scale(1.35)}


/* =====================================================================
   9. GALERIE A — MOSAÏQUE JUSTIFIÉE
   Pour les grandes galeries de portfolio.
   Rangées de hauteur égale, largeurs variables, bords alignés,
   aucun recadrage. Chaque image reçoit sa proportion en variable CSS
   (--cc-ar), posée par assets/js/cc-gallery.js à partir des attributs
   width et height que WordPress écrit déjà : aucun saut de mise en page.

   Classe à ajouter au bloc Galerie : cc-gallery cc-gallery--justifiee
   ===================================================================== */
.cc-gallery--justifiee.wp-block-gallery,
.cc-gallery--justifiee{
  display:flex;
  flex-wrap:wrap;
  gap:var(--cc-gap);
}
.cc-gallery--justifiee .wp-block-image,
.cc-gallery--justifiee > figure{
  margin:0;
  /* largeur naturelle à la hauteur de rangée visée… */
  flex-basis:calc(var(--cc-ar,1.5) * var(--cc-row));
  /* …puis on répartit le reste proportionnellement, ce qui aligne les hauteurs */
  flex-grow:calc(var(--cc-ar,1.5) * 100);
  min-width:min(100%,170px);
}
.cc-gallery--justifiee .wp-block-image img,
.cc-gallery--justifiee > figure img{
  width:100%;
  height:auto;
  aspect-ratio:var(--cc-ar,1.5);
  object-fit:cover;
  transition:opacity .3s;
}
.cc-gallery--justifiee .wp-block-image:hover img{opacity:.85}

/* Dernière rangée : elle garde sa taille naturelle au lieu de s'étirer */
.cc-gallery--justifiee::after{content:"";flex-grow:999999999}

/* Hauteur de rangée plus basse sur petit écran */
@media(max-width:700px){:root{--cc-row:13rem}}


/* =====================================================================
   10. GALERIE B — COLONNES AÉRÉES
   Pour les séries et les expositions : colonnes verticales, bas
   irrégulier, images plus grandes. Aucun script nécessaire.

   Classe à ajouter au bloc Galerie : cc-gallery cc-gallery--colonnes
   ===================================================================== */
.cc-gallery--colonnes.wp-block-gallery,
.cc-gallery--colonnes{
  display:block;
  columns:1;
  column-gap:var(--cc-gap);
  max-width:none;
}
@media(min-width:640px){.cc-gallery--colonnes{columns:2}}
@media(min-width:1100px){.cc-gallery--colonnes{columns:3}}
.cc-gallery--colonnes .wp-block-image,
.cc-gallery--colonnes > figure{
  break-inside:avoid;
  margin:0 0 var(--cc-gap);
  width:100% !important;
  display:block;
}
.cc-gallery--colonnes img{width:100%;height:auto}

/* Barre de navigation entre galeries */
.cc-galnav{border-top:1px solid var(--cc-ink);padding-top:14px;margin-top:clamp(26px,3.5vw,44px)}
.cc-galnav ul,
.cc-galnav .wp-block-navigation__container{
  display:flex;gap:clamp(12px,2vw,30px);flex-wrap:wrap;
  list-style:none;margin:0;padding:0;
}
.cc-galnav a{
  font-family:var(--cc-sans);font-size:.72rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cc-muted);
  text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;
}
.cc-galnav a:hover{color:var(--cc-ink)}
.cc-galnav .current-menu-item a,
.cc-galnav [aria-current]{color:var(--cc-ink);border-bottom-color:var(--cc-ink)}


/* =====================================================================
   11. CARTELS ET LÉGENDES
   ===================================================================== */
figcaption,
.wp-element-caption,
.elementor-widget-image figcaption,
.cc-cartel{
  font-family:var(--cc-sans);
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--cc-muted);
  margin-top:11px;
  line-height:1.7;
  text-align:left;
}
figcaption strong,
.cc-cartel strong{color:var(--cc-ink-soft);font-weight:600}

/* Fiche technique / références datées */
.cc-fiche,.cc-creds{border-top:1px solid var(--cc-line-2)}
.cc-fiche > *,.cc-creds > *{border-bottom:1px solid var(--cc-line-2);padding:14px 0;margin:0}
.cc-yr{
  font-family:var(--cc-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.08em;color:var(--cc-muted);font-variant-numeric:tabular-nums;
}

/* Étapes numérotées — la numérotation se recalcule toute seule */
.cc-steps{counter-reset:cc-step;list-style:none;padding:0;margin:0}
.cc-steps > *{
  counter-increment:cc-step;
  padding:clamp(20px,2.6vw,30px) 0;
  border-bottom:1px solid var(--cc-line);
  margin:0;gap:clamp(10px,2.5vw,40px);align-items:baseline;
}
.cc-steps > *:first-child{border-top:1px solid var(--cc-line)}
.cc-steps > *::before{
  content:counter(cc-step,decimal-leading-zero);
  flex:0 0 auto;padding-top:.35em;
  font-family:var(--cc-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;color:var(--cc-muted);font-variant-numeric:tabular-nums;
}
@media(max-width:781px){
  .cc-steps > *{display:flex;flex-wrap:wrap}
  .cc-steps > *::before{flex-basis:100%;margin-bottom:6px}
}


/* =====================================================================
   12. JOURNAL
   Index : une histoire par écran, à la manière d'une couverture.
   Classe sur le conteneur de la boucle : cc-journal
   ===================================================================== */
.cc-journal .wp-block-post-template{display:block;margin:0;padding:0;list-style:none}
.cc-journal .wp-block-post-template > li{
  margin:0 0 clamp(60px,9vw,130px);
  text-align:center;
}
.cc-journal .wp-block-post-featured-image{margin:0 0 26px}
.cc-journal .wp-block-post-featured-image img{width:100%;object-fit:cover}
.cc-journal .wp-block-post-date{
  font-family:var(--cc-sans);font-size:.7rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--cc-muted);margin-bottom:10px;
}
.cc-journal .wp-block-post-title{
  font-family:var(--cc-serif);font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.15;margin:0 0 .4em;
}
.cc-journal .wp-block-post-excerpt{max-width:56ch;margin:0 auto;color:var(--cc-ink-soft)}
.cc-journal .wp-block-post-excerpt__more-link{
  display:inline-block;margin-top:14px;
  font-family:var(--cc-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cc-ink);
  border-bottom:1px solid var(--cc-line-2);padding-bottom:3px;text-decoration:none;
}
.cc-journal .wp-block-post-excerpt__more-link:hover{border-bottom-color:var(--cc-ink)}

/* Article : largeur de lecture, images qui débordent */
.cc-article{max-width:66ch;margin-inline:auto}
.cc-article .alignwide,
.cc-article .alignfull{max-width:none}
.cc-article > * + *{margin-top:1.15em}


/* =====================================================================
   13. FORMULAIRE
   Classes neutres : fonctionne avec la plupart des extensions légères.
   ===================================================================== */
.cc-form label{
  font-family:var(--cc-sans);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cc-muted);
  display:block;margin-bottom:7px;
}
.cc-form input[type="text"],
.cc-form input[type="email"],
.cc-form input[type="tel"],
.cc-form select,
.cc-form textarea{
  font-family:var(--cc-sans);font-size:1rem;color:var(--cc-ink);
  border:0;border-bottom:1px solid var(--cc-line-2);background:transparent;
  padding:10px 0;border-radius:0;width:100%;
}
.cc-form textarea{min-height:140px;resize:vertical;line-height:1.6}
.cc-form input:focus,.cc-form select:focus,.cc-form textarea:focus{
  border-bottom-color:var(--cc-ink);outline:none;
}
.cc-form .cc-consent{
  display:flex;gap:11px;align-items:flex-start;
  font-size:.9rem;color:var(--cc-ink-soft);max-width:52ch;
  letter-spacing:0;text-transform:none;font-weight:400;
}


/* =====================================================================
   14. PIED DE PAGE
   Dans Blocksy : une seule colonne centrée, avec un élément HTML
   contenant [cc_reseaux] et un menu de pied de page.
   ===================================================================== */
.ct-footer,
.cc-footer{
  background:var(--cc-wall);
  border-top:1px solid var(--cc-line);
  text-align:center;
}
.cc-footer{padding:clamp(40px,6vw,72px) var(--cc-pad) clamp(26px,3vw,36px)}
.cc-footer .cc-wordmark{display:inline-block;margin-bottom:22px}
.cc-footer .cc-social{margin-bottom:26px}
.cc-footer-links,
.ct-footer .menu{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:8px 22px;margin:0 0 20px;padding:0;list-style:none;
}
.cc-footer-links a,
.ct-footer .menu a{
  font-family:var(--cc-sans);font-size:.74rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--cc-ink-soft);
  text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;
}
.cc-footer-links a:hover,
.ct-footer .menu a:hover{color:var(--cc-ink);border-bottom-color:var(--cc-ink)}
.cc-legal,
.ct-footer .ct-copyright{
  font-family:var(--cc-sans);font-size:.72rem;
  letter-spacing:.06em;color:var(--cc-muted);margin:0;
}


/* =====================================================================
   15. WOOCOMMERCE — sobriété
   ===================================================================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--cc-serif);font-weight:400;font-size:1.06rem;
  letter-spacing:.01em;text-align:center;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{
  font-family:var(--cc-sans);font-size:.84rem;font-weight:600;
  letter-spacing:.06em;color:var(--cc-ink-soft);text-align:center;
}
.woocommerce ul.products li.product{
  border:1px solid var(--cc-line);
  box-shadow:none;text-align:center;
}
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button{
  font-family:var(--cc-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;border-radius:0;
  background:var(--cc-ink);color:var(--cc-paper);
}
.woocommerce .button:hover{background:var(--cc-ink-soft);color:var(--cc-paper)}
.woocommerce .related.products{display:none}

/* Édition limitée : le stock restant est un argument de vente */
.woocommerce .stock{
  font-family:var(--cc-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cc-ink-soft);
}


/* =====================================================================
   16. COMPATIBILITÉ ELEMENTOR
   Dans Elementor, la classe saisie dans « Avancé → Classes CSS » se pose
   sur l'enveloppe du widget, jamais sur le texte. Ces règles font
   descendre l'identité jusqu'au contenu.
   ===================================================================== */
.elementor-widget-text-editor,
.elementor-widget-text-editor p{
  font-family:var(--cc-sans);
  color:var(--cc-ink-soft);
}
.elementor-widget-heading .elementor-heading-title{
  font-family:var(--cc-serif);font-weight:400;
}
.cc-gallery.wp-block-gallery{max-width:none}


/* =====================================================================
   17. ACCESSIBILITÉ ET MOUVEMENT
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .cc-slideshow img{transition:none}
  .cc-slideshow__dots button{transition:none}
  .cc-gallery--justifiee img{transition:none}
  .elementor-background-slideshow__slide__image{animation:none !important}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}