/*
Theme Name: PsychEspoir
Author: Wilfried Symphor
Description: Thème sur-mesure pour les consultations et formations.
Version: 1.0
*/

:root {
  --parch: #F9F6F0;
  --slate: #183A37;
  --profond: #12312E;
  --pin: #336B62;
  --eau: #68B4AC;
  --tan: #DAB185;
  --encre: var(--slate);
  --mut: rgba(24,58,55,.68);
  --voile: rgba(104,180,172,.10);
  --fil: rgba(24,58,55,.13);
  --filc: rgba(249,246,240,.17);
  --filet-tan: rgba(218,177,133,.55);
  --emb-tige: var(--slate);
  --emb-bourgeon: var(--tan);
  --emb-bras: var(--pin);
  --teal: var(--pin);
  --eaucl: var(--eau);
  --tancl: var(--tan);
  --tealcl: var(--eau);
  --pine: var(--profond);
  --creme: var(--parch);
  --lin: var(--parch);
  --sauge: var(--parch);
  --menthe: var(--parch);
  --titre: "DM Serif Display",Georgia,"Times New Roman",serif;
  --texte: "DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --entete: 68px;
  --large: 1180px;
  --etroit: 720px;
  --r: 4px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
img,svg{max-width:100%;}
img{height:auto;display:block;}

.ds{font-family:var(--titre);font-weight:400;letter-spacing:-.005em;}
h1,h2,h3,h4{margin:0;line-height:1.18;font-weight:400;}
h1.gr{font-size:clamp(38px,5.6vw,62px);}
h2.gr{font-size:clamp(29px,3.9vw,44px);}
h3{font-size:20px;font-weight:600;}
.gr em{font-style:italic;color:var(--pin);}
.f-slate .gr em,.f-pin .gr em,.heros .gr em{color:var(--eau);}
p{margin:0 0 16px;}
p:last-child{margin-bottom:0;}
.intro{font-size:16px;line-height:1.8;color:var(--mut);max-width:62ch;margin:18px 0 0;}
.f-slate .intro,.f-pin .intro,.heros .intro{color:rgba(249,246,240,.78);}

.wrap{width:min(100% - 44px,var(--large));margin-inline:auto;}
.wrap.etroit,.etroit{width:min(100% - 44px,var(--etroit));margin-inline:auto;}
.sec{padding-block:clamp(62px,7vw,104px);position:relative;}
.sec.court{padding-block:clamp(46px,5vw,74px);}
.sec.centre{text-align:center;}
.sec.centre .intro{margin-inline:auto;}
.sec.centre .duo-btn{justify-content:center;}

.f-slate{background:var(--slate);color:var(--parch);}
.f-pin{background:var(--profond);color:var(--parch);}
.f-creme,.f-sauge,.f-lin{background:var(--parch);}
.f-menthe{background:var(--voile);}

/* Layout */
.deux{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.deux.haut{align-items:start;}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* Animations et éléments divers */
.raccorde{position:relative;}
.raccord{position:absolute;top:-1px;left:0;width:100%;height:56px;display:block;pointer-events:none;}
.raccord path{fill:var(--depuis,var(--parch));}

html.anim .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
html.anim .rv.vu{opacity:1;transform:none;}
html.anim .rv.d1{transition-delay:.12s;}
html.anim .rv.d2{transition-delay:.24s;}
html.anim .casc>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
html.anim .casc.vu>*{opacity:1;transform:none;}
html.anim .casc.vu>*:nth-child(2){transition-delay:.1s;}
html.anim .casc.vu>*:nth-child(3){transition-delay:.2s;}

@media (max-width:980px){
  .deux{grid-template-columns:1fr !important;gap:40px;}
  .g3,.articles{grid-template-columns:repeat(2,1fr);}
  .pied .cols{grid-template-columns:1fr 1fr;gap:30px;}
}
@media (max-width:720px){
  .wrap{width:calc(100% - 32px);}
  .entete{height:auto;padding-block:10px;position:static;}
  .entete .wrap{flex-direction:column;align-items:flex-start;gap:10px;}
  .nav{gap:16px;flex-wrap:wrap;}
  .g3,.articles{grid-template-columns:1fr;}
  .pied .cols{grid-template-columns:1fr;}
}