/* GCGT — règles générales du site : typographie, carrousel, mode clair / sombre, liens, définitions, césures.
   Chargée sur toutes les pages, après les styles de Bricks. L'ordre des sections compte. */

/* GCGT — Règles typographiques globales
   À coller dans un extrait WPCode de type « CSS Snippet », emplacement « Site Wide Header »
   (frontal uniquement). Les variables (--encre, --papier, --police-texte…) viennent de Bricks. */

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
	background: var(--papier);
	color: var(--encre);
	/* Chiffres elzéviriens, crénage, ligatures (charte GCGT) */
	font-variant-numeric: oldstyle-nums proportional-nums;
	font-feature-settings: "onum", "pnum", "kern", "liga";
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Titres : sans, chiffres alignés, équilibrés, sans césure */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--police-titre);
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum", "kern", "liga";
	text-wrap: balance;
	hyphens: manual;
	-webkit-hyphens: manual;
}
p, li, blockquote, figcaption { text-wrap: pretty; }

/* Capitales : formes de capitales (case), accents conservés par text-transform */
.etiquette, .filtre, .bouton, .bouton-contour, .caps {
	text-transform: uppercase;
	font-feature-settings: "case", "lnum", "kern";
	font-variant-numeric: lining-nums;
	hyphens: manual;
}
/* Petites capitales vraies, quand le texte les demande */
.pcaps { font-variant-caps: all-small-caps; letter-spacing: .06em; }

/* Noms de personnes et de marques : toujours en italique.
   Dans les titres (sans), l'italique est celui du Source Serif 4 : Source Sans 3
   italique n'est pas chargé, pour éviter un italique synthétique. */
em, i, .nom {
	font-style: italic;
}
h1 .nom, h2 .nom, h3 .nom, h4 .nom, h5 .nom, h6 .nom,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.titre-xl .nom, .titre-l .nom, .titre-m .nom, .titre-s .nom,
.etiquette .nom {
	font-family: var(--police-texte);
	font-style: italic;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
	font-feature-settings: "kern", "liga";
}

/* Liens */
a { text-decoration-thickness: .06em; text-underline-offset: .18em; }
a:hover { color: var(--rouge-sombre); }

/* Focus visible (accessibilité) */
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }

/* Sélection */
::selection { background: var(--rouge); color: var(--papier); }

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	* { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* GCGT — carrousel des projets phares
   Centre 16:9 (1:1 sur mobile), voisins visibles en partie, boucle infinie. */
.carrousel { position: relative; outline: none; }
.carrousel:focus-visible .carrousel-fenetre { outline: 2px solid var(--rouge); outline-offset: 4px; }

.carrousel-fenetre {
  --p: 13cqw;                       /* largeur visible des voisins */
  --g: .5rem;                       /* espace entre images */
  --h-max: 61.8svh;                 /* hauteur maximale : 61,8 % de l'écran */
  --w: min(calc(100cqw - 2 * var(--p)), calc(var(--h-max) * 16 / 9)); /* largeur de l'image centrale */
  --pe: calc((100cqw - var(--w)) / 2); /* voisins réellement visibles */
  position: relative;
  overflow: hidden;
  height: calc(var(--w) * 9 / 16);
  touch-action: pan-y;
}
/* le cadre sert de référence aux unités cqw */
.carrousel-cadre { container-type: inline-size; }

.carrousel-piste { list-style: none; margin: 0; padding: 0; position: relative; height: 100%; }

.carrousel-diapo {
  position: absolute;
  top: 0;
  left: var(--pe);
  width: var(--w);
  height: 100%;
  transform: translateX(calc(var(--pos, 0) * (var(--w) + var(--g))));
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
  background: var(--surface);
  overflow: hidden;
}
.carrousel-diapo.est-cache { opacity: 0; visibility: hidden; pointer-events: none; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s ease, visibility 0s .6s; }
.carrousel-diapo.est-voisine { cursor: pointer; }
.carrousel-diapo.est-voisine::after { content: ""; position: absolute; inset: 0; background: rgb(250 249 246 / .55); pointer-events: none; }
:root[data-theme="dark"] .carrousel-diapo.est-voisine::after { background: rgb(20 20 19 / .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .carrousel-diapo.est-voisine::after { background: rgb(20 20 19 / .55); } }
.carrousel-diapo.sans-transition { transition: none !important; }

.carrousel-diapo a { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.carrousel-diapo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.carrousel-titre {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem var(--esp-s, 1rem) var(--esp-s, 1rem);
  color: #FAF9F6;
  background: linear-gradient(to top, rgb(29 29 27 / .6), transparent);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--titre-s);
  opacity: 0; transform: translateY(.4rem);
  transition: opacity .3s ease .25s, transform .3s ease .25s;
}
.carrousel-diapo.est-active .carrousel-titre { opacity: 1; transform: none; }

/* Flèches posées sur les images partielles */
.carrousel-fleche {
  --d: clamp(2rem, 3.4vw, 2.75rem);
  position: absolute; top: 50%;
  width: var(--d); height: var(--d);
  margin-top: calc(var(--d) / -2);
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--papier); color: var(--encre);
  cursor: pointer; z-index: 3;
  transition: background-color .2s ease, color .2s ease;
}
.carrousel-fleche:hover, .carrousel-fleche:focus-visible { background: var(--rouge); color: #fff; }
.carrousel-fleche svg { width: 40%; height: 40%; }
.carrousel-prec { left: calc(var(--pe) / 2 - var(--d) / 2); }
.carrousel-suiv { right: calc(var(--pe) / 2 - var(--d) / 2); }

/* Traits de navigation */
.carrousel-traits { display: flex; justify-content: center; gap: .5rem; margin-top: var(--esp-s, 1rem); }
.carrousel-trait {
  width: clamp(1.75rem, 4vw, 3rem); height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; position: relative;
}
.carrousel-trait::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--filet); transition: background-color .3s ease; }
.carrousel-trait:hover::before { background: var(--gris); }
.carrousel-trait[aria-current="true"]::before { background: var(--rouge); }
.carrousel-trait:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }

/* Mobile : carré */
@media (max-width: 600px) {
  .carrousel-fenetre { --p: 11cqw; --g: .35rem; --w: min(calc(100cqw - 2 * var(--p)), var(--h-max)); height: var(--w); }
  .carrousel-fleche { --d: 1.75rem; }
  .carrousel-titre { padding-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carrousel-diapo, .carrousel-titre, .carrousel-fleche { transition: none !important; }
}
.carrousel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* GCGT — mode clair / sombre
   Les variables de la palette Bricks (--papier, --encre…) sont redéfinies ici.
   Ordre de priorité : choix manuel (data-theme) > réglage de l'appareil > clair. */

/* Base du site : Bricks fixe la racine à 62,5 % (10 px). Nos tailles en rem supposent 16 px. */
:root { font-size: 100%; }

/* Fond et texte de la page suivent la palette (clair ou sombre) */
html, body, .brx-body { background-color: var(--papier); color: var(--encre); }

:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #141413;
  --surface: #1f1f1d;
  --encre: #f2f0ea;
  --gris: #9d9d98;
  --filet: #34342f;
  --rouge: #e8402f;
  --rouge-sombre: #c9321f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier: #141413;
    --surface: #1f1f1d;
    --encre: #f2f0ea;
    --gris: #9d9d98;
    --filet: #34342f;
    --rouge: #e8402f;
    --rouge-sombre: #c9321f;
  }
}

/* Bouton clair / sombre (élément Bricks avec l'attribut data-theme-toggle) */
[data-theme-toggle] {
  background: none;
  border: 0;
  padding: .35em 0;
  cursor: pointer;
  color: var(--encre);
  font: inherit;
  font-size: var(--texte-s);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-feature-settings: "case", "lnum";
}
[data-theme-toggle]:hover { color: var(--rouge); }
[data-theme-toggle] .theme-sombre { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .theme-clair { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .theme-sombre { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-theme-toggle] .theme-clair { display: none; }
  :root:not([data-theme="light"]) [data-theme-toggle] .theme-sombre { display: inline; }
}

/* GCGT — exposants sans décaler l’interligne */
sup{font-size:.62em;line-height:0;vertical-align:baseline;position:relative;top:-.55em;letter-spacing:.02em}

/* GCGT — sous-menus de page (À propos, Atelier, FAQ) : même entrée que les filtres de la page Réalisations */
@keyframes gcgt-mot-sm{0%{opacity:0;transform:translateY(.45em)}100%{opacity:1;transform:none}}.sous-menu-page>a{animation:gcgt-mot-sm .75s cubic-bezier(.25,.8,.25,1) both}.sous-menu-page>a:nth-child(2){animation-delay:110ms}.sous-menu-page>a:nth-child(3){animation-delay:220ms}.sous-menu-page>a:nth-child(4){animation-delay:330ms}.sous-menu-page>a:nth-child(n+5){animation-delay:440ms}@media (prefers-reduced-motion:reduce){.sous-menu-page>a{animation:none}}

/* GCGT — liens dans les textes courants : sans soulignement, rouge au survol, flèche ↗ pour les liens externes */
.brxe-text-basic a:not([class]){color:inherit;text-decoration:none;transition:color .25s}.brxe-text-basic a:not([class]):hover,.brxe-text-basic a:not([class]):focus-visible{color:var(--rouge)}.brxe-text-basic a[target="_blank"]:not([class]):not([data-fin])::after,.brxe-text-basic a[target="_blank"]:not([class]) .lien-fin::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.15em;vertical-align:-.05em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M241.62-258.69%20210-290.31l413.92-414.31H241.31V-750h460v460h-45.39v-382.62l-414.3%20413.93Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M241.62-258.69%20210-290.31l413.92-414.31H241.31V-750h460v460h-45.39v-382.62l-414.3%20413.93Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

/* GCGT — liens externes : le dernier mot et la flèche restent sur la même ligne */
.brxe-text-basic a:not([class]) .lien-fin{white-space:nowrap}

/* GCGT — termes techniques : définition au survol, en forme d’entrée de dictionnaire */
.terme{position:relative;cursor:help;-webkit-hyphens:none;hyphens:none;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--gris)}.terme .definition{position:absolute;left:50%;bottom:calc(100% + .6rem);z-index:50;display:block;width:max-content;max-width:min(20rem,82vw);padding:.85rem 1rem .9rem;background:var(--papier);border:1px solid var(--encre);color:var(--encre);font-family:"Source Serif 4",serif;font-size:.9375rem;font-style:normal;font-weight:400;line-height:1.45;letter-spacing:0;text-align:left;text-transform:none;white-space:normal;text-wrap:pretty;pointer-events:none;opacity:0;visibility:hidden;transform:translate(calc(-50% + var(--decalage,0px)),.35rem);transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s;text-decoration:none}.terme:hover .definition,.terme:focus-visible .definition{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--decalage,0px)),0);transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility 0s}.def-entree{font-weight:600;font-feature-settings:"liga","kern"}.def-phon{font-family:"Source Sans 3",sans-serif;font-size:.8125rem;color:var(--gris);letter-spacing:.01em}.def-nature{font-style:italic;color:var(--gris)}.def-texte{display:block;text-wrap:pretty;margin-top:.4rem;padding-top:.45rem;border-top:1px solid var(--filet)}.def-domaine{font-variant-caps:all-small-caps;letter-spacing:.05em;color:var(--gris);margin-right:.15em}.terme:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}@media (prefers-color-scheme:dark){html:root:not([data-theme="light"]) .terme .definition{background:var(--surface)}}html:root[data-theme="dark"] .terme .definition{background:var(--surface)}@media (prefers-reduced-motion:reduce){.terme .definition{transition:none}}

/* GCGT — textes courants sans orphelins */
p,li,dd,dt,blockquote,figcaption,.brxe-text-basic,.brxe-text,.faq-reponse{text-wrap:pretty}

/* GCGT — césures : seules celles calculées par gcgt-cesure.php (jamais moins de 3 lettres) */
body{-webkit-hyphens:manual!important;hyphens:manual!important}