/* ══════════════════════════════════════════════════════════════════════════
   css-2026.css — Phérénice
   Feuille de style commune à toutes les pages du site
   Dossier : /css/css-2026.css
   Mis à jour : 2026-05-16
   Les @font-face sont dans fonts.css
   Note : le background-image du .header-visuel est défini en inline
          dans chaque page car il est spécifique à chaque page.
══════════════════════════════════════════════════════════════════════════ */


/* ── VARIABLES ── */
:root {
  --h-header:  60px;
  --h-mobile:  55px;
  --cadre:     60px;
  --c-txt:     #1d1d1d;
  --c-lien:    #0048c7;
  --c-hover:   #00ACED;
  --c-accent:  #66d3af;
  --c-aqua:    #7FFFD4;
  --c-corail:  #ff8686;
  --f-body:    'Poppins','Titillium Web',Georgia,serif;
  --f-titre:   'Tenor Sans','Titillium Web',Tahoma,Geneva,sans-serif;
  --f-deco:    'Cagliostro',Georgia,serif;
  --tr:        200ms ease;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }

/* ── BASE ── */
body { font-family: var(--f-body); font-size: .999em; line-height: 1.7em; color: var(--c-txt); background: #fff }
h1, h2, h3, h4 { font-family: var(--f-titre); letter-spacing: .02em; color: var(--c-txt); font-weight: 600 }
h1           { margin-bottom: 10px; font-size: 1.6em; line-height: 1.4em }
h1.s-titre   { margin: 30px 0 10px; font-size: 1.35em; line-height: 1.5em; font-weight: 400 }
h2           { margin-bottom: 10px; font-size: 1.25em; line-height: 26px; letter-spacing: 1.5px }
h3           { font-size: 1.10em; margin-top: 20px }
h4           { margin-bottom: 10px; font-size: 18px; line-height: 24px }
p, li        { font-size: .999em; line-height: 1.7em; margin: 10px }
a            { color: var(--c-lien); text-decoration: none; transition: color var(--tr) }
a:hover      { color: var(--c-hover) }
p a, li a:not(.nav-lien) {
  text-decoration: underline;
  text-decoration-color: rgba(0,72,199,.30);
  text-underline-offset: 3px;
  transition: color var(--tr), text-decoration-color var(--tr);
}
p a:hover, li a:not(.nav-lien):hover { color: var(--c-hover); text-decoration-color: var(--c-hover) }
img          { max-width: 100%; vertical-align: middle; display: inline-block }
ul           { list-style: none; padding-left: 0 }
abbr, dfn    { font-style: normal; border-bottom: 1px dotted; text-decoration: none }
::selection  { color: #fff; background: #111 }

/* ── UTILITAIRES ── */
.f-titre  { font-family: var(--f-titre) }
.f-titre .accent { color: #d94f4f }
.f-deco   { font-family: var(--f-deco) }
.tc       { text-align: center }
.tl       { text-align: left }
.tw       { color: #fff }
.mt-20    { margin-top: 20px }
.mt-30    { margin-top: 30px }
.mt-40    { margin-top: 40px }
.mt-50    { margin-top: 50px }
.mt-60    { margin-top: 60px }
.mb-20    { margin-bottom: 20px }
.liste    { list-style: disc; padding-left: 1.5rem }
.liste-ol { list-style: decimal; padding-left: 1.5rem }
.liste li, .liste-ol li { margin-bottom: .5rem }
.blox-contenu ul.liste > li::marker { color: #66d3af }
.blox-contenu ul.liste ul.liste > li::marker { color: #1d1d1d }

/* ── PRÉCHARGEUR ── */
#preloader { position: fixed; inset: 0 0 auto; height: 2px; z-index: 1000 }
#preloader-bar { position: absolute; height: 100%; left: 0; background: var(--c-aqua); width: 0% }
#preloader.done { opacity: 0; transition: opacity .2s linear .5s; pointer-events: none }

/* ── CADRE FIXE 4 BORDURES ── */
.cadre-gauche, .cadre-droite { position: fixed; z-index: 100; width: var(--cadre); background: #fff }
.cadre-gauche { inset: 0 auto 0 0 }
.cadre-droite { inset: 0 0 0 auto }
.cadre-bas {
  position: fixed; inset: auto 0 0; z-index: 100;
  height: var(--cadre); background: #fff;
  padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;
}

/* ── HEADER ── */
header {
  position: fixed; inset: 0 0 auto; z-index: 200;
  height: var(--h-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 50px; background: #fff;
}
.logo { display: inline-flex; align-items: center; padding: 2px 8px; transition: background var(--tr) }
.logo:hover { background: var(--c-aqua) }
.logo svg { height: 34px; width: auto; display: block }
.logo svg text { fill: var(--c-txt) }
.logo svg .logo-line { fill: none; stroke: var(--c-txt); stroke-width: 3px }

/* ── HAMBURGER ── */
.hamburger { position: relative; overflow: hidden; width: 46px; height: 46px; background: transparent; border: none; cursor: pointer; font-size: 0; text-indent: -9999px }
.hamburger:focus { outline: none }
.hamburger:hover .bar::before, .hamburger:hover .bar::after { background: var(--c-accent) }
.bar { display: block; position: absolute; top: 22px; left: 12px; right: 12px; height: 2px; background: #111; transition: background 0s .3s }
.bar::before, .bar::after { position: absolute; display: block; left: 0; width: 100%; height: 2px; background: #111; content: "" }
.bar::before { top: -6px; transition: top .3s .3s, transform .3s 0s }
.bar::after  { bottom: -6px; transition: bottom .3s .3s, transform .3s 0s }
.hamburger.ouvert .bar { background: none }
.hamburger.ouvert .bar::before { top: 0; transform: rotate(45deg); transition: top .3s 0s, transform .3s .3s }
.hamburger.ouvert .bar::after  { bottom: 0; transform: rotate(-45deg); transition: bottom .3s 0s, transform .3s .3s }

/* ── BARRE BAS — icônes sociaux ── */
.icones-sociaux { display: flex; gap: .2rem; align-items: center; margin-left: 40px }
.si { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #111; transition: color 400ms ease }
.si svg { width: 16px; height: 16px; fill: currentColor }
.si-blanc { color: #fff }
.si-p:hover { color: #bd081c }
.si-l:hover { color: var(--c-accent) }
.si-e:hover { color: var(--c-hover) }
.cadre-bas .si { opacity: 0; pointer-events: none }
.cadre-bas .si.fadein  { animation: iconMonte 1s ease both; pointer-events: all }
.cadre-bas .si:nth-child(1).fadein { animation-delay: .08s }
.cadre-bas .si:nth-child(2).fadein { animation-delay: .40s }
.cadre-bas .si:nth-child(3).fadein { animation-delay: .60s }
.cadre-bas .si.fadeout { animation: iconDescend .2s ease forwards; pointer-events: none }
@keyframes iconMonte   { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:none } }
@keyframes iconDescend { from { opacity:1; transform:none } to { opacity:0; transform:translateY(4px) } }
.copyright { font-size: 11px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #464646; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; pointer-events: none }
.copyright.visible { opacity: 1; transform: none; pointer-events: all; margin-right: 50px }
.copyright.masque  { opacity: 0; transform: translateY(6px); pointer-events: none }

/* ── MENU OVERLAY ── */
.menu-overlay { position: fixed; inset: var(--h-header) var(--cadre) var(--cadre); z-index: 150; display: none; background: rgba(0,0,0,.85) }
.menu-overlay.ouvert { display: block }
.menu-liens { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center }
.menu-liens ul { list-style: none }
.menu-liens li { margin-bottom: 18px }
.nav-lien { display: inline-block; padding: 5px 0; color: #B0B0B0; font-family: var(--f-titre); font-size: clamp(.75rem,1.3vw,.95rem); letter-spacing: 5px; text-transform: uppercase; transition: color 400ms ease }
.nav-lien:hover, .nav-lien[aria-current="page"] { color: #fff }
.menu-pied { position: absolute; left: 0; right: 0; bottom: 20px; padding: 0 45px; display: flex; align-items: center; justify-content: space-between }
.menu-pied .icones-sociaux { margin-left: 0 }
footer .copyright, .menu-pied .copyright { opacity: 1; transform: none; pointer-events: all; margin-right: 0; color: #fff }

/* ── POINTS DE NAVIGATION ── */
.nav-points { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 101; width: var(--cadre); display: flex; flex-direction: column; align-items: center; gap: 14px }
.nav-point { display: block; width: 44px; height: 44px; background: transparent; cursor: pointer; border: none; padding: 0; position: relative }
.nav-point::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: #896d55; transition: background .3s ease, transform .3s ease }
.nav-point.actif::after { background: var(--c-aqua); transform: translate(-50%,-50%) scale(1.3) }
.nav-point:hover::after { background: var(--c-hover) }

/* ── SCROLL MARGIN — décalage pour header fixe ── */
/* Exclut top-page (géré par JS scroll to top) */
[id]:not([id="top-page"]) {
  scroll-margin-top: calc(var(--h-header) + 20px);
}
@media (max-width: 991px) {
  [id]:not([id="top-page"]) {
    scroll-margin-top: calc(var(--h-mobile) + 20px);
  }
}

/* ── MAIN ── */
main { margin-top: var(--h-header) }

/* ── HEADER VISUEL pages intérieures ── */
/* Le background-image est défini en style inline dans chaque page */
.header-visuel {
  position: relative; height: 380px;
  background-size: cover; background-attachment: fixed;
  background-position: 55% 34%; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 992px) { .header-visuel { margin: 0 50px; height: 420px } }
.header-visuel-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.25)), url('../images/ptn-3.png') }
.header-visuel-txt { position: relative; z-index: 2; text-align: center }
.header-visuel-titre { display: block; color: #fff; font-family: var(--f-titre); font-size: clamp(1.8rem,4vw,3rem); line-height: 1.3em; letter-spacing: 6px }

/* ── CONTAINER ── */
.ctn { margin: 0 auto; max-width: 940px; padding: 0 20px }
@media (min-width: 1200px) { .ctn { max-width: 1170px } }

/* ── SECTIONS ── */
.section         { padding: 60px 0 }
.bg-lavande      { background: rgba(242,243,253,.945) }
.bg-bleu         { background: #d9e7f8 }
.bg-vert         { background: #deeeee }
.section-entete  { margin-bottom: 30px; text-align: center; letter-spacing: 2px }
.section-ornement{ text-align: center; margin: 12px auto 20px }
h1:has(+ div.section-ornement),
h2:has(+ div.section-ornement) { text-align: center }

/* ── INTRO ── */
.intro { max-width: 900px; margin: 0 auto 40px; text-align: center; font-size: 1.05em; line-height: 1.8em; color: #444; padding: 0 20px }

/* ── BLOX CONTENU ── */
.blox-contenu {
  border-radius: 20px; background: rgba(255,255,255,.92);
  margin: 0 auto; padding: 40px; max-width: 900px;
}
.blox-contenu > :first-child { margin-top: 20px }
.blox-contenu + .blox-contenu { margin-top: 60px }
p a.detail { margin-bottom: 35px }

/* ── CONTENU ARTICLE ── */
.contenu h2              { margin-top: 30px; margin-bottom: 10px }
.contenu h2:first-child  { margin-top: 0 }
.contenu h3 { margin-top: 30px; margin-bottom: 10px; color: #3d2f5f }
.contenu p  { margin: 0 0 15px }
.contenu ul.liste { margin: 10px 0 20px }
.img-contenu { display: block; margin: 30px auto; max-width: 100%; height: auto; border-radius: 8px }
.img-carte { display: block; margin: 20px auto 30px; max-width: 100%; height: auto; border-radius: 4px; transition: opacity var(--tr) }
.img-carte:hover { opacity: .88 }
figure { margin: 30px 0 }
figcaption { text-align: center; font-size: .9em; color: #666; margin-top: 8px; font-style: italic }

/* ── VOIR ÉGALEMENT ── */
.voir-egalement { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(137,109,85,.2) }
hr.voir-egalement { border: none; border-top: 1px solid rgba(137,109,85,.2); margin-top: 40px; margin-bottom: 0; padding: 0 }
.voir-egalement h2 { font-size: 1.1em; margin-bottom: 15px; color: #896d55 }
.voir-egalement ul { list-style: disc; padding-left: 1.5rem }
.voir-egalement li { margin-bottom: 8px }

/* ── ONGLETS (accueil) ── */
.onglets { border-radius: 20px; background: rgba(255,255,255,.92); margin: 0 auto; max-width: 900px; padding: 20px }
.ong-menu { margin-bottom: 30px; border-bottom: 1px solid #fff; text-align: center; padding: 0 10px }
.ong-btn { display: inline-block; padding: 20px 15px 10px; background: transparent; border: none; border-bottom: 1px dotted transparent; color: #514f4f; font-family: var(--f-body); font-size: .99em; letter-spacing: 1px; cursor: pointer; transition: color var(--tr) }
.ong-btn:hover { color: #896d55; border-bottom-color: #896d55 }
.ong-btn[aria-selected="true"] { border-bottom: 1px solid #896d55; color: #896d55; font-weight: 500 }
.ong-contenu { max-width: 900px; margin: 0 auto; padding: 0 5px }
.ong-panneau { display: none }
.ong-panneau.actif { display: block; animation: glisse .3s ease }
@keyframes glisse { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
.ong-interieur { padding: 10px 10px 20px }
.ong-interieur h3 { color: #3d2f5f; margin: 0 10px }
.ong-interieur h4 { margin: 1.5rem 10px .5rem }
.ong-interieur ul, .ong-interieur ol { padding-left: 1.5rem; margin-bottom: 1rem }
.ong-interieur li { margin-bottom: .5rem }

/* ── SLIDER HERO (accueil) ── */
.hero { position: relative; height: calc(100vh - var(--h-header) - var(--cadre)); height: calc(100dvh - var(--h-header) - var(--cadre)); min-height: 400px; max-height: 1280px; margin: 0 50px; overflow: hidden }
.slide { position: absolute; inset: 0; padding: 0 20px; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity .5s ease }
.slide.actif { opacity: 1 }
.sl1 { background-color: #facc76; background-image: url('../slider/slide_Pherenice-Consulting-Consultant-AMOA-et-SEO_001_2x.webp'); background-position: 50% 27% }
.sl2 { background-color: #9bcef0; background-image: url('../slider/slide_Pherenice-Consulting-Prestation-Audit-SEO_002_2x.webp'); background-position: 53% 8% }
.sl3 { background-color: #e2a298; background-image: url('../slider/slide_Pherenice-Consulting-Optimisation-SEO_003_2x.webp'); background-position: 50% 53.7% }
.hero-texte { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 10; width: 90%; max-width: 900px }
.hero-titre { display: block; color: #fff; font-family: var(--f-titre); font-size: 48px; line-height: 80px; letter-spacing: 8px }
.typed::after { content: '|'; color: #fff; font-weight: 300; margin-left: 1px; animation: clignote .7s infinite }
@keyframes clignote { 0%, 100% { opacity:1 } 50% { opacity:0 } }
.slide-prev { position: absolute; inset: 0 auto 0 0; width: 50%; z-index: 5; cursor: url('../images/s_left.gif'), e-resize }
.slide-next { position: absolute; inset: 0 0 0 auto; width: 50%; z-index: 5; cursor: url('../images/s_right.gif'), e-resize }
.indicateur { display: block; position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 20; width: 30px; height: 50px; border: 3px solid rgba(255,255,255,.6); border-radius: 25px; background-color: rgba(255,255,255,0) }
.indicateur::before { content: ''; position: absolute; left: 50%; margin-left: -3px; top: 8px; width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: bille 1.5s infinite }
@keyframes bille { 0% { opacity:1 } 100% { opacity:0; transform:translateY(46px) } }

/* ── PARALLAX (accueil) ── */
.parallax { position: relative; height: 450px; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-image: url('../parallax/parallax_Pherenice-Consulting-Consultant-SEO-Audit-SEO_Blue.webp'); background-position: 55% 34% }
.parallax-calque { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,.2)), url('../images/ptn-3.png') }

/* ── SECTION 404 ── */
.section-404 { min-height: calc(100vh - var(--h-header) - var(--cadre)); display: flex; align-items: center; justify-content: center; padding: 60px 20px; background: #d9e7f8 }
.bloc-404 { border-radius: 20px; background: rgba(255,255,255,.92); padding: 60px 40px; max-width: 680px; width: 100%; text-align: center }
.code-404 { font-family: var(--f-titre); font-size: clamp(5rem,15vw,9rem); line-height: 1; color: #d94f4f; letter-spacing: 8px; display: block; margin-bottom: 10px }
.bloc-404 p { color: #555; margin: 0 0 12px }
.bloc-404 ul.liste { text-align: left; display: inline-block; margin-top: 20px }

/* ── ANIMATIONS AU SCROLL ── */
.anim         { opacity: 0 }
.anim.visible { animation: monterApparaître 1s both }
@keyframes monterApparaître { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:none } }

/* ── RETOUR EN HAUT ── */
.retour-haut { display: inline-flex; align-items: center; justify-content: center; position: fixed; bottom: 70px; right: 70px; width: 40px; height: 40px; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; z-index: 80; transition: opacity .3s, visibility .3s }
.retour-haut.visible { opacity: 1; visibility: visible }
.retour-haut.estompe { opacity: .5 }
.retour-haut:hover   { background: #212121; opacity: 1 }

/* ── FOOTER ── */
footer { padding: 30px 0 90px; background: #242424; color: #fff; text-align: center }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .cadre-gauche, .cadre-droite, .cadre-bas, .nav-points { display: none }
  header { height: var(--h-mobile); padding: 0 15px }
  main   { margin-top: var(--h-mobile) }
  .hero  { height: calc(100vh - var(--h-mobile)); height: calc(100dvh - var(--h-mobile)); margin: 0 }
  .header-visuel { height: 260px; margin: 0; background-attachment: scroll }
  .header-visuel-titre { font-size: 1.6rem; letter-spacing: 3px }
  .menu-overlay { inset: 0 }
  .parallax { background-attachment: scroll }
  .section { padding-top: 40px }
  footer   { padding-bottom: 30px }
  .retour-haut { right: 80px; bottom: 80px }
  .blox-contenu { padding: 25px }
  .indicateur { bottom: 50px }
  .section-404 { min-height: calc(100vh - var(--h-mobile)) }
  .bloc-404 { padding: 40px 20px }
}
@media (max-width: 768px) {
  .hero-titre { font-size: 38px; line-height: 60px }
  .menu-liens { padding: 0 20px }
  .retour-haut { right: 20px; bottom: 40px }
}
@media (max-width: 479px) {
  .menu-liens { padding: 0 }
  .ong-btn { display: block; width: 100%; text-align: left; border-bottom: 1px solid rgba(137,109,85,.3); border-radius: 0 }
  .ong-btn[aria-selected="true"] { border-bottom: 1px solid #896d55 }
  .blox-contenu { padding: 15px }
}

/* ── iOS Safari — désactive parallax fixe non supporté ── */
@supports (-webkit-touch-callout: none) {
  .header-visuel,
  .parallax {
    background-attachment: scroll;
    background-position: center center;
  }
}