/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:300|Ubuntu:300:italic|Ubuntu:300|Ubuntu:400|Ubuntu:500|Ubuntu:700');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,700&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wdth,wght@75..100,300..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
/*Ubuntu sert en 300, 400, 500, 700
Ubuntu italique en 300 (paragraphe sous titre), 500 (b paragraphe sous titre), 700 (leadership du svg)*/
/* =======================================================
   0) Variables de thème
   ======================================================= */
:root {
  --gap: 0px;                   /* espacement entre pistes de la grille */
  --title-w: 60px;              /* largeur fixe de chaque colonne titre  sur desktop */
  --title-h: 60px;              /* largeur fixe de chaque colonne titre  sur mobile */
  --subtitle-icon-size: 30px;   /* largeur fixe de chaque colonne titre  sur mobile */
  --paragraph-logo-max: 2.8em;  /* ex. 64 / 72 / 80 */
  --paragraph-title-gap: 6px;   /* espace entre image et textes */
  --paragraph-title-lh: 1.2;    /* line-height du titre */
}

/* =======================================================
   1) Reset & base typographique
   ======================================================= */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body { 
  color: #111;
  font-size:16px;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  list-style:none; } /* A adapter polices par défaut avec 'Open Sans', sans-serif*/
a {text-decoration: none;}

/* =======================================================
   2) Layout global
   ======================================================= */
   
/* ===== Mise en page Globale par défaut ===== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;        /* plein écran */
  overflow:hidden;
  background-color:#F8F8F8;
    
}

/* =======================================================
   3) Mise en forme du Header
   ======================================================= */

/* ===== Header responsive (photo gauche, titre/ss-titre au centre, bloc à droite) ===== */
header {
  display: grid;
  grid-template-columns: 280px 1fr 220px;    /* photo | centre | droite */
  grid-template-rows: auto auto;             /* title / subtitle */
  grid-template-areas:
    "top-left title    top-right"
    "top-left subtitle top-right";            /* Description de la grille (bureau) */
  height: 20vh;
  align-items: center;
  column-gap: 24px;
  row-gap: 8px;
  padding: 16px 20px;
}


/* zones */
#top-left  { grid-area: top-left; }
#title     { grid-area: title; }
#subtitle  { grid-area: subtitle; }
#top-right { grid-area: top-right; }

/* ——— Photo dans le header (desktop) ——— */
#top-left {
  background: url("images/top-left-photo.png") center/cover no-repeat;
  /* carré, calé à GAUCHE, et qui prend TOUTE la hauteur disponible sans dépasser la colonne */
  align-self: stretch;     /* occupe toute la hauteur de sa cellule */
  justify-self: start;     /* aligne à gauche (pas centré) */
  height: 100%;            /* 100% de la hauteur allouée par la grille */
  width: auto;             /* largeur déduite de l'aspect-ratio */
  aspect-ratio: 1 / 1;     /* carré */
  max-width: 100%;         /* ne dépasse jamais la largeur de sa colonne */
  max-height: 100%;        /* ne dépasse jamais la hauteur dispo */
}

/* Title / Subtitle centrés */
#title, #subtitle {
  text-align: center;
  justify-self: center;        /* centre horizontalement dans la colonne centrale */
  /*padding-top : 0.3em;*/
}

#subtitle {
  /*padding-bottom : 0.3em;*/
}

/* Possibilité de masquer le sous-titre si vraiment trop petit. Sur Desktop, seul le sous-titre peut disparaitre */
header.no-subtitle #subtitle { display: none; }


/* Sécurité : le titre et le bloc de droite restent sur une ligne */
#title,
#top-right {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#title {
	font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 3rem);
  line-height: 1.2;
  color: #555555;
}

#title span{color:#222222;font-weight: 500}

#subtitle {
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: #555555;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* top-right collé à droite (Pour les liens à créer) */
#top-right {
  justify-self: end;
  min-height: 100%;            /* pour l’alignement vertical; enlève si inutile */
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.socicon { margin: 0 }

	ul.socicon li {
		display: block;
		padding: 0;
		margin: 0 5px 0 0;
		float: left }

		ul.socicon li a {
			width: 32px;
			height: 32px;
			display: block;
			padding: 0;
			margin: 0 }

			ul.socicon li a.linkedin { background: url(./images/linkedin.png) 0 0 no-repeat }

			ul.socicon li a.flickr { background: url(./images/flickr.png) 0 0 no-repeat }

			ul.socicon li a.myskills { background: url(./images/myskills.png) 0 0 no-repeat }

			ul.socicon li a.syno_drive { background: url(./images/syno_drive.png) 0 0 no-repeat }

			ul.socicon li a.syno_photos { background: url(./images/syno_photos.png) 0 0 no-repeat }

			/*ul.socicon li a.twitter { background: url(./images/twitter.png) 0 0 no-repeat }

			ul.socicon li a.launchpad { background: url(./images/launchpad.png) 0 0 no-repeat }

			ul.socicon li a.plazza { background: url(./images/plazza.png) 0 0 no-repeat }
			
			ul.socicon li a.dribbble { background: url(./images/dribbble.png) 0 0 no-repeat }

			ul.socicon li a.google { background: url(./images/google.png) 0 0 no-repeat; }

			ul.socicon li a.facebook { background: url(./images/facebook.png) 0 0 no-repeat }

			ul.socicon li a.vimeo { background: url(./images/vimeo.png) 0 0 no-repeat }*/

			ul.socicon li a:hover { background-position: 0 -32px }

		ul.socicon li.last { margin-right: 0 }

.tipsy {
	padding: 5px;
	background-repeat: no-repeat;
	opacity: 0.8;
	filter: alpha(opacity=80);
	background-image: url(./images/tipsy.gif) }

.tipsy-inner {
	padding: 5px;
	/* background-color: #3f4c6b; */
	/* background-color: green; */
	background-color: #888888;
	font-size: 13px;
	color: #f8f8f8;
	max-width: 170px;
	text-align: center;
	line-height: 1.3em }

.tipsy-inner {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px }

.tipsy-north { background-position: top center }

.tipsy-south { background-position: bottom center }

.tipsy-east { background-position: right center }

.tipsy-west { background-position: left center }

/* =======================================================
   4) Grille du CORE
   - 12 colonnes : (Titre | Contenu) * 6
   - 1 seule colonne Contenu ouverte à la fois (via :has + .active)
   - Sur Desktop : impossible d'avoir aucun contenu ouvert
   ======================================================= */

main {
height:80vh;
}

#core {
  flex: 1;
  height:100%;		          /* Permet le scroll si contenu très long*/
  min-height: 0;            /* évite que le contenu pousse le body */
  grid-template-rows: 1fr;  /* la ligne de contenu prend exactement la hauteur dispo */
  overflow-y: hidden;       /* jamais de scroll vertical (le scrolle se fait dans les subcontent éventuellement) */
  overflow-x: hidden;       /* jamais de scroll horizontal */
  display: grid;
  gap: var(--gap);

  /* Par défaut : on ouvre la colonne contenu #1, les autres à 0 */
  grid-template-columns:
    var(--title-w) 1fr      /* Accueil */
    var(--title-w) 0        /* Expériences */
    var(--title-w) 0        /* Compétences */
    var(--title-w) 0        /* Formations */
    var(--title-w) 0        /* Contact */
    var(--title-w) 0;       /* Télécharger */
}

/* Aplatis les wrappers pour placer les sous-blocs directement dans la grille */
#core .core-section { display: contents; }

/* Placement des TITRES (colonnes impaires 1,3,5,7,9,11) */
#core .core-section:nth-of-type(1) .sub-title { grid-column: 1;  }
#core .core-section:nth-of-type(2) .sub-title { grid-column: 3;  }
#core .core-section:nth-of-type(3) .sub-title { grid-column: 5;  }
#core .core-section:nth-of-type(4) .sub-title { grid-column: 7;  }
#core .core-section:nth-of-type(5) .sub-title { grid-column: 9;  }
#core .core-section:nth-of-type(6) .sub-title { grid-column: 11; }

/* Placement des CONTENUS (colonnes paires 2,4,6,8,10,12) */
#core .core-section:nth-of-type(1) .sub-content { grid-column: 2;  }
#core .core-section:nth-of-type(2) .sub-content { grid-column: 4;  }
#core .core-section:nth-of-type(3) .sub-content { grid-column: 6;  }
#core .core-section:nth-of-type(4) .sub-content { grid-column: 8;  }
#core .core-section:nth-of-type(5) .sub-content { grid-column: 10; }
#core .core-section:nth-of-type(6) .sub-content { grid-column: 12; }

/* ===== Couleurs des fonds ===== */
#accueil     .sub-title { background:#1B90A6; color:#fff; }  #accueil     .sub-content { background:#E2F7FB; }
#experiences .sub-title { background:#FD3C18; color:#fff; }  #experiences .sub-content { background:#FFEAE6; }
#competences .sub-title { background:#FD5C18; color:#fff; }  #competences .sub-content { background:#FFEDE6; }
#formations  .sub-title { background:#FD7518; color:#fff; }  #formations  .sub-content { background:#FFF0E6; }
#contact     .sub-title { background:#1AB576; color:#fff; }  #contact     .sub-content { background:#E2FBF1; }
#telecharger .sub-title { background:#18AA92; color:#fff; }  #telecharger .sub-content { background:#E2FBF7; }



/* =======================================================
   5) Titres verticaux (style “empilé/upright”)
   ======================================================= */


.sub-title, .sub-content { padding: 12px; }

/* ===== Style par défaut des titres ===== */
#core .sub-title {
  display: flex;
  flex-direction: row;   /* empilé */
  justify-content: flex-start;
  gap: 6px;                /* petit espace entre icône et texte */
  align-items: center;     /* centre l’icône et le texte vertical-rl */
	font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  line-height: 1.2em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  cursor: pointer;
  user-select: none;
width:100%;
}
  
  

/* Bloc icône : taille fixe + fenêtre de clipping */
.sub-title-icon {
  width: var(--subtitle-icon-size);
  height: var(--subtitle-icon-size);
  flex: 0 0 var(--subtitle-icon-size);
  background-repeat: no-repeat;
  background-size: 200% 100%;           /* 2 frames HORIZONTALES (gauche = normal, droite = colorée). Sera déplacé quand actif */
  background-position: left center;     /* état normal (gauche = normal) */
}

/* ====== Images des Subtitle icons ====== */
#accueil     .sub-title-icon { background-image: url("images/accueil.svg"); }
#experiences .sub-title-icon { background-image: url("images/experiences.svg"); }
#competences .sub-title-icon { background-image: url("images/competences.svg"); }
#formations  .sub-title-icon { background-image: url("images/formations.svg"); }
#contact     .sub-title-icon { background-image: url("images/contact.svg"); }
#telecharger .sub-title-icon { background-image: url("images/download.svg"); }

/* Si tu as encore des <img> dedans, on les ignore pour ne pas doubler l’affichage */
.sub-title-icon img { display: none !important; }  /*Images gérées via CSS : on s'assure de l'absence d'image HTML */


/* Centrage du libellé*/
/*.sub-title-name {
  text-align: center;
} --> Tout géré dans parties spécifiques desktop / mobile */

/* ===== STYLE TITRES ACTIFS ===== */

/*Style du titre de la section active*/
#core .sub-title:focus-visible { outline: 2px solid rgba(0,0,0,.35); outline-offset: 2px; }

/* Effet sur TOUT le sous-titre + quand la section est active */
.sub-title:hover .sub-title-icon,
.sub-title:focus-visible .sub-title-icon,
.core-section.active .sub-title-icon {
  background-position: right center; /* état coloré */
}


/* =======================================================
   6) Affichage des contenus
   - On rend uniquement celui de la section .active
   - Les autres ne “poussent” pas la grille
   ======================================================= */
   
/* Sub-content masqué par défaut */   
#core .sub-content {
  display: none;            /* masqué par défaut */
  min-width: 0;             /* autorise la piste grid à se réduire à 0 */
  overflow: auto;         /* jamais d'overflow horizontal */
  padding-top:10em;
  padding-bottom:10em;
  padding-left:10em;
  padding-right:10em;
}

/*Sub-Content affiché si actif */
#core .core-section.active .sub-content {
  display: flex;
  flex-direction: column;
   align-items: flex-start;
  height: 100%;
  max-height: 100%; 
  overflow: auto;          /* <-- le scroll se fait ici, pas sur toute la page */
}

/* OUVERTURE de la bonne colonne contenu (.active est basculé par JS) */
#core:has(.core-section:nth-of-type(1).active) {
  grid-template-columns:
    var(--title-w) 1fr  var(--title-w) 0  var(--title-w) 0  var(--title-w) 0  var(--title-w) 0  var(--title-w) 0;
}
#core:has(.core-section:nth-of-type(2).active) {
  grid-template-columns:
    var(--title-w) 0    var(--title-w) 1fr  var(--title-w) 0  var(--title-w) 0  var(--title-w) 0  var(--title-w) 0;
}
#core:has(.core-section:nth-of-type(3).active) {
  grid-template-columns:
    var(--title-w) 0    var(--title-w) 0    var(--title-w) 1fr  var(--title-w) 0  var(--title-w) 0  var(--title-w) 0;
}
#core:has(.core-section:nth-of-type(4).active) {
  grid-template-columns:
    var(--title-w) 0    var(--title-w) 0    var(--title-w) 0    var(--title-w) 1fr  var(--title-w) 0  var(--title-w) 0;
}
#core:has(.core-section:nth-of-type(5).active) {
  grid-template-columns:
    var(--title-w) 0    var(--title-w) 0    var(--title-w) 0    var(--title-w) 0    var(--title-w) 1fr  var(--title-w) 0;
    overflow:hidden;
}
#core:has(.core-section:nth-of-type(6).active) {
  grid-template-columns:
    var(--title-w) 0    var(--title-w) 0    var(--title-w) 0    var(--title-w) 0    var(--title-w) 0    var(--title-w) 1fr;
    overflow:hidden;
}

/* =======================================================
   7) Spécificités Onglet Accueil
      - Pas overflow (image animée toujours entière)
      - Animations de l'images
      - Rectangles clickable
   ======================================================= */

#core .core-section:nth-of-type(1) .sub-content {
  overflow: hidden;
}

/* Bloc de texte modifié par JS (change l'actif) */
.accueil-texte{
  align-items:center;
  font-family:'Open Sans';
  font-weight: 400;
  font-size: clamp(0.8rem, 3.5vw, 1.2rem);
}

/* Affichage du texte d’accueil (main/hc/bg/bd) */
#accueil .accueil-texte > div { display: none; }
#accueil .accueil-texte > #accueil-texte-main { display: block; }


/* Image animée */
.accueil-image {
  padding:2em;
  width: 100%;
  max-width:100%;
  max-height:100%;
  aspect-ratio: 1.21 / 1; /* garde le carré par défaut */
  overflow: visible;
}
.accueil-image svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
}

/* Zones cliquables dans le SVG */
.accueil-image svg .hot-rect {
  fill: #18aa92;                                  /* vert par défaut */
  cursor: pointer;
  transition: fill .2s ease, transform .3s ease;
  transform-origin: center;
  pointer-events: auto;                           /* (valeur par défaut, mais on explicite) */
}

/* Pulsation par défaut */
.accueil-image svg .rect-pulse {
  animation: pulse-rect 3s ease-in-out infinite;
}

/* Survol (uniquement quand pas en mode actif) */
.accueil-image svg:not(.mode-on) .hot-rect:hover,
.accueil-image svg .hot-rect.hovering {
  fill: #FD7518;                    /* orange */
}

/* seul le rectangle actif conserve l’orange ET coupe ses animations */
.accueil-image svg .hot-rect.active {
  fill: #FD7518;
  animation: none !important;
}

/* en mode actif, les autres rectangles continuent à pulser/glow */
.accueil-image svg.mode-on .hot-rect:not(.active) {
  animation:
    pulse-rect 2s ease-in-out infinite,
    glow       2s ease-in-out infinite;
}


/* …et on garde la zone active en orange */
.accueil-image svg.mode-on .hot-rect.active {
  fill: #FD7518;
}

/* ====== Typo des textes dans le SVG d'accueil ====== */
.accueil-image svg text {
  font-family: 'Ubuntu', sans-serif; /* base commune normalement non utilisée*/
  font-size: 22px;            /* base commune normalement non utilisée*/
  font-weight: 700;           /* base commune normalement non utilisée*/
  fill: #222;                 /* base commune normalement non utilisée*/
  letter-spacing: .02em;
  /* pas d’outline ici (stroke) pour rester net */
  text-anchor: middle;      /* centre horizontalement autour de x */
  dominant-baseline: middle;/* centre verticalement autour de y */
}

/* ===============================
   Typographie des textes du groupe #Textes
   =============================== */

.accueil-image svg #Textes text {
  padding-top :0.1em;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 500;
  font-size:1.8em;
  color: #44aa00;
  letter-spacing: 0px;
  stroke: none;
  text-align:start;
  writing-mode:lr-tb;
  direction:ltr;
  white-space:pre;
  display:inline;
  fill-opacity:1;
  fill: #ffffff;
  stroke:none;
}



/* Style distinct pour “leadership” */
.accueil-image svg .text-leadership{
  fill: #1b90a6;                 /* plus discret */
  font-size: 1.8em;            /* un cran plus petit */
  font-style: italic;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  text-align:start;
  letter-spacing:0px;
  writing-mode:lr-tb;
  direction:ltr;
  white-space:pre;
}


/* On fait en sorte que les textes, traits... sous "invisibles à la souris" : elle ne détecte que les rectangles dessous */
#accueil .accueil-image svg text,
#accueil .accueil-image svg .label,
#accueil .accueil-image svg .decor,
#accueil .accueil-image svg .non-interactive {
  pointer-events: none;          
}

/* Les flèches ne doivent JAMAIS capter la souris non plus */
#accueil .accueil-image svg #Fleche-hc,
#accueil .accueil-image svg #Fleche-bg,
#accueil .accueil-image svg #Fleche-bd,
#accueil .accueil-image svg #Fleche-hc *,
#accueil .accueil-image svg #Fleche-bg *,
#accueil .accueil-image svg #Fleche-bd * {
  pointer-events: none !important;
}

/* Par sécurité : les rectangles interactifs, eux, captent bien les events */
#accueil .accueil-image svg .hot-rect {
  pointer-events: auto;
}


/* =======================================================
   8) Sections à paragraphes (Expériences, Compétences, Formations)
   - Un titre avec icône
   - Un sous titre (généralement)
   ======================================================= */
   
.paragraph{
  margin: .5em 0;
}

/* ===== Partie Titre de Paragraphe ===== */
.paragraph-title-part {
  display: block;
  position: relative;
  align-items: flex-start;
  gap: 8px;
}

.paragraph-icon {
  padding-top:0.3em;
  float: left;
  width: var(--paragraph-logo-max);
  shape-outside: inset(0 round 0); /* laisse le texte épouser la forme de l'icône */
  margin-right: 8px;
}

.paragraph-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Titre à droite de l’icône ; s’il déborde → il passe sous l’icône naturellement */
.paragraph-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: Ubuntu;
  font-size: 1.38em;
  font-weight: 500;
  text-transform: uppercase;
  line-height: var(--paragraph-title-lh);
}

#competences .paragraph-title {padding-top:0.6em; } /*Pour centrage vertical vs l'icone*/
#competences .paragraph-icon {margin-right:14px;}

/* ===== Contenu du paragraphe sous l'icône (puce + trait)*/
.paragraph-content{
  clear: left;                      /* force à démarrer sous l’icône flottée */
  margin-top: .1em;
  margin-bottom: 1em;

  /* Bordure verticale, décalée pour laisser “respirer” sous l’icône */
  border-left: thin solid #000;
  margin-left: calc(var(--paragraph-logo-max) / 2);
  padding-left: 1em;
}

/* Sous-titre */
.paragraph-subtitle{
  margin-top: .25em;
  margin-bottom: .25em;
  font-style: italic;
  font-family: 'Ubuntu';
  font-weight: 300;
  font-size:0.95em;
}

.paragraph-subtitle b,
.paragraph-subtitle strong {
  font-weight: 500;
}

.paragraph-line::before {
  content: "•";              /* forme de la puce */
  position: absolute;
  left: 0;                   /* aligné au padding-left défini sur .paragraph-line */
  top: 0.25em;               /* léger ajustement vertical */
  font-size: 1em;            /* taille de la puce */
  color: currentColor;       /* même couleur que le texte */
}

/* Puces dans le padding */
.paragraph-line{
  position: relative;
  padding-left: 1em;
}

/* Puces dans le padding */
.paragraph-line.last{
  margin-bottom: 1.5em;
}


/* =======================================================
   9) Sections Contact et Télécharger
   ======================================================= */
#core .core-section:nth-of-type(5) .sub-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;   /* mêmes hauteurs si possible */
  justify-content: center;
  gap: 2rem;
  overflow: hidden;
}
#core .core-section:nth-of-type(6) .sub-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;   /* mêmes hauteurs si possible */
  justify-content: center;
  gap: 2rem;
  overflow: hidden;
}

#contact .contact-formulaire,
#contact .contact-infos,
#telecharger .dl-image,
#telecharger .dl-text {
  flex: 1 1 50%;
  min-width: 0; 
  max-width: 50%;
  display: flex;                /* centre le contenu du bloc */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;           /* pratique pour le bloc texte */
}



/* ==== Spécial Conta t ===== */

/* Marges horizontales internes des deux blocs (formulaire + infos)
   -> très faibles sur petit bloc, sinon ~10% de chaque côté */
#contact .contact-formulaire,
#contact .contact-infos {
  padding-inline: clamp(0.5rem, 10%, 3rem);
  box-sizing: border-box;
  padding-top: 1em;
  padding-bottom: 1em
}



/* Un peu de confort : largeur max du formulaire */
#contact .contact-formulaire #style-form,
#contact .contact-formulaire form {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

#contact a {
  color:#1AB576;
}

#contact a:hover {
  color:#FD3C18;
}


/* Chaque ligne du formulaire = grille (label | champ) */
#contact .form-line {
  display: grid;
  grid-template-columns: minmax(70px, 30%) 1fr; /* label | champ */
  align-items: center;
  column-gap: 0.75rem;
  width: 100%;
  margin-bottom: 1rem;
}

/* On écrase les vieux floats/largeurs hérités en global */
#contact .form-line label {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
	font-size: 15px;
	font-family: 'Open Sans';
	color : #555555 ;
}
	
/*#style-form {
	margin: 0;
	padding: 0;
	position: relative }

.form-line label {
	padding: 0;/*ok
	display: block;
	text-align: left;/*ok
	width: 70px;/*?
	float: left;/*?}*/


.small-label {
	display: block;
	font-size: 11px;
	font-weight: normal;
	text-align: left;
	width: 70px;
	line-height: 10px;
	color: #394c5e }

/* Champs : prennent toute la colonne de droite */
#contact .form-line input[type="text"],
#contact .form-line input[type="email"],
#contact .form-line textarea {
  width: 100%;
  margin: 0;
  font-size: 14px;
  padding: 8px 6px;
  box-sizing: border-box;
}


.form-line [type="text"] {
	font-size: 12px;
	padding: 8px 4px;
	/* border: solid 1px #d9dce1; */
	/* border: solid 1px yellow; */
	border: solid 1px #f8f8f8;
	width: 272px;
	margin: 2px 0 20px 10px;
	/* border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px  */}
	
.form-line [type="email"] {
	font-size: 12px;
	padding: 8px 4px;
	/* border: solid 1px #d9dce1; */
	/* border: solid 1px yellow; */
	border: solid 1px #f8f8f8;
	width: 272px;
	margin: 2px 0 20px 10px;
	/* border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px  */}

.form-line textarea {
	padding: 8px 4px;
	/* border: solid 1px #d9dce1; */
	/* border: solid 1px red; */
	border: solid 1px #f8f8f8;
	width: 272px;
	margin: 2px 0 20px 10px;
	font-size: 12px;
	overflow: hidden;
	/* border-radius: 5px;
	-webkit-border-radius: 5px;

	-moz-border-radius: 5px  */}

input:focus,textarea:focus {
	-moz-box-shadow: 0px 0px 5px #cadce4;
	-webkit-box-shadow: 0px 0px 5px #cadce4;
	box-shadow: 0px 0px 5px #cadce4 }

/* Captcha : centré sur la ligne */
#contact .form-line .g-recaptcha {
  grid-column: 1 / -1;      /* occupe toute la largeur de la grille */
  justify-self: center;     /* centré */
  margin: 2em 0 1em 0;
}

a.btn-form,input.btn-form {
	width: 136px;
	margin: 1em auto 5px auto;
	padding: 0.8em 20px 0.8em 20px;
	/*display: inline-block;ChatGPT préfère block */
	display:block;
	font-size: 0.8em;
	color: #fff;
	border: 1px solid #ffffff;
	background: #657089;
	/* background: black; */
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	cursor: pointer;
	font-family: 'Ubuntu', sans-serif }

#form .error-input { border-color: #00a287 }

.sending {
	margin: 0;
	padding: 3px;
	font-size: 12px;
	display: none;
	position: absolute;
	bottom: 30px;
	right: 10px }

.mess { display:none;padding: 40px 0 40px 0 }

	.mess h5 { font-weight:400;padding: 10px }

/* ===== Feedback visuel custom pour les champs invalid/valid ===== */

/* Style de base : laisse le thème par défaut */
.form-line input,
.form-line textarea {
  border: 1px solid #f8f8f8;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus général (bleu clair) */
.form-line input:focus,
.form-line textarea:focus {
  border-color: #cadce4;
  box-shadow: 0 0 5px rgba(202, 220, 228, 0.8);
  outline: none;
}

/* Focus + invalide (rouge/orange doux) */
.form-line input:focus:invalid,
.form-line textarea:focus:invalid {
  border-color: #fd3c18;
  box-shadow: 0 0 5px rgba(253, 60, 24, 0.5);
}

/* Focus + valide (bleu accentué, un peu plus marqué) */
.form-line input:focus:valid,
.form-line textarea:focus:valid {
  border-color: #1ab576;
  box-shadow: 0 0 5px rgba(26, 181, 118, 0.6);
}

/* Rempli et valide (pas focus) → vert doux */
.form-line input:valid:not(:focus),
.form-line textarea:valid:not(:focus) {
  border-color: #00a287;
  box-shadow: none;
}

/* Nettoyage des styles navigateurs */
.form-line input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}

.form-line input:invalid,
.form-line textarea:invalid {
  box-shadow: none; /* supprime halo rouge natif */
}

ul.contact { 
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  list-style:none
}

	ul.contact li {
		font-size: 15px;
		margin: 0 0 5px 0;
		padding: 0;
		font-family: 'Open Sans', sans-serif;
		line-height: 19px;
		color: #888888;
		text-align:center;
	}

#contact .contact-infos .Contact-Infos-Name {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  font-size: 2em;
  color: #222222;
  margin-bottom:1em;
}

		ul.contact li span { 
			font-size: 15px; 
			color: #222222 }

		ul.contact li span a { color:#657089;font-weight: normal }

		ul.contact li a.vcard {
		  width: 16em;
			height: 50px;
			padding: 12px 0 0 70px;
			margin: 1.5em auto 1.5em auto;
			display: block;
			background: url(./images/vcard.png) left top no-repeat }

			ul.contact li a.vcard:hover { background-position: 0 -48px }


/* VRAIMENT UTILE? cf ci-dessus.*/
a.vcard {
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	background: url(./images/vcard.png) 0 0 no-repeat;
	display: block }

	a.vcard:hover { background-position: 0 -48px }
	

/* Spécial Téléchargement */


#telecharger a {
  color:#18AA92;
}

#telecharger a:hover {
  color:#FD3C18;
}

#telecharger .dl-image img {
  display: block;
  max-width: 100%;
  height: auto;
  box-shadow: 0px 0px 10px #CCCCCC;
}
/* =======================================================
   10) SPÉCIFICITÉS DESKTOP (> 1024 px) :
   --> barres verticales
   ======================================================= */
@media (min-width: 1025px) {
 
  #core {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
    overflow: visible;   /* <-- AU LIEU DE overflow-y:auto */
  }

    /* On “aplatit” les wrappers pour que titre / contenu soient des flex-items frères */
  #core .core-section { display: contents; }
  
  /*#core::before {
    content: "";
    flex: 1 0 auto;      

  }*/
  #core .sub-title {
    display: flex;
    /* En vertical-rl, 'row' = de haut en bas → l’icône sera en haut */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;

    writing-mode: vertical-rl;
    text-orientation: upright;

    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.8em;  /* un peu plus espacé comme tu voulais */
    text-transform: uppercase;
    line-height: 1.2em;
    user-select: none;
    flex: 0 0 var(--title-w);
    width: var(--title-w);
  }
  

  /* Le texte occupe l’espace restant (sous l’icône) */
  .sub-title-name {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;   
    /*justify-content: flex-center; */  /* CORRECTION CHAGPT */
   /* text-align: flex-start;  */   /* CORRECTION CHAGPT */
  }
  
  /* Panneaux contenu : TOUJOURS render, mais repliés à 0 en inactif */
  #core .sub-content {
    display: block;           /* <- ne jamais repasser à none */
    flex: 1 1 0;
    min-width: 0;             /* indispensable en flex */
    /*overflow: hidden;*/
    padding:0;
    /* état FERMÉ */
    max-width: 0;
    transition: max-width .35s ease-in-out, padding .35s ease-in-out;
    will-change: max-width;
  }

  /* état OUVERT → prend la place disponible */
  #core .core-section.active .sub-content {
  
    /* 100% = toute la place que lui laisse le flex */

    max-width: 100%;
    padding-left:2em;
    padding-right:2em;
    padding-top:0.5em;
    padding-bottom:0.5em;
    /*overflow:auto;*/
  }
} /*Fin Spécificités Desktop */


/* ===========================
   11) MOBILE Responsive (≤ 1024 px)
   -> Affichage en ACCORDÉON
   =========================== */

@media (max-width: 1024px) {
  :root{ /* CORRECTION CHAGPT */
    --paragraph-logo-max: 42px;   /* ex. 64 / 72 / 80 - Ne dépend plus de la police */
  }
  
  body {
    overflow:visible; /*On peut scroller dans la page */
  }



  /* ===== Header MOBILE — réductible jusqu’au seul titre  =====*/


  header {
    min-height: 100px;                 /* <-- au lieu de 5vh/200px */
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "top-left"
      "title"
      "subtitle"
      "top-right";
    row-gap: 12px;                
    /* garde tes paddings actuels, ou ajuste si besoin */
  }

  /* si à ce stade il ne reste *que* le title : */
  header.no-photo.no-top-right.no-subtitle {
    grid-template-rows: auto;
    grid-template-areas: "title";
  }

  /* Masquages pilotés par le JS */
  header.no-top-right #top-right { display: none; }
  header.no-photo     #top-left  { display: none; }
  header.no-subtitle  #subtitle  { display: none; }

  /* Photo mobile — taille pilotée par une variable, bornée 20–80vw, carrée */
  #top-left {
    width: clamp(20vw, var(--mobile-photo-size, 80vw), 80vw);
    aspect-ratio: 1 / 1;
    height: auto;
    justify-self: center;
    background-size: cover;
    background-position: center;
  }

  #title, #subtitle, #top-right {
    justify-self: center;      /* tout centré */
    text-align: center;
  }

  #title, #top-right {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem);
    white-space: normal;
    overflow-wrap: anywhere;    /* permet la casse propre */
    word-break: normal;
  }

  #top-right {
    width: 100%;
  }


/* ====== CORE MOBILE ===== */

 /* Le contenu sous le header utilise le reste de la hauteur et peut scroller */
  main {
    flex: 1;
    height:auto;
    min-height: auto;
    overflow: visible;   /* <-- AU LIEU DE overflow-y:auto */
    display: flex;
    flex-direction: column;
  }

  #core {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    overflow: visible;   /* <-- AU LIEU DE overflow-y:auto */
  }

  #core::before {
    content: "";
    flex: 1 0 auto;         /* pousse les titres vers le bas du viewport */
  }

 

  /* Titres horizontaux cliquables */
  #core .sub-title {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    letter-spacing: normal;
	  font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;   /* centre l’ensemble */
    gap: 8px;
    width: 100%;
    position: relative;
    flex-direction: row;
  }


  /* Texte centré OPTIQUEMENT sur toute la largeur (décalage moitié icône) */
  .sub-title-name {
    text-align: center;
    position: relative;
    left: calc(var(--subtitle-icon-size) / -2);
    width: 100%;
    line-height: 1.1;
  }
  
    /* Accordéon mobile — contenu masqué par défaut */
  #core .sub-content {
   /* display: block;   */        /* Idem global */
    max-height: 0;
    height:auto;
    overflow: hidden;
    transition: max-height 0.75s ease-in-out, padding-bottom 0.75s ease-in-out, padding-top 0.75s ease-in-out;
      padding: 0 1em;
      will-change:padding-bottom,padding-top;
  }

  /* Section active → visible */
  #core .core-section.active .sub-content {
    height:auto;
    max-height: none;
    /*display: block;*/ /* Idem global */
    overflow: hidden;  /* en mobile le scroll est global (page), pas local, donc on désactive celui-là*/
    padding-top:1em;
    padding-bottom:1em
  }
  
  /* ==== PAGE ACCUEIL SPÉCIFIQUE MOBILE =====*/
  
/* Centre tout le contenu de la section Accueil */
  #accueil .sub-content {
    align-items: center;      /* centre H (flex) */
    gap: 1rem;
  }

  /* Texte centré et contenu limité en largeur lisible */
  #accueil .accueil-texte {
    text-align: center;
    margin-inline: auto;
    max-width: min(200ch, 92%);
  }

  /* Le conteneur image occupe la largeur et centre le SVG */
  #accueil .accueil-image {
    width: 100%;
    display: flex;
    justify-content: center;  /* centre H */
  }

  /* Le SVG remplit la largeur, garde le ratio 1772/1462 (~1.21) */
  #accueil .accueil-image svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1772 / 1462;
    display: block;
  }

  /* ==== PAGES CONTACT ET TELECHARGEMENT SPÉCIFIQUE MOBILE =====*/

  #contact .sub-content,
  #telecharger .sub-content {
    display: flex;
    flex-direction: column;     /* l’un sous l’autre */
    align-items: center;        /* centre les blocs */
    justify-content: center;
    gap: 2rem;
  }

  #contact .contact-formulaire,
  #contact .contact-infos,
  #telecharger .dl-image,
  #telecharger .dl-text {
    flex: 1 1 auto;
    max-width: 100%;            /* <- corrige le 50% restant */
    width: 100%;
    display: flex;              /* garde le centrage interne */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }



  /* Le formulaire garde une largeur lisible */
  #contact .contact-formulaire #style-form,
  #contact .contact-formulaire form {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  
  #contact .contact-infos {
  padding-top: 2em;
}
  
  #telecharger .dl-image{
  padding-top:1em;
  padding-left:1em;
  padding-right:1em;
  }
} /*Fin spécificités mobile */


/* =======================================================
   12) Pulsations et ombre sur rectangle
   ======================================================= */
   
/* ===== Définition des animations ===== */   
@keyframes pulse-rect { /*Définition type de pulsation */
  0%, 100% {
    transform: scale(1);
    transform-origin: center;
    opacity: 1;
  }
  50% {
    transform: scale(1.02); /* grossit légèrement */
    opacity: 0.9;           /* optionnel : petit effet de respiration */
  }
}

@keyframes glow { /*Définition du type de glow (ombre) */
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(253, 92, 24, 0));
  }
  50% {
    /* double halo pour un glow plus “doux” */
    filter:
      drop-shadow(0 0 5px rgba(253, 92, 24, 0.9))
      drop-shadow(0 0 12px rgba(253, 92, 24, 0.5));
  }
}

/* ===== Affectation des animations ===== */   
.accueil-image svg #rect-bg{
  transform-origin: center;
  transform-box: fill-box;
  animation:
    pulse-rect 2s ease-in-out infinite,
    glow       2s ease-in-out infinite;
  will-change: transform, opacity, filter;
}
.accueil-image svg #rect-hc{
  transform-origin: center;
  transform-box: fill-box;
  animation:
    pulse-rect 2s ease-in-out infinite,
    glow       2s ease-in-out infinite;
  will-change: transform, opacity, filter;
}
.accueil-image svg #rect-bd {
  transform-origin: center;
  transform-box: fill-box;
  animation:
    pulse-rect 2s ease-in-out infinite,
    glow       2s ease-in-out infinite;
  will-change: transform, opacity, filter;
}
/*#rect-bg { animation-delay: 0s; }
#rect-hc { animation-delay: 1s; }
#rect-bd { animation-delay: 2s; } Décalage temporaire HS on désactive*/