/* ============================================================
   DESSIGNE — ajustements posterieurs a dessigne.css
   La neutralisation d'Astra vit dans astra-reset.css, charge AVANT
   dessigne.css. Ce fichier ne contient que ce qui doit passer APRES.
   ============================================================ */

/* Couleurs de titre reposees explicitement, classe par classe,
   pour qu'aucune regle de theme ne puisse les reprendre. */
/* Couleur par defaut des titres .display.
   NE PAS ajouter h2.display / h3.display ici : cela porterait la
   specificite a 0-2-1 et ecraserait toutes les variantes
   contextuelles du design (.transition--dark, .svc-cta-end...),
   qui sont en 0-2-0. La regle ci-dessous suffit a battre Astra. */
.dessigne-page .display { color: var(--ink); }
.dessigne-page .display em,
.dessigne-page .display i        { color: var(--rouge); font-style: normal; font-weight: 400; }

.dessigne-page .projects__title  { color: var(--ink); }
.dessigne-page .acc__title       { color: var(--ink); }
/* « adapte » prend la couleur de « Un accompagnement » : sans cette
   ligne, la regle generale .display em le passerait en rouge. */
.dessigne-page .acc__title em    { color: var(--ink); }
.dessigne-page .pcard__title     { color: var(--ink); }
.dessigne-page .cta__title       { color: var(--cream); }
.dessigne-page .cta__title em    { color: var(--cream); }
.dessigne-page .founder__name    { color: var(--burg); }
.dessigne-page .values__lead-title { color: var(--cream); }
.dessigne-page .vcard__title     { color: var(--burg); }

.dessigne-page .formule--dark .formule__title  { color: var(--paper); }
.dessigne-page .formule--light .formule__title { color: var(--ink); }
.dessigne-page .formule--dark .formule__eyebrow,
.dessigne-page .formule--light .formule__eyebrow,
.dessigne-page .formule--dark .formule__group-label,
.dessigne-page .formule--light .formule__group-label { color: var(--gold); }

.dessigne-page .visite__tab   { color: inherit; }
.dessigne-page .pill__label   { color: var(--ink); }
.dessigne-page .footer__col-h { color: var(--gold); }

/* ---- Boutons ---- */
.dessigne-page .btn { border-radius: var(--btn-radius); text-decoration: none; line-height: 1; }
.dessigne-page .btn--ink    { background: var(--ink);   color: var(--cream); border: none; }
.dessigne-page .btn--rouge  { background: var(--rouge); color: var(--cream); border: none; }
.dessigne-page .btn--cream  { background: var(--cream); color: var(--ink);   border: none; }
.dessigne-page .btn--gold   { background: var(--gold);  color: var(--ink);   border: none; }
.dessigne-page .btn--ghost  { background: transparent;  color: var(--ink);   border: 1px solid var(--ink); }
.dessigne-page .btn--ghost-l{ background: transparent;  color: var(--cream); border: 1px solid rgba(230,223,209,.5); }
.dessigne-page .hero .btn--ink   { background: var(--cream); color: var(--ink); }
.dessigne-page .hero .btn--ghost { color: var(--cream); border-color: rgba(230,223,209,.6); }

/* ---- Listes ---- */
.dessigne-page .formule__list,
.dessigne-page .visite__pills { list-style: none; margin: 0; padding: 0; }
.dessigne-page .formule__list li { list-style: none; }

.dessigne-page .site-content { overflow: visible; }

/* ============================================================
   HERO VIDÉO — remplace le carrousel photo de la maquette
   ============================================================ */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

/* La maquette pose .hero__bg en z-index:-2 ; dans WordPress cela
   passe derrière le fond de page. On rétablit un empilement local. */
.dessigne-page .hero        { isolation: isolate; }
.dessigne-page .hero__bg    { z-index: 0; }
.dessigne-page .hero::after { z-index: 1; }
.dessigne-page .hero__inner { z-index: 2; }

/* ---- Emplacement d'image vide (photo non fournie) ---- */
.img-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  background: var(--p2);
  border: 1px dashed rgba(38,36,33,.18);
}

/* ============================================================
   <img> réels — remplacent <image-slot> de la maquette
   La feuille d'origine ne cible que l'élément image-slot ;
   on réplique le comportement (remplissage + recadrage) sur img.
   ============================================================ */
.pcard__media img,
.agence__portrait img,
.intro__portrait img,
.founder__portrait img,
.hc__media img,
.mcard__media img,
.ph-hero__media img,
.grid4 img,
.fullmedia img,
.visite__bg img,
.detail-item__img img,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le portrait de l'agence porte des dimensions inline dans la maquette :
   on les laisse gagner sur desktop, mais jamais au prix du responsive. */
.agence__portrait img { max-width: 100%; }
@media (max-width: 860px) {
  .agence__portrait img { width: 100% !important; height: auto !important; aspect-ratio: 4/5; margin: 0 !important; }
}

/* Astra impose parfois height:auto sur les images : on le neutralise
   uniquement là où le recadrage plein cadre est voulu. */
.dessigne-page .pcard__media img,
.dessigne-page .visite__bg img,
.dessigne-page .hero__bg img { height: 100%; }

/* ============================================================
   PORTRAITS EN COLONNE (mobile)
   La maquette pose des dimensions en ligne (width:550px,
   aspect-ratio:4/4, margin-left:50px). En colonne, ces valeurs
   font deborder le portrait hors de sa colonne : l'image impose
   sa largeur naturelle via min-width:auto (defaut d'un flex item).
   On rend la main au conteneur et on laisse l'image remplir.
   ============================================================ */
@media (max-width: 860px) {

  .dessigne-page .intro__portrait,
  .dessigne-page .founder__portrait {
    min-width: 0;
    max-width: 100%;
  }

  /* le style en ligne aspect-ratio:4/4 empecherait la regle mobile 4/5 */
  .dessigne-page .founder__portrait {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
  }

  .dessigne-page .intro__portrait img,
  .dessigne-page .founder__portrait img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
  }
}

/* ============================================================
   CARTES PILIERS — resserrage
   La maquette laissait 32px entre le titre et le texte
   (22px sous la tete + 10px au-dessus du texte). On ramene a 8px
   et on retire un peu de rembourrage : les vignettes se reduisent
   d'autant, la grille suivant la carte la plus haute.
   ============================================================ */
.dessigne-page .vcard {
  padding: 22px 26px 24px;
}

.dessigne-page .vcard__head {
  margin-bottom: 2px;
}

.dessigne-page .vcard__text {
  margin-top: 6px;
}

/* ============================================================
   PAGES PROJET — equivalents <img> des regles image-slot
   ============================================================ */
.dessigne-page .ph-hero__media img,
.dessigne-page .pourquoi__portrait img,
.dessigne-page .ocard__media img,
.dessigne-page .pq-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  /* le portrait de la section "Nous confier votre projet" passe pleine largeur */
  .dessigne-page .pourquoi__portrait img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Media du hero projet : reste sombre tant que la video n'est pas fournie */
.dessigne-page .ph-hero__media:empty {
  background: #0E0C0B;
}

/* ============================================================
   TITRES .display — variantes contextuelles
   ------------------------------------------------------------
   Plus haut dans ce fichier, .dessigne-page .display fixe la
   couleur par defaut (ink). Cette regle (0-2-0) est chargee APRES
   dessigne.css et ecrasait donc, a specificite egale, les variantes
   contextuelles du design — dont .transition--dark .display, qui se
   retrouvait en ink sur fond ink : titre invisible.
   On les repose ici, plus specifiques, pour qu'elles reprennent la main.
   Toute nouvelle variante contextuelle de .display doit etre ajoutee ici.
   ============================================================ */
.dessigne-page .transition--dark .display    { color: var(--cream); }
.dessigne-page .transition--dark .display em,
.dessigne-page .transition--dark .display i  { color: var(--gold); }
.dessigne-page .sec__head .display           { color: var(--burg); }
.dessigne-page .visite__head .display        { color: var(--cream); }