/*
 * B. Dinten 9.6.200 — direction artistique et système graphique final.
 *
 * Cette feuille ne crée pas de nouvelle identité. Elle formalise les règles
 * déjà présentes dans le thème : une famille photographique par univers,
 * trois niveaux de surfaces, des cartes adaptées à leur fonction et une
 * signature de contact commune à toutes les pages.
 */

/* 9.6.199 — Le portrait de la page Approche garde toute la tête et une
   respiration au-dessus sur smartphone. Le cadrage ordinateur reste intact. */
@media(max-width:700px){
  .content-page-approche-b-dinten #section-1 .section-photo.approach-photo{
    min-height:430px;
  }
  .content-page-approche-b-dinten #section-1 .section-photo.approach-photo>img{
    object-position:center 10%;
  }
}

/* -------------------------------------------------------------------------
   1. FAMILLES DE MATIÈRES
   ------------------------------------------------------------------------- */

/* Rendez-vous constitue une porte fonctionnelle autonome. Les trois surfaces
   viennent désormais de la même photographie Nguyen 14. */
body.universe-public.texture-family-rendezvous{
  --page-texture-blue:url('assets/14_nguy-n-hi-p-pQdeHiEtxPM-unsplash_bleu-ardoise.webp');
  --page-texture-ivory:url('assets/14_nguy-n-hi-p-pQdeHiEtxPM-unsplash_ivoire.webp');
  --page-texture-beige:url('assets/14_nguy-n-hi-p-pQdeHiEtxPM-unsplash_beige.webp');
  --page-texture-chrome-desktop:url('assets/14_nguy-n-hi-p-pQdeHiEtxPM-unsplash_bleu-ardoise.webp');
  --page-texture-chrome-mobile:url('assets/14_nguy-n-hi-p-pQdeHiEtxPM-unsplash_bleu-ardoise.webp');
}

/* « Après le décès » dispose désormais de sa propre matière Jan 10. Le même
   bleu ardoise sert, avec des niveaux de voile différents, à l'ouverture, aux
   respirations claires et au chrome de la page. */
body.universe-public.texture-family-jan{
  --page-texture-blue:url('assets/10_jan-folwarczny-kfbMAK7kEEs-unsplash_bleu-ardoise-apres-deces.webp');
  --page-texture-ivory:url('assets/10_jan-folwarczny-kfbMAK7kEEs-unsplash_bleu-ardoise-apres-deces.webp');
  --page-texture-beige:url('assets/10_jan-folwarczny-kfbMAK7kEEs-unsplash_bleu-ardoise-apres-deces.webp');
  --page-texture-chrome-desktop:url('assets/10_jan-folwarczny-kfbMAK7kEEs-unsplash_bleu-ardoise-apres-deces-horizontal.webp');
  --page-texture-chrome-mobile:url('assets/10_jan-folwarczny-kfbMAK7kEEs-unsplash_bleu-ardoise-apres-deces.webp');
}

/* La page « Après les obsèques » reçoit Jan 10 directement sur ses deux
   panneaux d'ouverture. Ces sélecteurs explicites empêchent les anciennes
   déclarations Nguyen 12 de reprendre la main après une mise en cache. */
.content-page-apres-le-deces>.page-hero{
  background:
    linear-gradient(112deg,rgba(250,247,243,.72),rgba(245,239,232,.84)),
    url('assets/10_jan-folwarczny-kfbMAK7kEEs-unsplash_bleu-ardoise-apres-deces.webp') center/cover!important;
}
.content-page-apres-le-deces>.page-hero>.page-hero-art[data-hero="apres-le-deces"]{
  --hero-texture:url('assets/10_jan-folwarczny-kfbMAK7kEEs-unsplash_bleu-ardoise-apres-deces.webp');
  background:
    linear-gradient(rgba(8,40,44,.14),rgba(8,40,44,.27)),
    url('assets/10_jan-folwarczny-kfbMAK7kEEs-unsplash_bleu-ardoise-apres-deces.webp') center/cover!important;
}

/* Palette publique de référence. Le beige reste disponible pour quelques
   transitions, mais la structure courante repose sur trois ivoire et trois
   bleu ardoise issus de la charte transmise. */
body.universe-public{
  --da-ivory-light:#faf7f3;
  --da-ivory:#f5efe8;
  --da-ivory-deep:#e8ded3;
  --da-blue-light:#2f5256;
  --da-blue:#0e3438;
  --da-blue-deep:#08282c;
}

/* L'ouverture retrouve son principe initial : la photographie bleu ardoise
   est très voilée d'ivoire dans la partie texte et plus affirmée derrière la
   lentille. Le bleu reste perceptible sans assombrir la lecture. */
body.universe-public[class*="texture-family-"] .page-hero{
  background:
    linear-gradient(112deg,rgba(250,247,243,.72),rgba(245,239,232,.84)),
    var(--page-texture-blue) center/cover!important;
}
body.universe-public[class*="texture-family-"] .page-hero-art{
  background:
    linear-gradient(rgba(8,40,44,.14),rgba(8,40,44,.27)),
    var(--page-texture-blue) center/cover!important;
}

/* Trois surfaces principales : ivoire clair pour lire, bleu très voilé pour
   séparer et bleu profond pour les chapitres structurants. */
body.universe-public[class*="texture-family-"] .content-page .content-section.tone-ivory{
  background:
    linear-gradient(rgba(250,247,243,.62),rgba(245,239,232,.72)),
    var(--page-texture-ivory) center/cover!important;
}
body.universe-public[class*="texture-family-"] .content-page .content-section.tone-beige{
  background:
    linear-gradient(118deg,rgba(250,247,243,.68),rgba(245,239,232,.78)),
    var(--page-texture-blue) center/cover!important;
}
body.universe-public[class*="texture-family-"] .content-page .content-section.tone-slate{
  background:
    linear-gradient(rgba(47,82,86,.84),rgba(14,52,56,.91)),
    var(--page-texture-blue) center/cover!important;
}
body.universe-public[class*="texture-family-"] .living-choice-section{
  background:
    linear-gradient(118deg,rgba(250,247,243,.18),rgba(245,239,232,.30)),
    var(--page-texture-ivory) center/cover!important;
}
body.universe-public[class*="texture-family-"] .living-choice-section::before{opacity:0}
body.universe-public[class*="texture-family-"] :is(
  .tariff-reading-guide,
  .information-note,
  .service-scope-note,
  .partner-validity-note,
  .first-contact-note,
  .guidance-faq-note,
  .tariff-delegation-note
){
  background:
    linear-gradient(118deg,rgba(250,247,243,.74),rgba(245,239,232,.84)),
    var(--page-texture-blue) center/cover!important;
}
body.universe-public[class*="texture-family-"] :is(
  .living-combination-rule,
  .living-guidance-bridge aside,
  .administrative-directory-note
){
  background:rgba(250,247,243,.8)!important;
}
body.universe-public[class*="texture-family-"] .page-summary.page-summary{
  background:
    var(--da-blue-deep) var(--page-texture-blue) center/cover no-repeat!important;
}

/* Les panneaux du calculateur conservent l’alternance mais abandonnent eux
   aussi la photographie beige au profit des deux ivoire de la page Tarifs. */
.texture-family-dimitrios .tariffs-simple-2026 .tariff-simple-section.tone-ivory{
  background:
    linear-gradient(rgba(250,247,243,.64),rgba(245,239,232,.74)),
    var(--page-texture-ivory) center/cover!important;
}
.texture-family-dimitrios .tariffs-simple-2026 .tariff-simple-section.tone-beige{
  background:
    linear-gradient(118deg,rgba(250,247,243,.68),rgba(245,239,232,.78)),
    var(--page-texture-blue) center/cover!important;
}

/* Guides devient le pendant éditorial de la FAQ : Andrea partout. */
.texture-family-andrea .content-page-guides-pratiques .guide-reference-panel{
  background:
    linear-gradient(rgba(250,247,243,.66),rgba(245,239,232,.76)),
    var(--page-texture-ivory) center/cover!important;
}
.texture-family-andrea .content-page-guides-pratiques .information-note{
  background:
    linear-gradient(rgba(47,82,86,.9),rgba(14,52,56,.94)),
    var(--page-texture-blue) center/cover!important;
  border-left-color:var(--copper-light)!important;
  color:var(--da-ivory-light)!important;
}
.texture-family-andrea .content-page-guides-pratiques .guide-sources{
  background:rgba(250,247,243,.96);
}
.texture-family-andrea .faq-tools,
.texture-family-andrea .faq-group:nth-child(even){
  background:
    linear-gradient(rgba(250,247,243,.64),rgba(245,239,232,.74)),
    var(--page-texture-ivory) center/cover!important;
}
.texture-family-andrea :is(.faq-intro,.faq-group:nth-child(odd)){
  background:
    linear-gradient(118deg,rgba(250,247,243,.68),rgba(245,239,232,.78)),
    var(--page-texture-blue) center/cover!important;
}

/* Rendez-vous : aucune matière Adobe ou Cai ne subsiste dans le parcours. */
.texture-family-rendezvous .contact-methods{
  background:
    linear-gradient(rgba(250,247,243,.62),rgba(245,239,232,.72)),
    var(--page-texture-ivory) center/cover!important;
}
.texture-family-rendezvous :is(.appointment-section,.first-contact-note){
  background:
    linear-gradient(118deg,rgba(250,247,243,.68),rgba(245,239,232,.78)),
    var(--page-texture-blue) center/cover!important;
}
.texture-family-rendezvous .appointment-form{
  border-top:4px solid var(--copper);
  background:rgba(250,247,243,.94);
  box-shadow:0 20px 54px rgba(42,56,60,.1);
}
.texture-family-rendezvous .site-header.site-header::before{
  background-position:center 43%!important;
}
.texture-family-rendezvous .site-footer.site-footer::before{
  background-position:center 58%!important;
}

/* -------------------------------------------------------------------------
   2. ACCUEIL : UNE MATIÈRE DE MARQUE, UNE EXCEPTION DANS LA LENTILLE
   ------------------------------------------------------------------------- */

body.universe-public:has(.home-hero){
  --home-brand-blue:url('assets/01_AdobeStock_209254754_bleu-ardoise.webp');
  --home-brand-ivory:url('assets/01_AdobeStock_209254754_ivoire.webp');
}
body.universe-public:has(.home-hero) :is(.home-promise,.home-definition,.home-pathways,.home-faq-preview,.living-supports-section){
  background:
    linear-gradient(rgba(250,247,243,.62),rgba(245,239,232,.72)),
    var(--home-brand-ivory) center/cover!important;
}
body.universe-public:has(.home-hero) :is(.home-person.home-person-compact,.home-guidance-hub){
  background:
    linear-gradient(112deg,rgba(250,247,243,.68),rgba(245,239,232,.78)),
    var(--home-brand-blue) center/cover!important;
}
body.universe-public:has(.home-hero) .home-person .home-person-copy :is(h2,p,strong,small),
body.universe-public:has(.home-hero) .home-guidance-hub .home-guidance-intro :is(h2,p){
  color:var(--slate)!important;
}
body.universe-public:has(.home-hero) :is(.home-person,.home-guidance-hub) .eyebrow{
  color:var(--copper-dark)!important;
}

/* La nouvelle famille Jan doit aussi habiller l'entête, le pied de page et les
   navigations, comme les autres familles publiques déjà établies. */
body.universe-public.texture-family-jan .site-header.site-header::before,
body.universe-public.texture-family-jan .site-footer.site-footer::before{
  background-color:var(--da-blue-deep)!important;
  background-image:var(--page-texture-chrome-desktop)!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
}
body.universe-public.texture-family-jan .site-header :is(.submenu,.mobile-nav){
  background-color:var(--da-blue-deep)!important;
  background-image:
    linear-gradient(rgba(8,40,44,.18),rgba(8,40,44,.18)),
    var(--page-texture-chrome-desktop)!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  color:var(--da-ivory)!important;
}

@media(max-width:760px){
  body.universe-public.texture-family-jan .site-header.site-header::before,
  body.universe-public.texture-family-jan .site-footer.site-footer::before{
    background-image:var(--page-texture-chrome-mobile)!important;
  }
  body.universe-public.texture-family-jan .site-header :is(.submenu,.mobile-nav){
    background-image:
      linear-gradient(rgba(8,40,44,.18),rgba(8,40,44,.18)),
      var(--page-texture-chrome-mobile)!important;
  }
}
body.universe-public:has(.home-hero) :is(.home-pathway-card,.home-guidance-primary,.home-guidance-secondary-links a)::before{
  background:var(--home-brand-blue) center/cover!important;
}
body.universe-public:has(.home-hero) .home-pathway-card[href*="/de-son-vivant"]::before{
  background:url('assets/07_cai-fang-BaOZmPM3IMg-unsplash_bleu-ardoise.webp') center/cover!important;
}
body.universe-public:has(.home-hero) .home-pathway-card[href*="/au-moment-du-deces"]::before{
  background:url('assets/12_nguy-n-hi-p-0Q38XF9nmCc-unsplash_bleu-ardoise.webp') center/cover!important;
}
body.universe-public:has(.home-hero) .home-pathway-card[href*="/apres-le-deces"]::before{
  background:url('assets/10_jan-folwarczny-kfbMAK7kEEs-unsplash_bleu-ardoise-apres-deces.webp') center/cover!important;
}
body.universe-public:has(.home-hero) .home-aftercare-bridge{
  background:
    linear-gradient(105deg,rgba(14,52,56,.96),rgba(8,39,43,.91)),
    var(--home-brand-blue) center/cover!important;
}

/* -------------------------------------------------------------------------
   3. SIGNATURE DE CONTACT COMMUNE
   ------------------------------------------------------------------------- */

/* Ce bloc est volontairement invariant : il agit comme un sas de marque juste
   avant le pied de page et ne ressemble plus à une texture égarée. */
body.universe-public :is(.final-contact,.tariffs-simple-2026 .final-contact){
  border:1px solid rgba(184,104,68,.42)!important;
  border-top:3px solid var(--copper)!important;
  background:
    radial-gradient(circle at 88% 18%,rgba(184,104,68,.08),transparent 31%),
    linear-gradient(118deg,#faf7f3 0%,#f5efe8 58%,#e8ded3 100%)!important;
  color:var(--slate)!important;
  box-shadow:0 16px 38px rgba(42,56,60,.075)!important;
}
body.universe-public .final-contact :is(h2,p){color:var(--slate)!important}
body.universe-public .final-contact .eyebrow{color:var(--copper-dark)!important}

/* -------------------------------------------------------------------------
   4. HIÉRARCHIE TYPOGRAPHIQUE
   ------------------------------------------------------------------------- */

.content-page .content-section .section-copy>h2{
  max-width:1080px;
  font-size:clamp(34px,3.55vw,54px);
  line-height:1.12;
  letter-spacing:-.014em;
}
.content-page .feature-grid h3{
  font-size:clamp(22px,1.75vw,28px);
  line-height:1.18;
}
:is(.contact-page,.faq-page,.content-page-guides-pratiques) .page-hero h1{
  font-size:clamp(43px,4.35vw,66px);
  line-height:1.08;
}
.appointment-form :is(label,.radio-title),
.partner-offer>a,
.guide-reference-links small{
  font-size:11.5px;
  line-height:1.35;
}
.site-footer :is(.footer-links a,.footer-links button){
  line-height:1.35;
}

/* -------------------------------------------------------------------------
   5. TROIS TYPES DE CARTES
   ------------------------------------------------------------------------- */

/* Carte éditoriale : calme au repos comme au survol. */
.universe-public .content-page .feature-grid article:not(:has(a)),
.universe-public .partner-card{
  border-color:rgba(42,56,60,.15)!important;
  border-top-color:var(--copper)!important;
  background:rgba(250,247,243,.78)!important;
  box-shadow:0 10px 28px rgba(42,56,60,.05)!important;
  transform:none!important;
}
.universe-public .content-page .feature-grid article:not(:has(a))::before,
.universe-public .partner-card::before{
  opacity:.07!important;
  transform:scale(1.02)!important;
}
.universe-public .content-page .feature-grid article:not(:has(a)):is(:hover,:focus-within)::before,
.universe-public .partner-card:is(:hover,:focus-within)::before{
  opacity:.14!important;
}
.universe-public .content-page .feature-grid article:not(:has(a)):is(:hover,:focus-within),
.universe-public .partner-card:is(:hover,:focus-within){
  color:var(--slate)!important;
  box-shadow:0 14px 34px rgba(42,56,60,.075)!important;
}
.universe-public .content-page .feature-grid article:not(:has(a)):is(:hover,:focus-within) :is(h2,h3,h4,p,li),
.universe-public .partner-card:is(:hover,:focus-within) :is(h2,h3,h4,p,li){
  color:inherit!important;
}
.universe-public .content-page .feature-grid article:not(:has(a)):is(:hover,:focus-within)>span{
  color:var(--copper-dark)!important;
}

/* Carte éditoriale interactive : l'inversion bleue signale réellement un lien. */
.universe-public .content-page .feature-grid article:has(a){
  border-top-width:3px;
  box-shadow:0 13px 34px rgba(42,56,60,.07);
}

/* Les cartes explicatives de l'espace professionnel restent éditoriales :
   leur contenu ne doit pas donner l'impression d'être un grand bouton. */
.universe-professional .content-page .feature-grid article:not(:has(a)):is(:hover,:focus-within){
  border-color:rgba(42,56,60,.2)!important;
  border-top-color:var(--copper)!important;
  background:rgba(251,247,242,.9)!important;
  color:var(--slate)!important;
  box-shadow:0 14px 34px rgba(42,56,60,.08)!important;
  transform:none!important;
}
.universe-professional .content-page .feature-grid article:not(:has(a)):is(:hover,:focus-within) :is(h3,p){
  color:var(--slate)!important;
}
.universe-professional .content-page .feature-grid article:not(:has(a)):is(:hover,:focus-within)>span{
  color:var(--copper-dark)!important;
}

/* Carte chiffrée : la donnée reste stable, sans faux signal de navigation. */
.universe-public :is(.price-card,.admin-price-grid>article,.option-grid>article):is(:hover,:focus-within){
  transform:none!important;
  box-shadow:0 14px 36px rgba(42,56,60,.09)!important;
}

/* Les marques tierces disposent d'un écrin constant sans être recolorées. */
.partner-identity{
  display:grid;
  align-content:start;
}
.partner-logo{
  box-sizing:border-box;
  width:min(270px,100%);
  min-height:112px;
  max-height:132px;
  padding:18px 20px;
  border:1px solid rgba(42,56,60,.13);
  background:#faf7f3;
  object-fit:contain;
  object-position:center;
}

/* Les symboles très géométriques paraissent optiquement plus grands que les
   fleurs et les gestes humains ; un retrait léger équilibre la collection. */
:is(
  .page-hero-art[data-hero="questions-frequentes"],
  .page-hero-art[data-hero="guides-pratiques"],
  .page-hero-art[data-hero="tarifs"]
) .hero-icon-wrap img{
  width:53%;
  height:53%;
}

/* -------------------------------------------------------------------------
   6. ENTÊTES, PIEDS ET ACTIONS MOBILES
   ------------------------------------------------------------------------- */

body.universe-public .site-header.site-header::before{opacity:.7!important}
body.universe-public .site-footer.site-footer::before{opacity:.56!important}
body.universe-professional .site-footer.site-footer::before{opacity:.63!important}
body.universe-personal .site-footer.site-footer::before,
body:has(.family-space-page) .site-footer.site-footer::before,
body:has(.inspirations-page) .site-footer.site-footer::before{opacity:.72!important}

@media(max-width:760px){
  body.universe-public .mobile-actions{
    background-color:var(--blue-deep)!important;
    background-image:linear-gradient(rgba(8,39,43,.9),rgba(8,39,43,.9))!important;
  }
  body.universe-professional .mobile-actions{
    background-color:var(--slate-deep)!important;
    background-image:linear-gradient(rgba(30,44,48,.94),rgba(30,44,48,.94))!important;
  }
  body.universe-public .mobile-actions a,
  body.universe-professional .mobile-actions a{
    min-height:61px;
    font-size:9.5px;
  }
}

@media(max-width:980px) and (min-width:701px){
  .legal-page .legal-layout>aside{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* -------------------------------------------------------------------------
   7. PAGES LÉGALES : PRIORITÉ À LA LECTURE
   ------------------------------------------------------------------------- */

.legal-page .legal-hero{
  padding:clamp(62px,6vw,92px) clamp(28px,8vw,125px);
  background:
    linear-gradient(118deg,rgba(251,247,242,.93),rgba(245,239,232,.88)),
    url('assets/01_AdobeStock_209254754_ivoire.webp') center/cover!important;
}
.legal-page .legal-hero h1{
  margin-bottom:20px;
  font-size:clamp(42px,4.25vw,64px);
  line-height:1.08;
}
.legal-page .legal-layout{
  grid-template-columns:minmax(0,1120px);
  justify-content:center;
  gap:38px;
  padding-top:clamp(52px,6vw,84px);
  background:#fbf7f2!important;
}
.legal-page .legal-layout>aside{
  position:static;
  display:grid;
  grid-template-columns:minmax(150px,.7fr) minmax(190px,1fr) minmax(220px,1fr) minmax(160px,.8fr);
  gap:10px 24px;
  align-items:center;
  padding:20px 24px;
  border:1px solid rgba(42,56,60,.14);
  border-left:4px solid var(--copper);
  border-top-width:1px;
  background:var(--ivory);
}
.legal-page .legal-layout>aside :is(p,a){margin:0}
.legal-page .legal-layout>aside .eyebrow{margin:0}
.legal-page .legal-content{
  width:100%;
  max-width:940px;
  margin-inline:auto;
}

/* -------------------------------------------------------------------------
   8. PETITS ÉCRANS ET INTERACTIONS TACTILES
   ------------------------------------------------------------------------- */

@media(max-width:700px){
  :is(.contact-page,.faq-page,.content-page-guides-pratiques) .page-hero h1{
    font-size:clamp(34px,9.1vw,44px);
  }
  .content-page .content-section .section-copy>h2{
    font-size:clamp(30px,8.1vw,39px);
    line-height:1.13;
  }
  .legal-page .legal-hero{padding-top:48px;padding-bottom:52px}
  .legal-page .legal-hero h1{font-size:clamp(32px,8.5vw,41px)}
  .legal-page .legal-layout{gap:30px;padding-top:42px}
  .legal-page .legal-layout>aside{
    grid-template-columns:1fr;
    gap:8px;
    padding:19px;
  }
  .partner-logo{min-height:96px;max-height:116px;margin-inline:auto;object-position:center}
}

@media(hover:none){
  .universe-public :is(
    .situation-card,
    .home-pathway-card,
    .guidance-choice-card,
    .feature-grid article,
    .price-card,
    .admin-price-grid>article,
    .option-grid>article,
    .contact-methods a,
    .partner-card
  ):hover{
    transform:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-icon-wrap img,
  .hero-icon-wrap::after{
    animation:none!important;
  }
}