/* ---- Variables & base typographiques ---- */
:root { --s1:8px; --s2:12px; --s3:16px; --s4:24px; --rad:10px; }
html { font-size: 16px; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; color:#04253e; margin:0; }

/* ---- Conteneur principal ---- */
.row { max-width: 1080px; margin: 0 auto; padding: 0 var(--s3); }

/* ---- Colonnes : empilement et centrage ---- */
.three.columns, .nine.columns, .twelve.columns { width: 100% !important; float: none !important; }
.header-col, .main-col, .center-mobile { text-align: center; }
.main-col { max-width: 70ch; margin-left:auto; margin-right:auto; }

/* ---- Titres réactifs ---- */
h1.responsive-headline { font-size: clamp(28px, 9vw, 36px); line-height: 1.1; }
h2 { font-size: clamp(20px, 5.5vw, 28px); line-height: 1.2; }
h3 { font-size: clamp(16px, 4.8vw, 20px); line-height: 1.25; }
p, li { font-size: 1rem; }
ul { padding-left: 1.1em; }
li { margin: .25em 0; }

/* ---- Images & <picture> centrés ---- */
img { max-width: 100%; height: auto; display: block; }
.header-col picture, .header-col img { margin: var(--s2) auto; }

/* ---- Boutons/CTAs plus faciles à cliquer ---- */
.btaction, .button, .button.red, a.button {
  display:inline-block; min-width:240px; padding:12px 18px;
  text-align:center; font-weight:700; border-radius: var(--rad);
  margin: var(--s3) auto; text-decoration:none;
}

/* ---- Vidéos fluides 16:9 ---- */
.video-wrapper { position: relative; width: 100%; aspect-ratio: 16/9; background:#000; border-radius: var(--rad); overflow:hidden; }
.video-wrapper iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- Espacements entre blocs ---- */
.row .header-col + .main-col,
.row .main-col + .row.item,
.row.education + .row.education,
.row.work + .row.work,
.row.education + .row.work { margin-top: var(--s4); }

/* ---- Ancrages : éviter le masquage sous la nav sticky ---- */
[id] { scroll-margin-top: 72px; }

/* ---- Navigation : cibles tactiles confort ---- */
#nav a { padding:12px 14px; }

/* ---- Portfolio : grille simple et centrée ---- */
#portfolio-wrapper { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 480px){ #portfolio-wrapper { grid-template-columns: 1fr; } }
.columns.portfolio-item,
.columns.portfolio-item .item-wrap { width:100% !important; float:none !important; margin:0 !important; }

/* ---- Divers ---- */
iframe { max-width: 100%; }
span.imp, span.important {
  display:inline-block; padding:6px 10px; border-radius:6px;
  background:#fff3cd; line-height:1.4;
}
/* ====== FORMULAIRE (#contact) : centrage + anti-débordement ====== */
@media (max-width: 767px){

  /* Sécurise l'overflow global (filets, ombres, 100vw, etc.) */
  html, body { overflow-x: hidden; }

  /* Colonnage : on empile et on centre tout le bloc contact */
  #contact .columns { width: 100% !important; float: none !important; }
  #contact .header-col,
  #contact .main-col { text-align: center; }

  /* Le formulaire en lui-même : largeur fluide et centré */
  #contact form {
	width: 100%;
	max-width: 560px;           /* ajuste si tu veux plus étroit/large */
	margin: 0 auto;             /* centrage horizontal */
	padding: 0 16px;            /* gouttières internes pour éviter le “collage bord” */
  }

  /* Si le form utilise la grille .six/.twelve.columns */
  #contact form .row,
  #contact form .six.columns,
  #contact form .twelve.columns {
	width: 100% !important;
	float: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
  }

  /* Champs 100% largeur, sans dépassement */
  #contact input[type="text"],
  #contact input[type="email"],
  #contact input[type="tel"],
  #contact input[type="url"],
  #contact input[type="number"],
  #contact select,
  #contact textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
  }

  /* Bouton d’envoi centré et confortable au doigt */
  #contact input[type="submit"],
  #contact button[type="submit"],
  #contact .button.submit {
	display: inline-block;
	width: 100%;
	max-width: 320px;
	margin: 12px auto 0;
	text-align: center;
  }

  /* Si le formulaire est embarqué (iframe type Typeform/Google/Formspree) */
  #contact iframe {
	width: 100% !important;
	max-width: 100% !important;
	display: block;
  }
}
.widget_contact {margin-top: 32px;}
/* ====== CONTACT : form centré + anti-overflow (mobile) ====== */
@media (max-width: 767px){

  /* filet de sécurité contre toute barre de scroll horizontale */
  html, body { overflow-x: hidden; }

  /* conteneur & colonnes : plein écran et sans flottants */
  #contact .row { margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; }
  #contact .eight.columns,
  #contact .four.columns { width:100% !important; float:none !important; }

  /* évite que des gouttières internes génèrent du dépassement */
  #contact .columns { padding-left:0 !important; padding-right:0 !important; }

  /* le formulaire : centré, largeur max confortable */
  #contactForm{
	width:100%;
	max-width:560px;
	margin:0 auto;         /* centrage */
	padding:0 8px;         /* petites gouttières internes */
	text-align:left;       /* contenu lisible à gauche */
  }
  #contactForm fieldset{ margin:0; padding:0; border:0; }

  /* labels + champs : 100% largeur, pas de dépassement même avec size/cols */
  #contactForm label{ display:block; margin:10px auto 6px; max-width:560px; }
  #contactForm input[type="text"],
  #contactForm input[type="email"],
  #contactForm input[type="tel"],
  #contactForm input[type="url"],
  #contactForm input[type="number"],
  #contactForm select,
  #contactForm textarea{
	display:block;
	width:100%;
	max-width:100%;
	box-sizing:border-box;
  }
  #contactForm textarea{ min-height:160px; }

  /* RGPD : bloc centré mais texte aligné à gauche */
  #contactForm .rgpd-field{
	display:flex; align-items:flex-start; gap:8px;
	justify-content:center; margin:12px auto; max-width:560px; text-align:left;
  }

  /* bouton d’envoi : large et centré */
  #contactForm .submit,
  #contactForm button.submit,
  #contactForm input[type="submit"]{
	display:block; width:100%; max-width:320px;
	margin:12px auto 0; text-align:center;
  }

  /* si une image se trouve dans l’aside, évite tout overflow */
  #contact aside img{ max-width:100%; height:auto; display:block; }
}
/* ===== Banner CTA visible + lisible sur mobile ===== */
@media (max-width: 767px){

  /* évite que le CTA soit rogné par le conteneur */
  #home .banner .banner-text{ overflow: visible !important; }

  /* ré-affiche le <h3> si le thème le cache en mobile */
  #home .banner .banner-text h3{
	display: block !important;
	height: auto !important;
	margin: 12px 0 0;
  }

  /* CTA : bloc visible, centré, sur plusieurs lignes */
  #home .banner .btaction{
	display: inline-block !important;
	max-width: 92vw;
	padding: 12px 16px;
	margin: 12px auto 0;
	text-align: center;
	white-space: normal;          /* autorise le retour à la ligne */
	word-break: break-word;       /* évite les débordements */
	line-height: 1.35;
	font-size: clamp(14px, 4vw, 18px);
	border-radius: 10px;
  }

  /* un peu d’air en bas de la bannière */
  .row.banner{ padding-bottom: 62px; }
}
/* ===== RGPD : centre le bloc et montre la case à cocher (mobile) ===== */
@media (max-width: 767px){
  #contactForm .rgpd-field{
	/* reset anti-thème */
	float: none !important;
	position: static !important;

	/* centrage + largeur contrôlée */
	display: flex !important;
	align-items: flex-start;
	justify-content: center;          /* centre horizontalement */
	flex-wrap: wrap;                   /* autorise le retour à la ligne */
	gap: 8px;
	width: 100%;
	max-width: 560px;
	margin: 12px auto;
	padding: 0 12px;
	text-align: left;
	box-sizing: border-box;
	white-space: normal;
  }

  /* Case bien visible et alignée en haut du texte */
  #contactForm .rgpd-field input[type="checkbox"]{
	flex: 0 0 auto;
	margin-top: 3px;
	transform: none;                   /* au cas où un style la réduit/translate */
  }

  /* Évite tout dépassement dû au lien */
  #contactForm .rgpd-field a{
	overflow-wrap: anywhere;
	word-break: break-word;
  }
}