:root{
  /* Identite */
  --bleu-canard: rgb(29, 72, 81);   /* sections Presentation / Post-bac, survol navbar */
  --vert-accent: #2ecc71;           /* boutons */
  --fond-page: #fff;                /* fond de page, et fond de la navbar au defilement */
  --nav-survol: #191919;
  --gris-date: darkgray;
  --carte-bordure: rgba(29, 72, 81, 0.15);
  --carte-ombre: rgba(29, 72, 81, 0.18);

  /* Graphe du parcours : une couleur par organisation */
  --branche-principale: red;
  --branche-pappers: cornflowerblue;
  --branche-armee: darkgreen;
  --branche-coface: darkcyan;

  /* Reseaux sociaux : couleurs de marque, utilisees au survol du pied de page */
  --facebook: #1877f2;
  --instagram: #e1306c;
  --youtube: #ff0000;
  --linkedin: #0a66c2;

  /* Chrome du navigateur */
  --scrollbar-curseur: rgba(20, 24, 28, 0.35);
  --scrollbar-curseur-survol: rgba(20, 24, 28, 0.6);
  --selection: #48dbfb60;
}
*{
  margin: 0;
  font-family: Arial;
  text-decoration: none;
}
*, *::before, *::after{
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
.blanc{
  color: white;
}
.noir{
  color: black;
}
/* Navbar : .navbar sur l'accueil, .navbar2 sur les pages interieures.
   .navmouvement est ajoutee par Script/script.js au defilement. */
.navbar, .navbar2{
  width: 100%;
  background-color: transparent;
  overflow: auto;
  position: fixed;
  padding: 5px 0;
  transition: .3s linear;
  z-index: 20;
}
.navbar a, .navbar2 a{
  float: left;
  text-align: center;
  padding: 12px;
  color: white;
  margin-left: 15px;
  font-size: 17px;
  font-weight: bold;
}
.navbar a:hover, .navbar2 a:hover{
  background-color: var(--nav-survol);
  transition: 0.3s;
}
.navmouvement{
  background-color: var(--fond-page);
  padding: 0;
}
.navmouvement.navbar a, .navmouvement.navbar2 a{
  color: black;
}
.navmouvement.navbar a:hover, .navmouvement.navbar2 a:hover{
  color: white;
  background-color: var(--bleu-canard);
}
/* Selection */
::selection{
  background-color: var(--selection);
}
/* Ascenseur
   Le natif est entierement masque : le navigateur ne reserve plus de gouttiere,
   les sections occupent donc toute la largeur de la fenetre. Le curseur visible
   est dessine par Script/script.js et flotte par-dessus le contenu.
   Le defilement molette, clavier et tactile reste celui du navigateur. */
html{
  scrollbar-width: none;      /* Firefox, Chrome 121+ */
}
::-webkit-scrollbar{
  display: none;              /* Chrome, Edge et Safari plus anciens */
}
.ascenseur{
  position: fixed;
  top: 0;
  right: 0;
  width: 12px;
  height: 100%;
  z-index: 30;                /* au-dessus de la navbar, qui est a 20 */
  /* Indispensable : sans cela, cette bande invisible sur toute la hauteur
     intercepterait les clics destines au contenu situe dessous. */
  pointer-events: none;
}
.ascenseur-curseur{
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  border-radius: 6px;
  background-color: var(--scrollbar-curseur);
  pointer-events: auto;       /* seul le curseur reste attrapable */
  cursor: grab;
  transition: opacity .25s linear, background-color .2s linear;
}
.ascenseur-curseur:hover{
  background-color: var(--scrollbar-curseur-survol);
}
/* Page trop courte pour defiler : aucun curseur */
.ascenseur.inactif{
  display: none;
}
/* Efface apres un temps d'inactivite */
.ascenseur.repos .ascenseur-curseur{
  opacity: 0;
}
body.ascenseur-glisse{
  user-select: none;
}
body.ascenseur-glisse .ascenseur-curseur{
  cursor: grabbing;
  background-color: var(--scrollbar-curseur-survol);
}
/* Banniere d'accueil */
#home{
  height: 100vh;
  min-height: 500px;
  background: url(Photos/giphy.gif) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}
#home h1{
  text-align: center;
  color: white;
  font-size: 80px;
}
/* Effet machine a ecrire, en CSS pur.
   Le nom s'ecrit lettre a lettre, marque un temps, s'efface, puis se reecrit
   dans la police suivante. Trois cycles : Arial, American Typewriter, Aurebesh.

   La largeur du bloc est animee par paliers (steps) : c'est elle qui revele le
   texte, masque par overflow:hidden. Les largeurs sont exprimees en em et
   mesurees pour chaque police, car « Yann Loyer » n'occupe pas du tout la meme
   place en Impact (4,4 em) qu'en Aurebesh (8,3 em). L'unite em suit la taille
   de police, l'effet reste donc juste en mobile ou le titre passe a 40px. */
#home h1 .frappe{
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  /* Exception au border-box global : sans cela, le curseur de 0,08 em serait
     compte dans la largeur animee et rognerait la derniere lettre du nom.
     En content-box, les largeurs ci-dessous designent bien le seul texte. */
  box-sizing: content-box;
  width: 0;
  border-right: 0.08em solid currentColor;
  animation:
    frappe 12s steps(10) infinite,
    polices 12s infinite,
    curseur 0.8s step-end infinite;
}
/* Largeurs mesurees pour « Yann Loyer » police par police, GRAISSE 700 COMPRISE
   (un <h1> est gras par defaut), plus 0,06 em de marge pour le curseur.
   Attention : Aurebesh n'a pas de variante grasse, sa largeur est donc la meme
   qu'en normal. Arial et le repli serif, eux, s'elargissent de 7 % en gras. */
@keyframes frappe{
  /* Arial : 5,39 em en gras (5,04 en normal) */
  0%           { width: 0; }
  12%,  25%    { width: 5.45em; }
  31%,  33.3%  { width: 0; }
  /* American Typewriter, repli serif : 5,03 em en gras (4,70 en normal) */
  45.3%, 58.3% { width: 5.09em; }
  64.3%, 66.6% { width: 0; }
  /* Aurebesh : 8,32 em */
  78.6%, 91.6% { width: 8.38em; }
  97.6%, 100%  { width: 0; }
}
/* Le changement de police se fait pendant que le texte est efface, donc
   invisible. Les paliers sont doubles (33.2 puis 33.3) car une propriete non
   interpolable bascule au milieu de l'intervalle : en le reduisant a 0,1%, la
   bascule tombe precisement dans la fenetre ou la largeur vaut zero. */
@keyframes polices{
  0%,     33.2% { font-family: Arial; }
  33.3%,  66.5% { font-family: American Typewriter, serif; }
  66.6%, 100%   { font-family: "Aurebesh"; }
}
@keyframes curseur{
  0%, 100% { border-right-color: currentColor; }
  50%      { border-right-color: transparent; }
}
img#photo-acceuil{
  /* border-box : la largeur inclut le padding.
     480 = 300 d'image + 2 x 90 de padding. */
  width: 480px;
  padding: 90px;
  display: block;
  margin: 0 auto -5%;
}
img#fleche-acceuil{
  display: block;
  width: 20%;
  margin: -40px auto 0;
}
.present-btn{
  margin-top: 50px;
}
/* Banniere des pages interieures et pied de page : meme habillage */
#home-post, footer{
  background: url(Photos/giphy.gif) no-repeat center;
  background-size: 100%;
  padding: 80px 0;
  color: white;
  text-align: center;
}
#home-post h1{
  font-size: 80px;   /* la couleur et le centrage sont herites de #home-post */
}
/* Effet machine a ecrire des titres de page (Parcours, Projets, Contact, et
   toutes les pages dediees des projets personnels) : meme mecanique que celui
   de l'accueil (la largeur animee par steps revele le texte, cache par
   overflow:hidden), mais sans cycle de polices puisqu'une seule est utilisee
   ici - celle du site.
   Chaque page affiche un titre different, donc une largeur differente : plutot
   que d'ecrire une classe et un @keyframes par page (ce qui ne passait pas a
   l'echelle au-dela de 3 pages), Script/script.js mesure la largeur naturelle
   du texte via scrollWidth (fiable malgre le width:0 impose ici, car
   white-space:nowrap force le texte a garder sa largeur intrinseque) et la
   fournit a l'animation via --largeur-frappe. Aucun CSS a ajouter pour une
   nouvelle page : il suffit du meme balisage <span class="frappe">.
   Le nombre de pas (steps) est lui aussi fixe par le script, egal au nombre de
   lettres du titre - sinon, avec un nombre de pas fixe pour tous les titres,
   un mot court avance par sauts plus petits qu'une lettre et l'effet ne se lit
   plus comme une frappe au clavier. steps(20) ci-dessous n'est qu'un repli si
   le script echoue. */
#home-post h1 .frappe{
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: content-box;   /* le curseur ne doit pas mordre sur le texte */
  width: 0;
  border-right: 0.08em solid currentColor;
  animation: frappe-page 4s steps(20) infinite, curseur 0.8s step-end infinite;
}
@keyframes frappe-page{
  0%       { width: 0; }
  35%, 80% { width: var(--largeur-frappe, 6em); }
  95%,100% { width: 0; }
}
@font-face{
	font-family: "Aurebesh";
	src: url('Police/Aurebesh.otf');
}
/* Sections
   min-height 475px = 275 de contenu + 2 x 100px de padding : avec
   box-sizing: border-box, min-height englobe le padding. */
#Presentation, #competences, #Post-bac, #Pre-bac{
  min-height: 475px;
  padding: 100px 0;
}
#Presentation, #Post-bac{
  background-color: var(--bleu-canard);
}
#Post-bac{
  color: white;
}
/* Le titre de la section Compétences est un <h2> : la page comptait trois <h1>
   (le nom, Présentation, Compétences), ce qui n'est valide qu'une fois. */
#competences h2, #Post-bac h1, #Pre-bac h1{
  margin: 10px auto;
  text-align: center;
  font-size: 32px;
}
#Post-bac h1, #Pre-bac h1{
  text-decoration: underline;
}
#Presentation h2{
  color: white;
  font-size: 32px;
  margin-bottom: 20px;
}
/* Le paragraphe tenait auparavant par une marge negative de -110px a cote de
   la photo, et s'etalait justifie sur toute la largeur. La colonne de lecture
   est desormais bornee : au-dela d'environ 65 caracteres, l'oeil perd la ligne. */
.present{
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1240px;
  margin: 0 auto;
}
/* La taille de police est portee par le conteneur, pas par les paragraphes :
   l'unite ch se calcule sur la police de l'element ou elle est ecrite. Placee
   sur les <p>, la limite de 65 caracteres serait restee calee sur 16px. */
.present-texte{
  flex: 1 1 auto;
  font-size: 18px;
  max-width: 65ch;   /* au-dela, l'oeil perd le debut de la ligne suivante */
}
.present p{
  color: white;
  margin-bottom: 16px;
  text-align: justify;
  /* Sans ca, la derniere ligne de chaque paragraphe serait aussi etiree sur
     toute la largeur si elle approche du bord - le defaut classique du
     justify qui cree de grands blancs sur les lignes courtes. */
  text-align-last: left;
}
/* Selecteur volontairement plus precis que « .present p », sinon celui-ci
   l'emporterait : element + classe pese plus lourd qu'une classe seule. */
.present p.present-accroche{
  font-size: 26px;
  font-weight: bold;
}
.present a{
  color: white;
  text-decoration: underline;
}
img#photo-presentation, img#photo-contact{
  width: 25%;
  border-radius: 50%;
}
/* Taille fixe plutot qu'un pourcentage : la photo ne doit pas retrecir quand
   le conteneur est plafonne, sinon elle parait perdue sur un grand ecran. */
img#photo-presentation{
  flex: 0 0 320px;
  width: 320px;
}
img#photo-contact{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Textes courants des sections */
#titre{
  margin-left: 10%;
  margin-right: 10%;
  font-size: 23px;
  text-decoration: underline;
  margin-bottom: 5px;
  margin-top: 10px;
}
#sujet, #sujet-parcours{
  margin-left: 10%;
  margin-right: 10%;
  font-size: 18px;
}
/* Projets (page Projets) : chaque entree de Professionnel/Cours est une
   dropdown qui revele un texte et une image. Batie sur <details>/<summary> :
   ouverture/fermeture, focus clavier et lecteurs d'ecran fonctionnent sans
   JavaScript. Rectangle transparent, bordure discrete, coins arrondis - meme
   langage visuel que les cartes de competences (--carte-bordure, 12px). */
/* Pas de max-width ici : les marges a 10% suffisent, et c'est exactement ce
   qu'utilisent deja #titre/#sujet juste au-dessus. Un max-width fixe avec une
   marge en % aurait laisse tout l'espace en trop s'accumuler d'un seul cote
   sur un grand ecran, au lieu d'etre reparti symetriquement. */
.liste-projets{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 10% 24px;
}
.projet{
  background: transparent;
  border: 1px solid var(--carte-bordure);
  border-radius: 12px;
  overflow: hidden;   /* le contenu deplie respecte les coins arrondis */
}
/* Variante pour les sections a fond sombre (Post-bac) : --carte-bordure est
   une teinte de bleu-canard a faible opacite, quasi invisible pose sur le
   bleu-canard plein du fond - meme probleme que .projet-lien a l'origine. */
.projet.sombre{
  border-color: rgba(255, 255, 255, 0.35);
}
/* .projet-contenu a est bleu-canard par defaut : exactement la couleur du
   fond de #Post-bac, donc invisible dessus sans cette correction. */
.projet.sombre .projet-contenu a{
  color: white;
}
/* Les logos de Photos/Logos sont en teal plein (fill fixe dans le SVG, pas
   currentColor) : invisibles sur le fond bleu-canard de cette variante.
   brightness(0) invert(1) les passe en blanc sans toucher aux fichiers,
   qui restent corrects partout ailleurs (fond blanc). */
.projet.sombre .projet-tech img{
  filter: brightness(0) invert(1);
}
.projet summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  font-size: 17px;
  list-style: none;         /* retire le triangle natif */
}
.projet summary::-webkit-details-marker{
  display: none;             /* meme chose sur les navigateurs bases WebKit */
}
.projet summary .fa-chevron-down{
  flex: 0 0 auto;
  font-size: 14px;
  transition: transform .2s ease-out;
}
.projet[open] summary .fa-chevron-down{
  transform: rotate(180deg);
}
.projet-contenu{
  padding: 0 20px 20px;
  animation: projet-reveal .25s ease-out;
}
/* Texte + image cote a cote ; .projet-tech est niche dans .projet-texte (voir
   plus bas), donc descendant de cette rangee - pas un 3e element a cote. */
.projet-texte-image{
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
/* Colonne de texte : regroupe le paragraphe et les technologies, pour que
   celles-ci suivent directement le texte plutot que toute la rangee texte+image
   (qui peut etre plus haute a cause de l'image, laissant un grand vide sous un
   texte court). */
.projet-texte{
  flex: 1 1 auto;
}
.projet-contenu p{
  margin: 0;
  text-align: justify;
  text-align-last: left;
}
/* Enfant direct uniquement : .projet-tech est niche plus profond (via
   .projet-texte), un selecteur non scope au fils direct matcherait aussi ses
   icones de 20px et les etirerait a la largeur de l'image hero. */
.projet-texte-image > img{
  flex: 0 0 380px;
  width: 380px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}
.projet-contenu a{
  color: var(--bleu-canard);
  text-decoration: underline;
  white-space: nowrap;
}
/* Meme espacement que .projet-tech juste en dessous, pour que le lien vers le
   site se detache nettement du paragraphe de description au-dessus.
   Selecteur plus specifique que « .projet-contenu p » (qui remet margin a 0),
   sinon ce dernier l'emporterait et le margin-top serait ignore. */
.projet-contenu p.projet-site{
  margin-top: 16px;
}
/* Technologies utilisees, meme langage visuel que les cartes de competences
   de l'accueil (logo + libelle), en plus compact puisque c'est une simple
   liste inline sous le texte. */
.projet-tech{
  margin-top: 16px;
}
.projet-tech p{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}
.projet-tech ul{
  list-style: none;    /* le logo sert deja de repere visuel, pas besoin d'un tiret en plus */
}
.projet-tech li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gris-date);
  padding: 3px 0;
}
.projet-tech img{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
/* Marque honnetement les projets dont la description n'est pas encore ecrite,
   plutot que de laisser une dropdown vide ou d'inventer un texte. */
.projet-a-venir{
  font-style: italic;
  color: var(--gris-date);
}
/* Pages dediees des projets personnels : contenu pas encore ecrit pour la
   plupart, donc un message honnete plutot qu'une page vide ou du texte
   invente, avec un lien de retour vers la liste des projets. */
.page-a-venir{
  max-width: 65ch;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.page-a-venir p{
  font-style: italic;
  color: var(--gris-date);
  margin-bottom: 20px;
}
/* Pages dediees avec un vrai contenu : image en vedette, texte, technologies,
   et un retour vers la liste des projets. */
.page-projet{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-projet > img{
  display: block;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 28px;
}
/* Pour les pages avec 2 photos plutot qu'une seule image "hero" pleine
   largeur (ex : photos portrait, ou avant/apres) ; chaque image garde ses
   proportions et sa hauteur est plafonnee pour eviter un mur de photo. */
.page-projet-duo{
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 28px;
}
.page-projet-duo img{
  display: block;
  width: auto;
  /* 50% - 10px (moitie du gap) et non 48% : un pourcentage rond ne soustrait
     pas le gap, ce qui deborde sur les conteneurs etroits (mobile). */
  max-width: calc(50% - 10px);
  max-height: 560px;
  border-radius: 12px;
}
.page-projet p{
  font-size: 18px;
  text-align: justify;
  text-align-last: left;
  margin-bottom: 16px;
}
.page-projet .projet-tech{
  margin-top: 24px;
  margin-bottom: 28px;
}
.page-projet .projet-tech p{
  font-size: 14px;
  text-align: left;
}
/* Liste de liens externes (associations, communautes...) sur une page
   projet ; meme gabarit que .projet-tech mais avec des liens cliquables. */
.page-projet-liens{
  margin-top: 24px;
  margin-bottom: 28px;
}
.page-projet-liens > p{
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 6px;
}
.page-projet-liens ul{
  list-style: none;
}
.page-projet-liens li{
  padding: 3px 0;
}
.page-projet-liens a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--bleu-canard);
  text-decoration: underline;
}
.page-projet-retour{
  display: inline-block;
  color: var(--bleu-canard);
  text-decoration: underline;
}
@keyframes projet-reveal{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .projet-contenu{ animation: none; }
}
/* Lignes "Personnel" : meme rectangle, mais pas de contenu a deplier - ce sont
   de futures pages dediees (pas encore construites). L'icone signale une
   ouverture de page plutot qu'un depli sur place. */
.projet-lien{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  color: white;
  font-size: 17px;
  cursor: pointer;
  transition: background-color .2s linear;
}
.projet-lien:hover{
  background: rgba(255, 255, 255, 0.08);
}
.projet-lien.clair:hover{
  background: rgba(29, 72, 81, 0.06);
}
/* Variante pour les sections a fond clair (Pre-bac) : le style de base est
   prevu pour le fond teal du Personnel (Post-bac), illisible sur blanc.
   Reprend la meme bordure que les dropdowns .projet pour rester coherent
   avec ses voisines dans la meme liste. */
.projet-lien.clair{
  border-color: var(--carte-bordure);
  color: black;
}
.projet-lien .fa-external-link{
  font-size: 14px;
  opacity: 0.8;
}
#annee{
  margin-left: 12%;
  margin-right: 12%;
  font-size: 17px;
}
#contact{
  font-size: 25px;
  text-decoration: underline;
  margin-bottom: 15px;
  margin-top: 10px;
  text-align: center;
}
/* Page 404 */
#article{
  margin-top: 1%;
  margin-right: 1%;
  text-align: justify;
}
img#photo-article{
  width: 45%;
}
.descriptionarticle{
  padding: 0 40px;
  display: flex;
}
p#titrearticle{
  font-size: 25px;
  text-decoration: underline;
  margin-left: 3%;
}
/* Boutons : le bouton CV et celui du test anti-robot partagent le meme habillage */
input[type="submit"], .btn-tel{
  background: none;
  border: 2px solid var(--vert-accent);
  border-radius: 24px;
  cursor: pointer;
  transition: 0.25s;
}
input[type="submit"]:hover, .btn-tel:hover{
  background: var(--vert-accent);
}
input[type="submit"]{
  display: block;
  margin: 20px auto;
  text-align: center;
  padding: 14px 40px;
  outline: none;
}
.btn-tel{
  padding: 6px 18px;
  margin-left: 8px;
}
/* Accessibilite clavier : input[type=submit] neutralise outline, ce qui rendait
   la navigation au clavier invisible. On retablit un indicateur explicite, qui
   n'apparait qu'au clavier (:focus-visible) et pas au clic souris. */
a:focus-visible,
input:focus-visible{
  outline: 3px solid var(--vert-accent);
  outline-offset: 3px;
}
/* Competences */
/* Competences : grille de cartes.
   auto-fit fait passer la grille de 4 colonnes a 3, 2 puis 1 selon la place
   disponible, sans point de rupture supplementaire. Le max-width plafonne a
   4 colonnes sur les grands ecrans : 4 x 250 + 3 x 24 d'ecart = 1072. */
.competences-details{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 1072px;
  margin: 30px auto 0;
  padding: 0 20px;
}
.carte-competence{
  background-color: var(--fond-page);
  border: 1px solid var(--carte-bordure);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  transition: transform .2s ease-out, box-shadow .2s linear;
}
.carte-competence:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--carte-ombre);
}
.carte-competence h3{
  font-size: 17px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--vert-accent);
}
.carte-competence ul{
  list-style: none;
}
.carte-competence li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 15px;
}
.carte-competence img{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
}
/* Puce de remplacement pour les notions qui n'ont pas de logo de marque */
.puce{
  flex: 0 0 24px;
  height: 24px;
  position: relative;
}
.puce::after{
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--bleu-canard);
}
/* Page Contact : cartes cliquables, meme langage visuel que les cartes de
   competences (bordure discrete, coins arrondis, hover). */
.page-contact{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.contact-intro{
  font-size: 18px;
  margin-bottom: 30px;
}
.contact-note{
  font-size: 15px;
  color: var(--gris-date);
  font-style: italic;
  margin-top: 30px;
}
.contact-cartes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.contact-carte{
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--fond-page);
  border: 1px solid var(--carte-bordure);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  color: inherit;
  transition: transform .2s ease-out, box-shadow .2s linear;
}
a.contact-carte:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--carte-ombre);
}
.contact-carte > .fa{
  font-size: 28px;
  color: var(--bleu-canard);
  flex: 0 0 auto;
}
.contact-carte-texte{
  display: block;
  flex: 1 1 auto;
  min-width: 0;   /* sans ca, un flex item ne retrecit jamais sous son contenu */
  font-size: 15px;
  word-break: break-word;
}
.contact-carte-texte strong{
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}
.contact-carte-texte a{
  color: var(--bleu-canard);
  text-decoration: underline;
}
.contact-carte-tel .btn-tel{
  display: block;
  margin: 10px 0 0;
}
#tel-turnstile, #email-turnstile{
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
}
#tel-message, #email-message{
  display: block;
  margin-top: 8px;
  font-size: 14px;
}
/* Pied de page */
.copyright{
  font-weight: bold;
}
.copyright a{
  color: white;
  text-decoration: underline;
}
/* Icones des reseaux sociaux.
   La taille et la couleur etaient ecrites en ligne dans le HTML, ce qui rendait
   tout survol impossible : une declaration en ligne l'emporte sur une regle de
   feuille de style. Elles sont donc ici. */
.liens a{
  display: inline-block;   /* indispensable : transform ne s'applique pas a un element en ligne */
  margin-top: 20px;
  margin-left: 20px;
  font-size: 30px;
  color: white;
  transition: color .2s linear, transform .2s ease-out;
}
/* Au survol : l'icone se souleve et prend la couleur de son reseau */
.liens a:hover{
  transform: translateY(-4px) scale(1.15);
}
.liens a.fa-facebook:hover  { color: var(--facebook); }
.liens a.fa-instagram:hover { color: var(--instagram); }
.liens a.fa-youtube:hover   { color: var(--youtube); }
.liens a.fa-linkedin:hover  { color: var(--linkedin); }
/* Parcours
   Le graphe est dessine en SVG (voir graphe_parcours() dans Page/parcours.php).
   Une case mesure 110 x 140 px et son trace est en coordonnees fixes : il ne
   depend plus de la largeur de l'ecran, contrairement a l'ancienne version qui
   melait colonnes en pourcentage et decalages en pixels. */
.div-commit-parcours-ensemble{
  display: flex;
  flex-direction: column;
}
.div-commit-parcours{
  display: flex;
  min-height: 140px;
  max-height: 140px;
}
.div-commit-parcours-git{
  flex: 0 0 110px;
}
/* Le point du graphe est toujours au centre vertical de la case (70px sur
   140px). Le texte, lui, partait du haut : sur une case a 2 lignes courtes,
   ca le laissait bien au-dessus du point. On centre le bloc de texte comme
   la colonne des dates le fait deja, pour que les deux tombent au meme niveau. */
.div-commit-parcours-description{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.div-commit-parcours-annee{
  flex: 0 0 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.graphe{
  display: block;
}
.graphe .trait{
  fill: none;
  stroke-width: 6;
}
.graphe .point{
  stroke: none;
}
.graphe .trait.principale      { stroke: var(--branche-principale); }
.graphe .point.principale      { fill:   var(--branche-principale); }
.graphe .trait.branche-coface  { stroke: var(--branche-coface); }
.graphe .point.branche-coface  { fill:   var(--branche-coface); }
.graphe .trait.branche-pappers { stroke: var(--branche-pappers); }
.graphe .point.branche-pappers { fill:   var(--branche-pappers); }
.graphe .trait.branche-armee   { stroke: var(--branche-armee); }
.graphe .point.branche-armee   { fill:   var(--branche-armee); }
/* Adaptation mobile : un seul point de rupture pour tout le site. */
@media screen and (max-width: 600px){
  .navbar{
    margin-top: 90%;
  }
  .navbar2, .navmouvement{
    margin-top: 0;
    padding: 0;
  }
  .navbar a{
    margin-left: 25%;
    font-size: 30px;
  }
  .navbar2 a, .navmouvement.navbar a, .navmouvement.navbar2 a{
    font-size: 10px;
    margin-left: 5%;
  }
  #home h1{
    font-size: 40px;
  }
  img#photo-acceuil{
    width: 90%;          /* 70% d'image + 2 x 10% de padding */
    padding: 10%;
    margin-bottom: -8%;
  }
  img#fleche-acceuil{
    width: 50%;
    margin-top: 42%;
  }
  #home-post{
    padding: 60px 0;
  }
  footer{
    padding: 45px 0;
  }
  #Presentation, #competences, #Post-bac, #Pre-bac{
    padding: 25px 0;
  }
  #Presentation{
    min-height: 100vh;
  }
  #competences, #Pre-bac{
    min-height: 100px;
  }
  .present{
    display: block;
    padding: 0 20px;
  }
  /* La photo se centre, mais le texte reste aligne a gauche : un paragraphe
     centre sur plusieurs lignes est nettement plus penible a lire. */
  img#photo-presentation{
    display: block;
    margin: 0 auto 20px;
  }
  img#photo-presentation, img#photo-contact{
    width: 70%;
  }
  #titre{
    font-size: 17px;
    text-align: center;
  }
  #sujet, #annee{
    font-size: 12px;
    text-align: center;
  }
  /* Sur la timeline Parcours specifiquement (pas les titres de section de la
     page Projets, qui partagent le meme id) : texte colle a gauche plutot que
     centre avec une marge de 10%, pour rapprocher le bloc texte du graphe et
     laisser la colonne des dates se rapprocher elle aussi. */
  .div-commit-parcours-description #titre{
    margin-left: 0;
    margin-right: 5%;
    text-align: left;
  }
  /* 11px et non 12 : sur l'entree la plus longue (college), un pixel de moins
     suffit a eviter un retour a la ligne supplementaire qui ferait deborder
     la case de 140px du graphe. */
  #sujet-parcours{
    margin-left: 0;
    font-size: 11px;
  }
  .div-commit-parcours-annee{
    flex-basis: 22%;
  }
  .liste-projets{
    margin-left: 5%;
    margin-right: 5%;
  }
  .projet-texte-image{
    flex-direction: column;
  }
  .projet-texte-image > img{
    width: 100%;
    flex-basis: auto;
  }
  /* Les huit lignes du parcours portent un id annee-delai-*  */
  p[id^="annee-delai"]{
    font-size: 12px;
  }
  img#photo-article{
    width: 100%;
    margin-top: 3%;
  }
  .descriptionarticle{
    display: block;
  }
  p#titrearticle{
    text-align: center;
  }
  input.acc{
    margin-top: 30px;
  }
}
/* Respect du reglage systeme "reduire les animations" : l'animation du nom
   tourne en boucle infinie, elle peut gener les personnes sensibles au
   mouvement. Le defilement doux est neutralise pour la meme raison. */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;
  }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Sans cette regle le nom disparaitrait : l'animation neutralisee, la largeur
     revient a sa valeur de base, qui vaut zero. */
  #home h1 .frappe, #home-post h1 .frappe{
    width: auto;
    border-right: 0;
  }
}