/* ==========================================================================
   Céline Théret — header et pied de page
   Valeurs reprises telles quelles des 11 maquettes allemandes.
   Ce fichier ne dépend d'aucun réglage du thème Uncode.
   ========================================================================== */

.ct-header,
.ct-footer {
  --ct-paper: #f6f4ef;
  --ct-ink: #14161a;
  --ct-blue: #0f2a4a;
  --ct-grey: #83837c;
  --ct-line: rgba(21, 24, 29, 0.12);
  box-sizing: border-box;
}
.ct-header *,
.ct-footer * { box-sizing: border-box; }

/* ---------- HEADER ---------- */

.ct-header {
  /* fixed et non sticky : plusieurs conteneurs d'Uncode portent
     overflow:hidden, ce qui fait decrocher un header sticky avant le bas de
     page. fixed ne depend d'aucun ancetre. L'espaceur ci-dessous rend au
     contenu la hauteur occupee. */
  position: fixed;
  /* Compense la barre de defilement : voir la fonction mesure() dans
     ct-header.php. Sans cela la navigation se centre sur la fenetre et les
     blocs de la page sur le conteneur d'Uncode, plus etroit. */
  padding-right: var(--ct-scrollbar, 0px);
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 500;                /* au-dessus du contenu et des lightbox Uncode */
  background: rgba(246, 244, 239, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ct-line);
  font-family: 'Jost', sans-serif;
}

/* Reprend la hauteur du header fixe. Ajustee en JS a la valeur reelle ;
   la valeur ci-dessous evite tout saut avant l'execution du script. */
.ct-header-spacer { height: 103px; }
@media (max-width: 569px) { .ct-header-spacer { height: 76px; } }

.ct-nav {
  /* Le cadre est défini une seule fois, dans ct-refonte.css sur `:root`.
     Changer `--ct-cadre` là-bas déplace la navigation, le pied de page et
     tous les blocs de contenu ensemble. Les valeurs de repli servent si
     ct-refonte.css n'est pas chargé.
     `padding` resserré le 17/09/2026 (plugin 1.9.10), demande de Laurence.

     GRILLE A TROIS COLONNES (29/09/2026, plugin 1.9.14). Demande de
     Laurence : « Construit la grille du header avec une partie logo
     (minimum) [...] "kontakt" (minimum) [...] et utilise toute la place qui
     reste pour le menu. » Ordre conservé : logo à gauche, Kontakt à droite
     (confirmé par Laurence le 29/09).
       colonne 1 : logo, largeur `auto` = sa largeur propre, rien de plus ;
       colonne 2 : menu, `minmax(0, 1fr)` = TOUT le reste. Le `0` est
                   indispensable : sans lui, une colonne `1fr` refuse de
                   descendre sous la largeur de son contenu et pousse le
                   bouton Kontakt hors du cadre au lieu de laisser le script
                   constater que le menu ne tient plus ;
       colonne 3 : Kontakt (ou le burger en mode compact), largeur propre.
     Avant (1.9.13) : flexbox en `space-between`, le menu flottait entre
     les deux avec la place qu'il lui restait. */
  /* Plancher de 960px (29/09/2026, plugin 1.9.16). Demande de Laurence,
     sur le tableau des etats du menu : « supprime ca : de 961 a 1045 px
     hamburger (pas assez de place) - il doit y avoir le menu complet ! ».
     Cause : `--ct-cadre` vaut 1200px plafonne par l'ecran jusqu'a 960px,
     puis 80vw des 961px ; le header retombait d'un coup de 960 a 769px et
     le menu n'y tenait plus. Avec ce plancher, le header garde 960px (ou
     toute la fenetre si elle est plus etroite) jusqu'a ce que 80vw le
     depasse, a 1200px de fenetre. Ecart assume : entre 961 et 1199px, le
     header est plus large que les blocs de contenu (pas aligne sur eux).
     `--ct-cadre` lui-meme n'est pas touche : les pages ne bougent pas. */
  max-width: max(var(--ct-cadre, 1200px), var(--ct-nav-plancher, 960px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--ct-nav-gouttiere, 18px);   /* entre logo, menu et Kontakt */
  padding: 18px 20px;
}
.ct-nav > .ct-logo      { grid-column: 1; }
.ct-nav > .ct-navlinks  { grid-column: 2; }
.ct-nav > .ct-nav-right { grid-column: 3; justify-self: end; }

/* Logo */
.ct-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ct-ink);
  flex: 0 0 auto;
}
.ct-logo-img {
  display: block;
  /* Ramenée à 66px le 17/09/2026 (plugin 1.9.11) : réduite à 50px en 1.9.10
     le même jour, Laurence a demandé de revenir à la taille de la 1.9.9 —
     voir claude/etat-du-chantier.md, entrée du 17/09. Les autres
     resserrements de la 1.9.10 (espacements, padding du bouton Kontakt)
     restent en place. */
  height: var(--ct-logo-h, 66px);   /* seul reglage a toucher pour la taille */
  width: auto;
  max-width: 340px;
}
.ct-logo-text {
  font-family: 'Alex Brush', cursive;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ct-ink);
}

/* Liens */
.ct-navlinks {
  display: flex;
  align-items: center;
  /* Répartition dans la colonne du milieu. 1.9.14 : `space-evenly`.
     29/09/2026 (plugin 1.9.17), demande de Laurence : « dans l'espace qui
     reste pour le menu tu met l'espace entre les point de menu à 20px et le
     reste de l'espace se divise en 2 à droite et a gauche ». Donc écart
     FIXE de 20px entre entrées, bloc centré dans sa colonne : la place
     restante se partage à égalité à gauche et à droite. */
  justify-content: var(--ct-menu-repartition, center);
  min-width: 0;
  /* Écart entre deux entrées, fixe (1.9.17 ; 18px en 1.9.10 à 1.9.16,
     34px avant). Le script de ct-header.php le relit pour décider si le
     menu tient à plat : ne jamais le recopier ailleurs. */
  column-gap: 20px;
  font-size: 15px;
  letter-spacing: 0.02em;
  font-weight: 400;
}
/* Les entrées ne rétrécissent jamais : c'est le script qui décide de
   passer en mode compact, pas le navigateur qui écrase les libellés. */
.ct-navlinks > .ct-nav-link,
.ct-navlinks > .ct-nav-item { flex: 0 0 auto; }
.ct-navlinks .ct-nav-link {
  position: relative;
  padding: 4px 0;
  color: var(--ct-ink);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.ct-navlinks .ct-nav-link:hover,
.ct-navlinks .ct-nav-link:focus-visible { opacity: 1; }
.ct-navlinks .ct-nav-link.ct-active { opacity: 1; }
.ct-navlinks .ct-nav-link.ct-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ct-blue);
}

/* Bouton Kontakt */
.ct-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.ct-nav-cta {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ct-ink);
  text-decoration: none;
  border: 1px solid var(--ct-ink);
  /* Resserré de 9px 18px à 8px 14px le 17/09/2026 (plugin 1.9.10), demande
     de Laurence sur le menu — voir claude/etat-du-chantier.md, entrée du
     17/09. Écart de bord assumé : `.ct-nav-cta` est aussi la classe du
     bouton Kontakt du panneau mobile (`.ct-mobile-cta`), qui n'a pas de
     padding propre — ce bouton rapetisse donc un peu lui aussi. */
  padding: 8px 14px;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.ct-nav-cta:hover,
.ct-nav-cta:focus-visible {
  background: var(--ct-ink);
  color: var(--ct-paper);
}

/* ---------- BOUTON MENU MOBILE ----------
   Absent des maquettes : sous 1024 px elles masquent les liens sans rien
   proposer à la place, ce qui rend le site impraticable au téléphone/tablette. */

.ct-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ct-burger span {
  display: block;
  height: 1px;
  width: 22px;
  margin: 0 auto;
  background: var(--ct-ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.ct-burger.ct-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ct-burger.ct-open span:nth-child(2) { opacity: 0; }
.ct-burger.ct-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.ct-burger:focus-visible { outline: 1px solid var(--ct-blue); outline-offset: 2px; }

.ct-mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 28px 34px;
  background: var(--ct-paper);
  border-top: 1px solid var(--ct-line);
}
.ct-mobile-menu[hidden] { display: none; }
.ct-mobile-menu .ct-nav-link {
  font-family: 'Newsreader', serif;
  font-size: 24px;
  color: var(--ct-ink);
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid var(--ct-line);
}
.ct-mobile-cta {
  margin-top: 22px;
  align-self: flex-start;
  font-family: 'Jost', sans-serif;
}

/* ---------- PIED DE PAGE ---------- */

/* Le fond occupe toute la largeur, le contenu reste cadre a 1200 px. */
.ct-footer {
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ct-line);
  background: var(--ct-paper);
  font-family: 'Jost', sans-serif;
  clear: both;
}
.ct-footer-inner {
  max-width: var(--ct-cadre, 1200px);
  margin: 0 auto;
  padding: 70px var(--ct-cadre-marge, 28px) 40px;
}
.ct-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 30px;
}
.ct-footer-logo {
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
}
.ct-footer-logo-img {
  display: block;
  height: var(--ct-footer-logo-h, 64px);
  width: auto;
  max-width: 300px;
}
.ct-footer-logo .ct-logo-text {
  font-family: 'Alex Brush', cursive;
  font-size: 26px;
  color: var(--ct-ink);
}
.ct-footer-links {
  display: flex;
  gap: 26px;
  font-size: 13px;
  flex-wrap: wrap;
}
.ct-footer-links .ct-nav-link {
  color: var(--ct-grey);
  text-decoration: none;
  transition: color 0.2s;
}
.ct-footer-links .ct-nav-link:hover { color: var(--ct-ink); }
.ct-footer-copy {
  font-size: 12px;
  color: var(--ct-grey);
  width: 100%;
  margin-top: 36px;
  letter-spacing: 0.03em;
}

/* ---------- RESPONSIVE ---------- */

/* Le menu bascule en mode compact (liens caches, bouton "burger" affiche a
   la place) dans DEUX cas, qui doivent produire exactement le meme resultat :

     1. l'ecran est un MOBILE (media query ci-dessous, 569px). Depuis le
        29/09/2026 (plugin 1.9.15), c'est le SEUL breakpoint du header,
        demande de Laurence : « ne fait plus de breakpoint a 1024. le seul
        breakpoint doit etre pour les mobile ». La valeur reprend le seuil
        mobile d'Uncode lui-meme (max-width: 569px dans style.css du theme,
        181 occurrences), pour que header et contenu basculent ensemble.
        Historique : 860px jusqu'au 17/09, puis 1024px (1.9.9 a 1.9.13) ;
     2. au-dessus, le script mesure si le menu tient dans sa colonne
        (ajusteMenu() dans ct-header.php) et pose .ct-compact sinon. Entre
        570px et le point ou le menu tient, le hamburger vient donc de la
        MESURE, pas d'un chiffre fige : avec le menu du 29/09 (six
        entrees), il tient a partir d'environ 1046px de large.

   Les regles de commutation vivent sous .ct-compact et sous la media
   query ; la media query porte en plus les ajustements cosmetiques du
   mobile (logo et paddings reduits). Sans JavaScript, entre 570px et le
   seuil de la mesure, le menu a plat peut deborder : cas accepte, le
   script est en ligne dans la page et ne depend d'aucun fichier externe. */

#ct-header.ct-compact .ct-navlinks { display: none; }
#ct-header.ct-compact .ct-burger { display: flex; }
#ct-header.ct-compact .ct-nav-cta:not(.ct-mobile-cta) { display: none; }
#ct-header.ct-compact .ct-mobile-menu:not([hidden]) { display: flex; }

@media (max-width: 569px) {
  #ct-header .ct-navlinks { display: none; }
  #ct-header .ct-burger { display: flex; }
  #ct-header .ct-nav-cta:not(.ct-mobile-cta) { display: none; }
  #ct-header .ct-mobile-menu:not([hidden]) { display: flex; }
  .ct-nav { padding: 14px 20px; }
  .ct-logo-img { height: 46px; }
  .ct-logo-text { font-size: 26px; }
  .ct-footer-inner { padding: 50px 20px 34px; }
  .ct-footer-top { align-items: flex-start; gap: 22px; }
  .ct-footer-logo-img { height: 52px; }
}

@media (max-width: 380px) {
  .ct-logo-img { height: 40px; }
  .ct-footer-links { gap: 16px; }
}

/* Le corps de la page ne doit pas passer sous le header collant. */
.ct-content { position: relative; z-index: 1; }

/* ==========================================================================
   COMPATIBILITÉ UNCODE — neutralisation des paddings de row
   --------------------------------------------------------------------------
   Uncode applique 36 px de padding à ses conteneurs de row :
     .main-container .row-container .row-parent
     .block-wrapper-parent .row-container .row-parent
     .has-unblock .row-container .row-parent
   Nos sections portent déjà leur propre cadrage (max-width 1200 px et
   paddings). Sans neutralisation, le contenu est cadré deux fois : trop
   étroit, et les espacements doublés.

   `:has()` cible uniquement les rows qui contiennent un bloc de la refonte.
   Le reste du site — pages existantes, Sunshine Photo Cart, blog — garde ses
   paddings d'origine.

   Si un navigateur ne gère pas `:has()`, la classe `.ct-row` posée à la main
   sur la row dans WPBakery produit le même effet.
   ========================================================================== */

.row-parent:has(.ct-content),
.row-container:has(.ct-content) > .row-parent,
.ct-row.row-parent,
.ct-row .row-parent {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

/* Les colonnes d'Uncode ajoutent leurs propres gouttières au même titre. */
.row-parent:has(.ct-content) .uncol,
.row-parent:has(.ct-content) .uncoltable,
.row-parent:has(.ct-content) .vc_column-inner,
.row-parent:has(.ct-content) .wpb_column,
.ct-row .uncol,
.ct-row .vc_column-inner,
.ct-row .wpb_column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Le module Raw HTML lui-même ne doit rien ajouter. */
.wpb_raw_code:has(.ct-content),
.wpb_raw_code:has(.ct-content) > .wpb_wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Nos sections gèrent leur pleine largeur : la row ne doit pas les brider. */
.row-parent:has(.ct-content),
.ct-row.row-parent {
  max-width: 100% !important;
  width: 100% !important;
}

/* ==========================================================================
   SOUS-MENUS
   --------------------------------------------------------------------------
   L'arborescence en prévoit deux niveaux : Freie Arbeiten avec ses quatre
   séries, Porträts avec ses trois sous-pages.

   Desktop : ouverture au survol et au focus clavier.
   Mobile  : dépliage par le bouton, dans le panneau du menu.
   ========================================================================== */

.ct-nav-item { position: relative; display: flex; align-items: center; gap: 4px; }

/* Le parent d'une branche contenant la page courante est signalé comme actif. */
.ct-navlinks .ct-branche-active > .ct-nav-link { opacity: 1; }
.ct-navlinks .ct-branche-active > .ct-nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ct-blue);
}

/* Le chevron. */
.ct-sub-toggle {
  display: block;
  width: 16px; height: 16px;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.ct-sub-toggle span,
.ct-sub-toggle span::before,
.ct-sub-toggle span::after { display: block; }
.ct-sub-toggle span::before {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 6px; height: 6px;
  border-right: 1px solid var(--ct-ink);
  border-bottom: 1px solid var(--ct-ink);
  transform: rotate(45deg);
  opacity: 0.75;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.ct-sub-toggle:hover span::before { opacity: 1; }
.ct-sub-toggle:focus-visible { outline: 1px solid var(--ct-blue); outline-offset: 2px; }

/* ---------- DESKTOP ---------- */

/* Ces regles ne doivent jouer QUE quand la navigation est reellement en
   ligne (le menu a plat, sans bouton "hamburger"). `@media (min-width:570px)`
   seul ne le garantit pas depuis 1.9.1 : au-dessus de ce seuil, le menu peut
   quand meme etre en mode compact (classe `.ct-compact` sur #ct-header,
   posee par la mesure JS quand le contenu deborde - voir ajusteMenu() dans
   ct-header.php). Sans le `:not(.ct-compact)` ci-dessous, ces regles
   restaient actives meme en mode compact au-dessus de ce seuil : le
   sous-menu affiche dans le panneau mobile (.ct-mobile-menu, plus bas)
   heritait quand meme de `position:absolute; top:...; left:-18px` faute
   d'etre repris par une regle plus specifique - il s'ouvrait donc hors de
   son emplacement normal dans le panneau au lieu de rester juste sous sa
   rubrique. Signale par Laurence le 08/09 : « sur la navigation du haut
   quand on est en version hamburgeur (mais pas sur la version mobile) les
   sous-menus ne sont pas directement sous la rubrique ». Seuil relevé de
   861px à 1025px le 17/09/2026, puis ramené à 570px le 29/09/2026 (1.9.15),
   en miroir du breakpoint mobile unique (ci-dessus, 569px). */
@media (min-width: 570px) {
  #ct-header:not(.ct-compact) .ct-submenu {
    position: absolute;
    /* --ct-sub-offset est mesuré en JS : distance entre le bas de l'item et
       le bas du header. Le sous-menu s'ouvre ainsi sous la bordure, quelle
       que soit la hauteur du logo. */
    top: calc(100% + var(--ct-sub-offset, 20px));
    left: -18px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    background: var(--ct-paper);
    border: 1px solid var(--ct-line);
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(21, 24, 29, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 10;
  }
  /* Passerelle invisible : évite que le sous-menu se ferme en traversant
     l'espace entre le lien et le panneau. */
  #ct-header:not(.ct-compact) .ct-submenu::before {
    content: "";
    position: absolute;
    top: calc(-1px - var(--ct-sub-offset, 20px));
    left: 0; right: 0;
    height: calc(1px + var(--ct-sub-offset, 20px));
  }
  #ct-header:not(.ct-compact) .ct-nav-item:hover .ct-submenu,
  #ct-header:not(.ct-compact) .ct-nav-item:focus-within .ct-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  #ct-header:not(.ct-compact) .ct-nav-item:hover .ct-sub-toggle span::before,
  #ct-header:not(.ct-compact) .ct-nav-item:focus-within .ct-sub-toggle span::before {
    transform: rotate(-135deg) translate(-3px, -3px);
  }
  #ct-header:not(.ct-compact) .ct-submenu .ct-sub-link {
    padding: 9px 22px;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--ct-ink);
    text-decoration: none;
    opacity: 0.75;
    white-space: nowrap;
    transition: opacity 0.2s, background 0.2s;
  }
  #ct-header:not(.ct-compact) .ct-submenu .ct-sub-link:hover,
  #ct-header:not(.ct-compact) .ct-submenu .ct-sub-link:focus-visible { opacity: 1; background: var(--ct-paper-dim); }
  #ct-header:not(.ct-compact) .ct-submenu .ct-sub-link.ct-active { opacity: 1; color: var(--ct-blue); }
  #ct-header:not(.ct-compact) .ct-submenu .ct-sub-link.ct-active::after { display: none; }
}

/* ---------- MOBILE ---------- */

/* Pas de media query ici, volontairement : ces regles ne stylent que
   l'INTERIEUR de .ct-mobile-menu, qui reste display:none tant que la
   commutation ci-dessus (media query OU .ct-compact) ne l'active pas.
   Leur effet est donc deja correctement conditionne par ce display:none,
   quelle que soit la largeur d'ecran qui a declenche l'ouverture. */

.ct-mobile-menu .ct-nav-item {
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--ct-line);
}
.ct-mobile-menu .ct-nav-item > .ct-nav-link {
  flex: 1 1 auto;
  border-bottom: 0;
}
.ct-mobile-menu .ct-sub-toggle {
  width: 44px; height: 44px;
  align-self: center;
}
.ct-mobile-menu .ct-sub-toggle span::before {
  top: 18px; left: 18px;
  width: 8px; height: 8px;
}
.ct-mobile-menu .ct-sub-toggle[aria-expanded="true"] span::before {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.ct-mobile-menu .ct-submenu {
  flex: 1 1 100%;
  display: none;
  flex-direction: column;
  padding: 0 0 10px 18px;
}
.ct-mobile-menu .ct-submenu.ct-ouvert { display: flex; }
.ct-mobile-menu .ct-sub-link {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  padding: 10px 0;
  border-bottom: 0;
  color: var(--ct-ink);
  opacity: 0.8;
  text-decoration: none;
}
.ct-mobile-menu .ct-sub-link.ct-active { opacity: 1; color: var(--ct-blue); }