/* ==========================================================================
   Kawann Supply — page « À propos » (thème enfant hummingbird-kawann)
   Chargé après theme.css : ces règles surchargent le style Hummingbird.
   Palette et typographie : voir kawann-tokens.css (chargé avant celui-ci).

   Le balisage est dans templates/cms/page.tpl, branche $cms.id == 4.

   Structure, d'après la maquette de la cliente :
     1. en-tête — titre, intro, quatre repères ; photo qui déborde à droite
     2. récit sur fond clair, logo primaire à droite
     3. bande équipe — marine, photo fondue à droite, phrase de conclusion
     4. bande de réassurance, pleine largeur
   ========================================================================== */

/* Le contenu CMS est habituellement du texte enrichi contraint en largeur de
   lecture ; ici c'est une mise en page pleine largeur. */
.cms-id-4 .page-content--cms {
  max-width: none;
  padding: 0;
}

/* Deux blocs débordent du conteneur (photo de l'en-tête, bande de
   réassurance) avec un calcul en vw. Sur un système à barre de défilement
   visible, 100vw inclut la barre : sans ce garde-fou la page prendrait un
   défilement horizontal de sa largeur. « clip » ne crée pas de zone de
   défilement, contrairement à « hidden ». */
.cms-id-4 #wrapper {
  overflow-x: clip;
}

.kawann-apropos {
  display: flex;
  flex-direction: column;
  gap: 56px;
  color: var(--kawann-marine);
}

/* ==========================================================================
   1. En-tête
   ========================================================================== */

.kawann-apropos__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 40px;
}

.kawann-apropos__titre {
  margin: 0 0 18px;
  font-size: 2.25rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.15;
  color: var(--kawann-marine);
}

.kawann-apropos__intro {
  margin: 0 0 32px;
  max-width: 48ch;
  font-size: 1.0625rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.75;
  color: var(--kawann-text-muted);
}

/* Les quatre repères : icône ronde et un mot dessous, comme la maquette. */
.kawann-apropos__atouts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kawann-apropos__atout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.kawann-apropos__atout-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--kawann-border);
  background: var(--kawann-blanc);
  color: var(--kawann-marine);
}

.kawann-apropos__atout-icone svg { width: 24px; height: 24px; }

.kawann-apropos__atout-nom {
  font-size: 0.875rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.3;
  color: var(--kawann-marine);
}

/* La photo court jusqu'au bord droit de la fenêtre et se fond sur sa gauche
   dans le blanc de la page. Le débord est calculé sur la largeur de fenêtre ;
   le conteneur étant centré, la moitié de l'écart lui revient. */
.kawann-apropos__hero-media {
  position: relative;
  margin-right: calc(50% - 50vw);
  height: 440px;
}

.kawann-apropos__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  display: block;
  border-radius: 18px 0 0 18px;
  /* Fondu vers le blanc sur le bord gauche, comme la maquette. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
          mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

/* ==========================================================================
   2. Récit sur fond clair, logo à droite
   ========================================================================== */

.kawann-apropos__recit {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 48px;
  padding: 44px 48px;
  border-radius: 20px;
  /* Bleu très pâle dérivé du Bleu Horizon de la charte. */
  background: color-mix(in srgb, var(--kawann-horizon) 7%, white);
}

.kawann-apropos__recit-texte {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kawann-apropos__recit-texte p {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.8;
  color: var(--kawann-marine);
}

.kawann-apropos__recit-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kawann-apropos__recit-logo img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
}

/* ==========================================================================
   3. Bande équipe
   ========================================================================== */

.kawann-apropos__equipe {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--kawann-marine);
  color: var(--kawann-text-on-dark);
}

/* La photo occupe la moitié droite et se fond dans le marine sur sa gauche,
   pour que le texte reste sur un aplat uni. */
.kawann-apropos__equipe-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  height: 100%;
  object-fit: cover;
  /* Cadrage haut : les visages sont dans le tiers supérieur de la photo. */
  object-position: 50% 12%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 35%);
          mask-image: linear-gradient(to right, transparent 0, #000 35%);
}

.kawann-apropos__equipe-texte {
  position: relative;
  z-index: 1;
  width: 50%;
  padding: 44px 48px;
}

.kawann-apropos__signature {
  margin: 0 0 22px;
  max-width: 34ch;
  font-size: 1.375rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.4;
  color: var(--kawann-blanc);
}

/* Le filet Soleil ouvre la phrase, comme il ouvre les sections de l'accueil. */
.kawann-apropos__signature::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: var(--kawann-soleil);
}

/* Bouton Soleil plein, texte marine — 7,40:1. Le thème parent pose une
   couleur de lien en !important ; le nôtre suit. */
.kawann-apropos__cta {
  display: inline-block;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--kawann-soleil);
  color: var(--kawann-marine) !important;
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-bold);
  text-decoration: none;
}

.kawann-apropos__cta:hover,
.kawann-apropos__cta:focus-visible {
  background: var(--kawann-jaune);
}

/* ==========================================================================
   4. Bande de réassurance, pleine largeur
      Le balisage des quatre arguments est partagé avec l'accueil
      (_partials/kawann-reassurance-items.tpl) ; ici, pas de défilement :
      les quatre tiennent côte à côte, et s'empilent en dessous de 768px.
   ========================================================================== */

.kawann-apropos__reassurance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: calc(50% - 50vw);
  padding: 26px max(24px, calc(50vw - var(--kawann-colonne) / 2 + var(--kawann-colonne-retrait)));
  background: var(--kawann-surface);
  border-top: 1px solid var(--kawann-border-clair);
}

.kawann-apropos__reassurance .kawann-reassurance__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 22px;
}

.kawann-apropos__reassurance .kawann-reassurance__item + .kawann-reassurance__item {
  border-left: 1px solid var(--kawann-border);
}

.kawann-apropos__reassurance .kawann-reassurance__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--kawann-blanc);
  border: 1px solid var(--kawann-border-clair);
  color: var(--kawann-marine);
}

.kawann-apropos__reassurance .kawann-reassurance__icon svg { width: 22px; height: 22px; }

.kawann-apropos__reassurance .kawann-reassurance__texte {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kawann-apropos__reassurance .kawann-reassurance__titre {
  font-size: 0.9375rem;
  font-weight: var(--kawann-weight-title);
  line-height: 1.3;
  color: var(--kawann-marine);
}

.kawann-apropos__reassurance .kawann-reassurance__desc {
  font-size: 0.8125rem;
  font-weight: var(--kawann-weight-text);
  line-height: 1.5;
  color: var(--kawann-text-muted);
}

/* ==========================================================================
   5. Adaptations aux petites largeurs
   ========================================================================== */

@media (max-width: 991.98px) {
  .kawann-apropos { gap: 40px; }

  .kawann-apropos__hero,
  .kawann-apropos__recit {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* Empilée, la photo passe en bannière au-dessus du texte, sans débord ni
     fondu : elle n'a plus de colonne voisine dans laquelle se fondre. */
  .kawann-apropos__hero-media {
    order: -1;
    margin-right: 0;
    height: 240px;
  }

  .kawann-apropos__hero-image {
    border-radius: 18px;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .kawann-apropos__intro { max-width: none; }
  .kawann-apropos__titre { font-size: 1.875rem; }
  .kawann-apropos__recit { padding: 28px 22px; }
  .kawann-apropos__recit-logo img { max-width: 260px; }

  /* Bande équipe : la photo passe au-dessus du texte, en bandeau. */
  .kawann-apropos__equipe { flex-direction: column; align-items: stretch; }
  .kawann-apropos__equipe-photo {
    position: static;
    width: 100%;
    height: 220px;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .kawann-apropos__equipe-texte { width: auto; padding: 28px 22px; }
  .kawann-apropos__signature { font-size: 1.125rem; }

  .kawann-apropos__reassurance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
    padding: 22px 24px;
  }
  .kawann-apropos__reassurance .kawann-reassurance__item { padding: 0 14px; }
  .kawann-apropos__reassurance .kawann-reassurance__item:nth-child(3) { border-left: 0; }
}

@media (max-width: 767.98px) {
  /* Les quatre repères en pilules compactes, icône et mot côte à côte : en
     grille avec l'icône au-dessus, quatre mots isolés flottaient dans le
     vide sur un petit écran. */
  .kawann-apropos__atouts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .kawann-apropos__atout {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--kawann-border);
    border-radius: 999px;
    background: var(--kawann-surface);
  }

  .kawann-apropos__atout-icone {
    width: 32px;
    height: 32px;
    border: 0;
  }

  .kawann-apropos__atout-icone svg { width: 18px; height: 18px; }

  .kawann-apropos__atout-nom { font-size: 0.8125rem; }
}

@media (max-width: 575.98px) {
  .kawann-apropos__titre { font-size: 1.625rem; }

  .kawann-apropos__reassurance { grid-template-columns: minmax(0, 1fr); }
  .kawann-apropos__reassurance .kawann-reassurance__item { border-left: 0 !important; padding: 0; }
}