/* ==========================================================================
   Peau « Planche contact » — Portrait Haute Sensibilité   (0.30.0)
   Chargée après assets/phs.css. Contrairement aux autres peaux, elle ne
   change pas que les jetons : elle règle aussi le rythme et quelques mises
   en page, sans toucher au HTML ni à l'ordre des sections.

   Trois options retenues (présentation « Évolutions du design PHS ») :
   2. Rythme éditorial — sections 25 % plus courtes, mises en page qui
      varient (texte et image alternés, questions sur deux colonnes, offres
      décalées), étapes reliées comme un parcours, galerie en planche contact
      numérotée comme une pellicule.
   3. Calme à la façon d'Apple — un seul fond crème séparé par des filets,
      le blanc réservé à deux temps forts ; en-tête sur une ligne qui s'affine
      et devient translucide en défilant (menu complet, inchangé) ; 5 tailles de texte, texte courant
      à 18 px, étiquettes à 13 px dans la police du texte. Le menu est
      repris tel quel (toutes ses entrées). Le pied de page passe à l'encre
      bleu-vert de la peau.
   4. La photo qui se développe — voir assets/skins/planche.js. Le mouvement
      est coupé pour les visiteurs qui ont demandé moins d'animations.

   Toutes les règles sont préfixées par body.phs-skin-planche : la peau ne
   s'applique qu'aux pages du site et aux articles, comme les autres.
   Contraste : mêmes couleurs que « Papier & encre », vérifiées par tests/run.php.
   ========================================================================== */

/* ------------------------------------------------------------------ jetons (palette d'origine, angles plus vifs) */
:where(body.phs-site),.phs,.phs-plus,.phs-fin{
  --phs-creme:#FBF7F2;
  --phs-blanc:#FFFFFF;
  --phs-texte:#16313A;
  --phs-doux:#566A70;
  --phs-canard:#014A5D;
  --phs-sur-canard:#FFFFFF;
  --phs-peche:#FDA76E;
  --phs-sur-peche:#16313A;
  --phs-focus:#0B6378;
  --phs-r:3px;
  --phs-btn-r:999px;
}

/* ================================================================== 3. calme : typographie (5 tailles) */
body.phs-skin-planche .phs{font-size:max(17px,1.125rem);line-height:1.68}
body.phs-skin-planche .phs h1{font-size:clamp(2.5rem,5vw,3.75rem);line-height:1.02}
body.phs-skin-planche .phs h2{font-size:clamp(2rem,3.8vw,2.875rem);line-height:1.08}
body.phs-skin-planche .phs h3{font-size:1.3rem}
body.phs-skin-planche .phs-lead{font-size:1.18rem}
/* étiquettes : la police du texte, 13 px, lisibles */
body.phs-skin-planche .phs-sur,
body.phs-skin-planche .phs-note,
body.phs-skin-planche .phs-blog-meta,
body.phs-skin-planche .phs-goal-list{font-family:var(--phs-sans)!important}
body.phs-skin-planche .phs-sur{font-size:.8125rem;font-weight:700;letter-spacing:.12em;color:var(--phs-doux)}
body.phs-skin-planche .phs-sur::before{display:none}
body.phs-skin-planche .phs-note,body.phs-skin-planche .phs-blog-meta{font-size:.8125rem;letter-spacing:.06em}
body.phs-skin-planche .phs-offers>.phs-card h3::before,
body.phs-skin-planche .phs-cards>.phs-card h3::before{font-family:var(--phs-sans);font-size:.8125rem;font-weight:700;letter-spacing:.1em}

/* ================================================================== 3. calme : un seul fond, des filets */
body.phs-skin-planche .phs-s.phs-bg-blanc{background:var(--phs-creme)}
body.phs-skin-planche .phs-s+.phs-s{border-top:1px solid var(--phs-ligne)}
body.phs-skin-planche .phs h2.phs-h::before{display:none}
/* deux temps forts sur blanc : le guide offert et l'appel final */
body.phs-skin-planche .phs-s.phs-t-leadmagnet,
body.phs-skin-planche .phs-s.phs-t-cta{background:var(--phs-blanc)}
body.phs-skin-planche .phs-t-leadmagnet .phs-lm-cta{background:var(--phs-creme)}
body.phs-skin-planche .phs-t-cta .phs-cta-box{border-top:0}

/* ================================================================== 2. rythme : sections 25 % plus courtes */
body.phs-skin-planche .phs-s{padding:clamp(64px,9vw,120px) 0}
body.phs-skin-planche .phs-t-hero{padding:clamp(40px,6vw,84px) 0 clamp(64px,9vw,120px)}
body.phs-skin-planche .phs-cta-box{padding:clamp(40px,6vw,72px) 0}
body.phs-skin-planche .phs-grid{margin-top:1.8em}

/* ================================================================== 2. rythme : mises en page qui varient (grand écran) */
@media (min-width:901px){
  /* texte et image : proportions décalées, côté alterné d'une section à l'autre */
  body.phs-skin-planche .phs-split{grid-template-columns:7fr 5fr}
  body.phs-skin-planche .phs-t-texte:nth-of-type(even) .phs-split{grid-template-columns:5fr 7fr}
  body.phs-skin-planche .phs-t-texte:nth-of-type(even) .phs-split-img{order:-1}

  /* questions fréquentes : le titre à gauche, les questions à droite */
  body.phs-skin-planche .phs-t-faq .phs-narrow{max-width:1112px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:clamp(40px,6vw,96px)}
  body.phs-skin-planche .phs-t-faq .phs-narrow>:not(.phs-faq){grid-column:1}
  body.phs-skin-planche .phs-t-faq .phs-faq{grid-column:2;grid-row:1 / -1;margin-top:0}
  body.phs-skin-planche .phs-t-faq .phs-narrow{text-align:left}

  /* offres et cartes : la colonne du milieu descend d'un cran, comme une mise en page de magazine */
  body.phs-skin-planche .phs-offers>.phs-card:nth-child(3n+2),
  body.phs-skin-planche .phs-cards>.phs-card:nth-child(3n+2){margin-top:clamp(24px,4vw,56px)}
}

/* ================================================================== 2. rythme : les étapes comme un parcours */
body.phs-skin-planche .phs-steps li{border-top:0;padding-top:0}
body.phs-skin-planche .phs-num{display:flex;align-items:center;gap:16px;font-size:2rem}
body.phs-skin-planche .phs-num::after{content:"";flex:1;height:1px;background:var(--phs-ligne-2)}
body.phs-skin-planche .phs-steps li:last-child .phs-num::after{background:linear-gradient(90deg,var(--phs-ligne-2),transparent)}
@media (max-width:600px){
  body.phs-skin-planche .phs-steps li{padding-left:22px;border-left:1px solid var(--phs-ligne-2)}
  body.phs-skin-planche .phs-num::after{display:none}
}

/* ================================================================== 2. rythme : la galerie en planche contact */
body.phs-skin-planche .phs-gal-grid{counter-reset:phs-vue;gap:18px 14px}
body.phs-skin-planche .phs-gal-item{counter-increment:phs-vue;display:flex;flex-direction:column;gap:6px;min-width:0}
body.phs-skin-planche .phs-gal-item::after{content:counter(phs-vue,decimal-leading-zero) "A";font-family:var(--phs-mono);font-size:.75rem;letter-spacing:.12em;color:var(--phs-doux)}
body.phs-skin-planche .phs-gal-item-nolien{box-shadow:none;background:transparent;overflow:visible}
body.phs-skin-planche .phs-gal-item-nolien img{box-shadow:0 0 0 1px var(--phs-ligne);background:var(--phs-image-fond);border-radius:2px}
@media (min-width:601px){
  /* la première image prend deux colonnes et deux rangs : un grand portrait, des vignettes autour */
  body.phs-skin-planche .phs-gal:not(.phs-gal-libre) .phs-gal-grid>.phs-gal-item:first-child{grid-column:span 2;grid-row:span 2}
  body.phs-skin-planche .phs-gal:not(.phs-gal-libre) .phs-gal-grid>.phs-gal-item:first-child>a,
  body.phs-skin-planche .phs-gal:not(.phs-gal-libre) .phs-gal-grid>.phs-gal-item:first-child>img{flex:1;min-height:0}
  body.phs-skin-planche .phs-gal:not(.phs-gal-libre) .phs-gal-grid>.phs-gal-item:first-child img{aspect-ratio:auto;height:100%}
}
@media (max-width:600px){
  /* sur téléphone : la planche défile au doigt, de gauche à droite */
  body.phs-skin-planche .phs-gal-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding-bottom:6px;scrollbar-width:thin}
  body.phs-skin-planche .phs-gal-item{flex:0 0 72%;scroll-snap-align:start}
}

/* ================================================================== 3. calme : l'en-tête du thème (Astra) */
body.phs-skin-planche .ast-breadcrumbs{display:none}
body.phs-skin-planche.home .phs-ariane{padding-top:10px}
body.phs-skin-planche .phs .phs-lang{border:0;background:transparent;padding:0;font-weight:400;text-decoration:underline;text-underline-offset:3px}
body.phs-skin-planche .site-header{position:sticky;top:0;z-index:999}
body.phs-skin-planche.admin-bar .site-header{top:32px}
body.phs-skin-planche .site-header .main-header-bar{background:rgba(251,247,242,.88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #E6DBCD;transition:padding .25s ease,background-color .25s ease}
body.phs-skin-planche .site-header .site-primary-header-wrap{transition:min-height .25s ease}
body.phs-skin-planche .site-header .custom-logo{transition:max-height .25s ease,width .25s ease}
/* en défilant, l'en-tête s'affine */
body.phs-skin-planche.phs-defile .site-header .main-header-bar{padding-top:0;padding-bottom:0;background:rgba(251,247,242,.78)}
body.phs-skin-planche.phs-defile .site-header .site-primary-header-wrap{min-height:64px}
body.phs-skin-planche.phs-defile .site-header .custom-logo{max-height:44px;width:auto}
body.phs-skin-planche.phs-defile .site-header .site-description{display:none}

@media (max-width:782px){
  body.phs-skin-planche.admin-bar .site-header{top:46px}
}
@media (max-width:600px){
  body.phs-skin-planche.admin-bar .site-header{top:0}
}

/* ================================================================== 3. calme : le pied de page (thème Astra)
   Il reste sombre, parce que ses logos (Portrait Haute Sensibilité en blanc, Cercle d'escrime de
   Vienne, Aparté) sont dessinés pour un fond foncé ; mais il prend l'encre et la typographie de la
   peau : bleu-vert profond au lieu du brun, police du texte, filets fins, accent pêche au survol. */
body.phs-skin-planche .site-footer,
body.phs-skin-planche .site-footer .site-above-footer-wrap,
body.phs-skin-planche .site-footer .site-primary-footer-wrap,
body.phs-skin-planche .site-footer .site-below-footer-wrap{background:#0C2A33!important;color:#C2CFCC}
body.phs-skin-planche .site-footer{font-family:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6}
body.phs-skin-planche .site-footer .site-above-footer-wrap{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(32px,4vw,56px)}
body.phs-skin-planche .site-footer .site-primary-footer-wrap,
body.phs-skin-planche .site-footer .site-below-footer-wrap{border-top:1px solid rgba(242,236,226,.14);padding-top:18px;padding-bottom:18px}
body.phs-skin-planche .site-footer :is(p,li,span,div,.widget-title,h2,h3){color:inherit}
body.phs-skin-planche .site-footer :is(#astra-footer-menu,.footer-nav-wrap,.ast-nav-menu,.menu-item){background:transparent!important}
body.phs-skin-planche .site-footer a,
body.phs-skin-planche .site-footer .menu-link{color:#F2ECE2!important;text-decoration:none;text-underline-offset:4px;transition:color .2s}
body.phs-skin-planche .site-footer a:hover,
body.phs-skin-planche .site-footer a:focus-visible{color:#FDA76E!important;text-decoration:underline}
body.phs-skin-planche .site-footer a:focus-visible{outline:2px solid #FDA76E;outline-offset:3px}
body.phs-skin-planche .site-footer .footer-nav-wrap .menu-link{font-size:15px;padding-top:5px;padding-bottom:5px}
body.phs-skin-planche .site-footer .ast-footer-social-wrap a{color:#FDA76E!important}
body.phs-skin-planche .site-footer .ast-footer-social-wrap svg{fill:currentColor}
body.phs-skin-planche .site-footer .ast-footer-copyright,
body.phs-skin-planche .site-footer .ast-footer-copyright p{font-size:13px;letter-spacing:.04em;color:#A9BDBC!important}
body.phs-skin-planche .site-footer img{border-radius:3px}

/* ================================================================== 4. la photo qui se développe (états posés par planche.js) */
body.phs-skin-planche .phs img.phs-rev{filter:brightness(1.9) contrast(.25);transition:filter .6s cubic-bezier(.2,.6,.3,1)}
body.phs-skin-planche .phs img.phs-rev.phs-rev-on{filter:none}

/* ------------------------------------------------------------------ moins de mouvement, plus de contraste */
@media (prefers-reduced-motion:reduce){
  body.phs-skin-planche .phs img.phs-rev{filter:none;transition:none}
  body.phs-skin-planche .site-header .main-header-bar,
  body.phs-skin-planche .site-header .site-primary-header-wrap,
  body.phs-skin-planche .site-header .custom-logo{transition:none}
}
@media (prefers-contrast:more){
  body.phs-skin-planche .phs-s+.phs-s{border-top-color:var(--phs-ligne-2)}
  body.phs-skin-planche .site-header .main-header-bar{background:#FBF7F2;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ================================================================== 0.33.0 : nouveau design de l'accueil */
/* sections un peu plus courtes : plus de grands vides entre deux blocs */
body.phs-skin-planche .phs-s{padding:clamp(56px,7vw,96px) 0}
body.phs-skin-planche .phs-t-hero{padding:clamp(36px,5vw,72px) 0 clamp(56px,7vw,88px)}
body.phs-skin-planche .phs-s+.phs-bg-sombre,body.phs-skin-planche .phs-bg-sombre+.phs-s,
body.phs-skin-planche .phs-s+.phs-bg-canard,body.phs-skin-planche .phs-bg-canard+.phs-s{border-top:0}
/* les offres alignées : le décalage de la carte du milieu ressemblait à une erreur */
@media (min-width:901px){
  body.phs-skin-planche .phs-offers>.phs-card:nth-child(3n+2){margin-top:0}
}
/* étapes : le numéro en italique pêche, comme un repère au crayon gras */
body.phs-skin-planche .phs-steps .phs-step-photo+.phs-num{font-style:italic;font-weight:400;color:#C46A2F}
/* bande « planche contact » : six vues égales, numéros de bord de film */
body.phs-skin-planche .phs-bg-sombre .phs-gal-item::before{content:"\25B8  " counter(phs-vue);font-family:var(--phs-mono,ui-monospace,monospace);font-size:.7rem;letter-spacing:.14em;color:#E8A06A;order:-1}
body.phs-skin-planche .phs-bg-sombre .phs-gal-item::after{color:#E8A06A}
body.phs-skin-planche .phs-bg-sombre .phs-gal-item-nolien img,
body.phs-skin-planche .phs-bg-sombre .phs-gal-item img{box-shadow:none;background:#2A2826}
@media (min-width:601px){
  body.phs-skin-planche .phs-bg-sombre .phs-gal-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px}
  body.phs-skin-planche .phs-bg-sombre .phs-gal:not(.phs-gal-libre) .phs-gal-grid>.phs-gal-item:first-child{grid-column:auto;grid-row:auto}
  body.phs-skin-planche .phs-bg-sombre .phs-gal:not(.phs-gal-libre) .phs-gal-grid>.phs-gal-item:first-child>a,
  body.phs-skin-planche .phs-bg-sombre .phs-gal:not(.phs-gal-libre) .phs-gal-grid>.phs-gal-item:first-child>img{flex:none}
  body.phs-skin-planche .phs-bg-sombre .phs-gal:not(.phs-gal-libre) .phs-gal-grid>.phs-gal-item:first-child img{aspect-ratio:3/4;height:auto}
}
@media (max-width:600px){
  body.phs-skin-planche .phs-bg-sombre .phs-gal-item{flex:0 0 44%}
}
/* menu d'en-tête : une seule ligne */
@media (min-width:922px){
  body.phs-skin-planche .main-header-menu{flex-wrap:nowrap}
  body.phs-skin-planche .main-header-menu>.menu-item>.menu-link{padding-left:.75em;padding-right:.75em;white-space:nowrap}
}