/* ==========================================================================
   seo-fixes.css — complément à style.css
   Calibré sur le style.css réel (thème « Mycv », Imaginacionweb).
   À charger APRÈS style.css.

   Rôle : reproduire exactement ce que faisait jquery-func.js, et rétablir
   l'apparence là où les balises ont changé pour corriger la sémantique.
   Aucune modification visuelle voulue.
   ========================================================================== */


/* ==========================================================================
   0. RESTAURATIONS — à lire en premier
   Trois règles qui rétablissent ce que le JavaScript supprimé assurait.
   ========================================================================== */

/* FOND DU SITE.
   La texture n'a jamais été dans le CSS : theme-options.js la posait au
   chargement via `$('body').css('background-image', ...)`, avec
   /img/bg-theme/3.png comme valeur par défaut. En CSS, c'est plus rapide
   (plus d'attente du JS) et plus fiable.
   Les variantes 1.png à 11.png existent dans /img/bg-theme/ si tu veux
   en changer. */
body {
  background-image: url("../img/bg-theme/3.png");
}

/* BOUTON CV.
   `#button_download` est un <a> en display:inline avec du padding.
   Dès que le libellé est assez long pour passer à la ligne, le fond noir
   se scinde et le texte déborde. inline-block + nowrap règle ce point. */
#button_download {
  display: inline-block;
  white-space: nowrap;
}

/* Mais le libellé long reste plus large que la colonne .span2 qui
   l'accueille (≈14,5 % de la ligne en grille fluide Bootstrap 2), d'où le
   chevauchement avec les icônes sociales. On élargit la colonne.
   30 % + 40 % (.span5) + 2,1 % de gouttière = 72 %, ça tient largement.
   
   Alternative sans cette règle : remettre le libellé court
   « Télécharger » dans index.php et laisser l'intitulé complet dans les
   attributs title et aria-label. La mise en page d'origine est alors
   conservée à l'identique. */
.row-fluid .span2.download { width: 30%; }

@media handheld, only screen and (max-width: 767px) {
  .row-fluid .span2.download { width: auto; }
}

/* PIED DE PAGE.
   style.css cible `footer h6`. Le copyright est passé en <p> (un h6 pour
   une mention légale n'a pas de sens sémantique), il faut donc reporter
   les règles : sans cela, plus de centrage ni de filet de séparation. */
footer p {
  text-align: center;
  border-top: 1px solid #cdcdcd;
  padding: 20px 0;
  margin: 0;
}

/* CAPITALES.
   Les libellés sont désormais en minuscules dans le HTML — c'est mieux
   pour les lecteurs d'écran, qui épellent parfois les mots tout en
   capitales. Les capitales redeviennent une décision purement visuelle.
   Commente ces deux règles si tu préfères la casse naturelle. */
.nav #menu a      { text-transform: uppercase; }
.title_section h2 { text-transform: uppercase; }


/* ==========================================================================
   1. PORTFOLIO — CRITIQUE
   style.css pose `.img-preview { opacity: 0 }` et c'est jquery-func.js qui
   l'animait vers 1 au survol. Sans ces règles, tout le bloc TRAVAUX reste
   invisible : ni titres, ni descriptions, ni liens.
   ========================================================================== */

.item-preview .img-preview {
  opacity: 0;
  transition: opacity .3s ease;
}

/* :focus-within = le lien « Voir le site » devient enfin atteignable
   au clavier. Ce n'était pas le cas avec la version jQuery. */
.item-preview:hover .img-preview,
.item-preview:focus-within .img-preview {
  opacity: 1;
}

/* Sur écran tactile il n'y a pas de survol : l'overlay resterait
   inaccessible. On l'affiche en permanence. */
@media (hover: none) {
  .item-preview .img-preview { opacity: 1; }
}

/* Le <h2> du portfolio est devenu <h3> (il était au même niveau que les
   titres de section). Reprise à l'identique des règles de .img-preview h2,
   avec la taille du h2 du thème pour que le rendu soit inchangé. */
.img-preview h3 {
  font-size: 30px;              /* = h2 du thème */
  line-height: 30px;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-align: center;
  color: #fff;
  margin: 0;
  margin-top: 13%;
  padding: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
}


/* ==========================================================================
   2. ACCORDÉONS <details> — remplacent le code jQuery
   Les classes .accordion-trigger et .accordion-container sont conservées,
   donc tous tes styles existants s'appliquent encore.
   ========================================================================== */

details.accordion-item { display: block; }

summary.accordion-trigger {
  display: block;              /* sinon `list-item` casse le padding */
  list-style: none;
  user-select: none;
}
summary.accordion-trigger::-webkit-details-marker { display: none; }
summary.accordion-trigger::marker { content: ""; }

/* Ouverture / fermeture. Spécificité volontairement élevée pour
   l'emporter sur tout `display` défini ailleurs. */
details.accordion-item:not([open]) > .accordion-container { display: none; }
details.accordion-item[open]      > .accordion-container { display: block; }

/* Reprend exactement l'état `.accordion-trigger.active` que jQuery
   appliquait : la flèche du sprite toggle.png bascule en position ouverte. */
details.accordion-item[open] > summary.accordion-trigger {
  background: #f0f0f0 url("../img/toggle.png") no-repeat right -69px;
  color: #000;
}

/* Le <h3> dans le <summary> doit rester en ligne, sinon la date passe
   à la ligne. Il hérite intégralement de l'apparence du trigger :
   la sémantique change, le rendu non. */
summary.accordion-trigger > h3 {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
}

/* Remplace les anciens <h5> du contenu d'accordéon */
.accordion-container p.entity {
  margin: 0;
  padding: 0;
  font-weight: 700;
}


/* ==========================================================================
   3. NAVIGATION COLLANTE — remplace jquery.sticky.js
   
   Correction : `position: sticky` ne fonctionnait pas ici, et le fond blanc
   cassait la continuité de la texture. On reproduit désormais exactement
   ce que faisait le plugin — `position: fixed` appliqué au moment où la
   classe .is-sticky arrive, et rien avant.
   
   Point important : `.is-sticky` dans ton style.css ne définit AUCUN
   `position`. Le plugin l'ajoutait en inline via JavaScript. La classe
   seule ne fait que colorer ; il faut donc la positionner ici.
   ========================================================================== */

/* Aucun fond ni position hors défilement : la texture du body traverse la
   barre, comme dans la version d'origine. */
nav.nav {
  position: relative;
  z-index: 99999;
}

/* État collé. style.css fournit déjà le fond noir, le padding et les liens
   blancs ; on n'ajoute que le positionnement. */
nav.nav.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-bottom: 0;
}

/* Réserve la hauteur libérée quand la barre passe en position fixed,
   sinon le contenu remonte d'un coup. Le plugin faisait pareil avec son
   .sticky-wrapper. La hauteur est renseignée par le script. */
.nav-spacer { height: 0; }

/* Menu mobile — remplace tinynav.js.
   style.css masque #menu sous 767 px : on le réaffiche à l'ouverture. */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid #cdcdcd;
  color: inherit;
  font: inherit;
  padding: .5em .9em;
  cursor: pointer;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: inline-block;
  width: 1.1em;
  height: 2px;
  background: currentColor;
  vertical-align: middle;
  margin-right: .5em;
  position: relative;
}
.nav-toggle-bar::before,
.nav-toggle-bar::after { content: ""; position: absolute; left: 0; margin: 0; }
.nav-toggle-bar::before { top: -5px; }
.nav-toggle-bar::after  { top:  5px; }

.is-sticky .nav-toggle { color: #fff; border-color: #fff; }

@media handheld, only screen and (max-width: 767px) {
  .nav-toggle { display: inline-block; }

  /* #menu = spécificité (1,0,0) dans style.css ; (1,2,0) ici, donc on gagne */
  .nav #menu.is-open { display: block; }
  .nav #menu.is-open li { float: none; display: block; margin: 0; }
  .nav #menu.is-open li a { display: block; padding: 8px 0; }
}


/* ==========================================================================
   4. Ancres et défilement
   `html { scroll-behavior: smooth }` existe déjà dans style.css : on ne
   le redéclare pas. Il manquait en revanche la marge d'ancrage, sans
   quoi la nav collante recouvre le titre de la section ciblée.
   ========================================================================== */

section[id],
header[id] { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   5. Titres des blocs de contact (h4 → h3)
   Reprise des règles .item_info h4 avec la taille du h4 du thème.
   ========================================================================== */

.item_info h3 {
  font-size: 20px;              /* = h4 du thème */
  line-height: 30px;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #232323;
  padding: 0 0 0 20px;
  margin: 0;
}


/* ==========================================================================
   6. Accessibilité
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  padding: .75em 1.25em;
  background: #000;
  color: #fff;
  /* Masquage par clip-path plutôt que left:-9999px : un élément projeté
     très loin peut, selon le contexte, créer une barre de défilement
     horizontale. clip-path n'a jamais cet effet. */
  clip-path: inset(50%);
}
.skip-link:focus { clip-path: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}
.is-sticky a:focus-visible { outline-color: #fff; }

/* Étiquettes de formulaire : lues par les lecteurs d'écran, masquées à
   l'écran pour ne pas modifier ta mise en page. Passe ce bloc en
   commentaire pour les afficher — ce serait d'ailleurs plus ergonomique. */
.contact form label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot anti-spam. Même remarque que pour .skip-link : on masque sans
   déplacer, et sans `display:none` que certains robots savent détecter. */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Les infobulles Bootstrap disparaissent avec bootstrap.js. L'attribut
   title reste en place : le navigateur affiche son infobulle native. */
.tooltip_hover { cursor: pointer; }


/* ==========================================================================
   7. Images — suppression du CLS
   `.item-preview img { width: 100% }` existe déjà ; il manquait
   `height: auto`, sans quoi les attributs width/height du HTML
   déforment les images.
   ========================================================================== */

.item-preview img,
.me img { height: auto; max-width: 100%; }

/* Si tes captures n'ont pas toutes le même ratio, décommente pour
   forcer un cadre homogène : */
/*
.item-preview img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
}
*/


/* ==========================================================================
   8. Barres de compétences
   ========================================================================== */

.progress .bar[role="progressbar"] { overflow: visible; white-space: nowrap; }