/*
Theme Name:  CARON Communications graphiques
Theme URI:   https://caroncom.ca
Description: Thème de blocs dédié au portfolio de Sophie Caron, designer graphique. Basé sur la maquette « Nouveau site Sophie Caron ».
Author:      ZAA
Author URI:  https://zaa.cc
Version:     1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: caroncom
*/

/* ============================================================
   VARIABLES
   Couleurs, polices et tailles viennent du theme.json
   (--wp--preset--*). Les alias ci-dessous évitent de dupliquer
   les valeurs dans le CSS repris de la maquette.
   ============================================================ */
:root {
  --white:      var(--wp--preset--color--white);
  --black:      var(--wp--preset--color--black);
  --black-soft: var(--wp--preset--color--black-soft);
  --ink:        var(--wp--preset--color--ink);
  --gray-text:  var(--wp--preset--color--gray-text);
  --gray-light: var(--wp--preset--color--gray-light);
  --gray-mid:   var(--wp--preset--color--gray-mid);
  --gray-line:  var(--wp--preset--color--gray-line);
  --light-text: var(--wp--preset--color--light-text);
  --accent:      var(--wp--preset--color--accent);
  --accent-dark: var(--wp--preset--color--accent-dark);

  --font-body:   var(--wp--preset--font-family--body);
  --font-script: var(--wp--preset--font-family--script);

  --shadow:   var(--wp--custom--shadow);
  --gutter:   var(--wp--preset--spacing--gutter);
  --grid-gap: var(--wp--preset--spacing--40);

  /* Contour des éléments d'interface (boutons et interrupteurs du widget
     d'accessibilité). Le gris de la maquette (--gray-line) est un gris de
     décor à 1,8:1 sur blanc : il ne suffit pas à délimiter un contrôle,
     qui demande 3:1 (WCAG 1.4.11). Celui-ci est à 4,5:1. */
  --ui-border: #767676;

  --font-scale: 1;
}

/* Widget d'accessibilité : mise à l'échelle du texte.

   En pourcentage et non en pixels : `100%` part de la taille que la
   personne a réglée dans son navigateur, `16px` l'écraserait. Quelqu'un
   qui a mis son navigateur à 20 px — le premier geste d'un lecteur
   malvoyant, bien avant tout widget — recevait quand même 16 px. Le
   rendu ne change pour personne d'autre : 16 px est la valeur par
   défaut de tous les navigateurs. */
html { font-size: calc(100% * var(--font-scale)); }

/* ============================================================
   ACCESSIBILITÉ — règles globales
   ============================================================ */

/* Contraste élevé : on fonce le gris de texte et les fonds pâles,
   et l'orange décoratif devient l'orange foncé (4,5:1 sur blanc). */
body.high-contrast {
  --gray-text:  #2B2C2C;
  --gray-light: #F4F5F5;
  --gray-mid:   #C8C9C9;
  --gray-line:  #6B6C6C;
  --light-text: #FFFFFF;
  --accent:     var(--accent-dark);
}
body.high-contrast .wp-block-image img,
body.high-contrast .cc-logos img { border: 1px solid #000; }
body.high-contrast .cc-form input,
body.high-contrast .cc-form textarea { border-bottom-width: 2px; }
/* Sur les fonds noirs, l'orange foncé serait trop sombre : on y garde
   l'orange vif, qui y atteint 6,2:1. */
body.high-contrast .cc-dark {
  --accent: var(--wp--preset--color--accent);
}

/* Indicateur de focus clavier visible partout. */
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 3px;
}
/* Sur fond noir, l'orange foncé se perd : contour orange vif. */
.cc-dark a:focus-visible,
.cc-dark input:focus-visible,
.cc-dark textarea:focus-visible,
.cc-dark button:focus-visible {
  outline-color: var(--wp--preset--color--accent);
}

/* Respect de « réduire les animations » du système. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Contenu masqué à l'œil, mais bien présent dans la page.
   `.invisible` est l'alias employé dans les motifs.

   Le texte reste dans le DOM : les lecteurs d'écran l'annoncent et les
   moteurs l'indexent normalement. C'est la seule façon sûre de masquer
   un titre — un `display:none` le retirerait de l'arbre d'accessibilité
   et Google le dévalue, parce qu'un texte destiné aux seuls robots
   relève du camouflage (cloaking). Ici le texte sert d'abord aux
   lecteurs d'écran : le référencement en profite, il n'en est pas le
   prétexte. */
.visually-hidden,
.invisible {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement.

   C'est celui de WordPress qui sert (« Aller au contenu »), pas un lien
   du thème : le cœur l'injecte de lui-même dans tout thème de blocs, et
   en écrire un second donnait deux liens identiques à traverser à la
   tabulation. On l'habille donc, sans le remplacer.

   Les sélecteurs portent les DEUX classes du cœur pour peser aussi lourd
   que sa feuille (wp-block-template-skip-link.css) ; la feuille du thème
   étant imprimée en dernier (cc_theme_styles_last), c'est elle qui
   l'emporte. Sans cela, le lien s'ouvrirait en gris clair sur gris —
   conforme, mais étranger à la maquette. */
.skip-link.screen-reader-text:focus {
  background-color: var(--black);
  color: #fff;
  top: 1rem;
  left: 1rem;
  padding: .75rem 1.5rem;
  font-weight: 700;
  text-decoration: none;
  z-index: 100000;
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

:where(.wp-site-blocks) > * {
  margin-block-start: 0;
}
.home .wp-site-blocks { margin-block-start: 0; } 
.boucle-portfolio {
  margin-block-start: 0;
}
/* Les liens de contenu sont soulignés : repérables sans dépendre de la
   seule couleur (WCAG 1.4.1). Les éléments d'interface sont exclus. */
.wp-block-post-content a:not(.wp-element-button),
.entry-content a:not(.wp-element-button) { text-decoration: underline; }

/* `:not(.wp-element-button)` ci-dessus plutôt qu'une exclusion dans la
   liste qui suit : un bouton posé DANS le contenu d'une page (le « Voir
   tous les projets » de l'accueil) était souligné, parce que
   `.wp-block-post-content a` pèse plus lourd que `.wp-block-button__link`.
   Les boutons des gabarits, eux, n'étaient pas touchés — d'où un défaut
   qui n'apparaissait que sur certaines pages. */
.wp-block-navigation a,
.wp-block-button__link,
.skip-link,
.cc-logos a,
.cc-header a,
.cc-footer a,
.pf-back,
.wp-block-post-title a { text-decoration: none; }

.wp-block-navigation-link a:hover { color: var(--accent-dark); text-decoration-color: var(--accent); text-decoration: underline;  }

/* Sur fond clair, l'orange vif ne passe pas le contraste du texte :
   les liens de contenu prennent l'orange foncé au survol.

   Les boutons sont exclus ici aussi. `:where()` ne pèse rien, si bien
   que cette règle valait `a:hover` — plus lourd que le survol défini par
   la variation de bouton dans theme.json, qui passe par
   `:root :where(…)`. Un bouton « Contour orange » posé dans le contenu
   virait donc à l'orange foncé au survol au lieu du noir voulu, sa
   bordure restant orange : deux couleurs pour un même geste. */
:where(.wp-block-post-content, .entry-content) a:not(.wp-element-button):hover { color: var(--black-soft); text-decoration-color: var(--accent) !important; text-decoration: underline;  }

/* Largeur de ligne confortable pour les paragraphes courants. */
.cc-measure { max-width: 64ch; }

/* Carré orange de la marque, posé à gauche d'un bloc de texte.
   Classe utilitaire : elle s'ajoute dans « Classes CSS additionnelles »
   du bloc, sans toucher au gabarit ni au balisage.

   La taille par défaut est « 1lh » : exactement la hauteur d’une ligne
   du bloc, donc la hauteur du texte. Pour un carré plus haut, redéfinir
   --carre (« 2lh » pour deux lignes, une valeur en rem pour une taille fixe).

   Le carré est un pseudo-élément : purement décoratif, il n'apparaît
   jamais dans l'arbre d'accessibilité et n'a donc rien à annoncer. */
.carre-orange-gauche {
  box-sizing: border-box;
  --carre: 1lh;
  position: relative;
  padding-left: calc(var(--carre) + clamp(0.75rem, 2vw, 1.5rem));
}
.carre-orange-gauche::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--carre);
  height: var(--carre);
  background: url("assets/images/caron-carre.svg") center / contain no-repeat;
}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.cc-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--wp--custom--header-border);
}
.cc-header-inner {
  max-width: 1680px;
  margin-inline: auto;
  padding: 24px var(--gutter);
  gap: 40px;
}
.cc-logo { margin: 0; }
.cc-logo img {
  display: block;
  width: clamp(220px, 24vw, 390px);
  height: auto;
}
.cc-nav .wp-block-navigation__container { gap: clamp(20px, 4.5vw, 74px); }
.cc-nav a {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.35;
  color: var(--ink);
}
.cc-nav a:hover,
.cc-nav .current-menu-item a { color: var(--accent-dark); text-decoration-color: var(--accent); text-underline-offset: 6px;   }

/* Menu déroulant sur petits écrans. */
.cc-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--white);
  padding: clamp(2rem, 6vw, 4rem);
}
.cc-nav .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.5rem; }

/* Coordonnées sous le menu : ajoutées au rendu du bloc Navigation
   (cc_nav_menu_infos), donc présentes aussi sur grand écran, où le menu
   n'est qu'une rangée de liens — elles n'y sont pas affichées. */
.cc-menu-infos { display: none; }
.cc-nav .wp-block-navigation__responsive-container.is-menu-open .cc-menu-infos {
  display: block;
  width: 100%;
  align-self: center;
  margin-top: 48px;
  text-align: center;
}
.cc-menu-infos img {
  display: block;
  margin: 0 auto 20px;
  width: 78px;
  height: auto;
}
.cc-menu-infos p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--gray-text);
}
.cc-menu-infos-nom { color: var(--ink); font-weight: 700; }
.cc-nav .wp-block-navigation__responsive-container.is-menu-open .cc-menu-infos a {
  font-size: inherit;
  color: var(--accent-dark);
}

@media (max-width: 781px) {
  .cc-header-inner { padding-block: 16px; gap: 16px; }
}

/* ============================================================
   HÉROS (présentation)
   ============================================================ */
.cc-hero {
  position: relative;
  overflow: hidden;
  background: var(--gray-light);
}
/* Cercle décoratif de la maquette. */
.cc-hero::before {
  content: "";
  position: absolute;
  left: -16vw;
  top: 40px;
  width: 44vw;
  height: 44vw;
  /* Purement décoratif : le gris pâle de la maquette convient, aucune
     information ne dépend de ce cercle. */
  border: 1px solid var(--gray-line);
  border-radius: 50%;
  pointer-events: none;
}
/* Le décor (cercle, barres orange) est en position absolue : seuls les
   blocs de contenu passent au-dessus. */
.cc-hero > *:not(.cc-accent-lines) { position: relative; }

/* Trois barres orange en haut à droite (décor). */
.cc-accent-lines {
  position: absolute;
  top: clamp(28px, 4vw, 34px);
  right: 0;
  width: min(42vw, 520px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
  z-index: 1;
}
.cc-accent-lines span {
  display: block;
  height: 10px;
  background: var(--wp--preset--color--accent);
  transform-origin: 100% 50%;
  animation: ccDraw 1.1s cubic-bezier(.16, .84, .32, 1) both;
}
.cc-accent-lines span:nth-child(1) { width: 100%; }
.cc-accent-lines span:nth-child(2) { width: 62%; animation-delay: .16s; }
.cc-accent-lines span:nth-child(3) { width: 30%; animation-delay: .32s; }
@keyframes ccDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Portrait rond en niveaux de gris. */
.cc-portrait { width: min(100%, 340px); margin: 0; }
.cc-portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(100%);
  background: var(--gray-mid);
}

.cc-hero-grid { align-items: start; }
.cc-hero-name { margin-top: 38px; }
.cc-hero-text { align-self: end; }

/* Signature manuscrite : image numérisée de la signature de la cliente,
   affichée à hauteur fixe pour rester lisible à toutes les largeurs. */
.cc-signature {
  align-self: flex-start;
  max-width: 100%;
}
.cc-signature img {
  height: 100px;
  width: auto;
  max-width: 100%;
  /* Une signature très large ne doit pas déborder sur mobile : sous la
     largeur disponible, c'est la largeur qui commande et la hauteur suit. */
  object-fit: contain;
}

@media (max-width: 781px) {
  .cc-hero::before { display: none; }
}

 
/* ============================================================
   SECTIONS SOMBRES (citation, collaborations, contact)
   ============================================================ */
.cc-dark { color: var(--white); }
.cc-dark :is(h1, h2, h3, h4, p, blockquote, label, li, cite) { color: inherit; }
.cc-dark a { color: var(--white); }
.cc-dark a:hover { color: var(--wp--preset--color--accent); }

.cc-quote blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  font-size: var(--wp--preset--font-size--quote);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}
/* Le bloc Citation enveloppe son texte dans un paragraphe : il doit
   hériter de la taille du blockquote plutôt que du texte courant. */
.cc-quote blockquote p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.cc-quote cite {
  display: block;
  margin-top: 18px;
  font-size: var(--wp--preset--font-size--large);
  font-style: normal;
  font-weight: 400;
  color: var(--light-text);
}
/* Le tiret d'attribution est décoratif : il vient du CSS pour ne pas
   être annoncé par les lecteurs d'écran. */
.cc-quote cite::before { content: "— "; }

/* ============================================================
   PORTFOLIO — mise en page reprise de la version DIVI
   Chaque projet est une suite de rangées de 2 ou 3 images,
   suivie de sa légende.
   ============================================================ */
/* Liste des projets — comportement de base (archive d'un client). */
.pf-list {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 7vw, 7.5rem);
}
.pf-list > li { margin-block-start: 0; }
.pf-item {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

/* ---- Bandes alternées de la page d'accueil ----------------------
   Chaque projet y est une bande pleine largeur, et les bandes
   alternent de couleur. Le fond appartient donc à l'élément de liste
   (qui court d'un bord à l'autre) et la marge latérale est portée par
   lui, pas par la section : sans quoi les fonds s'arrêteraient à la
   marge. Aucun écart entre les bandes, sinon le fond de page
   apparaîtrait entre elles et casserait l'alternance.

   Ces règles sont limitées à #portfolio : sur l'archive d'un client, la
   même liste affiche des titres de projet visibles, qui seraient noir
   sur noir dans une bande foncée. */
#portfolio .pf-list { gap: 0; }
#portfolio .pf-list > li {
  padding-inline: var(--gutter);
  background: var(--gray-light);
  padding-top: 1.4em;
  padding-bottom: 1.4em;
}
/* Bandes paires : le noir du portfolio. */
#portfolio .pf-list > li:nth-child(even) {
  background: var(--wp--preset--color--portfolio-dark);
  color: var(--white);
}
#portfolio .pf-item {
  gap: 0;
  /* Le contenu reste dans la grille du site, le fond non. */
  max-width: 1680px;
  margin-inline: auto;
}
/* Les colonnes d'une rangée s'alignent en haut : les images n'ont pas
   toutes le même rapport (couvertures verticales, doubles pages).
   Chaque rangée porte 25 px en haut et 25 px en bas : entre deux
   rangées, cela fait les 50 px voulus, et aux extrémités cela donne à
   la bande de couleur l'air qui lui manquerait autrement. */
.pf-item .wp-block-columns {
  align-items: flex-start;
  gap: var(--grid-gap);
  margin: 0;
  padding-block: 25px;
}
/* Le contenu du projet est en « flux » : on neutralise ses marges,
   l'espacement vient des rangées elles-mêmes. */
.pf-item .wp-block-post-content > * { margin-block-start: 0; }

/* Texte libre ajouté dans un projet (un mot sur la collaboration, un
   lien vers le client…) : il n'a pas le padding des rangées d'images,
   on le lui donne, et on limite la longueur de ligne. */
.pf-item .wp-block-post-content > *:not(.wp-block-columns) {
  padding-bottom: 25px;
  max-width: 90ch;
}
.pf-item .wp-block-column { display: flex; flex-direction: column; }
.pf-item figure { margin: 0; }
.pf-item img { display: block; width: 100%; height: auto; }

/* Ombre portée : reprise du réglage « box shadow » de la maquette DIVI,
   présente sur certains projets seulement. */
.pf-shadow img { box-shadow: var(--shadow); }

/* La légende est maintenant un paragraphe du contenu du projet : elle
   prend la taille courante (18 px), comme les textes que la cliente
   ajoute à côté. Seule la couleur la distingue — c'est une ligne de
   crédit, pas de la prose. */
.pf-caption,
.pf-caption p {
  margin: 0;
  color: var(--gray-text);
  max-width: 90ch;
}
/* La légende ferme la bande : 25 px sous elle, comme au-dessus. */
#portfolio .pf-caption { padding-bottom: 25px; }

/* Sur une bande foncée, le gris des légendes tomberait à 2,3:1 et
   l'orange foncé des liens à 3,5:1 : on passe au gris clair (15:1) et
   à l'orange vif (6:1). */
#portfolio .pf-list > li:nth-child(even) .pf-caption,
#portfolio .pf-list > li:nth-child(even) .pf-caption p {
  color: var(--light-text);
}
#portfolio .pf-list > li:nth-child(even) a:focus-visible {
  outline-color: var(--wp--preset--color--accent);
}

/* Liens dans le texte d'un projet sur bande foncée : blancs soulignés,
   orange vif au survol et au focus. L'encre du theme.json y serait
   illisible (1,2:1) et l'orange foncé n'atteint que 3,5:1. */
#portfolio .pf-list > li:nth-child(even) .wp-block-post-content a {
  color: var(--white);
  text-decoration: underline;
}
#portfolio .pf-list > li:nth-child(even) .wp-block-post-content a:hover,
#portfolio .pf-list > li:nth-child(even) .wp-block-post-content a:focus-visible {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
}
/* En contraste élevé, l'orange foncé serait trop sombre sur ces bandes :
   même règle que pour les sections noires. */
body.high-contrast #portfolio .pf-list > li:nth-child(even) {
  --accent: var(--wp--preset--color--accent);
  --gray-text: var(--light-text);
}
/* Sur l'accueil, la légende est le lien vers la fiche du projet : même
   apparence qu'un texte de légende, soulignée au survol et au focus
   pour rester repérable sans dépendre de la couleur. */
.pf-caption a {
  color: inherit;
  text-decoration: none;
}
.pf-caption a:hover,
.pf-caption a:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
}

/* Documents du projet (PDF), sous le texte.
   Pas de puce : ce sont des liens d'action, alignés comme le reste du
   contenu. Le format et le poids sont écrits DANS le lien — ils font
   partie de son nom accessible et disent ce qui va s'ouvrir avant le
   clic — donc ils sont soulignés avec lui : c'est une seule
   information, pas une note à côté. */
.pf-docs {
  list-style: none;
  margin: 0;
  padding-left: 0;
  max-width: 90ch;
}
.pf-docs li + li { margin-top: 10px; }
.pf-docs a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pf-doc-meta {
  font-size: var(--wp--preset--font-size--small);
  white-space: nowrap;
}

/* Sur mobile, les rangées à 3 colonnes deviennent 2 avant de passer à 1 :
   le comportement natif de core/columns saute directement à 1 colonne
   sous 781 px, trop brutal pour une grille de couvertures. */
@media (max-width: 781px) and (min-width: 480px) {
  .pf-item .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
    flex-direction: row;
  }
  .pf-item .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: calc(50% - var(--grid-gap) / 2) !important;
    flex-grow: 0;
  }
}

/* Titre du projet : absent de la maquette DIVI, il coiffe maintenant les
   documents et mène à la fiche du projet. Sur la fiche, c'est le H1. */
.pf-item .pf-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
}
.pf-item .pf-title a { color: var(--ink); text-decoration: none; }
.pf-item .pf-title a:hover,
.pf-item .pf-title a:focus-visible { color: var(--accent-dark); text-decoration: underline; }

/* Lien « → » vers la fiche du projet, en bas de bande.
   La cible fait au moins 44 px de haut : un glyphe seul serait une
   cible trop petite (WCAG 2.5.8 demande 24 px au minimum). */
#portfolio .pf-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 14px;
  padding-bottom: 0;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1;
  color: var(--accent-dark);
  text-decoration: none;
  transition: transform .2s, color .2s;
  margin-top:0;
}
#portfolio .pf-more:hover,
#portfolio .pf-more:focus-visible {
  color: var(--accent-dark);
  transform: translateX(6px);
}
/* Sur bande foncée, l'orange foncé n'atteint que 3,5:1 : orange vif. */
#portfolio .pf-list > li:nth-child(even) .pf-more,
#portfolio .pf-list > li:nth-child(even) .pf-more:hover,
#portfolio .pf-list > li:nth-child(even) .pf-more:focus-visible {
  color: var(--wp--preset--color--accent);
}

/* « Voir tous les projets » — fin de la section portfolio de l'accueil.

   Le bouton reste sur le FOND DE PAGE, hors des bandes alternées, et ce
   n'est pas qu'une question de rythme : c'est le seul fond où le contour
   orange tient dans ses deux états. Sur le gris `#E9EAEA` des bandes
   impaires l'orange vif ne fait que 2,9:1 — sous les 3:1 qu'exige la
   WCAG 1.4.11 pour le pourtour d'un contrôle ; sur les bandes foncées il
   monte à 6:1, mais le survol le fait passer au NOIR, invisible sur du
   noir. Sur blanc : 3,2:1 au repos (conforme, le texte étant du grand
   texte à 19 px gras) et 19,8:1 au survol, en noir. */
.pf-voir-tout {
  background: var(--white);
  padding-inline: var(--wp--preset--spacing--gutter);
  /* Collé à la dernière bande : l'écart entre blocs (1,4 em) laisserait
     voir une languette du fond de la liste sous la bande foncée. */
  margin-block-start: 0;
}

/* La flèche est un pseudo-élément : elle n'entre pas dans l'arbre
   d'accessibilité — un lecteur d'écran annonce « Voir tous les projets »
   et rien de plus — et l'éditeur de blocs ne peut pas la perdre en
   retouchant le libellé, ce qui arriverait à une balise écrite dans le
   contenu du bouton. */
.pf-voir-tout .wp-block-button__link::after {
  content: " \2192";
}
.pf-single { background: var(--gray-light); }
.pf-single-header { gap: .75rem; }
.pf-back {
  display: inline-block;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  color: var(--ink);
}
.pf-back:hover { color: var(--accent-dark); }
.pf-meta {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--gray-text);
}

/* Boîte de partage (plugin zaa-sharebox) sur les fiches de projet.
   Le plugin sort une div.sharebox : on ne règle ici que sa place. */
.pf-single-footer .sharebox { margin-top: 0; }

/* ============================================================
   COLLABORATIONS — bandeau de logos
   ============================================================ */
ul.cc-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(30px, 3.6vw, 64px);
  align-items: center;
  justify-items: center;
}
ul.cc-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  margin: 0;
}
ul.cc-logos li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
ul.cc-logos img {
  max-width: 100%;
  max-height: 88px;
  width: auto;
  height: auto;
  object-fit: contain;
}
ul.cc-logos li.is-tall img { max-height: 104px; }
ul.cc-logos li.is-short img { max-height: 72px; }

/* ============================================================
   CONTACT
   ============================================================ */
.cc-contact { position: relative; overflow: hidden; }
.cc-contact > *:not(.cc-accent-lines) { position: relative; }
.cc-mark { margin: 0 0 28px; }
.cc-mark img { width: 78px; height: 78px; }
.cc-contact-name { font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: 1.28; }
.cc-contact-callout {
  padding: 26px 30px;
  background: var(--black-soft);
  max-width: 620px;
  text-wrap: pretty;
}
.cc-contact-callout a { color: var(--wp--preset--color--accent); }
.cc-contact-callout a:hover { color: var(--white); }
.cc-contact-address a {
  color: var(--white);
  border-bottom: 1px solid #4A4A4A;
  text-decoration: none;
}
.cc-contact-address a:hover {
  color: var(--wp--preset--color--accent);
  border-bottom-color: var(--wp--preset--color--accent);
}

/* Formulaire (Contact Form 7) : champs soulignés sur fond noir. */
.cc-form { max-width: 760px; width: 100%; }
.cc-form p { margin: 0 0 14px; }
.cc-form label {
  display: block;
  margin-bottom: 10px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
}
/* « (obligatoire) » écrit en toutes lettres plutôt qu'un astérisque :
   les lecteurs d'écran l'annoncent, et l'information ne dépend pas d'un
   symbole à décoder (WCAG 3.3.2). */
.cc-form .cc-req {
  font-weight: 400;
  font-size: .9375rem;
  color: var(--light-text);
}
.cc-form .wpcf7-form-control-wrap { display: block; }
.cc-form input[type="text"],
.cc-form input[type="email"],
.cc-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--white);
  color: var(--white);
  font-family: inherit;
  font-size: 1.1875rem;
  padding: 8px 2px;
  border-radius: 0;
}
.cc-form textarea { resize: vertical; min-height: 5.5rem; }
.cc-form ::placeholder { color: #B9B9B9; opacity: 1; }
/* 19 px gras (1.1875rem) comme les quatre boutons du thème, et pour la
   même raison : au survol, ce bouton devient blanc sur l'orange vif, qui
   ne fait que 3,2:1. À 19 px gras le texte est du « grand texte » au sens
   de la WCAG (≥ 14 pt gras = 18,66 px), dont le seuil est 3:1 — le survol
   passe donc AA sans renoncer à la couleur officielle. À 17 px, il y
   fallait 4,5:1. C'est aussi la taille des champs du formulaire. */
.cc-form .wpcf7-submit {
  background: var(--white);
  color: var(--black);
  border: 0;
  padding: 16px 42px;
  font-family: inherit;
  font-size: 1.1875rem;
  font-weight: 700;
  cursor: pointer;
}
.cc-form .wpcf7-submit:hover {
  background: var(--wp--preset--color--accent);
  color: var(--white);
}
/* Contact Form 7 réserve en permanence la place de son indicateur de
   chargement (24 px + 2 × 24 px de marge) avec un simple
   « visibility:hidden » : le bouton se retrouve décalé vers la gauche
   alors que rien ne s'affiche. On le retire du flux, et on ne le
   réintroduit que pendant l'envoi. */
.cc-form .wpcf7-spinner {
  display: none;
  margin: 0 0 0 1rem;
  vertical-align: middle;
  /* Le gris foncé de Contact Form 7 disparaîtrait sur le fond noir. */
  background-color: var(--wp--preset--color--accent);
  opacity: 1;
}
.cc-form .wpcf7-form.submitting .wpcf7-spinner {
  display: inline-block;
}
.cc-form-submit { text-align: right; }
/* Messages de validation : lisibles sur fond noir. */
.cc-form .wpcf7-not-valid-tip {
  color: var(--wp--preset--color--accent);
  font-size: 1rem;
  font-weight: 600;
}
.cc-form .wpcf7-response-output {
  color: var(--white);
  border: 1px solid var(--wp--preset--color--accent);
  padding: .8rem 1rem;
  margin: 1rem 0 0;
  font-size: 1rem;
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.cc-footer { background: var(--gray-light); }
.cc-footer-inner {
  max-width: 1680px;
  margin-inline: auto;
  padding: 34px var(--gutter);
  gap: 24px;
}
.cc-footer p { font-size: 1.0625rem; color: var(--ink); }
.cc-footer a { font-size: 1.0625rem; color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.cc-footer a:hover { color: var(--accent-dark); text-decoration-color: var(--accent);  text-underline-offset: 6px; }
.cc-footer .wp-block-navigation__container { gap: clamp(18px, 2.4vw, 40px); }


/* ============================================================
   PAGES ET ARTICLES COURANTS
   ============================================================ */
.cc-page-body > * { margin-block-start: 1.4em; }
.cc-page-body > :first-child { margin-block-start: 0; }

/* ============================================================
   WIDGET D'ACCESSIBILITÉ
   ============================================================ */
#a11y-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}
.a11y-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--black);
  border: 2px solid var(--white);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
  transition: background .2s, transform .2s;
}
.a11y-toggle:hover { background: var(--accent-dark); transform: scale(1.08); }
.a11y-toggle svg { width: 26px; height: 26px; fill: currentColor; }

.a11y-panel {
  background: var(--white);
  border: 1px solid var(--ui-border);
  box-shadow: 0 10px 50px rgba(0, 0, 0, .18);
  padding: 1.5rem;
  width: 250px;
  display: none;
  flex-direction: column;
  gap: 1rem;
}
.a11y-panel.open { display: flex; }
.a11y-panel h2 {
  font-size: var(--wp--preset--font-size--large);
  margin: 0 0 .25rem;
}
.a11y-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.a11y-option > label,
.a11y-option > .a11y-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.a11y-controls { display: flex; gap: .4rem; }
.a11y-btn {
  width: 34px;
  height: 34px;
  border: 2px solid var(--ui-border);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a11y-btn:hover { background: var(--gray-light); border-color: var(--black); }
.a11y-switch { position: relative; width: 44px; height: 24px; flex: none; }
.a11y-switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.a11y-switch .slider {
  position: absolute;
  inset: 0;
  background: var(--ui-border);
  border-radius: 12px;
  pointer-events: none;
  transition: background .2s;
}
.a11y-switch .slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.a11y-switch input:checked + .slider { background: var(--accent-dark); }
.a11y-switch input:checked + .slider::before { transform: translateX(20px); }
/* Le focus clavier porte sur la case, invisible : on l'affiche sur la piste. */
.a11y-switch input:focus-visible { outline: none; }
.a11y-switch input:focus-visible + .slider { outline: 3px solid var(--accent-dark); outline-offset: 3px; }

@media print {
  #a11y-widget, .cc-header, .skip-link { display: none !important; }
}

/* ============================================================
   ARCHIVE DU PORTFOLIO (/portfolio/)
   ============================================================ */
/* La mise en page « constrained » de WordPress donne à CHAQUE enfant
   `max-width: <contentSize>; margin-inline: auto !important`. Un enfant
   plus étroit — ici le paragraphe à 64ch — se centre donc tout seul et
   se retrouve au milieu sous un titre ferré à gauche.

   On défait ces marges avec la même arme. Ça ne vaut que parce que la
   largeur de contenu (1680 px) est ici plus large que la page : dans un
   conteneur plus étroit que sa contentSize, la colonne entière est
   centrée et `margin-inline: 0` sortirait le paragraphe de la colonne.
   Dans ce cas, ne pas limiter la mesure du tout (voir 404.html, dont le
   `main` est déjà borné à 820 px). */
.cc-archive-head .cc-measure { margin-inline: 0 !important; }

.grecaptcha-badge {
  opacity:0 !important;
}